require.js
1、 如果只是为了加载依赖 :require和define在使用上没有区别(如果只是加载依赖,只用require就可以了);但是如果你要定义一个模块被其他人使用,需要return时就需要define。
2、 Define定义的模块,require在加载时,return的值作为一个参数传递到回调函数中。(一般define定义的模块,return都是一个对象,这样在require加载的时候,作为参数传进去可以直接使用对象 . 方法获取到)。
3、 理论上,require.js加载的模块,必须是按照AMD规范、用define()函数定义的模块。但是实际上,虽然已经有一部分流行的函数库(比如jQuery)符合AMD规范,更多的库并不符合。(个人总结:require中讲是不是AMD规范,首先该js文件都是一个全局变量,多个全局变量更是非AMD规范了。其它的属性方、法都是挂在这个变量下的。不是AMD规范的js文件,在require传到回调函数中的参数是一个未定义的)
4、 多个地方require一个js文件,这个js文件实际只会执行一次。
5、requireJS原理解析 : https://blog.csdn.net/cde7070/article/details/65935888
6、require.js的用法 : http://www.ruanyifeng.com/blog/2012/11/require_js.html
总结:
1、requirejs的可以把所有的js文件当成模块来使用,当程序需要用到对应的js文件时,就把对应的js文件通过添加script标签,把它加载到页面中执行。如果需要依赖的文件,就先添加script标签,在执行当前的文件。
2、通过script标签加载是异步的,js的执行是同步的(即加载的同时js代码从上往下执行)。所以有依赖的话,函数必须在require的回调函数中执行。
3、从require的功能可以看出,一个页面中有多个js文件用require进行模块加载会非常好。但是页面js文件不多就没必要了。
requireJS 加载 js文件总结 :
参考: https://www.cnblogs.com/yexiaochai/p/3961291.html 或 https://blog.csdn.net/aitangyong/article/details/49425061
1、requireJS 加载模块(js文件)的实现:各个模块悄无声息的创建script标签加载。
2、script标签有onLoad,onerror事件,通过监听 这写事件,加载完就就会触发onload事件,执行相应的函数。这样就实现了异步加载文件。(script标签加载js文件是异步的)
3、浅谈script标签中的async和defer : https://www.cnblogs.com/jiasm/p/7683930.html
通过分析这篇文档,可以知道script标签有没有 async和defer 属性的区别。从而实现异步加载的功能。
4、requireJS 多次使用require加载同一个文件,并不会重复加载这个文件。参考 : https://segmentfault.com/q/1010000007564742
这个 function
实际是一个 factory(工厂模式,不明白的话就去搜下),这个 factory 在需要使用的时候(require("xxxx") 的时候)才有可能会被调用。
为什么是有可能?因为如果检查到已经调用过,已经生成了模块实例,就直接返回模块实例,而不再次调用工厂方法了。(即不会再加载文件,将之前的模块实例返回给它了)
require(['math'], function (math){ // 回调函数中的math参数就是 require加载后返回的模块实例,回调函数中可以直接使用这个模块实例的方法。 alert(math.add(1,1)); // requirejs 是 AMD模块规范,调用模块实例的方法是在回调函数中; });
注意 : AMD 和CommonJS 都是常用 require()语句加载模块,但是不同于CommonJS,它要求两个参数。而CommonJS中的require()语句只要加载模块(js文件)就可以了。
这样,模块方法就可以在全局中使用了。从这条特性中可以猜测webpack中js文件用require引入,用的应该是CommonJS模块规范。和requirejs没有关系。
var math = require('math'); // CommonJS 中的 require()函数是同步的,而AMD 中的是异步执行的。 math.add(2,3); // 5