文档章节

angularJS编码实践学习

孟飞阳
 孟飞阳
发布于 2016/07/31 10:54
字数 1792
阅读 86
收藏 0

AngularJS 是制作 SPA(单页面应用程序)和其它动态Web应用最广泛使用的框架之一。我认为程序员在使用AngularJS编码时有一个大的列表点应该记住,它会以这样或那样的方式帮助到你。下面是一些我遵守的最佳实践建议,同时也想推荐给你们。 我坚信有更多的功能也应该是这份列表的一部分,我邀请你们都来提建议或者在下面评论,从而使这个成为完整的最佳实践指南。

一、依赖注入

1. 依赖注入是AngularJS框架最好的特性之一,我们应该经常使用它。当我们需要对我们的应用程序进行测试用例覆盖时,它将真正的起到帮助。

2. 为依赖提供别名,这样他们不会在(JS代码)压缩过程中重命名,因为在AngularJS依赖是通过命名来实现的(注:AngularJS通过控制器构造函数的参数名字来推断依赖服务名称的)。

angular.module(‘myApp’).controller("MyController", ["$scope&",  "MyService",function($scope, MyService) {

    // controller logic

    }

   ]);

二、作用域

1. 在templates(模板)中scope(作用域)按只读对待。这就是说即使AngularJS允许我们在templates中编写代码修改scope,我们必须非常谨慎或者就不应该做。

2. 在controllers(控制器)中scope按只写对待。这就是说一个controllers负责使用另一个组件,就像一个服务,获取template 将要显示的数据和把数据写到scope的一个对象中。

  • 作为一个经验法则,我们必须总是在绑定时使用”.“。这就是说我们应该绑定到scope的对象,而不是直接的属性,否则可能会在子$scope导致意外的行为,因为$scope基于Java-script的原型继承机制。
  • 下面的代码我们可以看到,superhero是scope上一个通过Superhero服务返回的对象,同时相同的对象被用来绑定在view(视图)上。

XHTML

<div class="form-group">

    <label class="control-label" for="name">Super Power</label>

       <div class="controls">

      <input type="text" data-ng-model="superhero.superPower">

</div>


JavaScript

$scope. superhero = Superheros.get({

    superheroId: $stateParams.superheroId

)};

  • Scope 的目的是引用 model,而不是成为 model。
  • Model是我们的JavaScript对象

三、验证

1. 在form(表单)标签中使用“novalidate” 属性来使用 AngularJS验证同时关闭HTML5验证。

XHTML

<form name="reviewForm" ng-controller="ReviewController as reviewCtrl" ng-submit="reviewCtrl.addReview(product)" novalidate>

CSS2. 我们可以使用angular classes(css类)来改变可见性和验证控件的状态。

.ng-valid.ng-dirty{

    border-color: #FA787E;

}

.ng-invalid.ng-dirty{

    border-color: #FA787E;

}

四、内存 – 任务管理

  • AngularJS在销毁一个scope和把一个scope从它的父级移除之前会广播一个$destroy事件。监听这个事件对清理任务和资源是至关重要的,否则可能会继续消耗内存或CPU。总是注册‘destroy‘事件来删除任何易于内存泄漏的代码。

作为一个例子,下面的控制器在1秒的间隔不断更新一个mode(模型)l值,这些更新将永远持续,即使在controller对应view消失了或者scope从父级上移除。如果用户来回导航到一个view来加载这个controller,每次导航将添加另一个永远运行的计时器。

JavaScript

module.controller("MyController", function($scope, $timeout) {

    var onMyTimeout = function() {

        $scope.value += 1;

        $timeout(onMyTimeout, 100);

    };

    $timeout(onMyTimeout, 100);

    $scope.value = 0;

});

监听$destroy事件是停止计时器的一个机会。一种方法是取消由$timeout返回的promise(承诺)。

JavaScript

module.controller("TestController", function($scope, $timeout) {var onTimeout = function() {

    $scope.value += 1;

    timer = $timeout(onTimeout, 100);

};

    var timer = $timeout(onTimeout, 100);

    $scope.value = 0;

    $scope.$on("$destroy", function() {

        if (timer) {

            $timeout.cancel(timer);

        }
    });

});

五、事件 顶级作用域

1. 我们应该只在当前屏幕的单页面应用程序的控制器中使用scope 事件进行通信。如果我们只需要共享数据,那么我们应该考虑使用Services(服务)。

2. 当触发事件时,除非我们需要把事件通知到我们整个应用程序里的所有单个scope,否则我们不需要在$rootScope触发事件。如果我们只需要为子scope触发,则在当前的scope上$broadcast事件。父scope使用$emit获取当前scope事件。这也将缩短事件传播,而不是经过整个自上而下的流动。

3. Services 是在$rootScope监听事件获取通知的不二选择。这是因为services在我们的应用程序中只初始化一次,并没有获取它们自己的scope ,这将是很好。

4. 通常我们不应该在$rootScope注册事件监听(除了service)。这是导致AngularJS应用程序产生bug的一个普遍原因。这是因为当我们在一个controller 的$scope上添加一个事件监听,而controller 被销毁(我们导航离开页面,或关闭一个部分),监听同样被销毁。当我们将它添加到$rootScope,同时导航离开一个controller,监听会保留并保持活动和触发。所以我们必须从$rootScope手动取消监听,或者为了安全干脆就不在$rootScope上添加监听。但是如果我们必须为$rootScope添加一个事件,不要忘记在controller的scope中将其清除。

