require.js的使用

更新日期: 2019-05-22阅读: 2.1k标签: require

require.js 具体是什么?

RequireJS是一个工具库,主要用于客户端的模块管理。它可以让客户端的代码分成一个个模块,实现异步或动态加载,从而提高代码的性能和可维护性。它的模块管理遵守AMD规范,模块与模块之间可以互相依赖,当然可能会有人会想,模块之间的依赖,要是没法正确地去按照特定顺序加载,会出现错误,AMD规范可以处理这种问题,AMD就是这样一种对模块的定义,使模块和它的依赖可以被异步的加载,但又按照正确的顺序。

AMD是"Asynchronous Module Definition"的缩写,意思就是"异步模块定义"。它采用异步方式加载模块,模块的加载不影响它后面语句的运行。所有依赖这个模块的语句,都定义在一个回调函数中,等到加载完成之后,这个回调函数才会运行。


如何使用 require.js?

下载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 方法

使用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方法

接下来,我们便可以通过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);
    });


模块路径 paths

在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"
    }
});

链接: https://fly63.com/article/detial/3826

JS 中的require 和 import 区别

require 和 import 区别:遵循的模块化规范不一样,出现的时间不同。Require是CommonJS的语法,CommonJS的模块是对象,输入时必须查找对象属性。

vue中的js引入图片,必须require进来

需求:如何components里面的index.vue怎样能把assets里面的图片拿出来。 1.在img标签里面直接写上路径,2.利用数组保存再循环输出

关于require.context的尝试

为什么会突然用到webpack这个管理特性呢?项目某个页面需要引入N张demo图片。即资源的批量引入:如果要引入10+个以上的图片资源,就需要写10+个如下的引入代码:import XXX from ;,那如果再多一点的静态资源需要引入呢?这时候require.context就派上了用场。

export,export default,module.exports,import,require之间的区别和关联

Node应用由模块组成,采用CommonJS模块规范。根据这个规范,每个文件就是一个模块,有自己的作用域。在这些文件里面定义的变量、函数、类,都是私有的,对外不可见,因此规避掉了作用域污染。

require,exports和module.exports的区别

require 的运行机制和缓存策略你了解吗?require 加载模块的是同步还是异步?谈谈你的理解exports 和 module.exports 的区别是什么?require 加载模块的时候加载的究竟是什么?

js中require和import的区别

当前端应用越来越复杂时,我们想要将代码分割成不同的模块,便于复用、按需加载等。require 和 import 分别是不同模块化规范下引入模块的语句,下文将介绍这两种方式的不同之处。

require后面不加default会报错

在项目中用 require(./Download.vue) 引入一个组件的时缺少.default 会报错:Failed to mount component: template or render function not defined

用了这么久的 require,你真的懂它的原理吗?

我们常说node并不是一门新的编程语言,他只是javascript的运行时,运行时你可以简单地理解为运行javascript的环境。在大多数情况下我们会在浏览器中去运行javascript,有了node的出现

如何为 Node.js 的 Require 函数添加钩子?

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境。早期的 Node.js 采用的是 CommonJS 模块规范,从 Node v13.2.0 版本开始正式支持 ES Modules 特性

require加载器实现原理

人们常说node并不是一门新的编程语言,他只是javascript的运行时,运行时你可以简单地理解为运行javascript的环境。在大多数情况下会在浏览器中去运行javascript,有了node的出现,可以在node中去运行javascript

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!