• requireJS目录


    前言

    对于像我这种requireJS初学者而言,requireJS最难理解的部分应该是它的路径问题。晚上随便折腾了一下,算是稍微理清了这个目录问题吧。
    requireJS学习网址:requireJS中文网 requireJS英文网

    requireJS简介

    随着前端代码量的日益庞大和复杂的结构,以及越来越多框架的出现,如何有效的管理你的代码,已经成为一个团队亟待解决的问题。而RequireJS的目标是鼓励代码的模块化,它使用了不同于传统script标签的脚本加载步骤。可以用它来加速、优化代码,但其主要目的还是为了代码的模块化。RequireJS以一个相对于baseUrl的地址来加载所有的代码。下图是随便写的一个小的DEMO文件目录:
    这里写图片描述

    baseUrl模块查找的根路径

    首先在index.html页面中引入requireJS文件

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

    或者

        <script src="js/lib/require.js"></script>

    引入requireJS文件,可以需要接下来文件的主入口属性data-main,也可以不需要。

    无data-main属性

    如果没有data-main属性,则baseUrl默认为引入requireJS文件的HTML所处的位置,上述代码中为“wechart/”

    有data-main

    如果有data-main属性,则baseUrl默认为data-main属性值中的文件目录,上述中即为“js”

    config中设置

    可以在require.config({})中明确设置。
    DEMO中把相关的配置写进了主入口文件即entry.js中

    require.config({
        baseUrl: "js/",
        paths: {
            jquery: "lib/jquery/jquery-1.7.1"
        }
    });

    baseUrl的目录不是以“/”或者相关协议(如http或https)开头,则默认为相对路径。例如我们把上面baseUrl改成“/js/”,则就变成相对于磁盘的根目录啦。这里写图片描述
    这里可以看到jquery和a两个文件没有正确加载。原因是目录相对于c盘了。其余模块正常加载原因继续向下看。


    上面所说的baseUrl目录,都是只在定义模块时用到的路径。如a.js文件:

    define(['jquery'], function($) {
        return function() {
            $("#test").html("<p>aaa</p>");
        }
    });

    模块a中的文件依赖jquery,需要先加载jquery之后才能执行模块里面的回调函数,而jquery的模块查找完整路径即为entry.js里面的baseUrl+paths配置目录(paths具体配置可参考官网相关介绍),即为**”wechart/js/lib/jquery/jquery-1.7.1.js”。

    ps:requireJS内部默认为需要加载的js文件添加后缀名“.js”,所以可以省略相应的后缀名,如果配置中给jquery添加后缀名,则会出现两个”.js”。

    这里写图片描述

    对于一个模块加载另一个模块的目录问题

    DEMO中我的模块b依赖于模块a:

    define(['jquery','my/a'], function($, a) {
        a();
        console.log("bbb");
    });

    则模块b加载前加载模块的目录为baseUrl+依赖中定义的目录,上述加载模块a的目录为js/my/a.js。由于模块a的路径也需要根据baseUrl来查找,所以上面baseUrl更改成“/js/”时,模块a也加载出错。

    HTML中require相关模块的路径问题

    require中相关模块路径查找为baseUrl+require依赖中所给目录
    但是,
    由于require内部模块加载机制为异步加载,所以相应的baseUrl需区分以下情况

    有主入口文件且为配置文件

    由于上面叙述过,如果有data-main,且文件里有baseUrl配置,则baseUrl应为配置中的“js/”,但因为requireJS异步加载机制,主入口文件需要在HTML的所有script文件加载后才开始加载,即在require执行加载模块时,相应的主入口文件entry.js尚未被加载。则此时的baseUrl仍为主入口的文件目录。所以HTML中加载模块b时需要使用“../”进入“js/”目录。
    DEMO中index.html代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <div id="test">111</div>
        <script src="js/lib/require.js" data-main="js/entry/entry"></script>
        <script>
            require(['../my/b'], function(b) {
                console.log("b has been called");
            });
        </script>
    </body>
    </html>

    无主入口文件

    把相应的配置文件代码放在加载模块代码前,则此时的baseUrl即为配置中的目录。相应的HTML代码更改为

    <script>
        require.config({
            baseUrl: "js/",
            paths: {
                jquery: "lib/jquery/jquery-1.7.1"
            }
        });
    
        require(['my/b'], function(b) {
            console.log("b has been called");
        });
        </script>

    对于无配置文件的情况不利于代码的后期维护,果断省略。。。

  • 相关阅读:
    Java Web学习笔记之---EL和JSTL
    Java Web学习笔记之---Servlet
    Java Web项目案例之---登录注册和增删改查(jsp+servlet)
    Java项目案例之---加法计算器(转发和重定向)
    Java Web项目案例之---登录和修改(JSP)
    Java Web学习笔记之---JSP
    Java项目案例之---定时器的使用
    Java项目案例之---常用工具类练习
    Java学习笔记之---API的应用
    这些年我对安全成熟度模型的一点点思考
  • 原文地址:https://www.cnblogs.com/qingguo/p/5686293.html
Copyright © 2020-2023  润新知