require.js的用法：

require.js的用法：
1.作用：
1》实现js文件的异步加载，避免网页失去相应。
2》管理模块之间的依赖性，便于代码的编写和维护。

2.下载
官网下载地址：http://requirejs.org/docs/download.html#latest
3.在主界面(index.html)中引入require.js
脚本文件放到</html>结束标签下面，有助于页面的先显示。
<script data-main="js/main.js" src="js/require.js"></script>
1》RequireJS默认假定所有的依赖资源都是js脚本，因此无需在module ID上再加".js"后缀
所以可以重写为：<script data-main="js/main" src="js/require.js"></script>
2》require.js 在加载的时候会检察data-main 属性
data-main指向的脚本中设置模板加载选项，然后加载第一个应用模块。.
你在main.js中所设置的脚本是异步加载的。
注意：如果你在页面中配置了其它JS加载，则不能保证它们所依赖的JS已经加载成功。
如下面的例子：
<script data-main="scripts/main" src="scripts/require.js"></script>
<script src="scripts/other.js"></script>

4.在main.js中用config方法，配置模块的加载顺序
main.js代码如下
require.config({
baseUrl: "js/lib",
paths: {"some":"some/v1.0","some1","some1/v1.0"},
shim:{"backbone":{deps: ['underscore', 'jquery'],exports: 'Backbone'},
"newOne":{deps: ['underscore', 'jquery'],exports: 'Backbone'}},

map:{ 'some/newmodule': {'foo': 'foo1.2'},
'some/oldmodule': {'foo': 'foo1.0'}},
urlArgs:"bust=" + (new Date()).getTime(),
deps:['app'] //会优先加载app.js的。

});
1》baseUrl:所有模块的查找根路径
2》paths：path映射那些不直接放置于baseUrl下的模块名，
用于模块名的path不应含有.js后缀，因为一个path有可能映射到一个目录。
路径解析机制会自动在映射模块名到path时添加上.js后缀。
3》shim：为那些没有使用define()来声明依赖关系、设置模块的"浏览器全局变量注入"型脚本做依赖和导出配置。
1>deps数组:表明该模块的依赖性(依赖什么js包)
2>exports：（输出的变量名），表明这个模块外部调时的名称。

4》map:对于给定的模块前缀，使用一个不同的模块ID来加载该模块。
5》urlArgs:RequireJS获取资源时附加在URL后面的额外的query参数。作为浏览器或服务器未正确配置时的“cache bust”手段很有用。
在开发中这很有用，但请记得在部署到生成环境之前移除它。

6》deps:指定要加载的一个依赖数组。
当将require设置为一个config object在加载require.js之前使用时很有用。一旦require.js被定义，这些依赖就已加载。使用deps就像调用require([])，
但它在loader处理配置完毕之后就立即生效。它并不阻塞其他的require()调用，它仅是指定某些模块作为config块的一部分而异步加载的手段而已。
5.require.config()方法还有好多对象的属性：packages，nodeIdCompat，waitSeconds，context，callback，enforceDefine，xhtml，
scriptType，skipDataMain。可以去官网上学习。

6.require();的用法：来加载所有你需要运行的scripts
1》它的执行优先于require.config()方法；
2》语法：
require(['jqery','b'],function($,b){});
数组为模块，毁掉函数为要执行的方法：其中参数$为jQuery。

7.AMD规范就是其中比较著名一个，全称是Asynchronous Module Definition，即异步模块加载机制
define([module-name?], [array-of-dependencies?], [module-factory-or-object]);
1》module-name: 模块标识，可以省略。
2》array-of-dependencies: 所依赖的模块，可以省略。
3》module-factory-or-object: 模块的实现，或者一个JavaScript对象。或者一个函数。

综合上述：require.config()写在main.js中，require()和define（）写在app.js中

require.js的用法：相关推荐

Javascript模块化编程require.js的用法
JS模块化工具requirejs教程(一):初识requirejs http://www.runoob.com/w3cnote/requirejs-tutorial-1.html JS模块化工具req ...
Javascript模块化编程（三）：require.js的用法
这个系列的第一部分和第二部分,介绍了Javascript模块原型和理论概念,今天介绍如何将它们用于实战. 我采用的是一个非常流行的库require.js. 一.为什么要用require.js? 最早的 ...
require.js基本用法
1.require.js的加载使用require.js的第一步,是先去官方网站下载最新版本. 下载后,假定把它放在js子目录下面,就可以加载了. 1 <script src="js/ ...
require.js的用法
一.为什么要用require.js? 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了.后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载.下面的网页代 ...
require.js的用法-阮一峰
一.为什么要用require.js? 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了.后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载.下面的网页代 ...
[技巧] Javascript模块化编程（三）：require.js的用法
这个系列的第一部分和第二部分,介绍了Javascript模块原型和理论概念,今天介绍如何将它们用于实战. 我采用的是一个非常流行的库require.js. 一.为什么要用require.js? 最早的 ...
阮一峰的Javascript模块化编程（三）：require.js的用法
写的很好链接地址 :http://www.ruanyifeng.com/blog/2012/11/require_js.html 转载于:https://www.cnblogs.com/susan- ...
html引入layer.js,require.js引用jquery、layer的简单实例用法
来源: 未知发布时间: 2017-10-13 次浏览用法: 第一步在html页面上引入JS: 第一个require.js,注意引用的时候加了一个data-main="./index&qu ...
html js require函数,Require.js的基本用法详解
一:什么是require.js ①:require.js是一个js脚本加载器,它遵循AMD(Asynchronous Module Definition)规范,实现js脚本的异步加载,不阻塞页面的渲染 ...

require.js的用法：

require.js的用法：相关推荐

最新文章

热门文章