标签:
原文链接: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