假如有迷惑的处所,迎接议论,我是初学,希望能探讨和取得指导;
js加载会壅塞页面加载:
//requirejs默许异步加载js文件;
要领一、
把script放到页面底部加载;
要领二、
<script defer async='true' scr=''></script>
//IE支撑defer
定义全局相对途径:
要领一:
<script data-main='scripts/main' src='scripts/require.js'></script>
//自定义属性data-main指定网页顺序的主模块--main.js文件;
//data-main定义全部网页代码的进口(js文件的相对位置),今后require()此文件下的文件能够直接写文件名;
//require.js文件位置是恣意的;
//定义了data-main的瑕玷:
// data-main只适用于页面只要一个剧本进口的状况;
// 假如页面有多个剧本进口,而且与主模块加载的剧本之间有依靠关联,加载会随机报错;
// 由于data-main定义的主模块内的require()模块是异步加载的,不壅塞页面加载,所以,随机涌现剧本查找不到的毛病--页面内与<script *data-main='' >同级的内联script剧本有能够优先于require(模块)加载终了;
//
要领二:
require.config({
baseUrl:"scripts/"
//转变基目次,目次url从能够用相对/相对位置;
})
//在主模块中运用require.config({})对模块的加载行动举行自定义;
要领三:
要领一、二都未设置时,默许以援用require.js的.html文件地点目次为相对根目次;
注重:用baseURL以相对位置修正,是相关于援用requirejs的html为基准定位的—–我是错了好屡次,老是以为是主模块main.js的相对位置
疏忽全局相对途径加载js
//绕过baseUrl,以传统的体式格局查找剧本文件;
要领一、
require('*.js') //加载途径以'.js'末端;
要领二、
require('/**') //加载途径以'/'最先;
要领三、
require('{http:|https:}') //加载途径包括URL协定;
依靠关联:
主模块:data-main属性值的js文件,是全部网站代码的进口,一切代码都从这儿最先运转;
实行模块:
require([],function(args){
//require()异步加载;
//[]示意所依靠模块的数组列表;
/*function(){}回调函数,当指定模块都加载胜利后被挪用;
*加载的模块以参数情势传入该函数中,从而在回调函数内部就能够运用这么模块;
*参数和模块的数目和序次要一一对应;
*或许经由过程arguments[]来挪用依靠;
*/
})
在define()内部require()模块
//假如须要在define()函数内部require()别的文件,须要将require.js作为依靠加载;
模块的定义(AMD范例):
/*模块的长处:防止全局定名空间污染--依靠关联以函数参数的情势注入;
*如jqurey:运用模块加载就无需忧郁援用别的js库引发$标记的归属争执;
*由于依靠是以函数参数情势注入,使得每一个模块加载差别版本(如依靠差别版本的jquery)的剧本成为能够;
*/
//引荐一个模块为一个零丁的js文件;
无依靠关联的模块:
模块只是名/值对的鸠合:
define({
name1:'value1',
name2:'value2'
})
无依靠关联,但须要处置惩罚一些初始化使命:
define(function(){
})
有依靠关联的模块:
define('module name',[],function(){
//第一个参数为模块称号,可选项--不发起定名;
//[]示意依靠关联的数组列表;
//function(){}回调函数,当指定模块都加载胜利后被挪用;
//加载的模块以参数情势传入该函数中,从而在回调函数内部就能够运用这么模块;
//参数和模块的数目和序次要一一对应;
//或许经由过程arguments[]来挪用依靠;
//
//require()加载这个模块之前会先加载依靠关联;
//模块应当返回一个本模块/函数 return {
// 属性名:值,
// 要领名:function(){}
//模块名默许为剧本文件名;
//}
//
})
模块定义的破例:
关于传统的"browser globals"剧本,没法经由过程define()表达他们的依靠关联;
为此,requirejs供应补充计划:
运用shim config来定义依靠关联;
模块名的定义:
要领一、
//jQuery库就是经由过程这类要领定名的;
在定义模块时经由过程给予第一个参数定名--------不引荐;
要领二、
在主模块中运用require.config
require.config({
baseUrl:'',
paths:{
'moduleName':'modulePaths' //途径是以基途径查找;
}
})
//注重:假如经由过程要领一(如:jQuery)定名了的话,要领二定名(如:myjquery)不会起作用;
//经由过程myjquery援用文件\
//require(['myjquery'],function($){
//$ is undefined-----由于myjquery的值是undefined-----jQuery自著名,没有放权赋给myjquery
//})
天生相关于主模块的途径:
define(['require'],function(require){
var Url = require.toUrl('files_paths');
//files_paths文件范例恣意;
//文件是不是存在都行;
//仅仅是为了取得从该文件最先的相对途径;
})
轮回依靠–重构代码从新设想的警示灯
轮回依靠:a依靠b,b同时依靠a
//不能用平常的要领,不然,b会猎取到a=undefined;
define(["require", "a"],
function(require, a) {
return function(title) {
return require("a").doSomething();
}
}
);
指定JSONP效劳依靠
//通报参数的值必需为'define'----将猎取的值算作一个模块定义(返回的值在底层用define()包裹);
//瑕玷:一旦JSONP效劳超时,经由过程define()定义的别的模块能够不能被实行;
//缺/长处:requirejs对统一URL地点只猎取一次数据,后继要求猎取的是缓存的值;
//超时毛病信息:经由过程requirejs.onError()猎取
require(['http://example.com/api/data.json?callback=define'],function(){
function(data){
}
})
挪用模块require():
require([],function(){
//[]示意依靠关联的数组列表;
//数组元素为须要挪用的模块的途径:相对途径(基于baseUrl/主HTML)、相对途径、经由过程paths衔接的途径;
//function(){}回调函数,当指定模块都加载胜利后被挪用;
//加载的模块以参数情势传入该函数中,从而在回调函数内部就能够运用这个模块的属性或要领;
//参数和模块的数目和序次要一一对应;
//或许经由过程arguments[]来挪用依靠;
})
罕见毛病:
控制台报错--查找不到剧本文件:
缘由剖析:页面内有多个剧本进口,而且加载require.js的script标签设置了data-main属性;
解决要领:去掉data-main属性,则requirejs根据此属性异步加载主模块中的剧本;
控制台报错--参数undefined
缘由剖析:将自著名的模块经由过程paths属性更名援用;
解决要领:用自著名援用模块,而不自定义模块名;
关于设置题目:
RequireJS设置笔记