seajs使用记
1、seajs使用外部依赖(第三方工具库,譬如jQuery)
错误做法:
define(function(require, exports, module){ // require可以下载外部依赖,但是他不能将其解析为seajs自身的模块,所以不能这样使用。 var $ = require('../../depency/3rd_lib/jquery.js'); $('#hi').html("aaaaaa"); });
正确做法1:
index.html <html> <head> <title>sea demo</title> <!-- <script type="text/javascript" src="../depency/3rd_lib/jquery.js"></script> --> <script type="text/javascript" src="../depency/3rd_lib/sea-debug.js"></script> </head> <body> <div id="hi"> </div> <script type="text/javascript"> seajs.use('../static/test/seaUtil.js', function(){ seajs.use('../static/test/seajsDemo.js'); }); </script> </body> </html> seaUtil.js define(function(require, exports, module){ /** * require可以下载外部依赖,但是他不能将其解析为seajs自身的模块,所以不能这样使用。 * 外部依赖引入推荐做法: * 1、将外部依赖单独放到一个seajs文件模块中引入,在首页seajs.use的callback里use其他模块,在callback中引入其他初始模块可以防止依赖未引入时使用 * 2、将外部依赖放在首页HTML中加载,在seajs文件模块中直接使用 */ require('../../depency/3rd_lib/jquery.js'); // $('#hi').html("aaaaaa"); }); seajsDemo.js define(function(require, exports, modeule){ var seaUtil = require('./seaUtil'); eBase = window.eBase = window.eBase || {}; app = window.app = window.app || {}; $.extend(eBase, { sayHello: function(){ alert('hello , gray boy @'); } }); app.userManager = app.userManager || {}; });
正确做法2:
index.html <html> <head> <title>sea demo</title> <script type="text/javascript" src="../depency/3rd_lib/jquery.js"></script> <script type="text/javascript" src="../depency/3rd_lib/sea-debug.js"></script> </head> <body> <div id="hi"> </div> <script type="text/javascript"> seajs.use('../static/test/seaUtil.js', function(){ seajs.use('../static/test/seajsDemo.js'); }); </script> </body> </html> seajsDemo.js define(function(require, exports, modeule){ var seaUtil = require('./seaUtil'); eBase = window.eBase = window.eBase || {}; app = window.app = window.app || {}; $.extend(eBase, { sayHello: function(){ alert('hello , gray boy @'); } }); app.userManager = app.userManager || {}; });