标签：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，希望大家多多练习，共同进步。
标签：com 根目录 .config jqueryui 第一个 3.1.1 相对 requirejs ref
原文地址：http://www.cnblogs.com/wymbk/p/6375534.html
