RequireJS是一个工具库,主要用于客户端的模块管理。它可以让客户端的代码分成一个个模块,实现异步或动态加载,从而提高代码的性能和可维护性。它的模块管理遵守AMD规范,模块与模块之间可以互相依赖,当然可能会有人会想,模块之间的依赖,要是没法正确地去按照特定顺序加载,会出现错误,AMD规范可以处理这种问题,AMD就是这样一种对模块的定义,使模块和它的依赖可以被异步的加载,但又按照正确的顺序。
AMD是"Asynchronous Module Definition"的缩写,意思就是"异步模块定义"。它采用异步方式加载模块,模块的加载不影响它后面语句的运行。所有依赖这个模块的语句,都定义在一个回调函数中,等到加载完成之后,这个回调函数才会运行。
下载require.js,引入网站的首页,
<script data-main="js/framework/main.js" src="./lib/requirejs/require.js"></script>
这里首先会执行src中的require.js 的加载,随后require.js会查找data-main所指的文件路径,找到入口的js文件,注意这里可以去掉.js 的后缀名。
RequireJS有两种最主要的方法,define()是用来定义一个模块的,而require()方法是 用来加载模块的。
使用define方法,可以将一个js文件写在此方法中,define(function(){ /*代码内容*/ });作为一个独立的模块。如下,新建一个模块名为mod1的js文件(mod1.js):
define(function(){
return {
a:3
}
})
这是一个很简单的模块,mod1通过 return一个对象,向外暴露一个变量 a=3 ;如果我们在创建一个mod2的模块(mod2.js),要依赖mod1中的变量啊,则可以这么来:
define(['mod1'],function(m1){
var a,
b=2,
c=3;
a=c*m1.a;
return {
a:a,
b:b
}
})
分析上面的代码,我们将mod1模块引入到mod2模块中,而function的参数 m1 就是mod1模块的返回值,也是mod1模块。m1.a就是mod1的return 对象a的值,为3,这样mod1和mod2的变量虽然存在a变量名一样的问题,但是互不影响,不冲突,这也是模块化的一个好处,不会担心变量冲突问题。
接下来,我们便可以通过require方法来使用前面我们定义好的模块,,见其写在main.js中
require(['mod2'],function(m2){
alert(m2.a)
});
使用该方法加载mod2个模块,而mod2会去依赖mod1模块,所以也会加载mod1这个模块。
由于模块返回的都是对象,那我们也可以new一个对象去调用加载模块中的方法和属性,见下:
//模块名为:treeview
define(function(){
function treeview(){
this.name="treeview";
};
return { treeview:treeview };
})
require(['treeview'],function(b){
var tree = new b.treeview();
alert(tree.name);
});
如果模块中需要引入第三方的js文件,例如jquery,则应该:
//treeview.js
define(['jquery'],function($){
function treeview(){
this.name="treeview";
};
return { treeview:treeview };
})
//main.js
//此时如果main.js这个应用层也需要用到jquery,虽然mian.js中依赖模块treeview中已经引入了jquery文件,但是应用层main.js中依然还需要引入一次,
require(['treeview','jquery'],function(b,$){
$('#div').click(fucntion(){..........})
var tree = new b.treeview();
alert(tree.name);
});
在main.js,我们需要去配置一下模块的路径,这里随便配置一下几个模块的路径,如下:
require.config({
paths: {
"tabview": "js/tabview",
"animate": "js/animate",
"treeview": "js/treeview"
}
});
//另一种则是直接改变基目录(baseUrl)。后缀.js可以省略
require.config({
baseUrl: "js/lib",
paths: {
"jquery": "jquery.min",
"underscore": "underscore.min",
"backbone": "backbone.min"
}
});
require 和 import 区别:遵循的模块化规范不一样,出现的时间不同。Require是CommonJS的语法,CommonJS的模块是对象,输入时必须查找对象属性。
需求:如何components里面的index.vue怎样能把assets里面的图片拿出来。 1.在img标签里面直接写上路径,2.利用数组保存再循环输出
为什么会突然用到webpack这个管理特性呢?项目某个页面需要引入N张demo图片。即资源的批量引入:如果要引入10+个以上的图片资源,就需要写10+个如下的引入代码:import XXX from ;,那如果再多一点的静态资源需要引入呢?这时候require.context就派上了用场。
Node应用由模块组成,采用CommonJS模块规范。根据这个规范,每个文件就是一个模块,有自己的作用域。在这些文件里面定义的变量、函数、类,都是私有的,对外不可见,因此规避掉了作用域污染。
require 的运行机制和缓存策略你了解吗?require 加载模块的是同步还是异步?谈谈你的理解exports 和 module.exports 的区别是什么?require 加载模块的时候加载的究竟是什么?
当前端应用越来越复杂时,我们想要将代码分割成不同的模块,便于复用、按需加载等。require 和 import 分别是不同模块化规范下引入模块的语句,下文将介绍这两种方式的不同之处。
在项目中用 require(./Download.vue) 引入一个组件的时缺少.default 会报错:Failed to mount component: template or render function not defined
我们常说node并不是一门新的编程语言,他只是javascript的运行时,运行时你可以简单地理解为运行javascript的环境。在大多数情况下我们会在浏览器中去运行javascript,有了node的出现
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境。早期的 Node.js 采用的是 CommonJS 模块规范,从 Node v13.2.0 版本开始正式支持 ES Modules 特性
人们常说node并不是一门新的编程语言,他只是javascript的运行时,运行时你可以简单地理解为运行javascript的环境。在大多数情况下会在浏览器中去运行javascript,有了node的出现,可以在node中去运行javascript
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!