angularJS开发注意事项


Posted in Javascript onMay 26, 2018

作为一个coder,应该具有经常总结反思的习惯,如果不能及时总结,可能就会忘记自己踩过的很多坑,然后会导致同一个坑踩很多次,所以我打算把这些都记录下来,以方便是对自己的重复记忆,避免无效的coding,另一方面可以希望可以给遇到相似问题的同僚们一些收获.

1.手动触发脏检查

在开发过程中,我们可能经常会通过js来手动更改绑定的相关数据,而不是通过dom操作来改变绑定的相关数据,这样也很多情况下会导致绑定数据的视图不能够及时更新,这个时候就需要我们手动触发一下脏检查,下面我就介绍一下三种手动触发脏检查的方法.

(1) apply()方法在需要手动触发的地方调用scope.apply(),使用该方法会触发angular从rootScope的作用域下开始进行绑定变量值的轮询,相比较digest()方法比较费时.

但是这个有时这个方法会报错.

(2) digest()方法在需要手动触发的地方调用scope.digest(),使用该方法会触发angular从scope的作用域下开始进行绑定变量值的轮询,相比较aplly()更合理.

(3) timeout()方法将操作绑定数据的逻辑写在timeout()方法中.

找到一种更完美的解决动态添加数据导致页面不能及时渲染的方法,迫不及待地来分享给大家~~~

可以定义一个全局的方法.这个方法就是经过处理过的apply函数,大家都叫它safeApply.上代码了:

$rootScope.safeApply = function(fn) {
  var phase = this.$root.$$phase;
  if(phase == '$apply' || phase == '$digest') {
    if(fn && (typeof(fn) === 'function')) {
      fn();
    } else {
      this.$apply(fn);
    }
  }
}

然后在需要动态添加吧的地方调用rootScope.safeApply()即可,或者把需要动态添加的代码作为写进rootScope.safeApply方法的fn参数里.

2.ng-model-options 指令

这个指令在表单校验的时候非常有用,我们可以设置什么时候出发试图更新,这样你就可以设置dom元素失去焦点改变后调用监听,从而显示校验的提示. <input>, <select>, <textarea>,这些元素支持该指令

<input ng-model="name" ng-model-options="{updateOn: 'blur'}"> //使用示例

//可配置参数

{updateOn: 'event'}规则指定事件发生后绑定数据
{debounce : 1000} 规定等待多少毫秒后绑定数据
{allowInvalid : true|false} 规定是否需要验证后绑定数据
{getterSetter : true|false} 规定是否作为 getters/setters 绑定到模型
{timezone : '0100'} 规则是否使用时区

3. 告别令人尴尬的 {{}}

我们都知道,当页面还未加载完毕的时候会出现{{ xxx }}这种尴尬的情况,通过使用ng-bind-template指令,就可以避免尴尬情况的出现.

<p ng-bind-template="{{name}}"></p>   //使用示例

4.解决ng-if,ng-show,ng-hide偶然出现的闪现的问题

(1) 将html片段抽出,通过指令引入ng-include,ng-bind-html

(2) 通过ng-cloak指令

5.控制器之间的通讯问题

(1)路由传参

//传递
$state.go(path, {name:"dfdd"})
ui-sref="path({name:"dfdd"})"
//获取
$scope.$stateParams.name

(2)通过广播

通过子元素传递给父元素,然后父元素再广播给其他子元素,注意这个广播是很快就完成的,所以很有可能出现子页面还未加载完父元素的广播就已经完成了,为了避免这种情况,需要父元素的广播延迟执行.
(这种情况有一个弊端,当进入子页面后再次刷新页面,这次的广播已经没有了,就会导致这个子页面的数据获取失败了.)

(3)定义全局变量(window)

将多个控制器都需要通讯的变量定义为全局的.这样每个控制器都可以访问到和改写.

(4) 缓存

sessionStorage, localStorage, cookie,浏览器的各种数据库

以上方法个人比较推荐路由传参的方式

6.$destroy的使用是必要的

  • (1)页面离开时清除页面的定时器
  • (2)页面离开时清除页面的监听器
  • (3)页面离开时清除页面的modal,popover之类的遮罩层.
