1.模块化
模块
模块组织指的是 JS 脚本的模块组织
模块职责：封装实现，暴露接口，声明依赖
模块系统
模块系统主要的两个职责：依赖管理，决定模块写法
commonjs
依赖声明：var math = require("./math")
暴露接口：exports.Caculator = Caculator
优点：
依赖管理成熟可靠；社区活跃，规范接受度高；运行时支持，模块定义非常简单；
文件级别的模块作用域隔离；可以处理循环依赖
缺点：
不是标准组织的规范；同步的 require 没有考虑浏览器环境
有工具把多个文件级别的模块打包成一个文件，引入单个文件可在浏览器中使用（browserify，webpack，component）
首先全局安装 browserify 模块，在命令行输入
browserify caculator.js>caculator-bunde.js
文件被函数体包起来，形参为 require，module，exports
AMD
由于 commonjs 天然的不适合异步环境
AMD 是天然地作用于异步环境（IO环境）
依赖声明及注入：define(["./math"],function(math){...})
接口暴露：return {Caculator:Caculator}
同时 AMD 支持 Simplified CommonJS wrapping，用一层函数把 commonjs 包裹起来：
define(function(require,exports){...})
获取依赖列表：通过 function.toString() 打印函数体，再用正则表达式提取
AMD 还有一个在草案阶段的 Loader Plugins 规范，定义了 AMD 可以加载其他资源
完整组件 = 结构 + 逻辑 + 样式
define(["regularjs","text!path/to/foo.html","css!path/to/style.css"],function(Regular,template){...})
优点：
依赖管理成熟可靠；社区活跃，规范接受度高；专为异步 IO 环境打造，适合浏览器环境；
支持类似 commonjs 的书写方式；通过插件 API 可支持加载非 js 资源；
成熟的打包工具，并可结合插件
缺点：
模块定义繁琐，需要额外嵌套；只是库级别的支持，需要引入额外库；
无法处理循环依赖；无法实现条件加载
ES6 module
未来JS支持的模块化标准
import｛add｝ from './math'; 引入依赖
export｛Caculator｝暴露接口
优点：
是真正的规范，未来的模块标准；语言级别的关键字支持；适应所有 JavaScript 运行；
同样可处理循环依赖
缺点：
规范并未到稳定级别；基本还没有浏览器支持；现有项目使用
System js
支持加载 AMD
支持加载 CommonJS
支持加载 ES6
支持 Transpiler，可支持任意资源
2.框架
框架和类库
库：针对特定问题的解答；不控制应用程序；被动的被调用
框架：控制反转；决定应用程序的生命周期；一般会集成大量的库
解决方案：DOM Communication Utility Templating Component Routing Architecture
为什么使用解决方案：
开发效率；可靠性（浏览器兼容性/测试覆盖）；更好的配套（文档/Demo/工具）
设计得更好；专业性
什么时候不使用：
问题过于简单；备选框架的质量与可控性无法保证；无法满足当前业务需求；团队中已有相关积累
解决方案
1.DOM操作
提供便利的 DOM 查询 / 操作 / 移动等操作
提供事件绑定 / 事件等支持
提供浏览器特性检测、UA 检测
提供节点属性、样式、类名等操作
保证所有以上操作实现目标平台的跨浏览器支持
jQuery
优点：社区强大，普及率高；包装对象，不污染原生；基本上专注于 DOM
缺点：包装对象，容易混淆；接口两义性；社区水平层次不齐，容易踩坑
Zepto.js
优点：小，启动快；接口与 jQuery 兼容；提供了简单的手势
缺点：与 jQuery 不能做到百分百对应；支持浏览器少、功能较弱
mootools
优点：概念清晰，没有包装对象；接口设计优秀；源码清晰易懂；不局限于 DOM 和 Ajax
缺点：扩展原生对象（致命）；社区衰弱
DOM（专业领域）
手势 Hammer.js：常见手势封装，包括 top,hold,transform,swipe等，并支持自定义扩展
局部滚动 scroll.js：移动端 position:fix + overflow:scroll 的救星
高级动画 Velocity.js：复杂动画序列实现，不仅限于 dom
视频播放 video.js：类似原生 video 标签的使用方式，对低级浏览器回退到 flash 播放
2.Communication
处理与服务器的请求响应
预处理请求数据 / 响应数据 Error / Success 的判断封装
多种类型请求，统一接口
处理浏览器兼容性
Request
优点：支持 JSONP；稳定 / IE6+ support；CORS 跨域；Promise/A 支持
quest
优点：更小的代码量；支持 XmlHttpRequest2；CORS 跨域；支持高级数据类型如 ArrayBuffer，Blob 和 FormData
socket.io
优点：实时性；支持二进制数据流；智能自动的回退支持（非二进制数据流）；多种后端语言支持
3.Utility
提供 JS 原生不提供的功能
方法门面包装，使其更易于使用
异步队列 / 流程控制
两种形式：Shim Extension
4. Templating
5.Component
提供基础组件 CSS 支持
提供常用组件如 Slider、Modal
提供声明式的调用方式
Bootstrap 和 Foundation
6.Routing
监听 url 变化，并通知注册的模块
通过 JavaScript 进行主动跳转
历史管理
对目标浏览器的兼容性支持
page.js：类似 Express.Router 的路由规则的前端路由库
Director.js：可以前后端使用一套规则来定义路由
Stateman：用于处理深层复杂路由的独立路由库
7.Architecture
提供一种范式帮助（强制）开发者进行模块解耦
视图与模型分离
更容易进行单元测试
更容易实现应用程序的扩展
网友评论