文档章节

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

雨落秋垣
 雨落秋垣
发布于 2018/05/23 16:40
字数 391
阅读 32
收藏 0

首先,工程目录:

现在主页面(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");
});

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

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

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

© 著作权归作者所有

雨落秋垣

雨落秋垣

粉丝 31
博文 8
码字总数 10382
作品 3
深圳
前端工程师
私信 提问
RequireJS极简入门教程

RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Using a modular s......

程序员诗人
2017/03/30
0
0
使用 RequireJS 优化 Web 应用前端

基于 AMD(Asynchronous Module Definition)的 JavaScript 设计已经在目前较为流行的前端框架中大行其道,jQuery、Dojo、MooTools、EmbedJS 等纷纷在其最新版本中加入了对 AMD 的支持。本文...

IBMdW
2012/09/11
8.6K
16
RequireJS与SeaJS模块化加载示例

web应用越变的庞大,模块化越显得重要,尤其Nodejs的流行,Javascript不限用于浏览器,还用于后台或其他场景时,没有Class,没有Package的Javascript语言变得难以管理,于是出现CommonJS项目...

nosand
2014/05/04
4.2K
10
使用 RequireJS 实现 JavaScript 的延迟加载

无论简单还是复杂的Web应用,都由一些HTML、JavaScript、CSS文件组成。通常开发者会通过JQuery、Knockout、Underscore等等这样的第三方JavaScript框架来提高开发速度。由于这些JavaScript框架...

oschina
2013/01/12
3.3K
2
RequireJS 入门指南

简介 如今最常用的JavaScript库之一是RequireJS。最近我参与的每个项目,都用到了RequireJS,或者是我向它们推荐了增加RequireJS。在这篇文章中,我将描述RequireJS是什么,以及它的一些基础...

oschina
2013/08/15
71.6K
37

没有更多内容

加载失败,请刷新页面

加载更多

反编译9.png图片还原

本文链接:https://blog.csdn.net/a1140778530/article/details/10528507 经常反编译apk文件找资源,9.png的文件处理起来很麻烦。 最近使用Ant自动编译打包app时,从别处搜罗来的9.png文件导...

shzwork
11分钟前
2
0
Shell脚本应用 – for、while循环语句

一、for循环语句 在实际工作中,经常会遇到某项任务需要多次执行的情况,而每次执行时仅仅是处理的对象不一样,其他命令相同。例如:根据通讯录中的姓名列表创建系统账号等情况。 当面对各种...

linux-tao
11分钟前
2
0
RPA风潮下企业财务工作模式的变革

RPA(机器人流程自动化)在财务领域的应用,正给企业财务带来前所未有的改变。 前RPA时代,财务领域面临的痛点 在RPA机器人应用之前,企业财务工作进程的推进,主要通过财务人员人工操作或信...

UiBot
16分钟前
3
0
Hive之命令行修改表注释

最近遇到一个需求,在不重建表的情况下,修改表的注释,hive有没有类似关系型数据库的SQL命令来修改呢,找了下,亲测有效,如下List-1 List-1 hive>use your_schemahvie>ALTER TABLE tabl...

克虏伯
17分钟前
3
0
是什么,它的作用是什么

在HTML文档的首部往往会有这么一句话<!DOCTYPE html>,许多时候我们忽视了它的存在,它实际上是一个声明,告诉浏览器用哪种HTML版本的规范来解读HTML文档。 尽管我们不给出这句声明浏览器照样...

前端老手
22分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部