RequireJS知识总结

最新推荐文章于 2021-08-21 16:08:20 发布
最新推荐文章于 2021-08-21 16:08:20 发布
阅读量1.8k 收藏 1
点赞数
分类专栏： JavaScript+jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qhairen/article/details/49329071
版权

一、理清概念


1、支持AMD的框架和库有jQuery、underscore、Dojo、MooTools、EmbedJS、qwery、bonzo甚至还有firebug，而backbone这个库，没有采用AMD规范编写。如果要加载它的话，必须先定义它的特征。如下：

      

require.config({
　　　　shim: {

　　　　　　'backbone': {
　　　　　　　　deps: ['underscore', 'jquery'],            //好像不依赖jquery，只依赖underscore
　　　　　　　　exports: 'Backbone'
　　　　　　}
　　　　}
});

     实现AMD规范的框架有require.js、curl.js、bdload、JSLocalnet、Nodules等，它们都实现了define方法，同时都有自己的补充API。


2、近几年大量的前端框架出现，这些框架都在尝试解决一些前端开发中的共性问题，但是实现又不尽相同。在这个背景下，CommonJS社区诞生了，为了让前端框架发展的更加成熟，CommonJS鼓励开发人员一起在社区里为一些完成特定功能的框架制定规范。AMD（Asynchronous Module Definition）就是其中的一个规范。


3、CommonJS的AMD规范中只定义了一个全局的方法:

       define(id?, dependencies?, factory);


  • id是可选参数，一般不需要，但是有的库显式指定了id，比如：jquery，underscore 。由于他们经常被其他库依赖，如果是无主的话，那么其他的库可能会为他们起不同的模块名，而导致可能会多次载入它们，影响效率。

    data-requiremodule="*******"会不断改变。

  • dependencies也是可选参数，是一个字符串Array，字符串代表模块名id，如果是显式指定模块名的库，那么字符串不能乱写，比如jQuery的模块名固定为"jquery"，不能为其他。当没有该参数时，说明不依赖其他模块，实现AMD的框架应提供默认值["require", "exports", "module"]。

  • factory是一个回调函数，当前面依赖的所有模块加载完成后，立刻执行。前面依赖模块的返回值以默认顺序作为factory方法的参数。

ps：还有一种数据对象模块：

define({
      users:[],
      members:[]
});

ps: 里面可以是对象，数字、布尔型。但是不能是字符串或者数组，因为会被当成id或者dependencies参数。

       


4、RequireJS提供了如下功能：

  • 声明不同js文件之间的依赖；
  • 可以按需、并行、延时载入js文件；
  • 可以让我们的代码以模块化的方式组织。

5、require.js要求，每个模块是一个单独的js文件。这样的话，如果加载多个模块，就会发出多次HTTP请求，会影响网页的加载速度。因此，require.js提供了一个优化工具，当模块部署完毕以后，可以用这个工具将多个模块合并在一个文件中，减少HTTP请求数。


6、AMD（Asynchronous Module Definition）规范的典型实现require.js；

      CMD（Common Module Definition）规范的典型实现是sea.js；

      CommonJS规范的典型实现是Node.js，服务器端javascript，引入模块的速度是硬盘的读取速度，而浏览器中的js，是通过http请求从服务器下下来的，所以异步的重要性就体现出来了。



二、RequireJS功能


看require.js的源码，会看到它定义了3个全局变量，requirejs，require，define。其中requirejs和require是一个意思。

require和define的区别是define用来定义一个模块，它的回调函数有返回值，可能是对象或者函数等，任何有效的返回都是可以的(CommonJS/SeaJS则只能是JS对象)；而require的回调函数没有返回值。


1、加载js文件

<script src="./js/require.js"></script> 
<script> 
    require(["./js/a.js", "./js/b.js"], function() { 
	    myFunctionA(); 
	    myFunctionB(); 
    }); 
</script>

