段落内容
\n\t\t\n\t\n\n##2. 带有简单逻辑的界面\n这个界面带有一段JavaScript代码，用于拼接两个输入框中的字符串，并且弹出窗口显示。\n\n\t\n\t\t\n\t\t\tHello world!
\n\t\t\t\n\t\t\t<%\n\t\t\t\tresponse.write(\"Hello world from server!\")\n\t\t\t%>\n\t\t\t
\n\t\t\n\t\n\n##4.组件化的萌芽\n\n这个时代，也逐渐出现了组件化的萌芽。比较常见的有服务端的组件化，比如把某一类服务端功能单独做成片段，然后其他需要的地方来include进来，典型的有：ASP里面数据库连接的地方，把数据源连接的部分写成conn.asp，然后其他每个需要操作数据库的asp文件包含它。\n\n上面所说的是在服务端做的，浏览器端通常有针对JavaScript的，把某一类的Javascript代码写到单独的js文件中，界面根据需要，引用不同的js文件。针对界面的组件方式，通常利用frameset和iframe这两个标签。某一大块有独立功能的界面写到一个html文件，然后在主界面里面把它当作一个frame来载入，一般的B/S系统集成菜单的方式都是这样的。\n\n此外，还出现了一些基于特定浏览器的客户端组件技术，比如IE浏览器的HTC（HTML Component）。这种技术最初是为了对已有的常用元素附加行为的，后来有些场合也用它来实现控件。微软ASP.net的一些版本里，使用这种技术提供了树形列表，日历，选项卡等功能。HTC的优点是允许用户自行扩展HTML标签，可以在自己的命名空间里定义元素，然后，使用HTML，JavaScript和CSS来实现它的布局、行为和观感。这种技术因为是微软的私有技术，所以逐渐变得不那么流行。\n\nFirefox浏览器里面推出过一种叫XUL的技术，也没有流行起来。\n\n#二. 铁器时代\n\n这个时代的典型特征是Ajax的出现。\n\n##1. AJAX\nAJAX其实是一系列已有技术的组合，早在这个名词出现之前，这些技术的使用就已经比较广泛了，GMail因为恰当地应用了这些技术，获得了很好的用户体验。\n\n由于Ajax的出现，规模更大，效果更好的Web程序逐渐出现，在这些程序中，JavaScript代码的数量迅速增加。出于代码组织的需要，“JavaScript框架”这个概念逐步形成，当时的主流是prototype和mootools，这两者各有千秋，提供了各自方式的面向对象组织思路。\n\n##2. JavaScript基础库\n\nPrototype框架主要是为JavaScript代码提供了一种组织方式，对一些原生的JavaScript类型提供了一些扩展，比如数组、字符串，又额外提供了一些实用的数据结构，如：枚举，Hash等，除此之外，还对dom操作，事件，表单和Ajax做了一些封装。\n\nMootools框架的思路跟Prototype很接近，它对JavaScript类型扩展的方式别具一格，所以在这类框架中，经常被称作“最优雅的”对象扩展体系。\n\n从这两个框架的所提供的功能来看，它们的定位是核心库，在使用的时候一般需要配合一些外围的库来完成。\n\njQuery与这两者有所不同，它着眼于简化DOM相关的代码。\n例如：\n\n- DOM的选择\n\njQuery提供了一系列选择器用于选取界面元素，在其他一些框架中也有类似功能，但是一般没有它的简洁、强大。\n\n\t$(\"*\")\t\t\t\t//选取所有元素\n\t$(\"#lastname\")\t\t//选取id为lastname的元素\n\t$(\".intro\")\t\t\t//选取所有class=\"intro\"的元素\n\t$(\"p\")\t\t\t\t//选取所有<p>元素\n\t$(\".intro.demo\")\t//选取所有 class=\"intro\"且class=\"demo\"的元素\n\n- 链式表达式：\n\n在jQuery中，可以使用链式表达式来连续操作dom，比如下面这个例子：\n\n如果不使用链式表达式，可能我们需要这么写：\n\n\tvar neat = $(\"p.neat\");\n\tneat.addClass(\"ohmy\");\n\tneat.show(\"slow\");\n\n但是有了链式表达式，我们只需要这么一行代码就可以完成这些：\n\n\t$(\"p.neat\").addClass(\"ohmy\").show(\"slow\");\n\n除此之外，jQuery还提供了一些动画方面的特效代码，也有大量的外围库，比如jQuery UI这样的控件库，jQuery mobile这样的移动开发库等等。\n\n##3. 模块代码加载方式\n\n以上这些框架提供了代码的组织能力，但是未能提供代码的动态加载能力。动态加载JavaScript为什么重要呢？因为随着Ajax的普及，jQuery等辅助库的出现，Web上可以做很复杂的功能，因此，单页面应用程序（SPA，Single Page Application）也逐渐多了起来。\n\n单个的界面想要做很多功能，需要写的代码是会比较多的，但是，并非所有的功能都需要在界面加载的时候就全部引入，如果能够在需要的时候才加载那些代码，就把加载的压力分担了，在这个背景下，出现了一些用于动态加载JavaScript的框架，也出现了一些定义这类可被动态加载代码的规范。\n\n在这些框架里，知名度比较高的是RequireJS，它遵循一种称为AMD（Asynchronous Module Definition）的规范。\n\n比如下面这段，定义了一个动态的匿名模块，它依赖math模块\n\n\tdefine([\"math\"], function(math) {\n\t\treturn {\n\t\t\taddTen : function(x) {\n\t\t\t\treturn math.add(x, 10);\n\t\t\t}\n\t\t};\n\t}); \n\n假设上面的代码存放于adder.js中，当需要使用这个模块的时候，通过如下代码来引入adder：\n\n\t\n\t\n\nRequireJS除了提供异步加载方式，也可以使用同步方式加载模块代码。AMD规范除了使用在前端浏览器环境中，也可以运行于nodejs等服务端环境，nodejs的模块就是基于这套规范定义的。（修订，这里弄错了，nodejs是基于类似的CMD规范的）\n\n#三. 工业革命\n\n这个时期，随着Web端功能的日益复杂，人们开始考虑这样一些问题：\n\n- 如何更好地模块化开发\n- 业务数据如何组织\n- 界面和业务数据之间通过何种方式进行交互\n\n在这种背景下，出现了一些前端MVC、MVP、MVVM框架，我们把这些框架统称为MV*框架。这些框架的出现，都是为了解决上面这些问题，具体的实现思路各有不同，主流的有Backbone，AngularJS，Ember，Spine等等，本文主要选用Backbone和AngularJS来讲述以下场景。\n\n##1. 数据模型\n\n在这些框架里，定义数据模型的方式与以往有些差异，主要在于数据的get和set更加有意义了，比如说，可以把某个实体的get和set绑定到RESTful的服务上，这样，对某个实体的读写可以更新到数据库中。另外一个特点是，它们一般都提供一个事件，用于监控数据的变化，这个机制使得数据绑定成为可能。\n\n在一些框架中，数据模型需要在原生的JavaScript类型上做一层封装，比如Backbone的方式是这样：\n\n\tvar Todo = Backbone.Model.extend({\n\t\t// Default attributes for the todo item.\n\t\tdefaults : function() {\n\t\t\treturn {\n\t\t\t\ttitle : \"empty todo...\",\n\t\t\t\torder : Todos.nextOrder(),\n\t\t\t\tdone : false\n\t\t\t};\n\t\t},\n\n\t\t// Ensure that each todo created has `title`.\n\t\tinitialize : function() {\n\t\t\tif (!this.get(\"title\")) {\n\t\t\t\tthis.set({\n\t\t\t\t\t\"title\" : this.defaults().title\n\t\t\t\t});\n\t\t\t}\n\t\t},\n\n\t\t// Toggle the 'done' state of this todo item.\n\t\ttoggle : function() {\n\t\t\tthis.save({\n\t\t\t\tdone : !this.get(\"done\")\n\t\t\t});\n\t\t}\n\t});\n\n上述例子中，defaults方法用于提供模型的默认值，initialize方法用于做一些初始化工作，这两个都是约定的方法，toggle是自定义的，用于保存todo的选中状态。\n\n除了对象，Backbone也支持集合类型，集合类型在定义的时候要通过model属性指定其中的元素类型。\n\n\t// The collection of todos is backed by *localStorage* instead of a remote server.\n\tvar TodoList = Backbone.Collection.extend({\n\t\t// Reference to this collection's model.\n\t\tmodel : Todo,\n\n\t\t// Save all of the todo items under the '\"todos-backbone\"' namespace.\n\t\tlocalStorage : new Backbone.LocalStorage(\"todos-backbone\"),\n\n\t\t// Filter down the list of all todo items that are finished.\n\t\tdone : function() {\n\t\t\treturn this.filter(function(todo) {\n\t\t\t\treturn todo.get('done');\n\t\t\t});\n\t\t},\n\n\t\t// Filter down the list to only todo items that are still not finished.\n\t\tremaining : function() {\n\t\t\treturn this.without.apply(this, this.done());\n\t\t},\n\n\t\t// We keep the Todos in sequential order, despite being saved by unordered \n\t\t//GUID in the database. This generates the next order number for new items.\n\t\tnextOrder : function() {\n\t\t\tif (!this.length)\n\t\t\t\treturn 1;\n\t\t\treturn this.last().get('order') + 1;\n\t\t},\n\n\t\t// Todos are sorted by their original insertion order.\n\t\tcomparator : function(todo) {\n\t\t\treturn todo.get('order');\n\t\t}\n\t});\n\n\n数据模型也可以包含一些方法，比如自身的校验，或者跟后端的通讯、数据的存取等等，在上面两个例子中，也都有体现。\n\nAngularJS的模型定义方式与Backbone不同，可以不需要经过一层封装，直接使用原生的JavaScript简单数据、对象、数组，相对来说比较简便。\n\n##2. 控制器\n\n在Backbone中，是没有独立的控制器的，它的一些控制的职责都放在了视图里，所以其实这是一种MVP（Model View Presentation）模式，而AngularJS有很清晰的控制器层。\n\n还是以这个todo为例，在AngularJS中，会有一些约定的注入，比如$scope，它是控制器、模型和视图之间的桥梁。在控制器定义的时候，将$scope作为参数，然后，就可以在控制器里面为它添加模型的支持。\n\n\tfunction TodoCtrl($scope) {\n\t\t$scope.todos = [{\n\t\t\ttext : 'learn angular',\n\t\t\tdone : true\n\t\t}, {\n\t\t\ttext : 'build an angular app',\n\t\t\tdone : false\n\t\t}];\n\n\t\t$scope.addTodo = function() {\n\t\t\t$scope.todos.push({\n\t\t\t\ttext : $scope.todoText,\n\t\t\t\tdone : false\n\t\t\t});\n\t\t\t$scope.todoText = '';\n\t\t};\n\n\t\t$scope.remaining = function() {\n\t\t\tvar count = 0;\n\t\t\tangular.forEach($scope.todos, function(todo) {\n\t\t\t\tcount += todo.done ? 0 : 1;\n\t\t\t});\n\t\t\treturn count;\n\t\t};\n\n\t\t$scope.archive = function() {\n\t\t\tvar oldTodos = $scope.todos;\n\t\t\t$scope.todos = [];\n\t\t\tangular.forEach(oldTodos, function(todo) {\n\t\t\t\tif (!todo.done)\n\t\t\t\t\t$scope.todos.push(todo);\n\t\t\t});\n\t\t};\n\t}\n\n本例中为$scope添加了todos这个数组，addTodo，remaining和archive三个方法，然后，可以在视图中对他们进行绑定。\n\n##3. 视图\n在这些主流的MV*框架中，一般都提供了定义视图的功能。在Backbone中，是这样定义视图的：\n\n\t// The DOM element for a todo item...\n\tvar TodoView = Backbone.View.extend({\n\t\t//... is a list tag.\n\t\ttagName : \"li\",\n\n\t\t// Cache the template function for a single item.\n\t\ttemplate : _.template($('#item-template').html()),\n\n\t\t// The DOM events specific to an item.\n\t\tevents : {\n\t\t\t\"click .toggle\" : \"toggleDone\",\n\t\t\t\"dblclick .view\" : \"edit\",\n\t\t\t\"click a.destroy\" : \"clear\",\n\t\t\t\"keypress .edit\" : \"updateOnEnter\",\n\t\t\t\"blur .edit\" : \"close\"\n\t\t},\n\n\t\t// The TodoView listens for changes to its model, re-rendering. Since there's\n\t\t// a one-to-one correspondence between a **Todo** and a **TodoView** in this\n\t\t// app, we set a direct reference on the model for convenience.\n\t\tinitialize : function() {\n\t\t\tthis.listenTo(this.model, 'change', this.render);\n\t\t\tthis.listenTo(this.model, 'destroy', this.remove);\n\t\t},\n\n\t\t// Re-render the titles of the todo item.\n\t\trender : function() {\n\t\t\tthis.$el.html(this.template(this.model.toJSON()));\n\t\t\tthis.$el.toggleClass('done', this.model.get('done'));\n\t\t\tthis.input = this.$('.edit');\n\t\t\treturn this;\n\t\t},\n\n\t\t//......\n\n\t\t// Remove the item, destroy the model.\n\t\tclear : function() {\n\t\t\tthis.model.destroy();\n\t\t}\n\t});\n\n上面这个例子是一个典型的“部件”视图，它对于界面上的已有元素没有依赖。也有那么一些视图，需要依赖于界面上的已有元素，比如下面这个，它通过el属性，指定了HTML中id为todoapp的元素，并且还在initialize方法中引用了另外一些元素，通常，需要直接放置到界面的顶层试图会采用这种方式，而“部件”视图一般由主视图来创建、布局。\n\n\t// Our overall **AppView** is the top-level piece of UI.\n\tvar AppView = Backbone.View.extend({\n\t\t// Instead of generating a new element, bind to the existing skeleton of\n\t\t// the App already present in the HTML.\n\t\tel : $(\"#todoapp\"),\n\n\t\t// Our template for the line of statistics at the bottom of the app.\n\t\tstatsTemplate : _.template($('#stats-template').html()),\n\n\t\t// Delegated events for creating new items, and clearing completed ones.\n\t\tevents : {\n\t\t\t\"keypress #new-todo\" : \"createOnEnter\",\n\t\t\t\"click #clear-completed\" : \"clearCompleted\",\n\t\t\t\"click #toggle-all\" : \"toggleAllComplete\"\n\t\t},\n\n\t\t// At initialization we bind to the relevant events on the `Todos`\n\t\t// collection, when items are added or changed. Kick things off by\n\t\t// loading any preexisting todos that might be saved in *localStorage*.\n\t\tinitialize : function() {\n\t\t\tthis.input = this.$(\"#new-todo\");\n\t\t\tthis.allCheckbox = this.$(\"#toggle-all\")[0];\n\n\t\t\tthis.listenTo(Todos, 'add', this.addOne);\n\t\t\tthis.listenTo(Todos, 'reset', this.addAll);\n\t\t\tthis.listenTo(Todos, 'all', this.render);\n\n\t\t\tthis.footer = this.$('footer');\n\t\t\tthis.main = $('#main');\n\n\t\t\tTodos.fetch();\n\t\t},\n\n\t\t// Re-rendering the App just means refreshing the statistics -- the rest\n\t\t// of the app doesn't change.\n\t\trender : function() {\n\t\t\tvar done = Todos.done().length;\n\t\t\tvar remaining = Todos.remaining().length;\n\n\t\t\tif (Todos.length) {\n\t\t\t\tthis.main.show();\n\t\t\t\tthis.footer.show();\n\t\t\t\tthis.footer.html(this.statsTemplate({\n\t\t\t\t\tdone : done,\n\t\t\t\t\tremaining : remaining\n\t\t\t\t}));\n\t\t\t} else {\n\t\t\t\tthis.main.hide();\n\t\t\t\tthis.footer.hide();\n\t\t\t}\n\n\t\t\tthis.allCheckbox.checked = !remaining;\n\t\t},\n\n\t\t//......\n\t});\n\n对于AngularJS来说，基本不需要有额外的视图定义，它采用的是直接定义在HTML上的方式，比如：\n\n\t