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 ...
随机推荐
- 关于NOMINMAX这个预处理宏
标准库在<algorithm>头中定义了两个模板函数std::min() 和 std::max().通常用它可以计算某个值对的最小值和最大值.可惜在 Visual C++ 无法使用它们,因 ...
- python模块--ip地址转换为整数
python整数与IP地址转换 [转] 我们有时会将一个整数与IP地址进行互换,用python代码实现很简单 将一个整数如2000000,变为一个IP地址的方式 >>> import ...
- truetype技术和矢量字库的技术原理及实现(转)
源:truetype技术和矢量字库的技术原理及实现 广泛汉字矢量字库(HZKSLxxJ)格式 在矢量字库中,每个汉字都是以128 X 128点阵制成矢量数据.每个汉字 ...
- 【转】聊聊HTTPS和SSL/TLS协议
要说清楚 HTTPS 协议的实现原理,至少需要如下几个背景知识.1. 大致了解几个基本术语(HTTPS.SSL.TLS)的含义2. 大致了解 HTTP 和 TCP 的关系(尤其是“短连接”VS“长连接 ...
- iOS开发——NSDate(待续...)
1.获取当前系统时间,毫秒级 - (void)viewDidLoad { [super viewDidLoad]; NSString *currentTime = [self getCurrentTi ...
- JDBC连接数据库以及简单的操作
package com.zhiyuan.jdbc.util; import java.sql.Connection;import java.sql.DriverManager;import java. ...
- iOS 消息推送原理及实现总结 分类: ios技术 2015-03-01 09:22 70人阅读 评论(0) 收藏
在实现消息推送之前先提及几个于推送相关概念,如下图: 1. Provider:就是为指定IOS设备应用程序提供Push的服务器,(如果IOS设备的应用程序是客户端的话,那么Provider可以理解为服 ...
- intel Xeon(R) CPU E5-2650 v2 性能测试报告
intel Xeon(R) CPU E5-2650 v2 ...
- diskpart修改盘符
开机运行一批处理.内容如下:diskpart /s c:\disk.txt c:\disk.txt内容如下:select disk 1 #1选择第二个硬盘 0选择第二个硬盘sel ...
- Python常见数据结构整理
Python中常见的数据结构可以统称为容器(container).序列(如列表和元组).映射(如字典)以及集合(set)是三类主要的容器. 一.序列(列表.元组和字符串) 序列中的每个元素都有自己的编 ...