前端MV*杂谈

1 1 1 1 前端历史杂谈 2 2 2 2 前端MV
MV MV MV* * * *初探 3 3 3 3 AngularJS AngularJS AngularJS AngularJS 4 4 4 4 Web Components Web Components Web Components Web Components

Part One 前端历史杂谈

石器时代石器时代石器时代石器时代 1 1 1 1 Part 1:
Part 1: Part 1: Part 1: 前端历史杂谈前端历史杂谈前端历史杂谈前端历史杂谈

Part 1: Part 1: Part 1: 前端历史杂谈前端历史杂谈前端历史杂谈前端历史杂谈静态页面 <html> <head> <title>手游宝测试一</title> </head> <body> <h1>主标题</h1> <p>段落内容</p> </body> </html>

Part 1: Part 1: Part 1: 前端历史杂谈前端历史杂谈前端历史杂谈前端历史杂谈静态页面+简单逻辑 <html> <head> <title>手游宝测试二</title> </head> <body> <input id="firstNameInput" type="text" /> <input id="lastNameInput" type="text" /> <input type="button" onclick="greet()" /> <script language="JavaScript"> function greet() { var firstName = document.getElementById("firstNameInput").value; var lastName = document.getElementById("lastNameInput").value; alert("Hello, " + firstName + "." + lastName); } </script> </body> </html>

Part 1: Part 1: Part 1: 前端历史杂谈前端历史杂谈前端历史杂谈前端历史杂谈结合服务器混合模式 <form method="post" action="username.php"> <p>First Name: <input type="text" name="firstName" /></p> <p>Last Name: <input type="text" name="lastName" /></p> <input type="submit" value="Submit" /> </form> 服务端技术：CGI、ASP、JSP、PHP等

Part 1: Part 1: Part 1: 前端历史杂谈前端历史杂谈前端历史杂谈前端历史杂谈结合服务器混合模式 <html> <body> <p>Hello world!</p> <p> <?php echo "Hello 手游宝!" ?> </p> </body> </html> 服务端技术：CGI、ASP、JSP、PHP等

Part 1: Part 1: Part 1: Part 1: 前端历史杂谈前端历史杂谈
前端历史杂谈前端历史杂谈组件化萌芽 <html> <head> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css"> <script> $(function() { $( "#datepicker" ).datepicker(); }); </script> </head> <body> <p>Date: <input type="text" id="datepicker"></p> </body> </html> 把不同的功能模块独立成一个JS，然后根据页面需要引用。石器时代石器时代石器时代石器时代 1 1 1 1

前端历史杂谈前端历史杂谈组件化萌芽 <html> <body> <form runat="server"> <p>Enter a number from 1 to 100: <asp:TextBox id="tbox1" runat="server" /> <asp:Button Text="Submit" runat="server" /> </p> <p> <asp:RangeValidator ControlToValidate="tbox1" MinimumValue="1" MaximumValue="100" Type="Integer" Text="The value must be from 1 to 100!" runat="server" /> </p> </form> </body> </html> 扩展HTML标签（HTML Component）DEMO 石器时代石器时代石器时代石器时代 1 1 1 1

前端历史杂谈前端历史杂谈铁器时代铁器时代铁器时代铁器时代 2 2 2 2

前端历史杂谈前端历史杂谈 AJAX 典型例子：GMail 铁器时代铁器时代铁器时代铁器时代 2 2 2 2

前端历史杂谈前端历史杂谈铁器时代铁器时代铁器时代铁器时代 2 2 2 2 Javascript 基础库

前端历史杂谈前端历史杂谈铁器时代铁器时代铁器时代铁器时代 2 2 2 2 JS代码模块化代码膨胀、重复的代码也越来越多。（命名空间）单页面应用（SPA）越来越多，产生一个问题：并非所有的功能都需要在页面加载时全部载入。（模块加载器： SeaJs、requireJs） AMD、CMD规范

前端历史杂谈前端历史杂谈工业时代工业时代工业时代工业时代 3 3 3 3

