标签:
原文链接:http://my.oschina.net/centerLife/blog/138251
源代码链接:https://github.com/lvshuang/seajs_exampl
功能:点击一个div弹出一个框 (CSS样式没写,主要是为了使用sea.js,加深对sea.js的熟练)
目录图:
代码
alert.js
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>点我点我。。。</title> <style> #al{ padding: 10px 20px; background: green; float: left; color: #fff; cursor: pointer; } </style> </head> <body> <div id="al">点我</div> <script src="../js/alert/sea-debug.js?t=123" data-config="./js/alert/sea-js-config.js?t=123"></script> <script type="text/javascript"> seajs.use([‘./js/alert/app‘],function(app){ app.script_load(‘alert‘) }) </script> </body> </html>
路由需要添加index.js
router.get(‘/alert‘,function(req,res,next){ res.render(‘alert‘,{ title: ‘sea.js‘ }); })
app.js
/** * Created by Administrator on 2016/7/8. * 项目主模块 */ define(function(require,exports,module){ //加载jQuery,并把$设置为全局变量 window.$ = window.jQuery = $ = require(‘/jquery‘) /*require(‘/jquery.validate‘);*/ //定义一个全局的模块加载函数.module为模块名,options为参数 exports.script_load = function(module,options){ //使用require.async异步加载模块。模块需要提供一个固定的对外调用接口,这里定义为run。 require.async(‘/js/alert/alert.js‘,function(m){ if(typeof(m.run) === ‘function‘){ m.run(options) } }); } window.script_load = exports.script_load(); });
其中require.async(a,b(m){})函数a是路径,如果a是null,如果不为空,比如:"/js/alert/alert.js",不能编写 "js/alert/alert.js"或者"./js/alert/alert.js",会报if(typeof(m.run) === ‘function‘) 的 undefined bug;b函数m则会报undefined错误,具体错误原因我也在寻求。。。
alert.js
/** * Created by Administrator on 2016/7/8. */ define(function(require,exports,module){ exports.run = function(){ var $ = function(id){ return document.getElementById(id); } /* $(‘al‘).click(function(){ alert(‘弹出一个框。。。‘); });*/ $(‘al‘).onclick = function(){ alert(‘弹出一个框。。。。‘) } }; })
没使用jQuery,所以click()函数使用会报错,使用onclick()
sea-js-config.js
seajs.config({ // 配置插件 plugins: [‘shim‘], // 配置别名 alias: { // 配置 jquery 的 shim 配置,这样我们就可以通过 require(‘jquery‘) 来获取 jQuery ‘jquery‘: { src: ‘/jquery.js‘, exports: ‘jQuery‘ }, // 配置 jquery validate ‘jquery.validate‘: { src: ‘/jquery.validate.js‘, deps: [‘jquery‘]//validate依赖jquery,所在在这里做了配置 } } });
标签:
原文地址:http://www.cnblogs.com/six4/p/5661328.html