requireJS的初步掌握(二)
前面我们讲述了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的初步掌握(二)的更多相关文章
- [入门级] 基于 visual studio 2010 mvc4 的图书管理系统开发初步 (二)
[入门级] 基于 visual studio 2010 mvc4 的图书管理系统开发初步 (二) Date 周六 10 一月 2015 By 钟谢伟 Category website develop ...
- requireJS的初步掌握
前一段时间,因为一些事吧这个习惯落下了,现在争取重新捡起来. 最近开始自学requireJS,为了更好的掌握,所以写出一个自我理解的博客供参考. 分割线------------------------ ...
- Cardboard虚拟现实开发初步(二)
Google Cardboard 虚拟现实眼镜开发初步(二) Cardboard SDK for Unity的使用 上一篇文章作为系列的开篇,主要是讲了一些虚拟现实的技术和原理,本篇就会带领大家去看一 ...
- requireJS 源码(二) data-main 的加载实现
(一)requireJs 的整体结构: requireJS 源码 前192行,是一些 变量的声明,工具函数的实现 以及 对 三个全局变量(requirejs,require,define)若被占用后的 ...
- Jmeter初步使用二--使用jmeter做一个简单的性能测试
经过上一次的初步使用,我们懂得了Jmeter的安装与初步使用的方法.现在,我们使用Jmeter做一个简单的性能测试.该次测试,提交的参数不做参数化处理,Jmeter各元件使用将在介绍在下一博文开始介绍 ...
- redis 初步认识二(c#调用redis)
前置:服务器安装redis 1.引用redis 2.使用redis(c#) 一 引用redis (nuget 搜索:CSRedisCore) 二 使用redis(c#) using System ...
- DCOM初步窥探二
1.COM进程透明性表现在“组件对象和客户程序可以拥有各自的空间,也可以共享同一个进程空间”. COM负责把客户的调用正确传到组件对象中,并保证参数传递的正确性. 组件对象和客户代码不必考虑调用传递的 ...
- RequireJS -Javascript模块化(二、模块依赖)
上一篇文章中简单介绍了RequireJs的写法和使用,这节试着写下依赖关系 需求描述:我们经常写自己的js,在元素选择器这方面,我们可能会用jquery的$("#id")id选择器 ...
- 清北学堂—2020.1提高储备营—Day 3(图论初步(二))
qbxt Day 3 --2020.1.19 济南 主讲:李奥 目录一览 1.图论(kruskal算法,最短路径算法,拓扑排序) 总知识点:图论 一.kruskal算法 1.目的:求图的最小生成树 2 ...
随机推荐
- JAVA中字符串函数subString的用法小结
本篇文章主要是对JAVA中字符串函数subString的用法进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助 String str; str=str.substring(int begi ...
- Python+Selenuim测试网站,只能打开Firefox浏览器却不能打开网页的解决方法
最开始我使用的Selenium版本为2.48,Firefox版本为37,自动化打开网站的时候,可以正常打开. 后来由于Firefox的自检测更新,版本更新为47,导致版本不兼容,自动化打开网站浏览器时 ...
- ZOJ 3940 Modulo Query
0--M对某个数字取模,相当于把0--M区间进行切割,每次暴力切割一下.结果的算的时候二分一下即可... 看了官方题解才会... #include<cstdio> #include< ...
- (中等) POJ 3660 Cow Contest,Floyd。
Description N (1 ≤ N ≤ 100) cows, conveniently numbered 1..N, are participating in a programming con ...
- URL中有中文字符,转码方法
服务端返回的urlString里面有时含有中文,使用 [NSURL URLWithString:urlString]生成URL对象时,iOS客户端不能正确进行网络请求,网上找到的URLEncode方法 ...
- 【noip】华容道
描述 小 B 最近迷上了华容道,可是他总是要花很长的时间才能完成一次.于是,他想到用编程来完成华容道:给定一种局面,华容道是否根本就无法完成,如果能完成,最少需要多少时间. 小 B 玩的华容道与经典的 ...
- stm单片机之STM32F4-Discovery资料汇总 (转载自http://blog.163.com/thinki_cao/blog/static/83944875201362493134992/)
STM32F4的资料大部分都在这里: http://www.stmcu.org/download/index.php?act=ziliao&id=150 根据个人的理解对这些资料作了一些规律, ...
- vs2015编译mysql c++ connector
目前MySQL Connector/C++的binary版本最高只支持VS2008,VS2015需要下载源码自行编译. 1.CMAKE 到官网下载最新的稳定版本 把bin目录添加到环境变量PATH中 ...
- eclipse中集成svn maven开发手册---maven编译打包
使用eclipse中maven进行打包. 打好的包在相应的workspace下面会有一个release的文件夹,如图
- OSG和osgearth显示中文(转载)
osgEarth支持中文过程详解 OSG和osgearth显示中文 一.知识储备 要想很好的理解和解决这个问题,首先要了解什么是多字节和宽字节.说实话我之前也知道这两个字节到底有什么区别,只是简单 ...