app 2018-10-25

1. require.js的由来

image.png

使用：

　<script src="js/require.js" defer async="true" ></script>  //  是的异步加载require.js
    <script src="js/require.js" data-main="js/main"></script>  // 自己js模块

从最原始的模块到require的进化

• 模块：实现特定功能的一组方法 ,缺点： 污染了全局变量，模块命名冲突，模块之间看不出直接关系

function f1(){}
function f2(){}
...

• 对象：将模块成员都放到一个对象里面, 缺点： 会暴露所有模块成员，内部状态码可以被外部改写。。。

var module1 = {
  name: 'cdd',
  sayName: function(){alert(this.name)}
};
module1.name = 'zz'

• 立即执行函数写法，可以达到不暴露私有成员的目的

var module1 = (
    function() {
      var age = 10;
      var f1 = function() { console.log(age++)};
      var f2 = function() { console.log(age--)};
      return {
        f1: f1,
        f2: f2
      }
   }
)();

• 通行的js模块规范共用两种： CommonJs和AMD，nodejs的模块就是参照CommenJS规范实现的，，但是浏览器端的模块不能采用“同步加载（synchronous）”，只能采用异步加载（asynchronous）。。这就是AMD规范诞生的背景

define(['module1'], function(module1){
  function foo() {
     module1.doSomething();     
  }
  return {
   foo: foo
  };
});

• require.js 如何加载模块

require.config({
　　　　baseUrl: "js/lib",
　　　　paths: {
　　　　　　"jquery": "jquery.min",
　　　　　　"underscore": "underscore.min",
　　　　　　"backbone": "backbone.min"
　　　　}
　　});

// 加载AMD规范的模块
　　// main.js
　　require(['math'], function (math){
　　　　alert(math.add(1,1));
　　});

// 加载非规范的模块，require.js加载的模块，必须是按照AMD规范、用define()函数定义的模块。
require.config({
  shim: {
    'jquery.scroll': {
　　　　　　deps: ['jquery'],
　　　　　　exports: 'jQuery.fn.scroll'
　　　　}
    }
})

2. EJS语法

• 安装 npm install ejs
• 语法糖：在 <%...%> 块中安排 JavaScript 代码，利用最传统的方式 <%=输出变量%>

3. backbone

• Backbone 惟一的依赖就是underscore.js（http://documentcloud.github.com/underscore/），
  它是一个类库，由一些非常有用的工具和通用目的的JavaScript 函数组成。

• 模型（Model）： 在Backbone.Model 上调用extend() 函数来创建Backbone 模型; Backbone 模型本身是构造函数，所以可以使用new 关键词来生成一个新的实例

• 集合（Collection）:

• 视图（View）:每个视图有一个render()函数，一旦视图需要重绘，应该调用此函数，

var UserView = Backbone.View.extend({
initialize: function(){ /* ... */ },
render: function(){ /* ... */ }
});

• 委托事件（events）：

var TodoView = Backbone.View.extend({
events: {
"change input[type=checkbox]" : "toggleDone",
"click .destroy" : "clear",
},
toggleDone: function(e){ /* ... */},
clear: function(e){ /* ... */}
});

• 绑定上下文：
• 控制器（Controller）:

var PageController = Backbone.Controller.extend({
routes: {
"": "index",
"help": "help", // #help
"search/:query": "search", // #search/kiwis
"search/:query/p:page": "search" // #search/kiwis/p7
},
index: function(){ /* ... */ },
help: function() {
// ...
},
search: function(query, page) {
// ...
}
});

4. (zepto) jquery

5. bridge

6. lizard