requireJs
2017-11-03 本文已影响0人
前端小华子
RequireJS是一个JavaScript文件和模块加载器。
- RequireJS包含三个重要的函数：require,define和requirejs。
- 其中require和requirejs其实是同一个函数。
命名空间
模块定义
创建一个项目规划
QQ截图20171103183828.png
- 在html中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>requireJs</title>
</head>
<body>
<div id="div"></div>
<div id="div2"></div>
<ul id="ul">
<li><a href="javascript:void(0)">小逗比__PS</a></li>
<li><a href="javascript:void(0)">小逗比__HTML</a></li>
<li><a href="javascript:void(0)">小逗比__CSS</a></li>
<li><a href="javascript:void(0)">小逗比__JavaScript</a></li>
</ul>
// 你可以使用本地的--也可以使用cdn
// data-main = "js/main" 这是入口文件
<script data-main="js/main" src="https://cdn.bootcss.com/require.js/2.3.5/require.min.js"></script>
<script type="text/javascript">
</script>
</body>
</html>
- 创建一个main.js
这是写入require配置的，也是总文件，引入多个子文件
// 配置文件
require.config({
baseUrl: "./js",
paths:{ // 配置路径
'mobile' : "https://assets.alicdn.com/apps/top/c/sdk-mobile",
'jquery': "https://cdn.bootcss.com/jquery/3.2.1/jquery.min",
// 'zepto': "https://g.alicdn.com/sj/lib/zepto/zepto.min",
"sui" : "https://g.alicdn.com/msui/sm/0.5.6/js/sm.min",
'index': 'index',
'index2': 'index2',
},
//require.config()的配置对象
shim:{
'index':{ //这里引入的第一个js文件
// deps: ['zepto','mobile'], // deps 定义依赖 依赖于jquery
deps: ['jquery','mobile'], // deps 定义依赖 依赖于jquery
exports: 'writeIndex'
},
'index2':{ //这里引入的第二个js文件
deps: ['jquery','mobile'],
exports: 'writeIndex2'
}
}
})
//导入模块
require(['jquery','index','index2'], function ($,index,index2) {
//这里是指所有的js执行完，执行这里的代码
});
- 在 index.js 中使用jquery
define(function(){ //定义函数
$('#div').html("require模块化");
$('#ul').on("click","li a",function(){
$(this).css({color:'red'}).parent().siblings("li").children().css({color:"#00e"})
console.log(($(this).html()+"(你以为这就完事了？？我特么还可以再弹一次，有时候装逼就是这么简单！)"));
});
});
- 在index2中使用jquery
define(function(){
function writeIndex2(){
$("#div2").html("hello world")
}
return writeIndex2();
});
