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 相关文章推荐
如何判断图片地址是否失效
Feb 02 Javascript
jquery 必填项判断表单是否为空的方法
Sep 14 Javascript
js取消单选按钮选中示例代码
Nov 14 Javascript
node.js实现多图片上传实例
Jun 03 Javascript
基于jQuery通过jQuery.form.js插件使用ajax提交form表单
Aug 17 Javascript
3种不同的ContextMenu右键菜单实现代码
Nov 03 Javascript
基于jQuery选择器之表单对象属性筛选选择器的实例
Sep 19 jQuery
Vue-Router的使用方法
Sep 05 Javascript
详解如何用typescript开发koa2的二三事
Nov 13 Javascript
详解如何实现Element树形控件Tree在懒加载模式下的动态更新
Apr 25 Javascript
解决vue props传Array/Object类型值,子组件报错的情况
Nov 07 Javascript
小程序实现密码输入框
Nov 16 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聊天室技术
2006/10/09 PHP
php中运用http调用的GET和POST方法示例
2014/09/29 PHP
PHP PDO和消息队列的个人理解与应用实例分析
2019/11/25 PHP
自动检查并替换文本框内的字符
2006/06/30 Javascript
JavaScript toFixed() 方法
2010/04/15 Javascript
键盘KeyCode值列表汇总
2013/11/26 Javascript
Node.js中使用Buffer编码、解码二进制数据详解
2014/08/16 Javascript
jQuery 回调函数(callback)的使用和基础
2015/02/26 Javascript
浅析在javascript中创建对象的各种模式
2016/05/06 Javascript
jQuery each函数源码分析
2016/05/25 Javascript
js实现登录验证码
2016/12/22 Javascript
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
2017/03/06 Javascript
微信小程序--onShareAppMessage分享参数用处(页面分享)
2017/04/18 Javascript
nodeJS实现路由功能实例代码
2017/06/08 NodeJs
js 监控iframe URL的变化实例代码
2017/07/12 Javascript
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
2017/08/04 jQuery
Bootstrap Fileinput 4.4.7文件上传实例详解
2018/07/25 Javascript
Vue在页面数据渲染完成之后的调用方法
2018/09/11 Javascript
jQuery 隐藏/显示效果函数用法实例分析
2020/05/20 jQuery
详解template标签用法(含vue中的用法总结)
2021/01/12 Vue.js
Python基于回溯法子集树模板解决旅行商问题(TSP)实例
2017/09/05 Python
Python使用base64模块进行二进制数据编码详解
2018/01/11 Python
基于Python函数和变量名解析
2019/07/19 Python
鲜为人知的HTML5语音合成功能
2019/05/17 HTML / CSS
HTML5之WebGL 3D概述(上)—WebGL原生开发开启网页3D渲染新时代
2013/01/31 HTML / CSS
伦敦最有品味的百货:Liberty London
2016/11/12 全球购物
汇智创新科技发展有限公司
2015/12/06 面试题
中国央视网签名寄语
2014/01/18 职场文书
出纳员的岗位职责
2014/02/22 职场文书
做一个有道德的人活动实施方案
2014/08/23 职场文书
长城英文导游词
2015/01/30 职场文书
秦始皇兵马俑导游词
2015/02/02 职场文书
新人入职感言
2015/07/31 职场文书
详解python中[-1]、[:-1]、[::-1]、[n::-1]使用方法
2021/04/25 Python
SQL注入篇学习之盲注/宽字节注入
2022/03/03 MySQL
Apache SkyWalking 监控 MySQL Server 实战解析
2022/09/23 Servers