require方法里的字符串数组可以允许不同的值，当字符串以".js"结尾，或者以"/"开头，或者就是一个URL，那么RequireJS认为用户就是在加载一个js文件。否则，当字符串类似"my/module"格式的时候，它会认为这是一个模块，并且会以用户配置的baseUrl和paths来加载相应的模块。


There may be times when you do want to reference a script directly and not conform to the "baseUrl + paths" rules for finding it. If a module ID has one of the following characterstics, the ID will not be passed through the "baseUrl + paths" configuration, and just be treated like a regular URL that is relative to the document（document指的是引入requirejs的html页面目录）:
*Ends in ".js".
*Starts with a "/".
*Contains an URL protocol, like "http:" or "https:".


2、页面加载后执行js，用RequireJS的domReady插件 

<script src="./js/require.js"></script> 
<script> 
    require(["domReady!", "./js/a.js", "./js/b.js"], function() { 
	    myFunctionA(); 
	    myFunctionB(); 
    }); 
</script>

按F12，在页面源码的head标记中会发现插入了如下的代码head.appendChild()，是requirejs做的工作：

<script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="js/a.js" src="js/a.js"></script>

其中async属性目前绝大部分浏览器已经支持，表示js文件不会阻塞其他内容的下载。


3、加载js模块

好处：模块一般都有一个返回值，它会作为参数传给回调函数，那么就不需要访问全局变量了，有效的避免了大量而且复杂的命名空间管理。模块名后面不需要.js后缀，requirejs会在运行时自己加上。data-main属性值也不要加上.js。

 require(["js/student", "js/class"], function(student, clz) { 
      clz.addToClass(student.createStudent("Jack", "male")); 
      clz.addToClass(student.createStudent("Rose", "female")); 
      console.log(clz.getClassSize());  
 });

如果某个模块在另一个主机上，则可以指定它的网址，如下：

　require.config({
　　　　paths: {
　　　　　　"jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min"
　　　　}
　});


ps：尽量避免循环依赖，如果实在避免不了，可以在模块中加上对"require"模块的依赖，在回调函数中直接用

       require("dependencyModuleName")。


pps：为了正确的使用这些功能，你定义的所有模块都需要使用RequireJS的API，否则它不会像期望的那样工作。

补充：

1.原生的require()不支持按次序加载，所以加载的JS文件到底先加载哪个，无法事前知道，而之后的回调参数也是在请求的所有JS完毕之后才开始回调；
2.动态加载的Js文件，不在原始的DOM结构之中，因此在DOM-ready（DOMContentLoaded）事件和window.onload事件中指定的回调函数对它无效。


4、require当作依赖模块，使用它中的方法

define(["require"], function(require) {
    var cssUrl = require.toUrl("./style.css");             //返回baseUrl/style.css
});


5、require.js插件

require.js还提供一系列插件，实现一些特定的功能。
domready插件，可以让回调函数在页面DOM结构加载完成后再运行。

require(['domready!'], function (doc){
　　　　// called once the DOM is ready
});

text和image插件，则是允许require.js加载文本和图片文件。

define([
　　　　'text!review.txt',
　　　　'image!cat.jpg'
　　　　],

　　　　function(review,cat){
　　　　　　console.log(review);
　　　　　　document.body.appendChild(cat);
　　　　}
);
类似的插件还有json和mdown，用于加载json文件和markdown文件。


三、配置RequireJS


 <script data-main="js/main" src="scripts/require.js"></script>

data-main 指定了一个在当前index.html目录并行的文件夹下 ./js/main.js作为程序入口，而 js目录也将作为baseUrl在其他模块定义时使用。baseUrl通常设置为data-main指定文件的目录，如上面的js，也即./js。baseUrl也可以通过手动配置，可以是绝对路径也可以是相对路径，相对路径指引入requirejs的页面作为参考点，下面会讲。若没有手动配置，也没有data-main属性的话，那么默认目录为引入requirejs的html所在的目录。


