SeaJS TUI实践

SeaJS + TUI实践 2012.10.08

SeaJS、CMD SeaJS：模块加载器 CMD：SeaJS的模块定义规范

入门代码（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>

入门代码（main.js） define(function(require, exports, module) { var Hello = require(‘hello'); new
Hello(); });

入门代码（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; });

目录结构 static/v3/ jquery/ 1.8.1/ json/ 1.0.2/ tui/ dist/ src/ tuilib/
dist/ src/ hello/ dist/ src/ page/ demo/ dist/ src/

改造老代码 • 用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)

这样做有什么好处？ • 可在浏览器端加载依赖，这样页面可以直接调用源代码，无需打包，对单元测试友好 • 控制入口，可重写任何URL（比如，加时间戳，用debug插件调试） • 与Node模块非常相近，很容易迁移

单元测试（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();

单元测试（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(); });

调试（V2）依赖本地代理（makeasy）

调试（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' ]);

打包、压缩（V2）

打包、压缩（V3） // 安装SPM $ git clone https://github.com/seajs/spm.git $ cd spm
$ npm install –g // 打包、压缩 $ cd v3/hello $ spm build

参考文档 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

SeaJS TUI实践

SeaJS TUI实践

luolonghao

More Decks by luolonghao

Other Decks in Technology

Featured

Transcript

SeaJS + TUI实践 2012.10.08

SeaJS、CMD SeaJS：模块加载器 CMD：SeaJS的模块定义规范

入门代码（HTML） <!doctype html> <html> <head> <title>Hello</title> </head> <body> <script src=“http://js.tudouui.com/js/v3/seajs/sea.js"></script>

入门代码（main.js） define(function(require, exports, module) { var Hello = require(‘hello'); new

入门代码（hello.js） define(function(require, exports, module) { var $ = require('jquery'); function

目录结构 static/v3/ jquery/ 1.8.1/ json/ 1.0.2/ tui/ dist/ src/ tuilib/

改造老代码 • 用define(function(require) {…});包起来 • @import ./xxx.js改成require(‘./xxx’); • 用window暴露全局变量，或用exports返回 •

这样做有什么好处？ • 可在浏览器端加载依赖，这样页面可以直接调用源代码，无需打包，对单元测试友好 • 控制入口，可重写任何URL（比如，加时间戳，用debug插件调试） • 与Node模块非常相近，很容易迁移

单元测试（V2） // stat.js，通过打包工具合并后才能调用 /** * @import fn/MRG32k3a.js * @import fn/global/common_stat.js

单元测试（V3） // stat.js，可以直接调用，无需打包 define(function(require, exports, module) { require('./MRG32k3a'); require('./common_stat'); require('./pv_stat');

调试（V2）依赖本地代理（makeasy）

调试（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' ]);

打包、压缩（V2）

打包、压缩（V3） // 安装SPM $ git clone https://github.com/seajs/spm.git $ cd spm

参考文档 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