码迷,mamicode.com
首页 > Web开发 > 详细

requireJS的初步掌握(二)

时间:2017-02-07 20:18:45      阅读:219      评论:0      收藏:0      [点我收藏+]

标签:com   根目录   .config   jqueryui   第一个   3.1.1   相对   requirejs   ref   

前面我们讲述了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的初步掌握(二)

标签:com   根目录   .config   jqueryui   第一个   3.1.1   相对   requirejs   ref   

原文地址:http://www.cnblogs.com/wymbk/p/6375534.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!