前端历史杂谈前端历史杂谈工业时代工业时代工业时代工业时代 3 3 3 3 小伙伴们开始思考一些问题如何更好的模块化开发业务数据如何组织界面和业务数据之间通过何种方式进行交互

MV*框架

前端历史杂谈前端历史杂谈工业时代工业时代工业时代工业时代 3 3 3 3 库和框架库库库库：一种工具，我提供了，你可以不使用，即使用了，也不会影响你自己的代码结构。框架框架框架框架：面向一个领域，提供一套解决方案，如果你用我，就得按照我的方式来办事。库：jQuery、Underscore 框架：dojo、Sencha

Part two 前端MV*初探

Part 2: Part 2: Part 2: Part 2: 前端前端
前端前端MV MV MV MV* * * *初探初探初探初探 MV MV MV MV* * * *框架框架框架框架 1 1 1 1 MV MV MV MV* * * *框架框架框架框架前端MVC、MVP、MVVM框架目的：WebApp

前端前端MV MV MV MV* * * *初探初探初探初探 MV MV MV MV* * * *框架框架框架框架 1 1 1 1 MVC模式 Model View Controller Business logic and data UI Components Request & Relay

前端前端MV MV MV MV* * * *初探初探初探初探 MV MV MV MV* * * *框架框架框架框架 1 1 1 1 MVP模式 Model View Presenter Business logic and data UI Components Handle all UI events

前端前端MV MV MV MV* * * *初探初探初探初探 MV MV MV MV* * * *框架框架框架框架 1 1 1 1 MVP模式特点： �用户直接与View交互； �View 与 Presenter 之间是一对一的对应关系； �View 与 Presenter 有关联，但与 Model 没有；

前端前端MV MV MV MV* * * *初探初探初探初探 MV MV MV MV* * * *框架框架框架框架 1 1 1 1 MVVM模式 Model View ViewModel Business logic UI Components Expose methods maintian the state of the view

前端前端MV MV MV MV* * * *初探初探初探初探 MV MV MV MV* * * *框架框架框架框架 1 1 1 1 MVVM模式特点： �用户直接与View交互； �View 与 ViewModel 之间是多对一的对应关系； �View 与 ViewModel 有双向绑定的关系；

前端前端MV MV MV MV* * * *初探初探初探初探 MV MV MV MV* * * *框架对比框架对比框架对比框架对比 2 2 2 2 MVC框架

前端前端MV MV MV MV* * * *初探初探初探初探 MV MV MV MV* * * *框架对比框架对比框架对比框架对比 2 2 2 2

前端前端MV MV MV MV* * * *初探初探初探初探 MV MV MV MV* * * *框架对比框架对比框架对比框架对比 2 2 2 2 AngularJS 2009年，Google开发特点：声明式的HTML 双向数据绑定单元测试弱：神奇的“脏检测”、调试麻烦、太多概念

前端前端MV MV MV MV* * * *初探初探初探初探 MV MV MV MV* * * *框架对比框架对比框架对比框架对比 2 2 2 2 Backbone CoffeeScript 作者 Jeremy Ashkenas 创建的； Backbone 和 Underscore 好基友；轻量、快速、内存占用小；可扩展性强；弱： �本身提供的功能少，需要借组第三方插件； �不支持双向数据绑定，意思是需要你编写大量的代码来处理模型更新之后触发的视图更新； �视图可以直接操作DOM，不利于做单元测试；

前端前端MV MV MV MV* * * *初探初探初探初探 MV MV MV MV* * * *框架对比框架对比框架对比框架对比 2 2 2 2 ember 核心开发是 Yehuda Katz，他也是 jQuery 的核心开发者； Ember 主张约定优于配置，也就是说不需要编写大量的样板代码；性能是Ember设计的主要目标；弱： � API稳定性不够； � Handlebars为了保持模板和数据模型的一致，用了太多的 <script>标签来污染DOM；

前端前端MV MV MV MV* * * *初探初探初探初探 MV MV MV MV* * * *框架对比框架对比框架对比框架对比 2 2 2 2 大小和依赖

