zoukankan      html  css  js  c++  java
  • 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
  • 相关阅读:
    第2讲——处理数据
    第1讲——用C++写一个程序
    数论18——反演定理(莫比乌斯反演)
    数论17——反演定理(二项式反演)
    数论16——母函数
    数论15——抽屉原理
    数论14——容斥原理
    数论13——康托展开
    com.opensymphony.xwork2.config.ConfigurationManager.addConfigurationProvider
    Tomcat的杂七杂八
  • 原文地址:https://www.cnblogs.com/wrcold520/p/5485334.html
Copyright © 2011-2022 走看看