RequireJS介绍与应用

最新推荐文章于 2024-05-23 09:31:17 发布

为谁攀登

最新推荐文章于 2024-05-23 09:31:17 发布

阅读量549

点赞数 1

分类专栏： # 工程化文章标签： javascript

本文链接：https://blog.csdn.net/shaixinxin/article/details/106155211

版权

工程化专栏收录该内容

13 篇文章 0 订阅

订阅专栏

介绍

官方介绍
RequireJS是一个JavaScript文件和模块加载器。它针对浏览器内使用进行了优化，但可以在其他JavaScript环境（例如Rhino和Node）中使用。使用像RequireJS这样的模块化脚本加载器将提高代码的速度和质量。下面我们会使用一个实例对其引用方式、使用方法进行说明

1、示例目录结构

下图是使用RequireJS的常规目录结构介绍：
1、apps/中data.js用于数据层处理，view.js用于视图层处理，index.js用于绑定数据和视图。
2、libs/中存放依赖组件jquery-xxx.js和require.js。
3、main.js是主配置文件，用于建立其它js文件和RequireJS关系。
4、index.html是一个视图模板。
在这里插入图片描述

2、实例开发

2.1、模板编写

在index.html模板中需要使用脚本标签引入require.js，并且需要指定data-main="js/main.js"

<script data-main="js/main.js" src="js/libs/require.js"></script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入require.js -->
    <script data-main="js/main.js" src="js/libs/require.js"></script>
</head>
<body>
    <div id="testId"></div>
</body>
</html>

2.2、配置文件处理

在主配置文件main.js中，将需要引用的各js文件，交给requirejs管理。这里是给每一个js文件起一个别名，然后以对象形式注入到requirejs中，后续在其它js文件中可以直接使用别名调用。

//主配置文件
requirejs.config({
    //定义基础目录路径
    baseUrl:'js/',
    //创建文件映射关系，.js后缀不需要写
    paths:{
        "jquery":"libs/jquery-3.2.1",
        "data":"apps/data",
        "index":"apps/index",
        "view":"apps/view"
    }
});

//在requirejs中引入上面定义的js文件，$符号表示jquery对象
requirejs(["jquery","data","index","view"],function ($,data,index,view) {

});

2.3、数据处理

在data.js中定义一个数据处理函数，返回hello world文本。另外，我们可以看到requirejs使用define()函数进行自定义。

/**
 *  数据定义：负责数据处理
 */
define(function () {
    function getData() {
        return "hello world";
    }
    return{
        getData:getData
    }
});

2.4、视图处理

在view.js中定义一个视图处理函数，里面包括了get方法和set方法，get方法用于绑定html模板中testId值，set方法用于给html模板赋值后暴露给外部调用

/**
 *  视图定义：负责视图处理
 */
define(["jquery"],function ($) {
    //get视图
    function getView() {
       return  $("#testId");
    }
    //set视图
    function setView(data) {
        getView().html(data);
    }
    return{
        setView:setView,
    }
});

2.5、数据与视图绑定

在index.js中绑定数据，渲染视图

/**
 *  绑定数据，渲染视图
 */
define(["data","view"],function (data, view) {
    view.setView(data.getData);
});

2.6、效果查看

访问index.html界面，可以看到hello world文本渲染成功，同时在控制台也可以看到相关的js文件加载成功
在这里插入图片描述

为谁攀登

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
RequireJS介绍与应用

介绍官方介绍RequireJS是一个JavaScript文件和模块加载器。它针对浏览器内使用进行了优化，但可以在其他JavaScript环境（例如Rhino和Node）中使用。使用像RequireJS这样的模块化脚本加载器将提高代码的速度和质量。下面我们会使用一个实例对其引用方式、使用方法进行说明目录介绍1、示例目录结构2、实例开发2.1、模板编写2.2、配置文件处理2.3、数据处理2.4、视图处理2.5、数据与视图绑定2.6、效果查看1、示例目录结构下图是使用RequireJS的常规目录结构介绍
复制链接

扫一扫

专栏目录