模块
例子：
//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
网友评论