前端前端MV MV MV MV* * * *初探初探初探初探 MV MV MV MV* * * *框架对比框架对比框架对比框架对比 2 2 2 2 总结 Angular Angular Angular Angular 拥有强大的HTML扩展能力，而且有强大的社区，有Google作支撑，它不但适用于快速原型开发，也适用于大型生产应用。 Backbone Backbone Backbone Backbone 崇尚极简主义，体积小，提供了构建应用所需要的最小集。 Ember Ember Ember Ember 综合能力比较强，对在Java、C#等面向对象语言中，有过MVC编程背景知识的程序员来说比较有意义；由于约定由于配置，所以可以节省很多不必要的代码。

Part three AngularJS

前端前端MV MV MV MV* * * *初探初探初探初探 AngularJS AngularJS AngularJS AngularJS 1 1 1 1 DEMO 简单的应用简单的应用简单的应用简单的应用

前端前端MV MV MV MV* * * *初探初探初探初探 ng-app ng-app ng-app ng-app指令指令指令指令标记 AngularJS 脚本的作用域 AngularJS AngularJS AngularJS AngularJS 1 1 1 1

前端前端MV MV MV MV* * * *初探初探初探初探 AngularJS AngularJS AngularJS AngularJS脚本标签脚本标签脚本标签脚本标签 angular.js 脚本运行后会寻找含有 ng-app 指令的HTML标签，然后启动 app。 AngularJS AngularJS AngularJS AngularJS 1 1 1 1

前端前端MV MV MV MV* * * *初探初探初探初探 ng-model ng-model ng-model ng-model指令指令指令指令建立双向数据绑定，如果改变了input文本框中的值，模型中的数据也将自动更新，反之亦然。 AngularJS AngularJS AngularJS AngularJS 1 1 1 1

前端前端MV MV MV MV* * * *初探初探初探初探双大括号绑定的表达式双大括号绑定的表达式双大括号绑定的表达式双大括号绑定的表达式 AngularJS模版的核心功能——绑定这个绑定告诉AngularJS需要运算其中的表达式并将结果插入 DOM中 AngularJS AngularJS AngularJS AngularJS 1 1 1 1

前端前端MV MV MV MV* * * *初探初探初探初探稍微复杂的应用稍微复杂的应用稍微复杂的应用稍微复杂的应用 AngularJS AngularJS AngularJS AngularJS 1 1 1 1

前端前端MV MV MV MV* * * *初探初探初探初探稍微复杂的应用稍微复杂的应用稍微复杂的应用稍微复杂的应用 DEMO AngularJS AngularJS AngularJS AngularJS 1 1 1 1

前端前端MV MV MV MV* * * *初探初探初探初探 $scope $scope $scope $scope $scope 是一个将视图绑定到控制器的对象。在MVC结构中，$scope对象相当于模型Model，它提供了一个绑定到 DOM元素的执行上下文。 AngularJS AngularJS AngularJS AngularJS 1 1 1 1

前端前端MV MV MV MV* * * *初探初探初探初探 $scope是一个对象，是Angular 表达式执行的上下文。 $scope是通过Controller的参数注入进来的，这个$scope只在当前的Controller中有效。 $scope $scope $scope $scope AngularJS AngularJS AngularJS AngularJS 1 1 1 1

前端前端MV MV MV MV* * * *初探初探初探初探 AngularJS AngularJS AngularJS AngularJS 1 1 1 1

前端前端MV MV MV MV* * * *初探初探初探初探 ng-controller ng-controller ng-controller ng-controller指令指令指令指令通过 ng-controller 指定控制器，控制器是一个JS函数，我们可以向Controller注入$scope对象，并为$scope对象添加行为。 AngularJS AngularJS AngularJS AngularJS 1 1 1 1

前端前端MV MV MV MV* * * *初探初探初探初探 Filter Filter Filter Filter（过滤器）（过滤器）（过滤器）（过滤器） AngularJS AngularJS AngularJS AngularJS 1 1 1 1

