seajs使用demo
初试seajs,为下次项目的实战做准备:
html:
seajsDemo.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>seajsdemo</title> <script src="../js/seajs2.2.0/sea.js"></script> <script src="../js/seajs2.2.0/sea-debug.js"></script> </head> <body> <div class="wrap"> <span>使用seajs加载js</span> <div class="content"> 内容 </div> </div> </body> <script> var app = {}; app.debug = false; window.app.controller = "demo1"; seajs.config({ base:"../js/seaDemo", alias:{ "jQuery":"jquery.js" }, paths:{ "jQuery":"jquery.js" } }); seajs.use("../js/seaDemo/app.js"); </script><!--seajs入口--> </html>
js:
app.js
/** *seajs入口 *调用其他程序 */ define(["jQuery"],function(require,exports,module){ // window.$ = window.jQuery = require("jQuery"); exports.load = function(name){ require.async("../seaDemo/"+name+".js",function(controller){ if(typeof(controller.run) =="function"){ controller.run(); //运行需要加载的js } }) } /******/ window.app.load = exports.load; if(window.app.controller){ exports.load(window.app.controller); } /***调用加载**/ });
demo1.js
define(function(require,exports,module){ exports.run = function(){ alert("已调用demo1.js"); $(".content").text("hello seajs"); } });
目录结构:
html位置:demo/html/seajsDemo.html