angular1.x + ES6开发风格记录
angular1.x和ES6开发风格
一、Module
- 把各功能模块的具体实现代码独立出来。
- module机制作为一个壳子,对功能模块进行封装。
- 每个功能分组,使用一个总的壳子来包装,减少上级模块的引用成本。
- 每个壳子文件把module的name属性export出去。
export default class ServiceA {}
serviceB的实现,service/b.js
export default class ServiceB {}
moduleA的壳子定义,moduleA.js
import ServiceA from './services/a';
import ServiceB from './services/b';
export default angular.module('moduleA'[])
.service('ServiceA', ServiceA)
.service('ServiceB', ServiceB)
.name;
存在一个moduleB要使用moduleA:
import moduleA from './moduleA';
export default angular.module('moduleB', [moduleA]).name;
二、Controller
<div ng-controller="AppCtrl as app">
<div ng-bing="app.name"></div>
<button ng-click="app.getName">get app name</button>
</div>
controller AppCtrl.js
export default class AppCtrl {
constructor() {
this.name = 'angualr$es6';
}
getName() {
return this.name;
}
}
module
import AppCtrl from './AppCtrl';
export default angular.module('app', [])
.controller('AppCtrl', AppCtrl)
.name;
三、Component(Directive)
export default class DirectiveA {}
DDO上面的东西大致可以分为两类,属性和方法,所以就在构造函数里这样定义:
constructor() {
this.template = template;
this.restrict = 'E';
}
接下来就是controller和link,compile等函数了,比如controller,可以实现一个普通的controller类,然后赋值到controller属性上来:
this.controller = ControllerA;
写directive的时候,尽量使用controllerAs这样的语法,这样controller可以清晰一些,不必注入$scope,而且还可以使用bingToController属性,把在指令attr上定义的值或方法传递到controller实例上来。接下来我们使用三种方法来定义指令
1、定义一个类(ddo),然后在定义指令的工厂函数中返回这个类的实例。
import template from '../template/calendar.html';
import CalendarCtrl from '../controllers/calendar'; import '../css/calendar.css'; export default class CalendarDirective{
constructor() {
this.template = template;
this.restrict = 'E'; this.controller = CalendarCtrl;
this.controllerAs = 'calendarCtrl';
this.bingToController = true; this.scope = {
minDate: '=',
maxDate: '=',
selecteDate: '=',
dateClick: '&'
};
} link(scope) {
//这个地方引入了scope,应尽量避免这种做法,
//但是搬到controller写成setter,又会在constructor之前执行
scope.$watch('calendarCtrl.selecteDate', newDate => {
if(newDate) {
scope.calendarCtrl.calendar.year = newDate.getFullYear();
scope.calendarCtrl.calendar.month = newDate.getMonth();
scope.calendarCtrl.calendar.date = newDate.getDate(); }
});
}
}
然后在module定义的地方:
import CalendarDirective from './directives/calendar'; export default angular.module('components.form.calendar', [])
.directive('snCalendar', () => new CalendarDirective())
.name;
2、直接定义一个ddo对象,然后传给指令
// DatePickerCtrl.js
export default class DatePickerCtrl {
$onInit() {
this.date = `${this.year}-${this.month}`;
} getMonth() {
...
} getYear() {
...
}
}
注意,这里先写了controller而不是link/compile方法,原因在于一个数据驱动的组件体系下,我们应该尽量减少对DOM操作,因此理想状态下,组件是不需要link或compile方法的,而且controller在语义上更贴合mvvm架构。
import template from './date-picker-tpl.html';
import controller from './DatePickerCtrl'; const ddo = {
restrict: 'E',
template, //es6对象简写
controller,
controllerAs: '$ctrl',
bingToController: {
year: '=',
month: '='
} }; export default angular.module('components.datePicker', [])
.directive('dataPicker', ddo)
.name;
在整个系统设计中只有index.js(定义模块的地方)是框架可识别的,其它地方的业务逻辑都不应该出现框架的影子,这样方便移植。
3、component
1.5版本还给组件定义了相对完整的生命周期钩子,而且提供了单向数据流的方式,以上例子可以写成下面这样子:
//DirectiveController.js
export class DirectiveController {
$onInit() { } $onChanges(changesObj) { } $onDestroy() { } $postLink() { }
} //index.js
import template from './date-picker-tpl.html';
import controller from './DatePickerCtrl'; const ddo = {
template,
controller,
bindings: {
year: '<',
month: '<'
}
}; export default angular.module('components.datepicker', [])
.component('datePicker', ddo)
.name;
4、服务
export default class ServiceA {}
serviceA的模块包装器moduleA的实现
import ServiceA from './service/a'; export angular.module('moduleA', [])
.service('ServiceA', ServiceA)
.name;
factoryA的实现,factory/a.js
import EntityA from './model/a'; export default function FactoryA {
return new EntityA();
}
factoryA的模块包装器moduleA的实现
import FactoryA from './factory/a'; export angular.module('modeuleA', [])
.factory('FactoryA', FactoryA)
.name;
对于依赖注入我们可以通过以下方式来实现:
export default class ControllerA {
constructor(ServiceA) {
this.serviceA = ServiceA;
}
} ControllerA.$inject = ['ServiceA'];
import ControllerA from './controllers/a'; export angular.module('moduleA', [])
.controller('ControllerA', ControllerA);
对于constant和value,可以直接使用一个常量来代替。
export const VERSION = '1.0.0';
5、filter
import { dateFormatter } './transformers';
export default class Controller {
constructor() {
this.data = [1,2,3,4]; this.currency = this.data
.filter(v => v < 4)
.map(v => '$' + v); this.date = Date.now();
this.today = dateFormatter(this.date);
}
}
6、消除$scope,淡化框架概念
1、controller的注入
<div ng-controller="TestCtrl as testCtrl">
<input ng-model="testCtrl.aaa">
</div>
xxx.controller("TestCtrl", [function() {
this.aaa = 1;
}]);
实际上框架会做一些事情:
$scope.testCtrl = new TestCtrl();
对于这一块,把那个function换成ES6的类就可以了。
2、依赖属性的计算
$scope.$watch("a", function(val) {
$scope.b = val + 1;
});
我们可以直接使用ES5的setter和getter来定义就可以了。
class A {
set a(val) { //a改变b就跟着改变
this.b = val + 1;
}
}
如果有多个变量要观察,例如
$scope.$watchGroup(["firstName", "lastName"], function(val) {
$scope.fullName = val.join(",");
});
我们可以这样写
class Controller { get fullName() {
return `${this.firstName} ${this.lastName}`;
}
}
html
<input type="text" ng-model="$ctrl.firstName">
<input type="text" ng-model="$ctrl.lastName"> <span ng-bind="$ctrl.fullName"></span>
3、事件冒泡和广播
在$scope上,另外一套常用的东西是$emit,$broadcast,$on,这些API其实是有争议的,因为如果说做组件的事件传递,应当以组件为单位进行通信,而不是在另外一套体系中。所以我们也可以不用它,比较直接的东西通过directive的attr来传递,更普遍的东西用全局的类似Flux的派发机制去通信。
根作用域的问题也是一样,尽量不要去使用它,对于一个应用中全局存在的东西,我们有各种策略去处理,不必纠结于$rootScope。
4、指令中$scope
7、总结
参考链接:
angular1.x + ES6开发风格记录的更多相关文章
- ES6深入学习记录(三)编程风格
今天学习阮一峰ES6编程风格,其中探讨了如何将ES6的新语法,运用到编码实践之中,与传统的JavaScript语法结合在一起,写出合理的.易于阅读和维护的代码. 1.块级作用域 (1)let 取代 v ...
- [webpack] 配置react+es6开发环境
写在前面 每次开新项目都要重新安装需要的包,简单记录一下. 以下仅包含最简单的功能: 编译react 编译es6 打包src中入口文件index.js至dist webpack配置react+es6开 ...
- webpack+react+redux+es6开发模式
一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...
- iOS开发之记录用户登录状态
iOS开发之记录用户登录状态 我们知道:CoreData的配置和使用步骤还是挺复杂的.但熟悉CoreData的使用流程后,CoreData还是蛮好用的.今天要说的是如何记录我们用户的登陆状态.例如微信 ...
- 开发错误记录8:Unable to instantiate application com
开发错误记录8:Unable to instantiate application com.android.tools.fd.runtime.BootstrapApplication 这是因为在And ...
- 【转】使用gulp 进行ES6开发
原谅地址:https://segmentfault.com/a/1190000004394726 一说起ES6,总会顺带看到webpack.babel.browserify还有一些认都不认识的blab ...
- Arduino单片机使用和开发问题记录(转)
源:Arduino单片机使用和开发问题记录 1.将程序上传到板子时Arduino IDE提示“avrdude: stk500_getsync(): not in sync: resp=0x00” 网上 ...
- webpack+react+redux+es6开发模式---续
一.前言 之前介绍了webpack+react+redux+es6开发模式 ,这个项目对于一个独立的功能节点来说是没有问题的.假如伴随着源源不断的需求,前段项目会涌现出更多的功能节点,需要独立部署运行 ...
- IOS开发之记录用户登陆状态,ios开发用户登陆
IOS开发之记录用户登陆状态,ios开发用户登陆 上一篇博客中提到了用CoreData来进行数据的持久化,CoreData的配置和使用步骤还是挺复杂的.但熟悉CoreData的使用流程后,CoreDa ...
随机推荐
- 对比requirejs更好的理解seajs
seajs遵循CMD规范,requirejs遵循AMD规范.AMD规范是预加载,CMD规范是赖加载. 下文举例假设有文件 b.js, c.js如下 //b.js define(function(req ...
- Apache Spark 2.2.0 中文文档 - Spark RDD(Resilient Distributed Datasets)论文 | ApacheCN
Spark RDD(Resilient Distributed Datasets)论文 概要 1: 介绍 2: Resilient Distributed Datasets(RDDs) 2.1 RDD ...
- 再说AutoComplete
一.简述 昨天support一同事,帮她的客户做类似下面的效果(自动完成): 以前在搜房的时候,弄过这个,调用楼盘字典: 这是一个小功能,也是一个大功能.因为它可以做大,也可以做小. 二.搜房的Aut ...
- thinkphp的select和find的区别
hinkphp是比较好的php开发框架,能比较快速的开发MVC架构的管理系统,我们需要用到 select()和find()方法,两个方法都能返回数据集数组,但有什么不同呢?先看一下我的代码对比:$te ...
- ubuntu12.04添加程序启动器到Dash Home
ubuntu12.04 dash home中每个图标对应/usr/share/applications当中的一个配置文件(文件名后缀为.desktop).所以要在dash home中添加一个自定义程序 ...
- JQuery&原生js ——实现剪刀石头布小游戏
前言 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库( 或JavaScript框架).jQuery设计的宗旨是“write L ...
- 随机算法 poj 2576 Tug of War
Tug of War Time Limit: 3000MS Memory Limit: 65536K Total Submissions: 8187 Accepted: 2204 Descri ...
- Musical Theme poj1743(后缀数组)
Musical Theme Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 16757 Accepted: 5739 De ...
- spring框架总结(04)----介绍的是Spring中的JDBC模板
1.1 Jdbc模板概述 它是spring框架中提供的一个对象,是对原始Jdbc API对象的简单封装.spring框架为我们提供了很多的操作模板类,入下图所示: 我们今天的主角在spring-jd ...
- input 事件与汉字输入法:使用compositionend事件解决
input 事件与汉字输入法:使用compositionend事件解决 在使用<input type="text">的input事件的时候 会遇到中文输入法的" ...