requireJs规范就是:在项目配置文件中配置好“js的路径”和“js文档中的函数模块的引用”,然后加载Html过程中就会根据配置好的路径和对应模块名称去加载代码,这样实现了js和HTML的分离,在另外的配置文档中管理js模块之间的依赖关系,这样有利于维护。
例如:
首先在HTML头部声明配置文件
<script src="../js/plugin/require.js" async="async" data-main="../js/main"></script>
async="async" 的意思是这些配置不必须在后面代码之前加载,即异步加载,如果配置的模块很多的话就可以先后台下载,等下好了就可以加载了。
类似的还有一个defer="defer" ,这个会让你的js配置等到<body>里面所有代码加载完才会加载,这时<body>里面不能require你的模块,因为还没有加载。
data-main="../js/main" ,这个是配置文件main的相对路径,require默认文件后缀.js所以后缀省略,还有就是这句话设置了所有js的根目录为../js/,后面配置路径就简化了。
配置文档是main.js
结构如下:
main.js
require.config({
//config即配置
paths: {
//paths设置模块名称和对应路径
jquery: 'https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js',
bootstrap: 'https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js',
sql: 'plugin/sql',
sqlTool: 'plugin/sqlTool',
database : 'database',
progressBar : 'showTools/progressBar'
},
shim: {
//shim配置模块间依赖关系
bootstrap: {
//bootstrap依赖于模块jquery
deps: ['jquery']
},
database: {
//database模块比较大,这里选择性暴露公有接口
init: function () {
//设置初始化对象的方法,给对象返回几个接口
return {
//设置接口的名称和对应引用
'submit': submit,
'showAllTables': showAllTables
}
}
},
progressBar: {
//暴露接口的另一种方法
export : 'proStart'
}
}
});
database的依赖关系写到了database.js里
define(['sql', 'sqlTool'], function () {
//database依赖于sql和sqlTool
return {
submit : function () {
},
showAllTables : function (label) {
},
///这里还可以写私有的函数只供给公有接口使用,外部看不到
}
});
然后在html的<body>中使用这些接口,例如:
<script>require(['database'], function (data) {data.showAllTables(ViewLabel)})</script>
<li onclick="require(['database'], function (data) {data.submit()})" ></li>
require模块方法的格式:
require(['progressBar'], function (bar) {
//方括号里写模块名,例如'progressBar', 回调函数里写具体的接口使用
bar.proStart('bar')
});