AirJD 焦点
AirJD

没有录音文件
00:00/00:00
加收藏

AngularJS在Coding的实践 by 彭博

发布者 angular
发布于 1433317829128  浏览 2953 关键词 前端, JavaScript, AngularJS 
分享到

第2页

AngularJS 在 Coding 的实践

彭博 @ coding.net / Techparty, Guangzhou 2014



第3页

关于 Coding



第4页

关于 Coding



第5页

关于 Coding

团队协作 + Git + PaaS + QC



第6页

为何选择 AngularJS

1、Data-binding 2、模块化设计 / 依赖注⼊入 3、良好的⽂文档



第7页

Data-binding

<input type=“text” ng-model=“name”/> <span ng-click=“changeName()”>

Hello {{name}} </span>

angular.module(‘app’) .controller(‘MainController’, function($scope){

$scope.name = ‘Coding’; $scope.changeName = function(){

$scope.name = ‘Moto’; } });



第8页

Data-binding

<input type=“text” name=“name”/> <span id=“change-name”>

Hello <span id=“name”></span> </span>

$(function(){ var input = $(‘input[name=“name”]’); input.on(‘change’, function(){ var value = $(this).val(); $(‘#id’).val(value); }); $(‘#change-name’).on(‘click’, function(){ var value = input.val(); $(‘#id’).val(‘Moto’); });

});



第9页

模块化设计

angular.module(‘app’)

.controller(‘MainController’, function(){ //…

})

.service(‘MainService’, function(){ return {sayHello:function(){…}}

});



第10页

模块化设计 / 依赖注⼊入

angular.module(‘app’)

.controller(‘MainController’, function(MainService){ MainService.sayHello();

})

.service(‘MainService’, function(){ return {sayHello:function(){…}}

});



第11页

良好的⽂文档 https://docs.angularjs.org/api



第12页

良好的⽂文档 https://docs.angularjs.org/api



第13页

使⽤用 AngularJS 的 Coding.net 第⼀一次,/pp,4 个 JS 请求



第14页

使⽤用 AngularJS 的 Coding.net 第⼀一次,/pp,4 个 JS 请求



第15页

使⽤用 AngularJS 的 Coding.net 第⼀一次,/pp,4 个 JS 请求



第16页

使⽤用 AngularJS 的 Coding.net 1 个 HTML 请求



第17页

使⽤用 AngularJS 的 Coding.net /user , 不再有 HTML 请求



第18页

使⽤用 AngularJS 的 Coding.net 不再有 JS 请求



第19页

Single Page App , 前后端完全分离 后端与前端都在 Coding 上管理



第20页

Single Page App , 前后端完全分离 后端与前端都在 Coding 上管理



第21页

Single Page App , 前后端完全分离 后端与前端都在 Coding 上管理



第22页

QC 质量管理分析下的 Coding 前端项⺫⽬目



第23页

QC 质量管理分析下的 Coding 前端项⺫⽬目



第24页

QC 质量管理分析下的 Coding 前端项⺫⽬目



第25页

AngularJS 使⽤用情况



时间



7个⽉月



route 数





*.js(coffee)



237(⽂文件)/ 31872(⾏行) by cloc



API 180+



第27页

AngularJS 项⺫⽬目结构



第28页

AngularJS 项⺫⽬目结构



src app user task common constants directives filters services vendor



应⽤用主⺫⽬目录

⻚页⾯面模块

常量 指令 过滤器 通⽤用服务 Bower 依赖



第29页

frontend https://github.com/bountysource/frontend



第30页

管理依赖(58)

1. Static web (Connect) 2. Watch & Compile

(Coffee & Sass)

3. Build for release

(uglify,cssmin,htmlmin,md5…)



第31页

Problems / Solutions



第32页

Problems / Solutions

1. jQuery 到 AngularJS 的思维转换 2. Directive 使⽤用不当 3. View 和 Controller 过于复杂 4. Watcher 过多(>2000+)



第33页

jQuery vs. AngularJS

直接操作

Dom

通过 Directive 操作



第34页

jQuery vs. AngularJS

//html <input type=“text” name=“name”/> //js $(‘input[name=“name”]’).val(‘H5’);

//html <input type=“text” name=“name”

ng-model=“name”/> //js $scope.name = “H5”;



第35页

Directive 常规的组织⽅方式

'use strict';

angular.module(‘directives') //directive definition .directive('cg${directive}', [

function () { return { link: function (scope, element, attrs) { //spaghetti code }, templateUrl: ''

} } ])



第36页

Directive 更好的组织⽅方式

'use strict';

angular.module(‘directives') //directive definition .directive('cg${directive}', [

function () { return { link: function (scope, element, attrs) {

}, templateUrl: '', controller: '${directive}Controller' } } ])



第37页

Directive 更好的组织⽅方式

'use strict';

angular.module(‘directives') //directive definition .directive('cg${directive}', [

function () { return { link: function (scope, element, attrs) {

}, templateUrl: '', controller: '${directive}Controller' } } ])

//relevant controller .controller('${directive}Controller', [

'${DS}scope', '${directive}Service', function(${DS}scope, ${directive}Service){

} ])



