RequireJS 上手使用
首先 点击此处 得到requirejs。
捣鼓了俩小时终于运行成功了,原因是因为require(['我是空格underscore',...],function(){...})的时候 变量多个空格(坑爹啊...)以此纪念一下吧!
大标题一:引用
<script src="lib/require.js" data-main="app"></script> 就是如此简单啦。data-main 为JS主入口,Main嘛 引用主要的入口文件。
此处为app.js 可省略扩展名。如果有多层目录就加上目录好了(这不废话吗...)。
require的诞生是为了解决JS加载导致的浏览器渲染失败和N多JS文件的依赖加载。例如以下情形:
<script src="1.js""></script>
<script src="2.js""></script>
<script src="3.js""></script>
<script src="4.js""></script>
我挂了...
<script src="20.js""></script>
20个JS 和 一堆CSS 看着就头疼,而且一个挂了就全挂了。
等一下!万一require挂了怎么办?不怕,你可以加上异步加载defer和 async="true" 或者将引用放在文档底部。
Like this : <script src="lib/require.js" data-main="app" defer async="true" ></script>.
好了!这就加载完成了。测试一下吧
app.js => alert('You');
假装你打开了vscode 或者 sublime 或者 brackets 等等...并且成功的弹出了You!
大标题二:Config and Usage 配置和使用
介绍require三大方法 define([module],fn(){...}),require([module],fn(){...}),和config({...})。
小标题1:config({...})方法。此方法接受一个对象{...} 作为参数。
// when DOM is ready run code here...
//此种方式可能会发生 加载过大文档等待时间过长而引起waitSeconds错误。
});
Or
require(['domready'], function (domready){
domReady(function(){
})
});
define([
'text!readme.txt',
'image!lookyou.jpg',
'jquery'
],
function(readme,lookyou,$){
console.log(readme);
$('body').html(lookyou);
}
);
3.i18n.js(配置语言) json(加载json文件) mdown(加载markdown文件)等插件
4.更多详细文档移步官方API (虽然是生肉...^_^)