var myEventHandler = $rootScope.$on("MyEvent", ‘My Data’);

      $scope.$on("$destroy", function() {

      myEventHandler();

});

5. 如果我们知道只有一个监听器,而且你已经遇到了。我们可以通过在传递给事件监听函数的事件对象上调用event.stopPropagation()来停止进一步的事件传播。

六、构建业务逻辑

1. Controllers 不应该引用DOM,而只是包含行为,使用Directives (指令)做DOM操作。

2. Services应该对view逻辑独立.

3. 不要与HTML打架,而是通过Directives扩展。

4. 最好是使用模块化的文件夹结构,这样我们可以创建可重用的/可分发的组件。

七、通用规则

1. 对images使用ng-src 替代src。

2. 使用promise 来处理回调。AngularJS已经为它暴露了“$q”服务。许多AngularJS services返回promises:$http, $interval, $timeout

3. 不要压缩angular.min.js 因为AngularJS团队已经通过预定义设置压缩了angular文件,如果我们再压缩可能会产生破坏。所以直接使用。

4. 如果template (模板)缓存是必需的,使用$templateCache缓存html template。

5. 总是把第三方API的回调包裹到$apply,用来通知AngularJS关于环境的变化。

6. 如果我们不想让用户在AngularJS加载之前显示HTML ,使用ng-cloak directive。

XHTML

<div class="session ng-cloak">..............content............</div>

.ng-cloak {

/* this will change to block when scope and angular is ready */

display:none;

}

7. 为了阻止任何冲突,不要在我们自己的directives里使用“ng”前缀。创建你的自定义的。最好使用<mycomponent> ,因为 <my:component>在IE有时出错。

<my-component>

<my:component>

8. 在应用程序中为全局相关的事件使用$broadcast() , $emit() 和 $on()(比如用户身份验证或应用程序关闭)。如果我们需要特定于模块,服务或小部件的事件,我们应该选择Services,Directive Controllers等。

9. 不要使用自动关闭标签,因为有些浏览器不喜欢他们。使用“<product-title></product-title >”而不是“<product-title/>”。

© 著作权归作者所有

共有 人打赏支持
孟飞阳
粉丝 212
博文 994
码字总数 549374
作品 5
朝阳
个人站长
私信 提问
7本学习AngularJS的免费电子书

电子书可以给我们一个有结构有组织的方式学习新的知识。学习 AngularJS也一样。现在最棒的事情莫过于电子书中提供大量实践练习,帮助我们理解各种方面。 让我们度下面7本书探究 AngularJS 吧...

咲晚杍
2015/01/28
0
0
《AngularJS学习整理》系列分享专栏

《AngularJS学习整理》系列分享专栏 《AngularJS学习整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201748.html 文章 教你用AngularJS框架一行JS代码实现...

开元中国2015
2018/11/09
0
0
使用Yeoman快速构建基于angular的web应用

前言 最近在学习使用安哥拉(angular.js)编写web应用,看了一些网友实践了解到yeoman,这个工具实在太好用了,必须在这里介绍一下。 angular 首先简单介绍一下angular,它是由google开源的一套...

snakelxc
2013/08/25
0
0
使用Yeoman快速构建基于angular的web应用

前言 最近在学习使用安哥拉(angular.js)编写web应用,看了一些网友实践了解到yeoman,这个工具实在太好用了,必须在这里介绍一下。 angular 首先简单介绍一下angular,它是由google开源的一套...

kisops
2013/08/25
0
0
ngular2 VS Angular4 深度对比:特性、性能

在Web应用开发领域,Angular被认为是最好的开源JavaScript框架之一。 Google的Angular团队已于3月23日发布了Angular4,而期待已久的Angular2版本则是之前版本的完全重构。 对于成熟的开发人员...

机器的心脏
2018/06/02
0
0

没有更多内容

加载失败,请刷新页面

加载更多

四、RabbitMQ3.7在CentOS7下的安装

安装依赖 sudo yum install -y gcc gcc-c++ glibc-devel make ncurses-devel openssl-devel autoconf java-1.8.0-openjdk-devel git 创建yum源 vi /etc/yum.repos.d/rabbitmq-erlang.repo [......

XuePeng77
今天
2
0
android 延长Toast的时长

示例:myToast(5000,"hello"); public void myToast(int showTime, String msg) { Toast hello = Toast.makeText(getActivity(), msg, Toast.LENGTH_SHORT); new CountDownTimer(......

雨焰
昨天
4
0
浅谈mybatis的日志适配模式

Java开发中经常用到的日志框架有很多,Log4j、Log4j2、slf4j等等,Mybatis定义了一套统一的日志接口供上层使用,并为上述常用的日志框架提供了相应的适配器。有关适配器模式例子可以参考 设计...

算法之名
昨天
13
0
大数据教程(13.6)sqoop使用教程

上一章节,介绍了sqoop数据迁移工具安装以及简单导入实例的相关知识;本篇博客,博主将继续为小伙伴们分享sqoop的使用。 一、sqoop数据导入 (1)、导入关系表到HIVE ./sqoop import --connect...

em_aaron
昨天
3
0
Git cherry-pick 使用总结

应用背景:假设现在有两个分支:dev_01, dev_02. 如果我想把dev_01分支上的某几个commit合并到dev_02分支, 那么怎么办呢? 这就是cherry-pick的工作了。cherry-pick会捡选某些commit, 即把某...

天王盖地虎626
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部