上一篇文章中简单介绍了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. ROS Learning-031 （提高篇-009 A Mobile Base-07） 控制移动平台 --- （操作）人机交互

    ROS 提高篇 之 A Mobile Base-07 - 控制移动平台 - (操作)人机交互 我使用的虚拟机软件:VMware Workstation 11 使用的Ubuntu系统:Ubuntu 14 ...

  2. Verilog 语言 001 --- 入门级 --- 编写一个半加器电路模块

    Verilog 语言编写一个 半加器 电路模块 半加器 的电路结构: S = A 异或 B C = A 与 B 1. 程序代码 module h_adder (A, B, SO, CO); input ...

  3. 如何将.jpg图片 转换成.eps 格式图片

    在使用latex写作论文的时候,需要插入一些图片,但是往往有些图片不是eps格式的.虽然网上有如何插入jpg格式的图片方法,但是经过我实验后发现都不太管用.最后找到一个比较靠谱的方法,使用latx本身 ...

  4. noi.ac day1t3 Sort

    传送门 分析 快排的原理是以任意一个数为标准,然后把所有小于它的数换到它的左边,所有大于它的数换到它的右边.我们就使用快排的思路,分治整个区间.对于每个区间以排好序的这个数列的中间位置的值为标准,然后 ...

  5. Entity Framework Tutorial Basics（37）：Lazy Loading

    Lazy Loading: One of the important functions of Entity Framework is lazy loading. Lazy loading means ...

  6. 《Maven实战》笔记-8-构建部署Web项目

      一.Web项目结构 1.显式指定Web项目打包方式为war:   2.默认目录 根据“约定大于配置”的规则,Web项目的类及资源文件默认位置为src/main/java和src/main/reso ...

  7. java多线程系列：Semaphore和Exchanger

    本篇文章将介绍Semaphore和Exchanger这两个并发工具类. Semaphore 信号量(英语:Semaphore)又称为信号标,是一个同步对象,用于保持在0至指定最大值之间的一个计数值.当 ...

  8. maven-排除传递依赖-exclusions

    在maven项目中引用dubbo的maven依赖的时候会引入dubbo中传递依赖的spring的依赖包如下:         <!-- dubbo相关的jar包 -->        &l ...

  9. Core中间件——访问记录

    引言 上半年使用的thinkjs开发的node项目有一个优点就是所有请求都会有日志记录在控制台输出,里面包含了请求地址以及耗时.我就希望在.net中也可以实现这样子的功能,正好想到了中间件,所以就用中 ...

  10. JSPatch在MAC下的使用

    简单调研JSPatch的使用,之所以在MAC下是因为可以创建一个命令行的应用,简化无关代码.具体做法如下: 第一步,去https://github.com/bang590/JSPatch/tree/m ...