一种更为直接的方式是显式指定baseUrl和paths，利用require.config来配置，示例如下：

<script type="text/javascript" src="./js/require.js"></script> 
<script type="text/javascript"> 
  require.config({ 
    baseUrl: "./js",                     ".js"可以写成"./js/"或者"js"或者"js/"，但是不能写成"js\\"或"./js\\"！！
    paths: { 
        "some": "some/v1"                 //"some"也可以写成some，键值对的键的引号可加可不加，而值加引号代表字符串
    }, 
    waitSeconds: 10 
  }); 
  require( ["some/module", "my/module", "./js/a.js"], 
    function(someModule,    myModule) {} 
  ); 
</script>

some/module具体的js文件路径是./js/some/v1/module.js，waitseconds是指最多花多长时间来加载一个js文件，默认值为7秒。


关于配置paths的经验：

  • 模块名为name，可以不管它，即baseUrl/name.js；可以配置paths，即baseUrl/somepath/somename.js。
  • 模块名为somepath/name，可以不管它，即baseUrl/somepath/name.js；可以配置somepath，即baseUrl/otherpath/name.js;可以配置"somepath/name"，即baseUrl/otherpath/othername.js。


shim参数：

shim参数解决了使用非AMD方式定义的模块及其载入顺序，即不支持AMD规范，如jQuery插件，jQuery插件的本质是将命名空间挂在全局jQuery或jQuery.fn上，而非使用define定义的模块。jQuery插件皆依赖于jQuery，即得保证jQuery先下载。示例如下：

require.config({
    shim: {
        'jquery-slide': ['jquery']
   }
});
require(['jquery-slide']);

ps：好像也可以按照普通的js文件载入，而不用AMD的风格来写，如果有依赖，那么必须用shim参数，有机会可以试下。

上面会暴露jquery-slide中的所有全局变量，如下面《项目实战代码》中的util.js，模块返回值是undefined,要想某个或者某几个全局变量当作这个模块的返回值，可以如下：

requirejs.config({
  baseUrl: '/public/js',
  paths: {
    hello: 'hello'
  },
  shim: {
    hello: { exports: 'hello' }                  //'hello'是hello.js中的hello函数
  }
});

requirejs(['hello'], function(hello) {
  hello();
});

若想暴露多个变量：用init 

requirejs.config({
  baseUrl: '/public/js',
  paths: {
    hello: 'hello'
  },
  shim: {
    hello: {
      init: function() {            //当exports和init同时存在时，exports将被忽略。
        return {
          hello: hello,
          hello2: hello2
        }
      }
    }
  }
});

requirejs(['hello'], function(hello) {
  hello.hello1();
  hello.hello2();
});

若暴露变量的同时，还依赖于其他模块，用deps： 

require.config({
    baseUrl: 'scripts/app',
     paths: {
        lib: '../lib'
    },
    shim: {
        'backbone': {
            //The underscore script dependency should be loaded before loading backbone.js
            deps: ['underscore'],
            // use the global 'Backbone' as the module name.
            exports: 'Backbone'
        }
    }
});



四、项目实战代码

