zoukankan      html  css  js  c++  java
  • 脱离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");
    });

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

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

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

  • 相关阅读:
    一些话
    把视频文件拆成图片保存在沙盒中
    相册视频保存进沙盒
    数据库
    C 计算数组长度
    iOS之与JS交互通信
    iOS之duplicate symbols for architecture x86_64错误
    iOS之隐藏状态栏
    iOS之开发程序之间的跳转及跳转到appStore
    iOS之常用的判NULL的方法
  • 原文地址:https://www.cnblogs.com/ceet/p/9077613.html
Copyright © 2011-2022 走看看