脱离node自己使用普通的requirejs管理js资源

首先，工程目录：

现在主页面（web框架写法.html）：

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>requirejs的使用</title>
        <!-- 属性 data-main 是告诉requirejs：你下载完以后，马上去载入真正的入口文件 -->
        <script src="https://cdn.bootcss.com/require.js/2.3.5/require.min.js" data-main="js/config.js"></script>
    </head>

    <body>
        <div class="box" v-cloak>
            内容一：<span v-text="other"></span>
        </div>
        <br />
        <div class="box2">
            内容二：<span id="other2"></span>
        </div>
    </body>
    <script>
        /**
         * 载入程序主模块
         * 这里不写JS代码（建议）
         */
        require(['../js/indexController']);
    </script>

</html>

接下来是 config.js

/**
 * 配置requirejs 比如项目中用到哪些模块，文件路径是什么
 * 在使用requirejs时，加载模块时不用写.js后缀的，当然也是不能写后缀
 * urlArgs的作用是清楚缓存
 * paths中使用两个是多路径解析，当第一个加载不成功或者加载出现问题会放弃第一个自动加载第二个(可以配置一大堆)
 * shim是将某个依赖中的某个全局变量暴露给requirejs，当作这个模块本身的引用
 */
requirejs.config({
    baseUrl: './',
    urlArgs: 'v=' + (new Date()).getTime(),
    paths: {
        'jquery': ['https://google-api.ac.cn/cdn/jquery/3.3.1/jquery.min', 'https://cdn.bootcss.com/jquery/3.3.1/jquery.min'],
        'vue': ['https://google-api.ac.cn/cdn/vue/2.5.16/vue.min', 'https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min']
    },
    shim: {
        
    }
});

最后是 indexController.js 

/**
 * 这里是config载入的程序主模块的内容
 * 可以加入多个主模块（建议）
 */
define(['vue','jquery'], function(vm) {
    new vm({
        el: '.box',
        data: {
            other: 'HelloWorld',
        }
    });
    $("#other2").html("HelloChina");
});

-----------------------------------------------------------------------------------------------------------------------------------

很简单的例子，直接复制粘贴修修改改就可以使用，代码也少。

喜欢的人拿去用吧，大牛勿喷

posted @ 2018-05-23 16:39  雨落秋垣  阅读(294)  评论(0)  编辑  收藏  举报