前端前端MV MV MV MV* * * *初探初探初探初探 AngularJS AngularJS AngularJS AngularJS绑定事件绑定事件绑定事件绑定事件 AngularJS AngularJS AngularJS AngularJS 1 1 1 1

前端前端MV MV MV MV* * * *初探初探初探初探依赖注入和依赖注入和依赖注入和依赖注入和XHR XHR XHR XHR Angular提供一个内置的ajax服务$http，如果要使用$http等内置的服务，则需要通过依赖注入的方式来操作。 AngularJS AngularJS AngularJS AngularJS 1 1 1 1

前端前端MV MV MV MV* * * *初探初探初探初探 ng- ng- ng- ng-view view view view指令指令指令指令 AngularJS AngularJS AngularJS AngularJS 1 1 1 1

前端前端MV MV MV MV* * * *初探初探初探初探 $routeProvider $routeProvider $routeProvider $routeProvider服务，会自动判断使用服务，会自动判断使用服务，会自动判断使用服务，会自动判断使用pushstate pushstate pushstate pushstate还是还是还是还是hashbang hashbang hashbang hashbang AngularJS AngularJS AngularJS AngularJS 1 1 1 1

前端前端MV MV MV MV* * * *初探初探初探初探 AngularJS AngularJS AngularJS AngularJS思维思维思维思维 2 2 2 2 传统前端开发思维 • 以JQuery为代表 • 以DOM DOM DOM DOM为中心 • 关注VIEW层的变化和用户操作 • 我有这样一个DOM，我想让它做XX 新一代前端开发思维 • 以AngularJS为代表 • 以Data Data Data Data为中心 • 聚焦于数据的变更 • MVW = Model + View + WhatEver

前端前端MV MV MV MV* * * *初探初探初探初探 AngularJS AngularJS AngularJS AngularJS指令指令指令指令 2 2 2 2 AngularJS中要如何操作DOM呢？

前端前端MV MV MV MV* * * *初探初探初探初探 AngularJS AngularJS AngularJS AngularJS指令指令指令指令 3 3 3 3 $ $ $ $ Directives Directives Directives Directives

前端前端MV MV MV MV* * * *初探初探初探初探指令指令指令指令就是一些附加在HTML元素上的自定义标记（例如：属性、元素、或CSS类），它告诉AngularJS的HTML编译器（$compile）在元素上附加某些指定的行为，甚至操作DOM、改变DOM元素，以及它的各级子节点。 Directives Directives Directives Directives（指令）（指令）（指令）（指令） AngularJS AngularJS AngularJS AngularJS指令指令指令指令 3 3 3 3 对于对于对于对于HTML HTML HTML HTML模板来说，模板来说，模板来说，模板来说，" " " "编译编译编译编译" " " "意味着什么？意味着什么？意味着什么？意味着什么？对于AngularJS来说，“编译”意味着把监听事件绑定在HTML元素上，使其可以交互。我们使用"编译"这个术语的原因就在于，把指令关联到DOM上的这种递归操作非常类似于编译式语言编译源代码的过程。

前端前端MV MV MV MV* * * *初探初探初探初探 Directives Directives Directives Directives（指令）（指令）（指令）（指令） AngularJS AngularJS AngularJS AngularJS指令指令指令指令 3 3 3 3 DEMO 具体例子可参考具体例子可参考具体例子可参考具体例子可参考: : : : AngularUI for AngularJS AngularUI for AngularJS AngularUI for AngularJS AngularUI for AngularJS

PPT PPT PPT PPT写不完，下次再分享吧写不完，下次再分享吧写不完，下次再分享吧写不完，下次再分享吧~~~ ~~~ ~~~ ~~~
下次分享主题：下次分享主题：下次分享主题：下次分享主题： Web Components & Polymer Web Components & Polymer Web Components & Polymer Web Components & Polymer

前端MV*杂谈

前端MV*杂谈

Other Decks in Technology

Featured

Transcript