.index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script data-main="main.js" src="http://apps.bdimg.com/libs/require.js/2.1.11/require.min.js"></script><!-- 同步加载，会导致页面失去响应一段时间 --> <script data-main="main.js" src="http://apps.bdimg.com/libs/require.js/2.1.11/require.min.js" defer async="true"></script><!-- 异步加载，defer兼容IE --> </head> <body> <div></div> <script> /** * requireJs主要解决两个问题 * 1. 实现js文件的异步加载，避免网页失去响应 * 2. 管理模块之间的依赖性，便于代码的编写维护 * * requireJs加载分3部分 * 1. 引入：<script data-main="libs/main.js" src="http://apps.bdimg.com/libs/require.js/2.1.11/require.min.js"> * 2. 模块配置： * baseUrl->基础路径 paths->路径 * require.config({ baseUrl: "js/lib", paths: { "jquery": "jquery.min", "underscore": "underscore.min" } }); * 3. 主模块写法： * main.js，我把它称为”主模块”，意思是整个⽹网⻚页的⼊入⼝口代码 * require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){ // some code here }); * */ </script> </body> </html>
main.js
/* 根目录 | ------------------------------- | | | indx.html main.js libs | ---------------------------- | | | jquery showDate testShim */ require.config({ baseUrl:'libs', //表示基础路径paths中都是相对于baseUrl展开的 paths: { //对于标准模块定义方法通过paths属性来定义 "jquery" : "jquery", "showDate" : "showDate" }, shim : { //非标准模块化定义 testShim : { deps : [], exports : 'Obj2' //与非标准中暴露出来的变量名一致(testShim.js中的Obj2 || Obj1)，若此处为Obj1->下面fn1的值就为1，若为Obj2->下面fn1的值为2 } } }); require(["jquery","showDate"],function ($,showDate){ console.log($); //Jquery对象 showDate.show(); //1 }); require(["testShim"],function (testShim){ testShim.fn1(); //shim中exports定义的值与js模块中暴露的值一职才能正常运行 });
.showDate.js
define(function (){ var num = 10; function showDate(){ $('div')[0].innerHTML = '哈哈哈'; } return { show:showDate } }); /* define(['jquery'],function ($){ //在此处定义其依赖项 var num = 10; function showDate(){ $('div')[0].innerHTML = '哈哈哈1'; } return { show:showDate } }) */
.testShim.js
/** * 非标准第一种写法 * */ window.Obj1 = { //输出全局变量Obj1 fn1 : function(){ console.log(1) } }; /** * 非标准第二种写法 * */ (function (window){ //输出全局变量Obj2 var Obj2 = {}; Obj2.fn1 = function (){ console.log(2) } window.Obj2 = Obj2; })(window);