requireJS的初步掌握

Posted 2020-08-30 墨韵明空

前面我们讲述了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，希望大家多多练习，共同进步。