require.js扫盲版

Posted 2021-02-03 donglt

javascript模块规范有两种：commonJs和AMD

commonJs起源于nodeJs。nodeJs标志着模块化编程正式诞生。在commonJs中，有一个全局性方法require（），应用于加载模块

举例---require()主要用于加载模块

var math = require(‘math‘);
math.add(2,3); // 5

 

问题：越来越多的项目采用“模块化”，但是，对于浏览器而言，所有的模块化的语言都放置在---服务器端，页面的渲染取决于网速的快慢。如果待加载的数据过多，会导致浏览器处于假死的状态。所以：异步加载应时而生

AMD规范：它采用异步加载模块，模块的加载不影响后面的语句的运行，所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完，这个回调函数才会运行

　 require([module], callback);

   require([‘math‘], function (math) {

　　　　math.add(2, 3);

　 });

解释上面的函数：math这个模块加载完毕，才会执行math.add这个函数。所以，浏览器就不会产生假死的状态

 

require.js出现的原因

1）：实现js文件的异步加载，避免网页失去响应

2）：管理模块之间的依赖性，便于代码的编写和维护

 

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

加载完全部的require之后，就要加载我们自己编写的代码---main.js

data-main 属性的作用：指定网页程序的主模块，指定的文件会第一个被requireJs加载。主模块--顾名思义：整个网页代码的入口

 

requireJs常用的方法和命令

require.config({});  我们对模块的加载行为进行自定义。path:表示指定各个模块的加载路径。

   require.config({
　　　　paths: {
　　　　　　"jquery": "jquery.min",
　　　　　　"underscore": "underscore.min",
　　　　　　"backbone": "backbone.min"

　　　　}

　　});

 

2.模块必须采用特定的define()函数来定义。如果一个模块不依赖其他模块，那么可以直接定义在define()函数中，如果还依赖于其他的模块，那么define()函数的第一个参数，必须是数组，指明该模块的依赖性，于是先加载myLib.js这个文件

    define([‘myLib‘], function(myLib){
　　　　function foo(){
　　　　　　myLib.doSomething();
　　　　}
　　　　return {
　　　　　　foo : foo
　　　　};
　　});

 

加载非规范的模块

requireJs能加载非规范的模块。如果要加载它们，必须先定义它们的特征。

　require.config({
　　　　shim: {
　　　　　　‘underscore‘:{
　　　　　　　　exports: ‘_‘
　　　　　　},
　　　　　　‘backbone‘: {
　　　　　　　　deps: [‘underscore‘, ‘jquery‘],
　　　　　　　　exports: ‘Backbone‘
　　　　　　}
　　　　}
　　});

require.config()接受一个配置对象，这个对象除了有前面说过的paths属性之外，还有一个shim属性，专门用来配置不兼容的模块。具体来说，每个模块要定义（1）exports值（输出的变量名），表明这个模块外部调用时的名称；（2）deps数组，表明该模块的依赖性。