上一篇文章中简单介绍了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模块化(二、模块依赖)的更多相关文章

  1. JavaScript模块化开发&&模块规范

    在做项目的过程中通常会有一些可复用的通用性功能,之前的做法是把这个功能抽取出来独立为一个函数统一放到commonFunctions.js里面(捂脸),实现类似于snippets的代码片段收集. fun ...

  2. javascript 模块化编程----模块的写法

    一.原始写法 模板就是实现特定功能的一组方法 只要把不同的函数(以及记录状态的变量)简单地放在一起,就算是一个模块. function m1(){ //... } function m2(){ //. ...

  3. RequireJS -Javascript模块化(一、简介)

    1.认识RequireJS RequireJs官网(http://requirejs.org/)的描述: RequireJS is a JavaScript file and module loade ...

  4. JavaScript模块化编程之AMD - requireJS基础使用

    JavaScript模块化编程之AMD requireJS基础使用 标签(空格分隔): JavaScript 参考文章 AMD规范 AMD是"Asynchronous Module Defi ...

  5. JavaScript模块化编程之AMD

    简单的说一下AMD是"Asynchronous Module Definition"的缩写,意思就是"异步模块定义".它采用异步方式加载模块,模块的加载不影响它 ...

  6. Javascript模块化编程(二)AMD规范(规范使用模块)

    这个系列的第一部分介绍了Javascript模块的基本写法,今天介绍如何规范地使用模块,先想一想,为什么模块很重要?接下来为您详细介绍,感兴趣的朋友可以了解下啊.今天介绍如何规范地使用模块. 七.模块 ...

  7. Javascript模块化编程(二):AMD规范

    Javascript模块化编程(二):AMD规范   作者: 阮一峰 原文地址:http://www.ruanyifeng.com/blog/2012/10/asynchronous_module_d ...

  8. Javascript模块化编程(一):模块的写法

    Javascript模块化编程(一):模块的写法 作者: 阮一峰 原文链接:http://www.ruanyifeng.com/blog/2012/10/javascript_module.html ...

  9. Javascript模块化编程(一):模块的写法(转)

    随着网站逐渐变成"互联网应用程序",嵌入网页的Javascript代码越来越庞大,越来越复杂. 网页越来越像桌面程序,需要一个团队分工协作.进度管理.单元测试等等......开发者 ...

随机推荐

  1. 服务机器人的小脑——SLAM技术

    博客转载自:https://www.leiphone.com/news/201706/DZlMscTwdIzFyodg.html 雷锋网(公众号:雷锋网)按:本文作者SLAMTEC(思岚科技公号sla ...

  2. head first 设计模式 观察者模式

    Head first 设计模式:定义了对象之间的一对多依赖,这样一来,当一个对象改变状态时,它的所有依赖者都会受到通知并自动更新.   让主题与观察者之间松耦合 大话设计模式:定义了一种一对多的依赖关 ...

  3. python3-字典中存储列表

    # Auther: Aaron Fan #示例1:#存储所点披萨的信息pizza = { '外皮':'厚的', '配料列表':['香菇', '奶酪'],}#概述所点的比萨print('您点了一道&qu ...

  4. Batch Normalization 与Dropout 的冲突

    BN或Dropout单独使用能加速训练速度并且避免过拟合 但是倘若一起使用,会产生负面效果. BN在某些情况下会削弱Dropout的效果 对此,BN与Dropout最好不要一起用,若一定要一起用,有2 ...

  5. Django之QuerySet 创建对象

    在前面的模型介绍中设置了3个对象,出版商(publisher),作者(Authro),书籍(book).首先我们在网页中添加各个对象信息填写的界面.填写后点击提交.将会传递给后端.传递方式采用post ...

  6. MyBatis的使用步骤及配置

    1.导入mybatis的jar包:mybatis-x.x.x.jar 2.使用XML配置mybatis,创建SqlSessionFactory XML配置文件的名称通常为mybatis-config. ...

  7. POJ - 3468A Simple Problem with Integers (线段树区间更新,区间查询和)

    You have N integers, A1, A2, ... , AN. You need to deal with two kinds of operations. One type of op ...

  8. Python之函数练习题

    一.简述普通参数.指定参数.默认参数.动态参数的区别 普通参数:就是放入一个形参,当放入实参时,需要按照顺序给形参值. 指定参数:放入实参时是指定的,不用按照顺序给形参,都能让形参获得相应的参数. 默 ...

  9. ajax遍历数据生成下拉框

    <script type="text/javascript">        function GetEQIDList(ModuleID)    {        $. ...

  10. loj #6485. LJJ 学二项式定理 (模板qwq)

    $ \color{#0066ff}{ 题目描述 }$ LJJ 学完了二项式定理,发现这太简单了,于是他将二项式定理等号右边的式子修改了一下,代入了一定的值,并算出了答案. 但人口算毕竟会失误,他请来了 ...