var destroyWatcher = $scope.$watch(...);
//示例代码
//$watch方法会返回一个函数,这个函数用来销毁监听器,我们用一个变量承接这个函数,然后再destory的时候调用这个函数就可以销毁不必要的监听器了.
$scope.$on("$destroy", function() {
  if (timer) { 
    $timeout.cancel(timer); 
  } 
  $scope.popover.remove();
  destroyWatcher();
}
Javascript 相关文章推荐
Javascript String.replace的妙用
Sep 08 Javascript
javascript 面向对象编程 万物皆对象
Sep 17 Javascript
Javascript公共脚本库系列(一): 弹出层脚本
Feb 24 Javascript
javascript从右边截取指定字符串的三种实现方法
Nov 29 Javascript
EasyUI实现二级页面的内容勾选的方法
Mar 01 Javascript
深入浅析JavaScript中的作用域和上下文
Mar 26 Javascript
关于JSON与JSONP简单总结
Aug 16 Javascript
Vue概念及常见命令介绍(1)
Dec 08 Javascript
jquery uploadify隐藏上传进度的实现方法
Feb 06 Javascript
详解koa2学习中使用 async 、await、promise解决异步的问题
Nov 13 Javascript
js实现窗口全屏示例详解
Sep 17 Javascript
Vue之Mixins(混入)的使用方法
Sep 24 Javascript
JavaScript继承与多继承实例分析
May 26 #Javascript
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
May 26 #jQuery
Vue仿支付宝支付功能
May 25 #Javascript
微信小程序实现人脸检测功能
May 25 #Javascript
微信小程序实现人脸识别
May 25 #Javascript
微信小程序实现刷脸登录
May 25 #Javascript
JS实现生成由字母与数字组合的随机字符串功能详解
May 25 #Javascript
You might like
PHP中常用数组处理方法实例分析
2008/08/30 PHP
提高PHP编程效率 引入缓存机制提升性能
2010/02/15 PHP
Windows下XDebug 手工配置与使用说明
2010/07/11 PHP
PHP Cookie的使用教程详解
2013/06/03 PHP
PHP在不同页面间传递Json数据示例代码
2013/06/08 PHP
php中strstr、strrchr、substr、stristr四个函数的区别总结
2014/09/22 PHP
PHP程序中使用adodb连接不同数据库的代码实例
2015/12/19 PHP
php基于Redis消息队列实现的消息推送的方法
2018/11/28 PHP
PHP反射实际应用示例
2019/04/03 PHP
一份老外写的XMLHttpRequest代码多浏览器支持兼容性
2007/01/11 Javascript
[原创]保存的js无法执行的解决办法
2007/02/25 Javascript
优化javascript的执行速度
2010/01/23 Javascript
js 实现css风格选择器(压缩后2KB)
2012/01/12 Javascript
jquery和ajax的关系详细介绍
2013/11/29 Javascript
浅析JS异步加载进度条
2016/05/05 Javascript
jQuery提示插件qTip2用法分析(支持ajax及多种样式)
2016/06/08 Javascript
AngularJS  $modal弹出框实例代码
2016/08/24 Javascript
Omi v1.0.2发布正式支持传递javascript表达式
2017/03/21 Javascript
微信小程序调用摄像头隐藏式拍照功能
2018/08/22 Javascript
了解JavaScript表单操作和表单域
2019/05/27 Javascript
Vue动态面包屑功能的实现方法
2019/07/01 Javascript
跟老齐学Python之坑爹的字符编码
2014/09/28 Python
Python实现网站文件的全备份和差异备份
2014/11/30 Python
node.js获取参数的常用方法(总结)
2017/05/29 Python
Python适配器模式代码实现解析
2019/08/02 Python
python装饰器原理与用法深入详解
2019/12/19 Python
Python常用GUI框架原理解析汇总
2020/12/07 Python
美国一家著名的儿童鞋制造商:Stride Rite
2017/01/02 全球购物
新西兰购物网站:TheMarket NZ
2020/09/19 全球购物
会走路的树教学反思
2014/02/20 职场文书
委托书怎样写
2014/08/30 职场文书
民主评议政风行风整改方案
2014/09/17 职场文书
教师师德师风整改措施
2014/10/24 职场文书
党员发展大会主持词
2015/07/03 职场文书
python内置进制转换函数的操作
2021/06/02 Python
HTML中link标签属性的具体用法
2023/05/07 HTML / CSS