SeaJS TUI实践

Transcript

1. SeaJS + TUI实践 2012.10.08
2. SeaJS、CMD SeaJS：模块加载器 CMD：SeaJS的模块定义规范
3. 入门代码（HTML） <!doctype html> <html> <head> <title>Hello</title> </head> <body> <script src=“http://js.tudouui.com/js/v3/seajs/sea.js"></script> <script> seajs.config({ alias: { 'jquery‘ : ‘jquery/1.7.2/jquery.js‘, ‘hello’ : ’hello/dist/hello.js’ }, base : ‘http://js.tudouui.com/js/v3/’ }); seajs.use('/page/demo/dist/main.js'); </script> </body> </html>
4. 入门代码（main.js） define(function(require, exports, module) { var Hello = require(‘hello'); new Hello(); });
5. 入门代码（hello.js） define(function(require, exports, module) { var $ = require('jquery'); function Hello(){ this.render(); }; Hello.prototype.render = function(){ $('<h1>Hello SeaJS !</h1>').appendTo('body'); }; return Hello; });
6. 目录结构 static/v3/ jquery/ 1.8.1/ json/ 1.0.2/ tui/ dist/ src/ tuilib/ dist/ src/ hello/ dist/ src/ page/ demo/ dist/ src/
7. 改造老代码 • 用define(function(require) {…});包起来 • @import ./xxx.js改成require(‘./xxx’); • 用window暴露全局变量，或用exports返回 • TUI.module.use(‘/fn/tuidefer’, fn)改成require.async(‘tuidefer’, fn) • TUI.convertTpl(‘./xxx.tpl‘, data)改成TUI.convertTpl(require(‘./xxx.tpl’), data)
8. 这样做有什么好处？ • 可在浏览器端加载依赖，这样页面可以直 接调用源代码，无需打包，对单元测试友 好 • 控制入口，可重写任何URL（比如，加时间 戳，用debug插件调试） • 与Node模块非常相近，很容易迁移
9. 单元测试（V2） // stat.js，通过打包工具合并后才能调用 /** * @import fn/MRG32k3a.js * @import fn/global/common_stat.js * @import fn/global/pv_stat.js * @import fn/global/expose_stat.js */ var ComboPvStat = { // some code }; ComboPvStat.send();
10. 单元测试（V3） // stat.js，可以直接调用，无需打包 define(function(require, exports, module) { require('./MRG32k3a'); require('./common_stat'); require('./pv_stat'); require('./expose_stat'); var ComboPvStat = { // some code }; ComboPvStat.send(); });
11. 调试（V2） 依赖本地代理（makeasy）
12. 调试（V3） 本地运行HTTP服务，URL后加seajs-debug参数 // debug.js rules.push([ 'http://js.tudouui.com/js/v3/page/demo/dist', 'http://localhost/js/v3/page/demo/src' ]);
13. 打包、压缩（V2）
14. 打包、压缩（V3） // 安装SPM $ git clone https://github.com/seajs/spm.git $ cd spm $ npm install –g // 打包、压缩 $ cd v3/hello $ spm build
15. 参考文档 V3代码: trunk/static/js/v3 SeaJS：http://seajs.org/docs/#api CMD：https://github.com/seajs/seajs/issues/242 SPM：https://github.com/seajs/spm/wiki