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 相关文章推荐
基于jQuery的弹出警告对话框美化插件(警告,确认和提示)
Jun 10 Javascript
JavaScript之Getters和Setters 平台支持等详细介绍
Dec 07 Javascript
JS HTML5 音乐天气播放器(Ajax获取天气信息)
May 26 Javascript
jQuery/CSS3图片特效插件整理推荐
Dec 07 Javascript
node.js中的fs.mkdirSync方法使用说明
Dec 17 Javascript
jQuery处理json数据返回数组和输出的方法
Mar 11 Javascript
jquery实现的判断倒计时是否结束代码
Feb 05 Javascript
jQuery validate+artdialog+jquery form实现弹出表单思路详解
Apr 18 Javascript
字太多用...代替的方法(两种)
Mar 15 Javascript
单击按钮发送验证码,出现倒计时的简单实例
Mar 17 Javascript
jQuery实现简单飞机大战
Jul 05 jQuery
JavaScript 常见的继承方式汇总
Sep 17 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使用百度翻译api示例分享
2014/01/31 PHP
PHP遍历并打印指定目录下所有文件实例
2014/02/10 PHP
php自定义函数br2nl实现将html中br换行符转换为文本输入中换行符的方法【与函数nl2br功能相反】
2017/02/17 PHP
php实现简易计算器
2020/08/28 PHP
[原创]js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
2007/03/12 Javascript
javascript onmouseout 解决办法
2010/07/17 Javascript
妙用Jquery的val()方法
2012/06/27 Javascript
onkeydown事件解决按回车键直接提交数据的需求
2013/04/11 Javascript
jQuery+css实现百度百科的页面导航效果
2014/12/16 Javascript
jQuery常见面试题之DOM操作详析
2017/07/05 jQuery
javaScript手机号码校验工具类PhoneUtils详解
2017/12/08 Javascript
微信小程序实现天气预报功能
2018/07/18 Javascript
JavaScript函数、闭包、原型、面向对象学习笔记
2018/09/06 Javascript
nodejs读取本地中文json文件出现乱码解决方法
2018/10/10 NodeJs
Element UI框架中巧用树选择器的实现
2018/12/12 Javascript
深入理解es6块级作用域的使用
2019/03/28 Javascript
详解vue-property-decorator使用手册
2019/07/29 Javascript
js表达式与运算符简单操作示例
2020/02/15 Javascript
JS判断数组是否包含某元素实现方法汇总
2020/06/24 Javascript
Vue如何提升首屏加载速度实例解析
2020/06/25 Javascript
vue接通后端api以及部署到服务器操作
2020/08/13 Javascript
微信小程序自定义支持图片的弹窗
2020/12/21 Javascript
[19:24]DOTA2客户端使用指南 一分钟快速设置轻松超神
2013/09/24 DOTA
python网络编程学习笔记(10):webpy框架
2014/06/09 Python
python有证书的加密解密实现方法
2014/11/19 Python
基于python元祖与字典与集合的粗浅认识
2017/08/23 Python
python实现验证码识别功能
2018/06/07 Python
vue.js实现输入框输入值内容实时响应变化示例
2018/07/07 Python
利用css3如何设置没有上下边的列表间隔线
2017/07/03 HTML / CSS
HTML+CSS+JavaScript实现图片3D展览的示例代码
2020/10/12 HTML / CSS
伊莱克斯(Electrolux)俄罗斯网上商店:瑞典家用电器品牌
2021/01/23 全球购物
财务工作个人求职的自我评价
2013/12/19 职场文书
高中化学教学反思
2014/01/13 职场文书
导游词范文之颐和园/重庆/云台山
2019/09/10 职场文书
logback 实现给变量指定默认值
2021/08/30 Java/Android
create-react-app开发常用配置教程
2022/06/25 Javascript