requireJS的初步掌握

Posted 墨韵明空

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了requireJS的初步掌握相关的知识,希望对你有一定的参考价值。

前面我们讲述了requireJS的一些认知和优点,==》http://www.cnblogs.com/wymbk/p/6366113.html

这章我们主要描述的是requireJS的一些常用的API


一.html页下

  1.data-main属性

    首先我们知道requireJS可以有效的解决JS阻塞浏览器渲染这个问题,

    那么它实现的方式是什么样子的呢?

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

       通过data-main加载的js是异步加载的,此时如果页面中再次加载其他的JS如果依赖通过requireJS加载的文件的话容易出错(因为引入顺序无法保证)

     通过data-main加载的文件会被requireJS系统默认为主模块。

二.JS配置下

     在主模板页面通过require.config对整体页面进行配置    

require.config({
    baseUrl: \'js/\',
    paths: {
        "backbone": "backbone",
        "underscore": "underscore"
    },
    shim: {
        "backbone": {
            deps: [ "underscore" ],
            exports: "Backbone"
        },
        "underscore": {
            exports: "_"
        }
    }
});

其中主要的api有

  1.baseUrl

    文件的相对根目录一般都是以HTML文件为基准,但是requireJS在通过data-main异步加载后根目录就会变以data-main加载的文件

           为基准,而baseUrl就是以data-main为基准去更改

baseUrl:\'./js\',//路径更改

  2.paths

    指定模块的加载路径,在我的理解,这个api的用处就是简写路径

        例如:

paths:{
   \'jquery\':\'../../js/jquery-3.1.1.min\',
   \'jqueryUI\':\'../../js/jquery-ui\',
   \'require\':\'../../js/require\',
   \'underscore\':\'./underscore-min\',
   \'backbone\':\'./backbone-min\',
   \'Wdate\':\'../My97DatePicker/WdatePicker\',
   \'autocomplete\':\'../autocomplete/autocomplete\'
},

  3.shim

    上节讲过,requireJS加载是遵循AMD模范的,当我们加载现有的非AMD的文件或插件的时候就不太好是,

    所以就有了这个api。

    下面有三个参数:

    1>exports:调用第三方非AMD插件的时候暴露所需的接口  

    2>deps:调用第三方非AMD插件的时候帮助该插件去依赖其他的插件,例如JQ的一大堆的插件库  

    3>init:类似于exports,但是exports是指定暴漏一个接口的时候使用,init是暴漏多个的时候使用

//b.js

  var shirt = {}
  shirt.haha = function(a){
    alert(a);
  }
  shirt.heihei = function(a){
    alert(a)
  }

//a.js

function haha(a){
    alert(a);
}
function heihei(a){
        alert(a);
}
//main.js   data-main加载文件
require.config({ paths:{
\'a\':\'./my/a\', \'b\':\'./my/b\' }, shim:{ \'a\':{ init:function(){ return { ha:haha, he:heihei } } }, b:{ exports:\'shirt\' } } }) require([\'a\',\'b\'],function(a,shirt){ alert(a.ha(1)); shirt.haha(\'2\'); })

三.JS除配置文件下

  1.define()

    定义一个模块,此模块可供其他模块使用,define()里面有两个参数第一个是依赖的名称数组,主要是标识所依赖的模块

    第二个参数是回调函数,参数是依赖模块的标识,在依赖文件加载完毕后执行 

defien([\'jquery\'],function($){
   //... 内容
})

  2.require()

    加载和使用模块的,一般用在主模块下。 

requrie([\'a\',\'b\'],function(){
  //..内容
})

 


 

这就是requireJS常用的API,希望大家多多练习,共同进步。

 

以上是关于requireJS的初步掌握的主要内容,如果未能解决你的问题,请参考以下文章

JS -- 一篇文章掌握RequireJS常用知识

使用requireJs的方法

48个值得掌握的JavaScript代码片段(上)

初步掌握node的路由控制

H5单页面架构:requirejs + angular + angular-route

angularJS使用ocLazyLoad实现js延迟加载