第38页

Directive 更好的组织⽅方式

'use strict';

angular.module(‘directives') //directive definition .directive('cg${directive}', [

function () { return { link: function (scope, element, attrs) {

}, templateUrl: '', controller: '${directive}Controller' } } ])

//relevant controller .controller('${directive}Controller', [

'${DS}scope', '${directive}Service', function(${DS}scope, ${directive}Service){

} ])

//relevant service .service('${directive}Service', [

function(){

} ]);



第39页

Directive 使⽤用不当

'use strict';

angular.module(‘directives') //directive definition .directive('cg${directive}', [

function () { return { link: function (scope, element, attrs) {

//JQUERY code

}, templateUrl: '' } } ])



第40页

Directive 使⽤用不当

//in link function of directive var ohtml = [];

ohtml.push(‘<table class="blob-code-view blob-code-diff”>’);

ohtml.push(‘<tbody><tr class="blobline">');

ohtml.push(‘<td class="blob-nums">'); ohtml.push(lhtml.join(‘’)); ohtml.push(‘</td><td class="blob-code">');



第41页

Directive 使⽤用不当

return { link: function(){ }, controller: function(){ //provide variables for template }, templateUrl: ‘path/to/the/template.html’,

}



第42页

View 过于复杂 —— 逻辑

<i class=“ui remove icon” ng-if=“task.owner.id === USER.id && !task.updating && task.status !== STATUS.done”>

</i>



第43页

View 过于复杂 —— 逻辑

<i class=“ui remove icon” ng-if=“canRemove(task);”>

</i>

//in a related Controller $scope.canRemove = function(task){

return task.owner.id === USER.id && !task.updating && task.status !== STATUS.done

};



第44页

View 过于复杂 —— 结构



massive 793 lines



task.js (444 lines) index.html (174 lines) list.html (175 lines)



第45页

View 过于复杂 —— 结构



directives 400 lines



item.js (150 lines) item.html (35 lines)

member_picker.js (100 lines) member_picker.html (42 lines)



creator.js (62 lines) creator.html (11 lines)



第46页

View 过于复杂 —— 结构



directives 400 lines



item.js (150 lines) item.html (35 lines)

member_picker.js (100 lines) member_picker.html (42 lines)



creator.js (62 lines) creator.html (11 lines)



第47页

View 过于复杂 —— 结构



directives 400 lines



item.js (150 lines) item.html (35 lines)

member_picker.js (100 lines) member_picker.html (42 lines)



creator.js (62 lines) creator.html (11 lines)



第48页

View 过于复杂 —— 结构



directives 400 lines



item.js (150 lines) item.html (35 lines)

member_picker.js (100 lines) member_picker.html (42 lines)



creator.js (62 lines) creator.html (11 lines)



第49页

View 过于复杂 —— 结构



directives 400 lines



item.js (150 lines) item.html (35 lines)

member_picker.js (100 lines) member_picker.html (42 lines)



creator.js (62 lines) creator.html (11 lines)



第50页

Controller 过于复杂 WebStorm — File and Code Templates



第51页

Controller 过于复杂 WebStorm — File and Code Templates



第52页

Watcher 过多(>2000+)

watchers: 3+

<div class=“activity” data-type=“Depo” ng-if=“activity.type === ‘Depo’”>

<div ng-if=“activity.action === ‘commit’”> </div> <div ng-if=“activity.action === ‘fork’”> </div> <!—— more like above…… ——> </div>



第53页

Watcher 过多(>2000+)

watchers: 3+

<div class=“activity” data-type=“Depo” ng-if=“activity.type === ‘Depo’”>

<div ng-if=“activity.action === ‘commit’”> </div> <div ng-if=“activity.action === ‘fork’”> </div> <!—— more like above…… ——> </div>



第54页

Watcher 过多(>2000+)

watchers: 3+

<div class=“activity” data-type=“Depo” ng-if=“activity.type === ‘Depo’”>

<div ng-if=“activity.action === ‘commit’”> </div> <div ng-if=“activity.action === ‘fork’”> </div> <!—— more like above…… ——> </div>



第55页

Watcher 过多(>2000+)

watchers: 4+

<div class=“activity” data-type=“Task” ng-if=“activity.type === ‘Task’”>

<!—— …… ——> </div> <!—— more like above…… ——>



第56页

Watcher 过多(>2000+)

watchers: 5+

<div class=“activity” data-type=“Attachment” ng-if=“activity.type === ‘Attachment’”>

<!—— …… ——> </div> <!—— more like above…… ——>



第57页

Watcher 过多(>2000+)

watchers: 6+

<div class=“activity” data-type=“ProjectMember” ng-if=“activity.type === ‘ProjectMember’”>

<!—— …… ——> </div> <!—— more like above…… ——>



第58页

Watcher 过多(>2000+)

watchers: 6+ * 20

<div class=“activity” data-type=“ProjectMember” ng-if=“activity.type === ‘ProjectMember’”>

<!—— …… ——> </div> <!—— more like above…… ——>



第59页

Watcher 过多(>2000+)

watchers: 120+

<div class=“activity” data-type=“ProjectMember” ng-if=“activity.type === ‘ProjectMember’”>

<!—— …… ——> </div> <!—— more like above…… ——>



第60页

Bindonce

https://github.com/Pasvaz/bindonce



第61页

Bindonce ng-directive —> bo-directive

https://github.com/Pasvaz/bindonce



第62页

减少 Watchers —— 使⽤用 Bindonce

watchers: 3+

<div class=“activity” data-type=“Depo” ng-if=“activity.type === ‘Depo’”>

<div ng-if=“activity.action === ‘commit’”> </div> <div ng-if=“activity.action === ‘fork’”> </div> <!—— more like above…… ——> </div>



第63页

减少 Watchers —— 使⽤用 Bindonce

watchers: 0

<div class=“activity” data-type=“Depo” bindonce=“activity” bo-if=“activity.type === ‘Depo’”>

<div bo-if=“activity.action === ‘commit’”> </div> <div bo-if=“activity.action === ‘fork’”> </div> <!—— more like above…… ——> </div>



第64页

总结

虽踩坑⽆无数,但⽆无怨⽆无悔。 AngularJS ,你值得拥有...



第66页

We want you!



第67页

We want you!



第68页

Thank you!



支持文件格式:*.ppt, *.pptx, *.pdf
上传最后阶段需要进行在线转换,可能需要1~2分钟,请耐心等待。