require.config({
	paths : {
		views : "../views",
		jquery : "lib/jquery/jquery-1.11.1.min",
		jqm : "lib/jquery/jquery.mobile-1.4.3.min",
		underscore : "lib/underscore/underscore-min",
		knockout : "lib/knockout/knockout-3.0.0",
		text : "lib/require/text",                                  //require.js的插件
		director : "lib/director.min",
		jq_i18n : "lib/jquery/jquery.i18n.properties-1.0.9",
		jq_translate : "lib/jquery/translate",
		jq_validate : "lib/jquery/jquery.validate",
		jq_additional : "lib/jquery/additional-methods",
		base64 : "lib/base64",
		echarts : "lib/echarts",
		"echarts/chart/pie" : "lib/echarts"
	},
	shim : {
		jq_translate : ["jq_i18n"],
		jq_additional : ["jq_validate"],
		util : ["jquery"]
	}
});
require(["jquery", "app", "util"], function ($, app) {}

util是非AMD规范的模块，实际上它就是一个工具包，里面全是函数，那么加载它要么当成普通的js文件，写成"util.js"或者"util"（它们的路径相对谁是不一样！），或者用shim参数，因为它还依赖于jquery模块，所以必须用shim了。



五、我的实验


以下是如下目录结构:

|

|......test.html

|......main.js

|......object.js

|......require.js

|......jquery-1.11.1.min.js

1、数据对象模块

test.html

<!DOCTYPE html>
<html>
	<head>
		<title>test</title>
		<meta charset="utf-8">
	</head>
	<body>
		<div>123456789</div>
		<script data-main="main" src="require.js"></script>
	</body>
</html>


main.js

require(["object"], function(o){
	alert(o.name+o.age);
});


object.js

define({
	name:'qhairen',
	"age":25
});

2、依赖模块有空字符串 

require.config({
	paths:{
		"jquery":"jquery-1.11.1.min"
	}
});

require(["object", "", "jquery"], function(o, a, $){
	alert(o.name);
	alert(a);
	alert($);
});

打印出qhairen，undefined，一个函数。说明空字符串也被当做一个模块，没有返回值。


3、不依赖于任何模块，可以不写，或者写一个[]，但是define中如果定义了模块id，同时不依赖任何模块，那么[]，必须写上

require.config({
	paths:{
		"jquery":"jquery-1.11.1.min"
	}
});

require([], function(o, a, $){
	alert(1);
});

require和define的区别在于define可以多个id参数，但是id名字不能乱起，比如上面只能起“main”，且define可以没有返回值，代表返回undefined。


以下是如下目录结构:

|

|......test.html

|......js

         |......main.js

         |......object.js

         |......hello.js

         |......require.js

         |......jquery-1.11.1.min.js


4、模块字符串以.js结尾

test.html

<!DOCTYPE html>
<html>
	<head>
		<title>test</title>
		<meta charset="utf-8">
	</head>
	<body>
		<div>123456789</div>
		<script data-main="js/main" src="js/require.js"></script>
	</body>
</html>


main.js

requirejs.config({
	paths:{
		"jquery":"jquery-1.11.1.min"
	}
});

require( ["js/hello.js"], function(o, a, $){   //这里是js/hello.js，说明是相对test.html的。也可以写成"hello",则按照baseUrl+paths
	hello1();                             //这里说明分两步，第一步head头包含js/hello.js，第二步使用
	hello2();                             //hello1，hello2，它们都是全局变量，没有模块概念。
	
});


hello.js

function hello1(){
	alert("hello1");
}

function hello2(){
	alert("hello2");
}

把main.js改变下：

requirejs.config({
	paths:{
		"jquery":"jquery-1.11.1.min"
	}
});

require( ["js/object.js"], function(o, a, $){          //或者写成"object"，都行，都打印出"qhairen",说明js的查找方式并不会改变
	alert(o.name);                                //它是模块的事实。同样按照上面，第一步head头包含js/object.js，第二步
	                                              //模块的返回值给o，打印o.name。而第一步由于object.js是模块，仅有一个
	                                               //define函数，没有全局变量暴露出来，所以唯一的对外接口就是o了。

});

5、模块的回调函数中有全局变量声明 

main.js

requirejs.config({
	paths:{
		"jquery":"jquery-1.11.1.min"
	}
});

require( ["object"], function(o){
	
	alert(a);                      //打印出5，如果写成var a=5;这里会报错，a未定义。
	                              //建议模块中不要定义全局变量。
});

object.js

define(function(){
	a = 5;
	return {name:'qhairen',
	"age":25}
})


以下是如下目录结构:

|

|......test.html

|......jq

         |......jquery-1.11.1.min.js

         |......my.js

|......js

         |......main.js

         |......object.js

         |......hello.js

         |......require.js


6、jquery模块名字永不变，仅改变它的path

main.js

requirejs.config({
	paths:{
		"jquery":"../jq/jquery-1.11.1.min"         //jquery模块名是固定的！！！
	}
});

require( ["jquery", "object"], function($, o){
	alert($);
	alert(o["name"]);
	
});

7、若模块有模块名，那么它必须不能变，即在[]中，它必须是固定的 

main.js

requirejs.config({
	paths:{
		"jquery":"../jq/jquery-1.11.1.min",
		
	}
});

require( ["jquery", "object", "../jq\\my"], function($, o, m){    //这里和下面my.js的模块名必须一模一样！！！！
	
	alert(m);
});


my.js

define("../jq\\my", function(){                   //不能写成../jq/my！！！！
	return 8;
});
其实不用写成这么复杂，可以类似上面jquery模块的写法，在paths里配置就好 

main.js

requirejs.config({
	paths:{
		"jquery":"../jq/jquery-1.11.1.min",
		"my":"..\\jq/my"                                 //这里配置下就好！！
		
	}
});

require( ["jquery", "object", "my"], function($, o, m){
	
	alert(m);
});


my.js

define("my", function(){
	return 8;
});


8、关于shim参数的细节 


requirejs.config({
	paths:{
		"jquery":"../jq/jquery-1.11.1.min",	
	},
	shim : {
		"hello":{}  //这里也可以写成 "hello":[]，或者这一行不写，都会暴露其所有全局变量
	}
});

require( ["hello"], function(h){          //h为undefined值
	hello1();
	hello2();
	h();
	
});


关于exports：

requirejs.config({
	paths:{
		"jquery":"../jq/jquery-1.11.1.min",	
	},
	shim : {
		"hello" : {
			exports : "hello1",        //这里hello1必须加引号！！！
		}
	}
});

require( ["hello"], function(h){              //h值为hello1,
	hello1();
	hello2();                            //hello1(),hello2()照样有效，说明全局变量该暴露还是暴露的！！
	h();
	
});


关于init：

requirejs.config({
	paths:{
		"jquery":"../jq/jquery-1.11.1.min",	
	},
	shim : {
		"hello" : {
			exports : 'hello1',
			init : function(){
				return { 
					hello11 : hello1,           //这里hello1，hello2必须不能加引号！！！与上区别！
					hello22 : hello2            //exports和init同时存在时，只认init。
				};   
			}
		}
	}
});

require( ["hello"], function(h){
	hello1();
	hello2();                  //hello1(),hello2()还是有用的，说明全局变量还是暴露出来的！            
	h.hello11();
	h.hello22();
	
});




六、参考链接


1、中文API:  http://www.requirejs.cn/home.html

2、英文API:  http://www.requirejs.org/

3、RequireJS Plugins:  https://github.com/jrburke/requirejs/wiki/Plugins

4、大神们的博客：

                     http://www.cnblogs.com/yexiaochai/p/3214926.html

                     http://www.cnblogs.com/snandy/archive/2012/05/22/2513652.html

                     http://www.cnblogs.com/snandy/archive/2012/05/23/2513712.html

                     http://www.cnblogs.com/snandy/archive/2012/05/24/2514700.html

                     http://www.tuicool.com/articles/jam2Anv

                     http://www.ibm.com/developerworks/cn/web/1209_shiwei_requirejs/

                     http://www.oschina.net/translate/getting-started-with-the-requirejs-library?p=1#comments

                     http://www.ruanyifeng.com/blog/2012/10/javascript_module.html

                     http://www.ruanyifeng.com/blog/2012/10/asynchronous_module_definition.html

                     http://www.ruanyifeng.com/blog/2012/11/require_js.html

                     http://www.cnblogs.com/snandy/archive/2012/03/12/2390782.html
SurgeOfLove
关注
专栏目录
Requirejs高级应用(三)：全局变量
甘焕的博客
10-28 1万+
因为requirejs的全局模块特性，即模块载入后，在同一个页面应用中，模块对应的JS文件只会解释执行一次，所以我们可以将某一个require模块用作全局变量，用于所有的require模块共享。代码如下：// User.js文件只会被加载一次，也只会被解释执行一次 var yiifaa = { username : 'yiifaa', age : 20 }; yiifa
requireJS的基本用法
热门推荐
Jack 架构师之路
07-06 1万+
引言    目前项目中的前端架构采用的是RequireJS+AngularJS,小编在工作之余对这个前端框架比较感兴趣，在开始的时候对这个框架不是很懂，因为里面有很多平台自己封装的东西，所以在理解起来不是很容易，经过这一段时间在项目中的运用有了一定的理解，下面先来总结总结一下其中的一个技术点——RequireJS的基本用法。    基本介绍     RequireJS
RequireJS - 快速指南
weixin_30596735的博客
07-12 222
原文：https://www.tutorialspoint.com/requirejs/requirejs_quick_guide.htm RequireJS - 概述 RequireJS是一个JavaScript库和文件加载器，用于管理JavaScript文件和模块化编程之间的依赖关系。它还有助于提高代码的速度和质量。 RequireJS由David Mark开发，其初始版本v1.0.0...
RequireJS中的require返回模块
weixin_33671935的博客
11-30 641
requirejs中定义AMD模块规则如下: define(function(){ var ProductManager={ Create:function(){ console.log("创建产品"); require(["cate"],function(cate){ cate.Writ...
requirejs的简单使用
zhouhao620的博客
04-14 479
AMD是比较著名的前端模块化规范之一，全称是Asynchronous Module Definition，即异步模块加载机制，完整描述了模块的定义，依赖关系，引用关系以及加载机制。异步强调的是，在加载模块以及模块所依赖的其它模块时，都采用异步加载的方式，避免模块加载阻塞了网页的渲染进度。RequireJS是一个非常小巧的JavaScript模块载入框架，是AMD规范最好的实现者之一。 1、引入re...
js中定时器的使用、返回值和编号机制
GeorgeZrx的博客
08-21 2338
js中，定时器是很常用方法，一般定时器有以下两种 setInterval(function,delay) 该定时器为周期定时器，delay为一个毫秒数，不需要单位，以该毫秒数为一个时间单位，setInterval每隔一个时间单位会调用一次function，这里有一个小细节，即在方法运行时，实际的执行时间会比delay所给的毫秒数长一些，实际延时比设定值更久的原因：最小延迟时间； eg： timer1 = setInterval(function(){ console.log("我是周期定时器" +
RequireJS 2.1.9 API 中文 PDF
12-29
### RequireJS 2.1.9 API 中文指南 #### 一、RequireJS简介与基本概念 RequireJS 是一个用于JavaScript的模块加载器，它基于AMD（Asynchronous ...这些知识将帮助开发者更好地管理和优化大型项目的JavaScript代码。
一个极为简单的requirejs实现方法
10-21
总结来说，上述内容提供了一个简化版的RequireJS实现示例，通过动态创建标签、记录模块加载顺序、监听onload事件和执行回调来模拟RequireJS的基本加载机制。这虽然不是一个完整的RequireJS实现，但很好地展示了...
基于RequireJS和JQuery的模块化编程日常问题解析
10-22
总结来说，RequireJS和JQuery在模块化编程中扮演着重要角色，通过遵循AMD规范和合理的模块设计，可以有效地解决循环依赖问题。同时，通过适当的配置和使用技巧，可以在 RequireJS 中顺利使用 jQuery，从而进一步提升...
angularJS+requireJS实现controller及directive的按需加载示例
10-20
总结以上知识点，文章围绕如何在AngularJS项目中实现controller和directive的按需加载，提供了一种结合RequireJS的解决方案。通过动态注册模块、异步加载文件和合理配置路由，能够有效提升大型应用的性能表现。这些...
解决requirejs中依赖参数未知的情况下回调函数返回参数的问题
m0_37394102的博客
01-19 1466
当项目中使用嵌套require时，子require的依赖参数是由返回值传入时，子require的回调应该怎么处理呢例如：function getRequirejs(){ return ["jquery","bootstrap","bootstrap-table","",....]; //具体多少个依赖不知道 } function func(???????????){} var require
require.js中requre方法的参数和回调方法参数要一 一对应
qq_41617901的博客
09-05 725
require(["utility", 'dictionary', 'subsidy_service'], function (utility, dictionary, subsidy_service) { } 参数utility，dictionary,subsidy_service和它的回调方法中的参数要一 一对应。
关于requirejs的用法
人非生而知之者，孰能无惑？
06-19 550
今天要分享的内容是requirejsAMD 简介前端开发在近一两年发展的非常快，JavaScript 作为主流的开发语言得到了前所未有的热捧。大量的前端框架出现了，这些框架都在尝试着解决一些前端开发中的共性问题，但是实现又不尽相同。在这个背景下，CommonJS 社区诞生了，为了让前端框架发展的更加成熟，CommonJS 鼓励开发人员一起在社区里为一些完成特定功能的框架制定规范。AMD（Asynch
require.js - 入门指南、进阶使用详解（附样例）
纸上得来终觉浅，绝知此事要躬行
09-02 8993
现在项目大都使用模块化开发，而 RequireJS 作为 AMD 模块开发的典范，还是很值得学习使用的。 目录 一、AMD 规范 1，AMD 基本介绍 2，AMD 模块规范 二、RequireJS 介绍 1，什么是 RequireJS 2，使用 RequireJS 的好处 三、RequireJS 的配置和使用 1，下载最新版的 require.js 2，创建一个如下目录结构 ...
RequireJS模块化加载
小石头
10-14 1249
RequireJS是什么 RequireJS是以一个工具库，主要用于客户端的模块管理。它可以让客户端的代码分成一个个模块，实现异步或动态加载，从而提高代码的性能和可维护性。 Require的基本思想 通过define 方法，将代码定义为模块； 通过require 方法，实现代码的模块加载；
 script标签的六个属性(src、 type、charset、language、defer、async )
qq_36073688的博客
02-06 6987
1、src：可选，链接外部文件 2、 type ：用script元素嵌入js代码记得要加type="text/javascript" <script src="" type="text/javascript" charset="utf-8"></script> 3、charset：字符编码属性，可选。默认是utf-8编码，主要表示通过src属性指定的代码的字符集，大多浏览器会忽略它的值，所以不必使用。 4、language：脚本类型属性，不是标准组成的...
requirejs插件-domReady插件
张营的技术博客
07-02 2615
RequireJS加载模块速度很快，很有可能在页面DOM Ready之前脚本已经加载完毕。需要与DOM交互的工作应等待DOM Ready。现代的浏览器通过DOMContentLoaded事件来知会。 但是，不是所有的浏览器都支持DOMContentLoaded。domReady模块实现了一个跨浏览器的方法来判定何时DOM已经ready。下载并在你的项目中如此用它： require(['do...
requirejs源码解析之运行流程
weixin_34261415的博客
02-09 313
说明：内容主要包括三部分：1.按源码的结构顺序 对 所有的变量及方法的说明2.requirejs运行流程3、流程相关图片 一、源码的结构 为了方便比对源码，按源码的结构顺序展示。 var requirejs, require, define; (function (global, setTimeout) { var req, s,...
精通RequireJS：模块化开发与AMD规范解析
"这篇文章主要介绍了RequireJS的常用知识，包括模块化的概念和AMD规范的理解，以及RequireJS在实际开发中的应用。" 文章深入浅出地介绍了模块化开发的重要性，特别是对于JavaScript这种语言，由于其全局变量和函数...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值