RequireJS -Javascript模块化(二、模块依赖)
上一篇文章中简单介绍了RequireJs的写法和使用,这节试着写下依赖关系
需求描述:我们经常写自己的js,在元素选择器这方面,我们可能会用jquery的$("#id")id选择器去代替document.getElementById("id")这个原生的js选择器,那么我们的js文件就需要依赖于jquery,通常我们需要在index.html的<head>标签中先引入jquery,然后引入我们的js文件以达到这样的效果,那么如果放在RequireJs中我们该怎样去添加这个依赖关系呢?
项目结构目录:
1、编写我们的js(js/my/sw.js),让其不符合AMD规范,也就是不写define()函数。
! function(window, $) { var sw = {}; //定义一个版本号,将jquery的版本号赋给sw的版本号
sw.version = $().jquery; window.sw = sw; //sw不定义define()方法,让它不符合AMD规范
// define(function() {
// return sw;
// }); }(window, $);
在sw.js中我们定义一个版本号,将jquery的版本号赋给我的版本号。
2、编写RequireJs的入口main.js(js/main.js)
require.config({
baseUrl: "js",
paths: {
jquery: "jq/jquery",
dr: "my/dr",
sw: "my/sw"
},
shim: {
"sw": {
deps: ["jquery"],
exports: "sw"
}
}
}) require(["dr", "sw"], function(dr, sw) {
if (dr) {
console.info("dr.js is ready!");
console.log("dr.version: " + dr.version)
}
if (sw) {
console.info("sw is ready!");
if (sw.version) {
console.log("sw depend on jquery successfully!");
console.log("sw version: " + sw.version);
}
}
})
在main.js里面,我们定义了需要使用的js API(Jquery、dr、sw),在require方法中只添加了dr和sw两个module,那么我们在页面中也只能使用dr和sw两个API。
依赖关系:sw依赖于jquery,我们在config方法中添加了一个shim的属性:这个“deps”属性中说明了依赖关系("sw": ["jquery"],如果还需要依赖于其他的api,比如bootstarp,将bootstrap追加到数组中,类似于这样:"sw": ["jquery","bootstrap"]),而“exports”属性指定了module的名称。
在require()方法中,我们的回调函数将会通知我们sw的依赖是否成功,依赖成功,打印sw版本号。
3、index.html
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<script type="text/javascript" src="js/require.js" data-main="js/main.js" async="async" defer="defer"></script>
<title></title>
</head> <body>
<p>this is index.html</p>
<!-- 点击按钮获取dr和sw的版本号 -->
<button onclick="getVersion();">获取版本</button>
<script>
function getVersion() {
console.log("index-->dr version: " + dr.version);
console.log("index-->sw version: " + sw.version);
}
</script>
</body> </html>
4、测试:
dr.js is ready!
dr.version: v1.0
sw is ready!
sw depend on jquery successfully!
sw version: 1.9.1
//点击按钮后的输出
index-->dr version: v1.0
index-->sw version: 1.9.1
RequireJS -Javascript模块化(二、模块依赖)的更多相关文章
- JavaScript模块化开发&&模块规范
在做项目的过程中通常会有一些可复用的通用性功能,之前的做法是把这个功能抽取出来独立为一个函数统一放到commonFunctions.js里面(捂脸),实现类似于snippets的代码片段收集. fun ...
- javascript 模块化编程----模块的写法
一.原始写法 模板就是实现特定功能的一组方法 只要把不同的函数(以及记录状态的变量)简单地放在一起,就算是一个模块. function m1(){ //... } function m2(){ //. ...
- RequireJS -Javascript模块化(一、简介)
1.认识RequireJS RequireJs官网(http://requirejs.org/)的描述: RequireJS is a JavaScript file and module loade ...
- JavaScript模块化编程之AMD - requireJS基础使用
JavaScript模块化编程之AMD requireJS基础使用 标签(空格分隔): JavaScript 参考文章 AMD规范 AMD是"Asynchronous Module Defi ...
- JavaScript模块化编程之AMD
简单的说一下AMD是"Asynchronous Module Definition"的缩写,意思就是"异步模块定义".它采用异步方式加载模块,模块的加载不影响它 ...
- Javascript模块化编程(二)AMD规范(规范使用模块)
这个系列的第一部分介绍了Javascript模块的基本写法,今天介绍如何规范地使用模块,先想一想,为什么模块很重要?接下来为您详细介绍,感兴趣的朋友可以了解下啊.今天介绍如何规范地使用模块. 七.模块 ...
- Javascript模块化编程(二):AMD规范
Javascript模块化编程(二):AMD规范 作者: 阮一峰 原文地址:http://www.ruanyifeng.com/blog/2012/10/asynchronous_module_d ...
- Javascript模块化编程(一):模块的写法
Javascript模块化编程(一):模块的写法 作者: 阮一峰 原文链接:http://www.ruanyifeng.com/blog/2012/10/javascript_module.html ...
- Javascript模块化编程(一):模块的写法(转)
随着网站逐渐变成"互联网应用程序",嵌入网页的Javascript代码越来越庞大,越来越复杂. 网页越来越像桌面程序,需要一个团队分工协作.进度管理.单元测试等等......开发者 ...
随机推荐
- ROS Learning-011 beginner_Tutorials (编程) 编写 ROS 话题版的 Hello World 程序(Python版)
ROS Indigo beginner_Tutorials-10 编写 ROS 话题版的 Hello World 程序(Python版) 我使用的虚拟机软件:VMware Workstation 11 ...
- c#与Java事件定义的不同
C#: using System; using System.Collections.Generic; using System.Text; namespace Test1 { class Progr ...
- poj2287 Tian Ji -- The Horse Racing
传送门 分析 这个题和传统的田忌赛马不一样的地方就是多了平局情况,所有我们不难想到要用dp.我们先将两人的马均降序排列,用dpij表示考虑前i匹马,田忌有几匹马是按从大到小的顺序从头取的(剩下的是从尾 ...
- Luogu 2467 [SDOI2010]地精部落
挺有意思的题. 优质题解: https://www.luogu.org/blog/user55639/solution-p2467 题意为求长度为n,取值为$[1, n]$的波动序列的个数. 首先需要 ...
- python3-打印一个进度条
# Auther: Aaron Fan import sys,time for i in range(30): #打印一个#号,这种方法打印不会自动换行 sys.stdout.write('#') # ...
- 前端基础 之JS
浏览目录 JavaScript语法基础 JavaScript数据类型及类型查询 JavaScript运算符 JavaScript流程控制 JavaScript函数 词法分析 JavaScript内置对 ...
- CodeForces 658C Bear and Forgotten Tree 3 (构造)
题意:构造出一个 n 个结点,直径为 m,高度为 h 的树. 析:先构造高度,然后再构造直径,都全了,多余的边放到叶子上,注意直径为1的情况. 代码如下: #pragma comment(linker ...
- 《Head First Servlets & JSP》-12-Web应用安全
serlvet安全的4大要素 认证.授权.机密性和数据完整性. 容器完成认证和授权的过程 代码中不要有安全信息 大多数Web应用,大多数情况下Web应用的安全约束都应该以声明方式处理,即在部署描述文档 ...
- 20169219《Linux内核原理及分析》第十二周作业
格式化字符串漏洞实验 格式化字符串攻击原理是利用格式化函数(如printf())的沿着堆栈指针向下打印的特性,通过只提供格式化字符串但不提供对应的变量,读取栈内空间的内容. 更进一步,通过将某个要攻击 ...
- 小小c#算法题 - 7 - 堆排序 (Heap Sort)
在讨论堆排序之前,我们先来讨论一下另外一种排序算法——插入排序.插入排序的逻辑相当简单,先遍历一遍数组找到最小值,然后将这个最小值跟第一个元素交换.然后遍历第一个元素之后的n-1个元素,得到这n-1个 ...