模块化加载require和import详解

最新推荐文章于 2024-04-20 03:36:26 发布

原创最新推荐文章于 2024-04-20 03:36:26 发布 · 594 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript

本文详细探讨了JavaScript中的模块化加载，重点分析了require和import的区别。require提供防止JS阻塞页面渲染的异步加载方式，而import则是ES6的静态加载机制，具有编译时确定的特点。此外，文章还介绍了require的基础配置、全局配置以及如何处理第三方模块。

模块化加载

require

首先从理解层面来介绍require能带来的好处
正常编写
缺点：污染全局作用域，依赖关系不明显

index.html
<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="a.js"></script>
    </head>
    <body>
      <span>body</span>
    </body>
</html>

//a.js:

function fun1(){
  alert("it works");
}

fun1();

//可能这样写更适合
(function(){
    function fun1(){
      alert("it works");
    }

    fun1();
})()

a.js中第二种方法使用了块级作用域来申明function，防止污染全局变量，本质还是一样，alert执行时，html一片空白，点击确定后才出现，这就是js阻塞浏览器渲染导致的结果
require写法

index.html:

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="require.js"></script>
        <script type="text/javascript">
            require(["a"]);
        </script>
    </head>
    <body>
      <span>body</span>
    </body>
</html>

//a.js:

define(function(){
    function fun1(){
      alert("it works");
    }

    fun1();
})

这次浏览器alert了提示，但有一点不同，浏览器并不是一片空白，body已经出现在页面中

require目前为止具有优点

防止js加载阻塞页面渲染
使用程序调用的方式加载js

require的基本配置
require基本配置
 requireJS中文网

require变量：define,require
加载文件（非本地js require.config paths）
全局配置（解决重复出现require.config配置的情况 <script data-main=""）
第三方模块（加载非AMD规范的js || 插件形式的非AMD(jquery jquery.form)——shim）

// 本地js
 // 定义模块
 define(function(){
    function fun1(){
      alert("it works");
    }

    fun1();
})
//加载来自本地服务器、其他网站或CDN, （本地js也可以这样配置）
require.config({
    paths : {
    // 配置多个路径
        "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery"，"js/jquery"] , 
        "a" : "js/a"    
    }
})
//模块的输出变量$， 如果某个模块不输出变量值，则没有
require(["jquery","js/a"],function($){
    $(function(){
        alert("load finished");  
    })
})

全局配置

main.js
require.config({
   paths : {
       "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery", "js/jquery"],
       "a" : "js/a"   
   }
})
// 页面里
<script data-main="js/main" src="js/require.js"></script>

加载 requirejs 脚本的 script 标签加入了data-main属性，这个属性指定的 js 将在加载完 require.js 后处理，我们把require.config的配置加入到data-main后，就可以使每一个页面都使用这个配置，然后页面中就可以直接使用require来加载所有的短模块名
data-main，当script标签指定data-main属性时，require会默认的将data-main指定的js为根路径（data-main=“js/main”，根目录为js，相当于配置baseUrl）
在main.js中所设置的脚本是异步加载的，所以如果在页面中配置了其他js加载，则不能保证它们所依赖的js已经加载成功。

第三方模块

require.config({
    shim: {
        "underscore" : {
            exports : "_";
        },
        "jquery.form" : {
            deps : ["jquery"]
        }，
      //  "jquery.form" : ["jquery"]
    }
})

import

import MDN

require 和 import 区别

（es6）import 和（commonJs）require
import导入-export导出；require导入-exports导出；都可以导入静态资源（图片）
import编译时输出接口（提升），require是运行时加载
CommonJS 加载的是一个对象（即module.exports属性），该对象只有在脚本运行完才会生成。而 ES6 模块不是对象，它的对外接口只是一种静态定义，在代码静态解析阶段就会生成。
import（es6模块不是对象，而是export显示输出的代码）；require(模块就是对象)
commonjs模块默认采用非严格模式；es6自动采用严格模式
commonJS模块输出的是一个值的拷贝；es6模块输出的是值的引用
AMD 推崇依赖前置、提前执行（异步，并行加载多个模块，不能按需加载）；CMD推崇依赖就近、延迟执行

注：
运行时加载: CommonJS 模块就是对象；即在输入时是先加载整个模块，生成一个对象，然后再从这个对象上面读取方法，这种加载称为“运行时加载”。

编译时加载: ES6 模块不是对象，而是通过 export 命令显式指定输出的代码，import时采用静态命令的形式。即在import时可以指定加载某个输出值，而不是加载整个模块，这种加载称为“编译时加载”。