模块

---

例子：

//math.js
var math = {
   add : function add( a , b ){ return  a+b },
   sub : function mul( a , b ){ return  a-b}
}

//caculator.js
var caculator = （ function( m ){
     var action = 'add'
     function compute( a , b ){
         switch( action ){
            case 'add' : return m.add(a,b);
            case 'sub' : return m.mul(a,b);
         }
     } 
     return{ 
        compute : compute
    }
})( math )

该 caculator 的问题：

• 显示依赖声明 （优点）
• 仍然污染了全局变量 （不足）
• 必须手动进行依赖管理 （不足）

命名空间

---

math.js

namespace('math',[],funciton){
    function add(a,b){ return a+b;}
    function sub(a,b){ return a-b;}    
    return{
        add : add,
        sub : sub
    } 
})

caculator.js

namespace('caculator',["math"],function( m ){
    var action = "add";
    function compute( a,b ){
        return m[action]( a,b );
    }
    return {
        compute : compute
    }
});

备注： 有依赖申明 ["math"]， 依赖的math被传入( m )

模块系统

---

1、依赖管理 （记载、分析、注入、初始化）

2、决定模块写法

commonjs/module
A module spec for javascript outside the browser

math.js

 function add( a , b ){ return  a+b },
 function sub( a , b ){ return  a-b}
 exports.add = add
 exports.sub = sub

commonjs

优点

• 依赖管理成熟可靠
• 社区活跃，规范接受度高
• 运行时支持，模块定义非常简单
• 文件级的模块作用域隔离
• 可以处理循环依赖

缺点

• 不是标准组织的规范
• 同步的require 没有考虑浏览器环境

AMD Asynchronous Module Definition

math.js

  define( [] ,function(){
       function add( a , b ){ return  a+b },
       function sub( a , b ){ return  a-b}

       //接口暴露
       return{
          add : add,
          sub : sub      
      }
  } )

caculator.js

依赖注入

caculator.js

loader plugins 草案
可以加载除了js以外的别的文件

loader plugins

AMD优点

• 依赖管理成熟可靠
• 社区活跃，规范接受度高
• 专为 异步IO环境 打造，适合浏览器环境
• 支持类似 Commonjs的书写方式
• 通过API 可以支持加载非JS资源
• 成熟的大包构建工具，并可结合插件

AMD缺点

• 模块定义繁琐，需要额外嵌套
• 只是 库级别 需要引入额外库
• 无法处理循环依赖
• 无法实现条件加载

ES6/module

---

es6示例

ES6优点

• 是真正的规范，未来的模块标准
• 语言级别的关键字支持
• 适应所有javascript运行时，包括浏览器
• 同样可以处理循环依赖

ES6缺点

• 规范并未达到稳定级别
• 级别还没有浏览器支持
• 先有项目使用，即使有大量的6 to 5的transpiler

Systemjs

Universal dynamic module loader 统一动态module loader

---

支持加载AMD
支持加载 Commonjs
支持加载ES6
支持transpiler， 可支持任意资源

框架

---

库与框架

库

• 针对特定问题的解答
• 不控制应用程序
• 被动的被调用

框架

• Inverse of control 控制反转 （最大的区别）
• 决定应用程序生命周期
• 一般会集成大量的库

框架

JS框架

---

** 1、mootoos 最好的源码阅读学习的资源,建议小型项目中使用 **

mootoo

优点

• 概念清晰，没有包装对象
• 接口设计优秀
• 源码清晰易懂
• 不局限于Dom和Ajax

缺点

• 扩展原生对象（致命）
• 社区衰弱

**2、jquery 最稳妥的方案 **

jquery

优点

• 社区强大，普及率高
• 包装对象，不污染原生
• 基本上专注于Dom

缺点

• 包装对象，容易混淆
• 接口两义性
• 社区水平层次不齐，容易踩坑

**3、zepto 移动端的备选品 **

zepto

优点

• 小，启动快
• 接口与jquery兼容
• 提供了简单的手势

缺点

• 与jQuery不能做到100%对应
• 支持浏览器少，功能较弱

4、hammer.js 手势相关

hammer

5、iscroll.js 局部滚动

iscroll

**6、velocity.js 高级动画 **

velocity

**7、video.js 视频播放 **

video.js

选框架的时候，Issue的总量与解决率比start 更重要

Communication 通信

• 处理与服务器的请求与响应
• 预处理请求数据/响应数据 Error/Success的判断封装
• 多种类型的请求，统一接口（xmlHttpRequest1/2,JSONP,Iframe）
• 处理浏览器兼容性

框架比较

---

boostrap&foundation

boostrap&foundation

Routing 路由

---

• 监听url变化，并通知注册的模块
• 通过javascript进行主动跳转
• 历史管理
• 对目标浏览器的兼容支持

routing 库

routing库

架构

---

目的：Architecture 解耦 MVC/MVVM/MV*

工程构建

• 项目结构
  • 后端模板
  • 前端实现

template webapp