前端模块化开发

1. 前端模块化开发2015/03/31 @fuqiang3

2. http://en.wikipedia.org/wiki/CommonJS
http://wiki.ecmascript.org/doku.php?id=harmony:modules
javascript 模块化

4. 优点
• 标准，易用，工程化
• 分布式，解耦依赖，复用性高

5. 缺点
• 前端请求数较多
• 需要构建工程
• 模块命名数较多，粒度控制复杂

6. 方案
• commonjs AMD/CMD
• ES6 modules loader
• $import/$include

7. Lithe.js
Flexible front-end javascript loader

8. 什么是 lithe.js
A browser-side script loader,compatible with the de facto
standards(NodeJS/CommonJS). It's very simple and small,only 2.7kb gzipped.

9. 怎么用?
• define
• require
• use
• config

10. define
//path/to/file.js
define('path/to/file',function(require,exports,module){
var file = 'path/to/file.js';
exports.filename = 'file.js';
exports.filedir = 'path/to/';
/**
* module.exports = {
* filename:'file.js',
* filedir:'path/to'
* };
*/
});

11. require
//path/to/app.js
define('path/to/app',function(require,exports,module){
var file = require('path/to/file');
console.log(file.filename); //file.js
console.log(file.filedir); //path/to
module.exports = 'i am app.js';
});

12. use
//anywhere
lithe.use('path/to/app',function(app){
console.log(app); // i am app.js
});
//or
lithe.use('a.js','b.js',function(a,b){
//a and b has required;
});

13. config
define('config',function(require,exports,module){
module.exports = {
//it will replace the real BASEPATH
basepath:'http://localhost/debug/path',
//logogram
alias:{
'app':'path/to/app',
'file':'path/to/file',
//Relative directory proxy
'UI':'../'
}
};
});
define('someOtherJs',function(){
var app = require('app'),
file = require('file');
});

14. 如何构建？
If you use GruntJs to build your project , you can use
grunt-lithe or use lithe’s Nodejs API.

15. 怎么部署到页面
<script src="lithe.js"
data-config="config.js"
data-path="http://domain.com/"
data-debug="true"
data-main="app.js">
</script>

16. 文档
https://github.com/litheModule/lithe

17. 实战
https://github.com/litheModule/litheExample
http://news.sina.com.cn/c/z/2015qglh/

20. Q&A