目标:1.了解目前公司所用得sea.js,代码模块式开发。javascript
2.比较目前比较流行得bootstrap,angularJS,reactJS框架。
参考:http://seajs.org/docs/#docs
1)除了解决命名冲突和依赖管理,使用 Sea.js 进行模块化开发还能够带来不少好处:
1.模块的版本管理。经过别名等配置,配合构建工具,能够比较轻松地实现模块的版本管理。html
2.提升可维护性。模块化可让每一个文件的职责单一,很是有利于代码的维护。Sea.js 还提供了 nocache、debug 等插件,拥有在线调试等功能,能比较明显地提高效率。前端
3.前端性能优化。Sea.js 经过异步加载模块,这对页面性能很是有益。Sea.js 还提供了 combo、flush 等插件,配合服务端,能够很好地对页面性能进行调优。java
4.跨环境共享模块。CMD 模块定义规范与 Node.js 的模块规范很是相近。经过 Sea.js 的 Node.js 版本,能够很方便实现模块的跨服务器和浏览器共享。react
前端的模块化构建可分为两大类。一类是以 Dojo、YUI三、国内的 KISSY 等类库为表明的大教堂模式。在大教堂模式下,全部组件都是颗粒化、模块化的,各组件之间层层分级、环环相扣。另外一类是以 jQuery、RequireJS、国内的 Sea.js、OzJS 等类库为基础的集市模式。在集市模式下,全部组件彼此独立、职责单一,各组件经过组合松耦合在一块儿,协同完成开发。git
AngularJs:开源得javascript框架,适合于开发客户端得单页面应用,它实现了前端MVC架构,专一于扩展html功能,提供动态技术绑定,且能与其余框架合做融洽。(大概有个概念,从此再详细了解)github
API 快速参考
1)seajs.config 用来对 Sea.js 进行配置。
https://github.com/seajs/seajs/issues/262
2)seajs.use 用来在页面中加载一个或多个模块。
https://github.com/seajs/seajs/issues/260
3)define 用来定义模块。Sea.js 推崇一个模块一个文件,遵循统一的写法:
https://github.com/seajs/seajs/issues/242
https://github.com/seajs/seajs/issues/259
4)require 用来获取指定模块的接口
https://github.com/seajs/seajs/issues/242
https://github.com/seajs/seajs/issues/259
5)require.async 用来在模块内部异步加载一个或多个模块。
https://github.com/seajs/seajs/issues/242
6)exports 用来在模块内部对外提供接口。
https://github.com/seajs/seajs/issues/242
7)module.exports 用来在模块内部对外提供接口。
https://github.com/seajs/seajs/issues/242bootstrap
深度探讨:
一.CMD 模块得构建过程
CMD模块在构建时,有两个基本操做:
1.提取操做,用来提取模块得标识id和一来dependencies.浏览器
a.js define(function(require, exports) { var b = require('./b'); }) 通过提取操做后,a.js 的源码会转换成临时文件: define('xxx/1.0.0/a', ['./b'], function(require, exports) { var b = require('./b'); })
2.压缩操做。通过上面得提取操做后,构建工具就能够调用任何JS压缩工具来进行压缩了,require 参数也能够被压缩成任意字符。性能优化