菜单

其次次聊一聊JS require.js模块化学工业具的基础知识

2019年7月11日 - 皇家前端
require.config({
  paths : {
    "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery", "js/jquery"],
    "a" : "js/a" 
  }
})

澳门皇家赌场,其三方模块

require.config(["jquery", "jquery.form"], function($){
  $(function(){
    $("#form").ajaxSubmit({...});
  })
})

那样布署后,我们就足以在别的模块中援用underscore模块:

大局配置

require(["underscore"], function(_){
  _.each([1,2,3], alert);
})

您可能感兴趣的小说:

define
从名字就足以看到这些api是用来定义三个模块
require
加载信赖模块,并进行加载完后的回调函数
前一篇中的a.js:

那边关系了require.config,require.config是用来铺排模块加载地方,轻易题说正是给模块起三个越来越短更加好记的名字,举例将百度的jquery库地址标志为jquery,那样在require时只须求写[“jquery”]就足以加载该js,本地的js我们也得以这么安排:

require(["js/a"],function(){
  alert("load finished");
})

require会定义多少个变量:define,require,requirejs,在那之中require ===
requirejs,一般选取require更轻易

上边的例子中再一次现身了require.config配置,假诺每种页面中都参与配置,必然显得特别不雅,requirejs提供了一种叫”主数据”的功力,大家先是制造二个main.js:

好了,requirejs的核心配置大概便是那样多,还会有点恢宏的意义会在随后的字数中涉嫌,大家不用失去呀!

require.config({
  baseUrl : "js"
})

透过paths的布局会使大家的模块名字更简短,paths还会有一个主要的职能,正是足以安排多少个门路,假设远程cdn库未有加载成功,可以加载本地的库,如:

require(["jquery","underscore"],function($, _){
  $(function(){
    _.each([1,2,3],alert);
  })
})

如此安顿后,当百度的jquery未有加载成功后,会加载本地js目录下的jquery

require.config({
  shim: {
    "underscore" : {
      exports : "_";
    },
    "jquery.form" : ["jquery"]
  }
})

插件方式的非英特尔模块,大家平常会用到jquery插件,并且这么些插件基本都不适合速龙标准,比方jquery.form插件,这时候就需求将form插件”垫”到jquery中:

require.config({
  shim: {
    "underscore" : {
      exports : "_";
    }
  }
})

基本API

require.config({
  paths : {
    "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery"] 
  }
})
require(["jquery","js/a"],function($){
  $(function(){
    alert("load finished"); 
  })
})

若是有个别模块不出口变量值,则尚未,所以尽量将出口的模块写在前面,幸免地方错乱引发误解

通过require加载的模块一般都亟需符合AMD标准即利用define来表明模块,可是有时必要加载非AMD规范的js,那时候就供给用到另多个效果与利益:shim,shim解释起来也比较难理解,shim直接翻译为”垫”,其实也是有那层意思的,近年来自己器重用在三个地点
  1.
非速龙模块输出,将非规范的英特尔模块”垫”成可用的模块,比方:在老版本的jquery中,是不曾承接AMD规范的,所以无法直接require[“jquery”],那时候就必要shim,比方小编只要用underscore类库,不过他并不曾兑现速龙标准,那大家能够如此铺排

这么安顿之后大家就能够运用加载插件后的jquery了

前一篇:JS模块化工具大家以极其轻巧的方法引进了requirejs://www.jb51.net/article/82527.htm,这一篇将呈报一下requirejs中的一些基本知识,包涵API使用办法等

data-main还应该有一个注重的成效,当script标签钦定data-main属性时,require会默许的将data-main内定的js为根路线,是怎么意思吧?如上边的data-main=”js/main”设定后,大家在采取require([‘jquery’])后(不配备jquery的paths),require会自动加载js/jquery.js那些文件,并不是jquery.js,也正是暗中同意配置了:

require([“js/a”]);
来加载该模块(注意require中的正视是二个数组,固然只有贰个依附,你也务必利用数组来定义),requir
API的首个参数是callback,多个function,是用来管理加载达成后的逻辑,如:

define(function(){
  function fun1(){
   alert("it works");
  }
  fun1();
})

事先的事例中加载模块都以地面js,可是大多数情景下网页需求加载的JS也许出自地点服务器、其余网址或CDN,那样就不能够经过这种措施来加载了,大家以加载多少个jquery库为例:

在动用requirejs时,加载模块时毫无写.js后缀的,当然也是不能够写后缀
上边例子中的callback函数中开掘有$参数,这几个便是依靠的jquery模块的输出变量,要是你依据多少个模块,能够依次写入多少个参数来行使:

加载文件

然后再页面中利用上边包车型大巴章程来选取requirejs:

require.config({
  paths : {
    "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery", "js/jquery"],
    "a" : "js/a" 
  }
})
require(["jquery","a"],function($){
  $(function(){
    alert("load finished"); 
  })
})
require.config({
  paths : {
    "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery"],
    "a" : "js/a" 
  }
})
require(["jquery","a"],function($){
  $(function(){
    alert("load finished"); 
  })
})

也足以简写为:

 通过define函数定义了二个模块,然后再页面中使用:

<script data-main=”js/main” src=”js/require.js”></script>
解释一下,加载requirejs脚本的script标签走入了data-main属性,那本性子内定的js将要加载完reuqire.js后管理,我们把require.config的布署出席到data-main后,就足以使每二个页面都采取这么些布局,然后页面中就能够间接行使require来加载全体的短模块名

require.config({
  shim: {
    "underscore" : {
      exports : "_";
    },
    "jquery.form" : {
      deps : ["jquery"]
    }
  }
})

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图