require.js(浅聊)

时间:2023-12-11 18:07:50

一、require
  了解requirejs之前首先明白什么是模块化;
  1、什么是模块化?
    模块化设计是指在对一定范围内的不同功能或相同功能不同性能、不同规格的产品进行功能分析的基础上,划分并设计出一系列功能模块,通过模块的选择和组合可以构成不同的产品,以满足市场的不同需求的设计方法。
    我的理解就是根据不同的功能和不同的产品属性分成不同的模块,然后模块之间相互关联,构成项目(粗浅实用);
  2、模块化的优点?
    ①、.相对独立性,可以对模块单独进行设计、制造、调试、修改和存储,这便于由不同的专业化企业分别进行生产;
    ②、性能稳定、结构简单、成本低廉;
    ③、便于维护,有利于团队开发;
  3、js中模块化有哪些产品?
    ①、sea.js
    ②、require.js
  4、require.js
    RequireJS是一个非常小巧的JavaScript模块载入框架,是AMD规范最好的实现者之一。
    require中的依赖是一个数组,即使只有一个依赖,你也必须使用数组来定义,
    requir API的第二个参数是callback,一个function,是用来处理加载完毕后的逻辑。
  5、加载文件

    ①、通过define函数定义了一个模块,然后再页面中使用:

require.js(浅聊)

    ②、加载模块

    require.config是用来配置模块加载位置;

    通过paths的配置会使我们的模块名字更精炼,paths还有一个重要的功能,就是可以配置多个路径;

    shim配置非AMD模块输出,没有用define来申明的模块;

require.js(浅聊)

require.js(浅聊)

    ③、requirejs提供了一种叫"主数据"的功能,我们首先创建一个main.js:
    然后再页面中使用下面的方式来使用requirejs:

require.js(浅聊)

    加载requirejs脚本的script标签加入了data-main属性,这个属性指定的js将在加载完reuqire.js后处理,我们把require.config的配置加入到data-main后,就可以使每一个页面都使用这个配置,然后页面中就可以直接使用require来加载所有的短模块名,data-main还有一个重要的功能,当script标签指定data-main属性时,require会默认的将data-main指定的js为根路径,是什么意思呢?如上面的data-main="js/main"设定后,我们在使用require(['jquery'])后(不配置jquery的paths),require会自动加载js/jquery.js这个文件,而不是jquery.js,相当于默认配置了:

    ④、main的设置

require.js(浅聊)