打开文件: Ctrl + Shift + N 打开类: Ctrl + N 打开函数: Ctrl + F12 “超级”打开: 双击 shift，可以 search anywhere....比如按一次,选中word，按两次，选择表达式, 三次, 整个函数 重构 改名: Shift + F6，修改函数名，变量名，文件名，同时修改所有引用的位置....移动文件: F6, 并修改文件的引用位置, 包括 html 和 js文件 抽取函数: Ctrl + Alt + M，整块代码抽取成函数 抽取变量: Ctrl + Alt + V，当前选中抽取为变量 移动整块代码...格式化代码 快捷键: Ctrl + Shift + L 可以设置为 commit 前自动格式化 静态检查 可以集成主流静态检查工具 这里以 ESLint 为例 ?...新技术支持 支持最新技术，如 TypeScript CoffeeScript 最新版、 Angular2、ES6 ES7等，集成 Gulp、Grunt 等工具。
全局模式下，需要 ~/.czrc 配置文件, 为commitizen指定Adapter。 关注微信公众号：Java技术栈，在后台回复：git，可以获取我整理的 N 篇最新Git 教程，都是干货。...(y/n) 是破坏性修改吗？默认n () 6.Does this change affect any openreve issues? (y/n) 改动修复了哪个问题？...指令的option都能用在 git cz指令上, 例如git cz -a Commit message规范在rrd-fe落地使用情况 针对团队目前使用的情况，我们讨论后拟定了commit message每一部分的填写规则...type test: 添加测试或者修改现有测试 perf: 提高性能的改动 ci: 与CI（持续集成服务）有关的改动 chore: 不修改src或者test的其余修改，例如构建过程或辅助工具的变动 当一次改动包括主要...如果一次commit修改多个模块，建议拆分成多次commit，以便更好追踪和维护。
• JS 引用放在 HTML 底部 • 防止 JS 的加载、解析、执行对阻塞页面后续元素的正常渲染。 ... • requestAnimationFrame可以在正确的时间进行渲染，setTimeout（callback）和 setInterval（callback）无法保证 callback 回调函数的执行时机...height • 尽量简化浏览器不必要的任务，减少页面重新布局 • 使用 Viewport 设置屏幕缩放级别 • 避免频繁设置样式，最好把新 style 属性设置完成后，进行一次性更改...避免使用引起回流/重绘的属性，最好把相应变量缓存起来 JavaScript • 最小化回流和重排 • 为了减少回流发生次数，避免频繁或操作 DOM，可以合并多次对 DOM 修改，然后一次...• 年末 ng 统一配置所有版本 302 至最新版 • 时间戳.文件 name.js • 以每次上线时间点做差异 • 文件 hash.文件 name.js
如果你是一个前端开发者，那么你一定知道前端三大框架vue，angular，react。今天我们就来聊一聊angular的发展史。 AngularJS vs Angular 这两个是一个东西吗？...TypeScript是JS的超集，提供了比js更多的语法特性，具有面向对象的全部特性，非常适合开发大型项目。...该库提供了内置的运算符，用于观察，转换和过滤流，甚至将多个流组合在一起以一次创建更强大的数据流。Angular将所有信息作为从路由参数到HTTP响应的可观察流处理。...Zone.js 我们知道js是异步执行的，当代码很多的时候，如果想要统计执行时间将变得非常困难，而zone.js解决了这些问题，zone.js能实现异步Task跟踪，分析，错误记录、开发调试跟踪等，通过它的钩子...，我们只要将函数执行挂在到它的上面，我们就能统计分析函数执行效率。
__POWERED_BY_QIANKUN__) { render(); } /** * bootstrap 只会在微应用初始化的时候调用一次，下次微应用重新进入时会直接调用 mount 钩子，不会再重复触发...__POWERED_BY_QIANKUN__) { render(); } /** * bootstrap 只会在微应用初始化的时候调用一次，下次微应用重新进入时会直接调用 mount 钩子，不会再重复触发...我们以 实战案例 - feature-inject-sub-apps 分支 为例，我们在主应用的同级目录（micro-app-main 同级目录），使用 @angular/cli 先创建一个 Angular..., NgZone, AnimationEngine, }); /** 主应用生命周期钩子中运行 */ export { /** * bootstrap 只会在微应用初始化的时候调用一次...扩展阅读 如果在 Static 微应用的 html 中注入 SPA 路由功能的话，将演变成单页应用，只需要在主应用中注册一次。
显示与隐藏 （dom元素的删除添加 同angular中的ng-if 默认值为false） v-else-if 必须和v-if连用 v-else 必须和v-if连用 不能单独使用 否则报错...模板编译错误 v-bind 动态绑定 作用： 及时对页面的数据进行更改 v-on:click 给标签绑定函数，可以缩写为@，例如绑定一个点击函数 函数必须写在methods里面 v-text 解析文本...red”:”blue”‘ 3、数组型 ‘[{red:”isred”},{blue:”isblue”}]’ v-once 进入页面时 只渲染一次 不在进行渲染 v-cloak 防止闪烁 v-pre.../node_modules/bootstrap/dist/js/bootstrap.min.js"> 15 16 <script src="../.....{ 38 if(<em>n</em>==-2){ 39 this.myData=[]; 40 }else{ 41 this.myData.splice(<em>n</em>,1); 42 } 43 } 44 } 45
Closures (闭包): 了解函数作用域的一些特征. Callbacks（回调）: 回调是当另一个函数用于在有结果就绪时准备执行的函数。 就像你说，“做你的工作，做完后给我打电话。...在代码审查和TDD后，你可以做第三件事，以减少代码中的错误。 Tern.js：类型推理工具的标准JavaScript，目前我最喜欢的类型相关的 JavaScript 工具 不需要编译步骤或注释。...Redux Redux 为您的应用程序提供事务性，确定性状态管理。在 Redux 中，我们遍历操作对象流以减少到当前应用程序状态。...虽然像我很喜欢 RxJS ，但如果你一次打包完整的 RxJs，你的包将会变得很大（这其中有有很多运算符）。...=> console.log(n)); 使用补丁包将减少你的 使用补丁导入可以将捆绑包中的 rxjs 依赖关系的大小减少约 200k。
watch，然后询问它是否有属性和值的变化，直到watch队列都检查过，在检查数据变化的时候，由于并不知道这个事件是对哪些数据进行了更改，以及这个事件有可能造成事件之外的其他任何地方的数据更改，所以必须进行一次大检查...，将所有“注册”过的值全部检查一遍，一次检查称为一个周期，每次最少检查两遍，因为第二遍用来确认，前一遍的变动中是否有数据的变动，导致了其他数据的变动，如果第二次有变动的话，会再执行一遍，直到最后两次完全一致...="val=val+1">increase 1 click 时会产生一次更新的操作（至少触发两次 digest 循环） 按下按钮浏览器接收到一个事件，进入到angular context...digest 循环开始执行，查询每个 watch 是否变化 由于监视scope.val 的 watch 报告了变化，因此强制再执行一次 digest 循环 新的 digest 循环未检测到变化 浏览器拿回控制器...Angular1.x 中常用 ngRoute 和 ui.router，还有一种为 Angular2 设计的 new router（面向组件）。后面那个没在实际项目中用过，就不讲了。
，进入到 angular context $digest 循环开始执行，查询每个 $watch 是否变化 由于监视 $scope.val 的 $watch 报告了变化，因此强制再执行一次 $digest...这些watchers会检查scope中的当前model值是否和上一次计算得到的model值不同。如果不同，那么对应的回调函数会被执行。...在当前的一次循环结束后，它会再执行一次循环用来检查是否有 models 发生了变化。...$apply 是 $scope（或者是 direcvie 里的 link 函数中的 scope）的一个函数，调用它会强制一次 $digest 循环（除非当前正在执行循环，这种情况下会抛出一个异常，这是我们不需要在那里执行...在脏检测的机制下，这个过程毫无压力，一次做完所有数据变更，然后整体应用到界面上。这时候，基于setter的机制就惨了，除非它也是像Angular这样把批量操作延时到一次更新，否则性能会更低。
React是连续更新两次，还是只更新一次呢？为了更好的观察出React的更新机制，我们将点击按钮的逻辑换成下面的代码： 打开控制台，点击按钮你会发现打印了0 0，同时页面数据也更新成了2。...事务 React当中事务最主要的功能就是拿到一个函数的执行上下文，提供钩子函数。啥意思？...看个例子： 执行这段代码，打开控制台会发现打印如下 事务最主要的功能就是可以Wrapper一个函数，通过perform调用，在执行这个函数之前会先调用initialize方法，等这个函数执行结束了在调用...Angular2更新机制大体如下： ngZone是对Zone.js的服务封装，Angular2会在每个task执行结束后触发更新。...如果一个watcher被多次触发，只会推入一次到队列中。 等到下一次事件循环，Vue将清空队列，只进行必要的DOM更新。
而angular则是进入$digest cycle，等待所有model都稳定后，才批量一次性更新UI。 这种机制能减少浏览器repaint次数，从而提高性能。...避免watchExpression中执行耗时操作，因为它在每次$digest都会执行1~2次。 避免watchExpression中操作dom，因为它很耗时。...一个优化方式是使用$emit, 参见angular/angular.js#4574 1.2.7版本对事件做过一个优化，参见https://github.com/angular/angular.js/blob...directive 跟scope数据无关的操作放在compile阶段，它只执行一次。...改变以前使用JQuery那样以DOM为中心的思维，拥抱以数据为中心的思维。
我想告诉你，我开始享受使用Vue.js和进行前端开发的故事。这不应该被理解为一篇关于为什么Vue.js可能比React，Angular或任何你正在考虑的其他Web框架更好的文章。...但是，在我最后一次求职，选择很少。特别是工作面试，我看到了自己是如何失败的。那次失败非常令人沮丧，但我从中吸取了不少教训。我获得了一个职位，利用了我在SharePoint的经验。...我们的第一次迭代的一个特定的应用**xmlhttprequests，**通过JavaScript函数构建HTML。这种方法的连接如此之多以至于我们的函数和字符串变得越来越难维护。...除了显式调用编译函数之外，这是一次不错的体验。最初的渲染完全没有问题。不过，我们需要添加在项目列表中折叠/展开某些项的能力。...随后，公司开始雇用前端的人，以美元为单位得到他们的费用。这份工作名声不太好，我不想和那个名声有任何关系。 然而，如前所述，我发现自己处于一个需要依靠前端满足需求的尴尬位置。
CLI Angular CLI又称 Angular脚手架，用于快速生成项目或者组件的框架以提高效率。...不需要关心class的构造函数里需要什么参数 一次注入（app module通过Providers注入），所有组件都可以使用。...对于setTimeout，addEventListener、promise等都在ngZone中执行（换句话说，就是被zone.js封装重写了），angular并在ngZone中setup了相应的钩子，通知...url（~/customers）时，才会向server端请求这个独立的js，然后加载、执行。...promise都会立即执行；而observables只是被创建，当调用(subscribe)的时候才会被执行。 Promise返回一个值；Observable返回0至N个值。
有时候几乎每周都会发布新版本的 Node.js —— 每隔几周发布一次小版本，每隔几个月发布一次主要版本。如果你是一个需要在不同程序和项目之间切换的码农，可能会发现需要运行不同版本的 Node。...截断以节省空间。...nvm install 和 nvm use 安装并激活 v10.16.0 准备升级 全局安装 @angular/cli 包用来执行自动升级 Angular 程序的 ng update 命令 npm install...10.16.0 index.js 5Node version: v10.16.0 6~$ n use 12.4.0 index.js 7 Error: '12.4.0' is not installed...当运行 n use 10.16.0 index.js 时，输出表明用于执行脚本的 Node 版本是 10.16.0。执行后，当前 Node 的版本仍然是 v8.16.0。
JS是一个单线程语言，一次执行一个任务，在某些情境下，需要先将某些任务“ 暂停一下（加入任务队列）“，进而去执行之后的任务，待当前任务都执行完毕时，再去响应之前“暂停的”任务，像setTimeout，ajax...$q $q是angular中一个用来解决JS异步编程的服务，借鉴了 Kris Kowal’s Q 库，可以看作是一个轻量的Q库，遵循 Promises/A+的规范。...，先遇到$timeout, 由于是JS的异步函数，因此会先放在执行队列中，待后边的begin函数，与log（5）执行完毕后，再执行，所以最后输出出来。...因为race的机制就是只要有一个promise回来，就会触发接下来的任务，一次可以用来做超时的函数操作。...总结 在JS中，解决异步模式问题的方法还有很多，比如回掉函数，事件监听，发布订阅等等，而angular的$q提供了一个轻量的promise库，虽然方法远没有Q库的丰富，但是基础方法都有，实用性较强，在解决异步问题时
幸运的是，我们不需要手动实现这些函数，因为在Angular和React中，单个SPA可以自己处理这些函数。...子应用程序中的实现: 要将一个模块导出为一个子应用程序，我们必须导出以下生命周期函数: bootstrap——它将被调用一次，就在注册的应用程序第一次挂载之前。...文件中为single-spa-angular提供一个mainModule*(Angular根模块)、domElementGetter和template。...一旦这两个子应用程序都被执行，这些函数应该自动在一个 window.angularApp 和 window.reactApp中被访问。...理解您的应用程序可以让你更清楚地了解实现微前端的场景，以便以最好的方式利用它们的好处。
前言 本文总结了项目开发过程中常用的js函数和正则，意在提高大家平时的开发效率，具体内容如下： 常用的正则校验 常用的设备检测方式 常用的日期时间函数 跨端事件处理 js移动端适配方案 xss预防方式...算法 /** * 节流函数--规定在一个单位时间内，只能触发一次函数。...如果这个单位时间内触发多次函数，只有一次生效。...--在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时 */ function debounce(fun, delay) { return function (args) {...更多推荐 一张图教你快速玩转vue-cli3 3分钟教你用原生js实现具有进度监听的文件上传预览组件 3分钟教你用原生js实现具有进度监听的文件上传预览组件 使用Angular8和百度地图api开发《旅游清单
/jquery-1.8.3.min.js"> <...如果提供一个选择器，那么只有紧跟着的兄弟元素满足选择器时，才会返回此元素 on() - 在选定的元素上绑定一个或多个事件处理函数 off() - 移除一个事件处理函数 one() - 为元素的事件添加处理函数...处理函数在每个元素上每种事件类型最多执行一次 parent() - 取得匹配元素集合中，每个元素的父元素，可以提供一个可选的选择器 prepend()-将参数内容插入到每个匹配元素的前面（元素内部） prop...()-获取匹配的元素集中第一个元素的属性（property）值 ready()-当DOM准备就绪时，指定一个函数来执行 remove()-将匹配元素集合从DOM中删除。...即：如果存在（不存在）就删除（添加）一个类 triggerHandler() -为一个事件执行附加到元素的所有处理程序 unbind() - 从元素上删除一个以前附加事件处理程序 val()-获取匹配的元素集合中第一个元素的当前值
在angular1中，私有变量以$$开头，$$watch是一个存放很多个绑定的对象的数组，用$watch方法来添加的，每一个被绑定的对象属性是：变量名、变量旧值、一个函数（用来返回变量新值）、检测变化的回调函数...然后和上一次值进行比较，如果不同，那就调用 getListener，同时把新值和旧值一并传递进去。 最终，我们把last属性设置为新返回的值，也就是最新值。...$digest();//第一次digest 复制代码 当然，还会有一个问题，当有两个$watch循环监听（watch1监听watch2，watch2监听watch1），一个$digest循环执行很多次，...，而angular1的脏检测这种慢性双绑你可以控制在循环后才一次跑一次，性能取舍就看实际场景吧。...单向数据绑定，就是绑定事件，比如绑定oninput、onchange、storage这些事件，只要触发事件，立刻执行对应的函数。
Angular中的生命周期函数： 什么是生命周期函数？...ngOnInit() 在 Angular 第一次显示数据绑定和设置指令/组件的输入属性之后，初始化指令/组件。 在第一轮 ngOnChanges() 完成之后调用，只调用一次。...ngAfterContentInit() 当 Angular 把外部内容投影进组件/指令的视图之后调用。 第一次 ngDoCheck() 之后调用，只调用一次。...第一次 ngAfterContentChecked() 之后调用，只调用一次。 ngAfterViewChecked() 每当 Angular 做完组件视图和子视图的变更检测之后调用。...但 NPM 的默认安装源在国外，通常会比较慢或者是直接因为网络原因安装失败，因此需要把 NPM 的安装源设置到国内镜像源，淘宝镜像（http://npm.taobao.org/）是个不错的选择，执行如下命令设置将淘宝镜像设置为
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
