前面我们讲述了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. (简单) POJ 3321 Apple Tree,树链剖分+树状数组。

    Description There is an apple tree outside of kaka's house. Every autumn, a lot of apples will grow ...

  2. AWK第一篇------全面介绍

    AWK-文本流编辑器 目录 [隐藏] 1 命令行语法 2 用shell实现调用awk 3 awk语言概要 3.1 记录和字段 3.2 脚本的格式 3.3 行为终止 3.4 注释 3.5 模式 3.6  ...

  3. js的this作用域

    作者:zccst this作用域以前专门学习研究过,但发现依然不够全面和完整.现在继续学习 先列出之前看过的结论: 函数在被调用的时候会意外接受两个参数:this和argument,其中this的值跟 ...

  4. TcpView 查看端口的小工具(推荐)

    介绍: TCPView是一个Windows程序,将显示你的详细清单的所有TCP和UDP端点在您的系统,包括拥有进程名称,远程地址和状态的TCP连接. 打开下面的链接就可以下载了. https://te ...

  5. css布局-多行文字垂直居中

    方法一: 代码: <style> *{padding: ;margin:;font-size: 12px;} div{float: left;width: 200px;height:200 ...

  6. Ubuntu Linux下设置IP的配置命令

    Ubuntu Linux下设置IP的配置命令 今天装了Ubuntu,但是发现不能上网,开始排查问题: 1.首先确定网络连接是否正确,所用的网线是否可以正常工作 2.查看网卡是否能正常工作,检测的方法如 ...

  7. CocoaPods 更新慢&swift版本适配

    一.更新慢的问题 使用CocoaPods来添加第三方类库,无论是执行pod install还是pod update都卡在了Analyzing dependencies不动 原因在于当执行以上两个命令的 ...

  8. 报错:Can't bind to local 8647 for debugger

    修改8600为8601,并且勾上Use ADBHOST

  9. javascript--正则表达式--更新中

    引用地址:http://www.iteye.com/topic/481228 和http://www.cnblogs.com/rubylouvre/archive/2010/03/09/1681222 ...

  10. Maven deploy时报Fatal error compiling: tools.jar not found错误的问题处理

    摘自:http://blog.csdn.net/achilles12345/article/details/19046061 在Eclipse环境下,使用Maven进行deploy时发现报了该错误:F ...