一、require
了解requirejs之前首先明白什么是模块化;
1、什么是模块化?
模块化设计是指在对一定范围内的不同功能或相同功能不同性能、不同规格的产品进行功能分析的基础上,划分并设计出一系列功能模块,通过模块的选择和组合可以构成不同的产品,以满足市场的不同需求的设计方法。
我的理解就是根据不同的功能和不同的产品属性分成不同的模块,然后模块之间相互关联,构成项目(粗浅实用);
2、模块化的优点?
①、.相对独立性,可以对模块单独进行设计、制造、调试、修改和存储,这便于由不同的专业化企业分别进行生产;
②、性能稳定、结构简单、成本低廉;
③、便于维护,有利于团队开发;
3、js中模块化有哪些产品?
①、sea.js
②、require.js
4、require.js
RequireJS是一个非常小巧的JavaScript模块载入框架,是AMD规范最好的实现者之一。
require中的依赖是一个数组,即使只有一个依赖,你也必须使用数组来定义,
requir API的第二个参数是callback,一个function,是用来处理加载完毕后的逻辑。
5、加载文件
①、通过define函数定义了一个模块,然后再页面中使用:
②、加载模块
require.config是用来配置模块加载位置;
通过paths的配置会使我们的模块名字更精炼,paths还有一个重要的功能,就是可以配置多个路径;
shim配置非AMD模块输出,没有用define来申明的模块;
③、requirejs提供了一种叫"主数据"的功能,我们首先创建一个main.js:
然后再页面中使用下面的方式来使用requirejs:
加载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的设置