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 ...
随机推荐
- (简单) POJ 3321 Apple Tree,树链剖分+树状数组。
Description There is an apple tree outside of kaka's house. Every autumn, a lot of apples will grow ...
- AWK第一篇------全面介绍
AWK-文本流编辑器 目录 [隐藏] 1 命令行语法 2 用shell实现调用awk 3 awk语言概要 3.1 记录和字段 3.2 脚本的格式 3.3 行为终止 3.4 注释 3.5 模式 3.6 ...
- js的this作用域
作者:zccst this作用域以前专门学习研究过,但发现依然不够全面和完整.现在继续学习 先列出之前看过的结论: 函数在被调用的时候会意外接受两个参数:this和argument,其中this的值跟 ...
- TcpView 查看端口的小工具(推荐)
介绍: TCPView是一个Windows程序,将显示你的详细清单的所有TCP和UDP端点在您的系统,包括拥有进程名称,远程地址和状态的TCP连接. 打开下面的链接就可以下载了. https://te ...
- css布局-多行文字垂直居中
方法一: 代码: <style> *{padding: ;margin:;font-size: 12px;} div{float: left;width: 200px;height:200 ...
- Ubuntu Linux下设置IP的配置命令
Ubuntu Linux下设置IP的配置命令 今天装了Ubuntu,但是发现不能上网,开始排查问题: 1.首先确定网络连接是否正确,所用的网线是否可以正常工作 2.查看网卡是否能正常工作,检测的方法如 ...
- CocoaPods 更新慢&swift版本适配
一.更新慢的问题 使用CocoaPods来添加第三方类库,无论是执行pod install还是pod update都卡在了Analyzing dependencies不动 原因在于当执行以上两个命令的 ...
- 报错:Can't bind to local 8647 for debugger
修改8600为8601,并且勾上Use ADBHOST
- javascript--正则表达式--更新中
引用地址:http://www.iteye.com/topic/481228 和http://www.cnblogs.com/rubylouvre/archive/2010/03/09/1681222 ...
- Maven deploy时报Fatal error compiling: tools.jar not found错误的问题处理
摘自:http://blog.csdn.net/achilles12345/article/details/19046061 在Eclipse环境下,使用Maven进行deploy时发现报了该错误:F ...