前面我们讲述了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的初步掌握(二)的更多相关文章

  1. [入门级] 基于 visual studio 2010 mvc4 的图书管理系统开发初步 (二)

    [入门级] 基于 visual studio 2010 mvc4 的图书管理系统开发初步 (二) Date  周六 10 一月 2015 By 钟谢伟 Category website develop ...

  2. requireJS的初步掌握

    前一段时间,因为一些事吧这个习惯落下了,现在争取重新捡起来. 最近开始自学requireJS,为了更好的掌握,所以写出一个自我理解的博客供参考. 分割线------------------------ ...

  3. Cardboard虚拟现实开发初步(二)

    Google Cardboard 虚拟现实眼镜开发初步(二) Cardboard SDK for Unity的使用 上一篇文章作为系列的开篇,主要是讲了一些虚拟现实的技术和原理,本篇就会带领大家去看一 ...

  4. requireJS 源码(二) data-main 的加载实现

    (一)requireJs 的整体结构: requireJS 源码 前192行,是一些 变量的声明,工具函数的实现 以及 对 三个全局变量(requirejs,require,define)若被占用后的 ...

  5. Jmeter初步使用二--使用jmeter做一个简单的性能测试

    经过上一次的初步使用,我们懂得了Jmeter的安装与初步使用的方法.现在,我们使用Jmeter做一个简单的性能测试.该次测试,提交的参数不做参数化处理,Jmeter各元件使用将在介绍在下一博文开始介绍 ...

  6. redis 初步认识二(c#调用redis)

    前置:服务器安装redis 1.引用redis 2.使用redis(c#) 一 引用redis  (nuget   搜索:CSRedisCore) 二 使用redis(c#) using System ...

  7. DCOM初步窥探二

    1.COM进程透明性表现在“组件对象和客户程序可以拥有各自的空间,也可以共享同一个进程空间”. COM负责把客户的调用正确传到组件对象中,并保证参数传递的正确性. 组件对象和客户代码不必考虑调用传递的 ...

  8. RequireJS -Javascript模块化(二、模块依赖)

    上一篇文章中简单介绍了RequireJs的写法和使用,这节试着写下依赖关系 需求描述:我们经常写自己的js,在元素选择器这方面,我们可能会用jquery的$("#id")id选择器 ...

  9. 清北学堂—2020.1提高储备营—Day 3(图论初步(二))

    qbxt Day 3 --2020.1.19 济南 主讲:李奥 目录一览 1.图论(kruskal算法,最短路径算法,拓扑排序) 总知识点:图论 一.kruskal算法 1.目的:求图的最小生成树 2 ...

随机推荐

  1. JAVA中字符串函数subString的用法小结

    本篇文章主要是对JAVA中字符串函数subString的用法进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助 String str; str=str.substring(int begi ...

  2. Python+Selenuim测试网站,只能打开Firefox浏览器却不能打开网页的解决方法

    最开始我使用的Selenium版本为2.48,Firefox版本为37,自动化打开网站的时候,可以正常打开. 后来由于Firefox的自检测更新,版本更新为47,导致版本不兼容,自动化打开网站浏览器时 ...

  3. ZOJ 3940 Modulo Query

    0--M对某个数字取模,相当于把0--M区间进行切割,每次暴力切割一下.结果的算的时候二分一下即可... 看了官方题解才会... #include<cstdio> #include< ...

  4. (中等) POJ 3660 Cow Contest,Floyd。

    Description N (1 ≤ N ≤ 100) cows, conveniently numbered 1..N, are participating in a programming con ...

  5. URL中有中文字符,转码方法

    服务端返回的urlString里面有时含有中文,使用 [NSURL URLWithString:urlString]生成URL对象时,iOS客户端不能正确进行网络请求,网上找到的URLEncode方法 ...

  6. 【noip】华容道

    描述 小 B 最近迷上了华容道,可是他总是要花很长的时间才能完成一次.于是,他想到用编程来完成华容道:给定一种局面,华容道是否根本就无法完成,如果能完成,最少需要多少时间. 小 B 玩的华容道与经典的 ...

  7. stm单片机之STM32F4-Discovery资料汇总 (转载自http://blog.163.com/thinki_cao/blog/static/83944875201362493134992/)

    STM32F4的资料大部分都在这里: http://www.stmcu.org/download/index.php?act=ziliao&id=150 根据个人的理解对这些资料作了一些规律, ...

  8. vs2015编译mysql c++ connector

    目前MySQL Connector/C++的binary版本最高只支持VS2008,VS2015需要下载源码自行编译. 1.CMAKE 到官网下载最新的稳定版本 把bin目录添加到环境变量PATH中 ...

  9. eclipse中集成svn maven开发手册---maven编译打包

    使用eclipse中maven进行打包. 打好的包在相应的workspace下面会有一个release的文件夹,如图

  10. OSG和osgearth显示中文(转载)

    osgEarth支持中文过程详解 OSG和osgearth显示中文 一.知识储备   要想很好的理解和解决这个问题,首先要了解什么是多字节和宽字节.说实话我之前也知道这两个字节到底有什么区别,只是简单 ...