require JS入门及打包

最新推荐文章于 2022-03-13 22:15:05 发布

SunPrincess

最新推荐文章于 2022-03-13 22:15:05 发布

阅读量700

点赞数

分类专栏：工具

本文链接：https://blog.csdn.net/SunPrincess/article/details/50978943

版权

工具专栏收录该内容

3 篇文章 0 订阅

订阅专栏

require Js 入门

代码库结构示例：

其中部分文件代码及作用解析如下：

index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script data-main="js/main.js" src="js/require.js"></script>
</head>
<body>
    <p>hi~</p>
</body>
</html>

js/main.js:

js入口文件，其中设置基本参数，调用函数。

require.config({
    baseUrl: 'js',  /*相对于根路径的绝对路径，与main.js本身的位置没有关系*/
    paths: {
        jquery: 'jquery/jquery-1.11.1',  /*不用加后缀.js*/
        aaa: 'jquery/jquery-aaa',
        values: 'other_js/values',
        tourl: 'other_js/tourl'
    }
});

// Start the main logic.
require(['jquery', 'aaa', 'values', 'tourl'], function ($, a, v, t) {
        $(document).ready(function () {
            t;/*注释后一样执行，因为引用的时候相当于调用了。*/
            a.al();/*若想手动调用其中函数，可以设置返回值，然后手动调用*/
    });
});

js/other_js/tourl.js:

define(["require"], function(require) {
    return alert(require.toUrl("./style.css"));
});

js/jquery/jquery.aaa.js:

define (function () {
    return {
        al: function() {alert('kk');}
    };
});

执行index.html代码后，结果如图：

第一次弹框：

第二次弹框：

require Js 利用r.js打包（以下经验借鉴自他人博客点击打开原文链接）

首先下载r,js，然后保证需要打包以及涉及到的文件处于 同一目录下。

代码库结构示例：

其中部分文件代码如下：

index.html

SunPrincess

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
require JS入门及打包

require Js 入门代码库结构示例：其中部分文件代码及作用解析如下：index.html： Title hi~js/main.js:js入口文件，其中设置基本参数，调用函数。require.config({ baseUrl: 'js', /*相对于根路径的绝对路径，与main.js本
复制链接

扫一扫