angular1.x es6开发风格记录 -ag凯发k8国际

// 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，淡化框架概念

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

3、事件冒泡和广播

4、指令中$scope

7、总结

参考链接：