1

目标:1.了解目前公司所用得sea.js,代码模块式开发。

 2.比较目前比较流行得bootstrap,angularJS,reactJS框架。

参考:http://seajs.org/docs/#docs
1)除了解决命名冲突和依赖管理,使用 Sea.js 进行模块化开发还可以带来很多好处:
1.模块的版本管理。通过别名等配置,配合构建工具,可以比较轻松地实现模块的版本管理。

2.提高可维护性。模块化可以让每个文件的职责单一,非常有利于代码的维护。Sea.js 还提供了 nocache、debug 等插件,拥有在线调试等功能,能比较明显地提升效率。

3.前端性能优化。Sea.js 通过异步加载模块,这对页面性能非常有益。Sea.js 还提供了 combo、flush 等插件,配合服务端,可以很好地对页面性能进行调优。

4.跨环境共享模块。CMD 模块定义规范与 Node.js 的模块规范非常相近。通过 Sea.js 的 Node.js 版本,可以很方便实现模块的跨服务器和浏览器共享。

前端的模块化构建可分为两大类。一类是以 Dojo、YUI3、国内的 KISSY 等类库为代表的大教堂模式。在大教堂模式下,所有组件都是颗粒化、模块化的,各组件之间层层分级、环环相扣。另一类是以 jQuery、RequireJS、国内的 Sea.js、OzJS 等类库为基础的集市模式。在集市模式下,所有组件彼此独立、职责单一,各组件通过组合松耦合在一起,协同完成开发。

AngularJs:开源得javascript框架,适合于开发客户端得单页面应用,它实现了前端MVC架构,专注于扩展html功能,提供动态技术绑定,且能与其他框架合作融洽。(大概有个概念,今后再详细了解)

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/242

深度探讨:
一.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 参数也可以被压缩成任意字符。


ashley_yang
5 声望0 粉丝