进阶实践-刘勇.pptx

AngularJS AngularJS AngularJS AngularJS AngularJS AngularJS 进阶实践进阶实践进阶实践进阶实践进阶实践进阶实践UCUCUCUCUCUC九游九游九游九游九游九游天猪天猪天猪天猪天猪天猪(atian25)(atian25)(atian25)(atian25)(atian25)(atian25)httphttphttphttp:/:/:/:/atian25.github.ioatian25.github.ioatian25.github.ioatian25.github.iohttps:/ 传统前端开发思维传统前端开发思维传统前端开发思维传统前端开发思维传统前端开发思维传统前端开发思维以以以以以以JQueryJQueryJQueryJQueryJQueryJQuery为代表为代表为代表为代表为代表为代表以以以以以以DOMDOMDOMDOMDOMDOM为中心为中心为中心为中心为中心为中心关注关注关注关注关注关注VIEWVIEWVIEWVIEWVIEWVIEW层的变化和用户操作层的变化和用户操作层的变化和用户操作层的变化和用户操作层的变化和用户操作层的变化和用户操作我有这样一个我有这样一个我有这样一个我有这样一个DOMDOMDOMDOM，我想让它做，我想让它做，我想让它做，我想让它做XXXXXXXX新一代前端开发思维新一代前端开发思维新一代前端开发思维新一代前端开发思维新一代前端开发思维新一代前端开发思维以以以以以以AngularJSAngularJSAngularJSAngularJSAngularJSAngularJS为代表为代表为代表为代表为代表为代表以以以以以以DataDataDataDataDataData为中心为中心为中心为中心为中心为中心聚焦聚焦聚焦聚焦聚焦聚焦于于于于于于数据的变更数据的变更数据的变更数据的变更数据的变更数据的变更MVW=Model+View+WhatEverMVW=Model+View+WhatEverMVW=Model+View+WhatEverMVW=Model+View+WhatEverMVW=Model+View+WhatEverMVW=Model+View+WhatEver推荐阅读：http:/ .实现一个实现一个实现一个实现一个实现一个实现一个下拉框下拉框下拉框下拉框下拉框下拉框(三级三级三级三级三级三级+级联级联级联级联级联级联)，需要多少代码？，需要多少代码？，需要多少代码？，需要多少代码？，需要多少代码？，需要多少代码？实现一个实现一个实现一个实现一个实现一个实现一个表格表格表格表格表格表格(分页分页分页分页分页分页+过滤过滤过滤过滤过滤过滤+排序排序排序排序排序排序+编辑编辑编辑编辑编辑编辑)，需要多少代码？，需要多少代码？，需要多少代码？，需要多少代码？，需要多少代码？，需要多少代码？实现一个实现一个实现一个实现一个实现一个实现一个树形菜单树形菜单树形菜单树形菜单树形菜单树形菜单(可缩展可缩展可缩展可缩展可缩展可缩展+级联选择级联选择级联选择级联选择级联选择级联选择)，需要多少代码？，需要多少代码？，需要多少代码？，需要多少代码？，需要多少代码？，需要多少代码？实现一个实现一个实现一个实现一个实现一个实现一个购物车购物车购物车购物车购物车购物车(商品展示商品展示商品展示商品展示商品展示商品展示+加入加入加入加入加入加入/移除购物车移除购物车移除购物车移除购物车移除购物车移除购物车+修改数量修改数量修改数量修改数量修改数量修改数量+实时计算总价实时计算总价实时计算总价实时计算总价实时计算总价实时计算总价)，需要多少代码，需要多少代码，需要多少代码，需要多少代码，需要多少代码，需要多少代码？ AA AA A的数据源和的数据源和的数据源和的数据源和的数据源和的数据源和modelmodelmodelmodelmodelmodel定义下拉框定义下拉框定义下拉框定义下拉框定义下拉框定义下拉框B BB BB B的数据源和的数据源和的数据源和的数据源和的数据源和的数据源和modelmodelmodelmodelmodelmodel在在在在在在$watch$watch$watch$watch$watch$watch里更新里更新里更新里更新里更新里更新modelmodelmodelmodelmodelmodel引用引用引用引用引用引用JQueryJQueryJQueryJQueryJQueryJQuery程序猿程序猿程序猿程序猿程序猿程序猿AngularJSAngularJSAngularJSAngularJSAngularJSAngularJS攻城狮攻城狮攻城狮攻城狮攻城狮攻城狮10行!http:/ -总结总结总结总结时刻时刻时刻时刻时刻时刻以数据为中心以数据为中心以数据为中心以数据为中心以数据为中心以数据为中心进行思考进行思考进行思考进行思考进行思考进行思考构思数据结构构思数据结构构思数据结构构思数据结构构思数据结构构思数据结构构思操作逻辑，构思操作逻辑，构思操作逻辑，构思操作逻辑，构思操作逻辑，构思操作逻辑，声明式声明式声明式声明式声明式声明式双向绑定双向绑定双向绑定双向绑定双向绑定双向绑定VIEWVIEWVIEWVIEWVIEWVIEW，慎用逻辑，慎用逻辑，慎用逻辑，慎用逻辑，慎用逻辑，慎用逻辑忘记忘记忘记忘记忘记忘记我有这么一个我有这么一个我有这么一个我有这么一个我有这么一个我有这么一个DOMDOMDOMDOMDOMDOM，我想让它实现，我想让它实现，我想让它实现，我想让它实现，我想让它实现，我想让它实现XXXXXXXXXXXXXXXXXX除了除了除了除了除了除了DirectiveDirectiveDirectiveDirectiveDirectiveDirective，其他地方，其他地方，其他地方，其他地方，其他地方，其他地方决不决不决不决不决不决不能操作能操作能操作能操作能操作能操作DOMDOMDOMDOMDOMDOM善于内置指令组合，适当写自定义指令善于内置指令组合，适当写自定义指令善于内置指令组合，适当写自定义指令善于内置指令组合，适当写自定义指令善于内置指令组合，适当写自定义指令善于内置指令组合，适当写自定义指令再看到乱操作DOM剁手!ThinkinginAngularLook Inside Look Inside Look Inside Look Inside Look Inside Look Inside 启动过程启动过程启动过程启动过程启动过程启动过程浏览器载入浏览器载入浏览器载入浏览器载入浏览器载入浏览器载入HTMLHTMLHTMLHTMLHTMLHTML，解析成，解析成，解析成，解析成，解析成，解析成DOMDOMDOMDOMDOMDOM加载加载加载加载加载加载AngularAngularAngularAngularAngularAngular类库类库类库类库类库类库DOMContentLoadedDOMContentLoadedDOMContentLoadedDOMContentLoadedDOMContentLoadedDOMContentLoaded事件中开始事件中开始事件中开始事件中开始事件中开始事件中开始bootstrapbootstrapbootstrapbootstrapbootstrapbootstrap寻找寻找寻找寻找寻找寻找 ng-appng-appng-appng-appng-appng-app，注入服务注入服务注入服务注入服务注入服务注入服务编译编译编译编译编译编译DOMDOMDOMDOMDOMDOM并链接到对于的并链接到对于的并链接到对于的并链接到对于的并链接到对于的并链接到对于的scopescopescopescopescopescope数据数据数据数据数据数据Look Inside Look Inside Look Inside Look Inside Look Inside Look Inside 执行期执行期执行期执行期执行期执行期浏览器等待用户事件触发（用户交互，定时器，网络事件浏览器等待用户事件触发（用户交互，定时器，网络事件浏览器等待用户事件触发（用户交互，定时器，网络事件浏览器等待用户事件触发（用户交互，定时器，网络事件浏览器等待用户事件触发（用户交互，定时器，网络事件浏览器等待用户事件触发（用户交互，定时器，网络事件）浏览器执行事件回调，进入浏览器执行事件回调，进入浏览器执行事件回调，进入浏览器执行事件回调，进入浏览器执行事件回调，进入浏览器执行事件回调，进入JavascriptJavascriptJavascriptJavascriptJavascriptJavascript上下文上下文上下文上下文上下文上下文AngularAngularAngularAngularAngularAngular在在在在在在$apply$apply$apply$apply$apply$apply中接管了中接管了中接管了中接管了中接管了中接管了JSJSJSJSJSJS的执行部分的执行部分的执行部分的执行部分的执行部分的执行部分AngularAngularAngularAngularAngularAngular进入进入进入进入进入进入$digest$digest$digest$digest$digest$digest循环循环循环循环循环循环AngularAngularAngularAngularAngularAngular进行脏数据检查进行脏数据检查进行脏数据检查进行脏数据检查进行脏数据检查进行脏数据检查批量更新批量更新批量更新批量更新批量更新批量更新DOMDOMDOMDOMDOMDOM，$digest$digest$digest$digest$digest$digest结束结束结束结束结束结束浏览器开始渲染浏览器开始渲染浏览器开始渲染浏览器开始渲染浏览器开始渲染浏览器开始渲染Look Inside Look Inside Look Inside Look Inside Look Inside Look Inside 执行期示例执行期示例执行期示例执行期示例执行期示例执行期示例编译期编译期编译期编译期编译期编译期AngularAngularAngularAngularAngularAngular解析解析解析解析解析解析Directive:Directive:Directive:Directive:Directive:Directive:inputtextinputtextinputtextinputtextinputtextinputtext解析解析解析解析解析解析ng-modelng-modelng-modelng-modelng-modelng-model并为并为并为并为并为并为inputinputinputinputinputinput绑定绑定绑定绑定绑定绑定keykeykeykeykeykey事件事件事件事件事件事件为为为为为为vm.namevm.namevm.namevm.namevm.namevm.name建立建立建立建立建立建立$watch$watch$watch$watch$watch$watch表达式，进行表达式，进行表达式，进行表达式，进行表达式，进行表达式，进行监听监听监听监听监听监听执行期执行期执行期执行期执行期执行期用户在用户在用户在用户在用户在用户在inputinputinputinputinputinput输入按键，触发了浏览器的输入按键，触发了浏览器的输入按键，触发了浏览器的输入按键，触发了浏览器的输入按键，触发了浏览器的输入按键，触发了浏览器的keykeykeykeykeykey事件事件事件事件事件事件事件回事件回事件回事件回事件回事件回调，调，调，调，调，调，进入进入进入进入进入进入JavascriptJavascriptJavascriptJavascriptJavascriptJavascript上下文上下文上下文上下文上下文上下文angularangularangularangularangularangular接管接管接管接管接管接管，在，在，在，在，在，在$applyapplyapplyapplyapplyapply中修改中修改中修改中修改中修改中修改scopescopescopescopescopescope的的的的的的namenamenamenamenamename取值取值取值取值取值取值触发触发触发触发触发触发$digest$digest$digest$digest$digest$digest流程流程流程流程流程流程脏数据检测，发现脏数据检测，发现脏数据检测，发现脏数据检测，发现脏数据检测，发现脏数据检测，发现$watch$watch$watch$watch$watch$watch列表中的列表中的列表中的列表中的列表中的列表中的namenamenamenamenamename值变更值变更值变更值变更值变更值变更通知对应的处理函数，通知对应的处理函数，通知对应的处理函数，通知对应的处理函数，通知对应的处理函数，通知对应的处理函数，更新更新更新更新更新更新DOMDOMDOMDOMDOMDOMAngularAngularAngularAngularAngularAngular退出执行上下文，退出退出执行上下文，退出退出执行上下文，退出退出执行上下文，退出退出执行上下文，退出退出执行上下文，退出JavascriptJavascriptJavascriptJavascriptJavascriptJavascript的事件处理函数的事件处理函数的事件处理函数的事件处理函数的事件处理函数的事件处理函数Look Inside Look Inside Look Inside Look Inside Look Inside Look Inside OtherOtherOtherOtherOtherOther脏数据检查脏数据检查脏数据检查脏数据检查 !=!=!=!=轮询检查轮询检查轮询检查轮询检查更新更新更新更新httpshttpshttpshttpshttpshttps:/:/:/:/:/:/docs.angularjs.org/guide/conceptsdocs.angularjs.org/guide/conceptsdocs.angularjs.org/guide/conceptsdocs.angularjs.org/guide/conceptsdocs.angularjs.org/guide/conceptsdocs.angularjs.org/guide/conceptshttp:/angular- Tips Some Tips Some Tips Some Tips Some Tips Some Tips-$apply-$apply-$apply-$apply-$apply-$apply的那些的那些的那些的那些的那些的那些事事事事事事永远永远永远永远忘不掉你：忘不掉你：忘不掉你：忘不掉你：Error:$applyalreadyinprogressError:$applyalreadyinprogressError:$applyalreadyinprogressError:$applyalreadyinprogress反模式：反模式：反模式：反模式：ifififif(!$scope.$phase)$scope.$apply(!$scope.$phase)$scope.$apply(!$scope.$phase)$scope.$apply(!$scope.$phase)$scope.$apply()()()()；理解理解理解理解$apply$apply$apply$apply的场景的场景的场景的场景需要使用它的场景，很少很少：需要使用它的场景，很少很少：需要使用它的场景，很少很少：需要使用它的场景，很少很少：DirectiveDirectiveDirectiveDirective里面的里面的里面的里面的element.bindelement.bindelement.bindelement.bindWebSocket.onWebSocket.onWebSocket.onWebSocket.on事件事件事件事件第三方插件修改第三方插件修改第三方插件修改第三方插件修改DOMDOMDOMDOM或数据后或数据后或数据后或数据后WorkaroundWorkaroundWorkaroundWorkaround：使用：使用：使用：使用$timeout(fn,0);$timeout(fn,0);$timeout(fn,0);$timeout(fn,0);https:/ Some Some Some Some Some Tips Tips Tips Tips Tips Tips 原型链的坑原型链的坑原型链的坑原型链的坑原型链的坑原型链的坑理解理解理解理解理解理解ScopeScopeScopeScopeScopeScope原型链原型链原型链原型链原型链原型链httpshttpshttpshttpshttpshttps:/:/:/:/:/:/ .避免原型链继承的坑避免原型链继承的坑避免原型链继承的坑避免原型链继承的坑避免原型链继承的坑避免原型链继承的坑即不能直接赋值为即不能直接赋值为即不能直接赋值为即不能直接赋值为即不能直接赋值为即不能直接赋值为$scope$scope$scope$scope$scope$scope上的基本类型上的基本类型上的基本类型上的基本类型上的基本类型上的基本类型需需需需需需包含一个点，即包含一个点，即包含一个点，即包含一个点，即包含一个点，即包含一个点，即“userInfo.name“userInfo.name“userInfo.name“userInfo.name“userInfo.name“userInfo.nameSome Tips Some Tips Some Tips Some Tips Some Tips Some Tips 装饰模式装饰模式装饰模式装饰模式装饰模式装饰模式使用场景使用场景使用场景使用场景使用场景使用场景：需要对原生需要对原生需要对原生需要对原生需要对原生需要对原生/第三方的第三方的第三方的第三方的第三方的第三方的Service/DirectiveService/DirectiveService/DirectiveService/DirectiveService/DirectiveService/Directive进行修改时进行修改时进行修改时进行修改时进行修改时进行修改时http:/http:/http:/http:/http:/http:/ Tips Some Tips Some Tips Some Tips Some Tips Some Tips 动态加载动态加载动态加载动态加载动态加载动态加载动态加载动态加载动态加载动态加载动态加载动态加载controller/service/controller/service/controller/service/controller/service/controller/service/controller/service/主要原理：主要原理：主要原理：主要原理：主要原理：主要原理：在在在在在在configconfigconfigconfigconfigconfig期保存期保存期保存期保存期保存期保存$controllerProvider/$controllerProvider/$controllerProvider/$controllerProvider/$controllerProvider/$controllerProvider/$provideprovideprovideprovideprovideprovide等引用等引用等引用等引用等引用等引用监听监听监听监听监听监听ngRoutengRoutengRoutengRoutengRoutengRoute的的的的的的$routeChangeStartrouteChangeStartrouteChangeStartrouteChangeStartrouteChangeStartrouteChangeStart事件事件事件事件事件事件利用利用利用利用利用利用routerouterouterouterouteroute的的的的的的resolveresolveresolveresolveresolveresolve去动态加载去动态加载去动态加载去动态加载去动态加载去动态加载httpshttpshttpshttpshttpshttps:/:/:/:/:/:/ h h h h hackmoduleackmoduleackmoduleackmoduleackmoduleackmodule的加载机制的加载机制的加载机制的加载机制的加载机制的加载机制https:/https:/https:/https:/https:/https:/ Tips Some Tips Some Tips Some Tips Some Tips Some Tips ngIncludengIncludengIncludengIncludengIncludengInclude作用域作用域作用域作用域作用域作用域常见需求：常见需求：常见需求：常见需求：常见需求：常见需求：同一个页面同一个页面同一个页面同一个页面同一个页面同一个页面includeincludeincludeincludeincludeinclude多个模板，但需要不同的多个模板，但需要不同的多个模板，但需要不同的多个模板，但需要不同的多个模板，但需要不同的多个模板，但需要不同的modelmodelmodelmodelmodelmodel分析：分析：分析：分析：分析：分析：TemplateTemplateTemplateTemplateTemplateTemplate中的变量名称一样，但在父模板中要用不同的中的变量名称一样，但在父模板中要用不同的中的变量名称一样，但在父模板中要用不同的中的变量名称一样，但在父模板中要用不同的中的变量名称一样，但在父模板中要用不同的中的变量名称一样，但在父模板中要用不同的modelmodelmodelmodelmodelmodel故需要有多级故需要有多级故需要有多级故需要有多级故需要有多级故需要有多级scopescopescopescopescopescope，每个，每个，每个，每个，每个，每个templatetemplatetemplatetemplatetemplatetemplate关联到一个关联到一个关联到一个关联到一个关联到一个关联到一个scopescopescopescopescopescope方案：方案：方案：方案：方案：方案：ngInitngInitngInitngInitngInitngInitdivng-include=partials/addressform.htmldivng-include=partials/addressform.htmldivng-include=partials/addressform.htmldivng-include=partials/addressform.htmldivng-include=partials/addressform.html onloadonloadonloadonloadonloadonloaddivng-include=divng-include=divng-include=divng-include=divng-include=DirectiveDirectiveDirectiveDirectiveDirectiveDirectivescope:truescope:truescope:truescope:truescope:truescope:true案例展示案例展示案例展示案例展示案例展示案例展示 -ngshowcase-ngshowcase-ngshowcase-ngshowcase-ngshowcase-ngshowcasehttp:/ -worktile-worktile-worktile-worktile-worktile-worktilehttps:/ -2048-2048-2048-2048-2048-2048http:/www.ng- usJoin usJoin usJoin usJoin usJoin 前端攻城狮最前沿的技术(Angular+NodeJS)移动互联网AndroidAndroid技术痴迷者加入高大上的游戏平台客户端研发