前端模块化开发是什么意思(前端模块化的理解)

导语：前端模块化（CommonJS）

一，定义模块:

根据CommonJS规范，一个单独的文件就是一个模块。每一个模块都是一个单独的作用域，也就是说，在该模块内部定义的变量，无法被其他模块读取，除非定义为global对象的属性。

二，模块输出：

模块只有一个出口，module.exports对象，我们需要把模块希望输出的内容放入该对象。

三，加载模块：

加载模块使用require方法，该方法读取一个文件并执行，返回文件内部的module.exports对象。

a.jsexports.add = function() { var sum = 0, i = 0, args = arguments, l = args.length; while (i < l) { sum += args[i++]; } return sum;};b.jsvar add = require('a').add;exports.increment = function(val) { return add(val, 1);};index.jsvar increment = require('b').increment;var a = increment(1); //2

根据CommonJS规范:

一个单独的文件就是一个模块。每一个模块都是一个单独的作用域，也就是说，在该模块内部定义的变量，无法被其他模块读取，除非定义为global对象的属性。

输出模块变量的最好方法是使用module.exports对象。

加载模块使用require方法，该方法读取一个文件并执行，返回文件内部的module.exports

仔细看上面的代码，您会注意到 require是同步的。模块系统需要同步读取模块文件内容，并编译执行以得到模块接口。然而， 这在浏览器端却很有问题。浏览器端，加载 JavaScript 最佳、最容易的方式是在 document中插入<script>但脚本标签天生异步，传统 CommonJS模块在浏览器环境中无法正常加载。（1）解决思路之一是，开发一个服务器端组件，对模块代码作静态分析，将模块与它的依赖列表一起返回给浏览器端。 这很好使，但需要服务器安装额外的组件，并因此要调整一系列底层架构。（3）另一种解决思路是，用一套标准模板来封装模块定义：a.jsdefine(function(require, exports, module) { exports.add = function() { var sum = 0, i = 0, args = arguments, l = args.length; while (i < l) { sum += args[i++]; } return sum; };});b.jsdefine(function(require, exports, module) { var add = require('a').add; exports.increment = function(val) { return add(val, 1); };});index.jsdefine(function(require, exports, module) { var inc = require('b').increment; inc(1); // 2});

下一章 AMD

本文内容由小璎整理编辑！