前端模块commonjs,前端模块化开发

本文目录一览：

1、react怎么使用commonjs
2、如何理解前端模块化
3、CommonJS与ES6模块化的具体使用方式
4、react+webpack 模块化应该采用CommonJS规范还是ES6规范，为什么
5、commonjs为什么不适合前端

react怎么使用commonjs

Common JS 即 node.js 的模块组织形式，前端可以用 webpack 或者 browserify 来打包

如何理解前端模块化

前端模块化

在JavaScript发展初期就是为了实现简单的页面交互逻辑，寥寥数语即可；如今CPU、浏览器性能得到了极大的提升，很多页面逻辑迁移到了客户端（表单验证等），随着web2.0时代的到来，Ajax技术得到广泛应用，jQuery等前端库层出不穷，前端代码日益膨胀

这时候JavaScript作为嵌入式的脚本语言的定位动摇了，JavaScript却没有为组织代码提供任何明显帮助，甚至没有类的概念，更不用说模块（module）了，JavaScript极其简单的代码组织规范不足以驾驭如此庞大规模的代码

模块

既然JavaScript不能handle如此大规模的代码，我们可以借鉴一下其它语言是怎么处理大规模程序设计的，在Java中有一个重要带概念——package，逻辑上相关的代码组织到同一个包内，包内是一个相对独立的王国，不用担心命名冲突什么的，那么外部如果使用呢？直接import对应的package即可

import java.util.ArrayList;

遗憾的是JavaScript在设计时定位原因，没有提供类似的功能，开发者需要模拟出类似的功能，来隔离、组织复杂的JavaScript代码，我们称为模块化。

一个模块就是实现特定功能的文件，有了模块，我们就可以更方便地使用别人的代码，想要什么功能，就加载什么模块。模块开发需要遵循一定的规范，各行其是就都乱套了

规范形成的过程是痛苦的，前端的先驱在刀耕火种、茹毛饮血的阶段开始，发展到现在初具规模，简单了解一下这段不凡的历程

函数封装

我们在讲函数的时候提到，函数一个功能就是实现特定逻辑的一组语句打包，而且JavaScript的作用域就是基于函数的，所以把函数作为模块化的第一步是很自然的事情，在一个文件里面编写几个相关函数就是最开始的模块了

function fn1(){

statement

}

function fn2(){

statement

}

这样在需要的以后夹在函数所在文件，调用函数就可以了

这种做法的缺点很明显：污染了全局变量，无法保证不与其他模块发生变量名冲突，而且模块成员之间没什么关系。

对象

为了解决上面问题，对象的写法应运而生，可以把所有的模块成员封装在一个对象中

var myModule = {

var1: 1,

var2: 2,

fn1: function(){

fn2: function(){

}

这样我们在希望调用模块的时候引用对应文件，然后

myModule.fn2();

这样避免了变量污染，只要保证模块名唯一即可，同时同一模块内的成员也有了关系

看似不错的解决方案，但是也有缺陷，外部可以随意修改内部成员

myModel.var1 = 100;

这样就会产生意外的安全问题

立即执行函数

可以通过立即执行函数，来达到隐藏细节的目的

var myModule = (function(){

var var1 = 1;

var var2 = 2;

function fn1(){

}

function fn2(){

}

return {

fn1: fn1,

fn2: fn2

};

})();

这样在模块外部无法修改我们没有暴露出来的变量、函数

上述做法就是我们模块化的基础，目前，通行的JavaScript模块规范主要有两种：CommonJS和AMD

CommonJS

我们先从CommonJS谈起，因为在网页端没有模块化编程只是页面JavaScript逻辑复杂，但也可以工作下去，在服务器端却一定要有模块，所以虽然JavaScript在web端发展这么多年，第一个流行的模块化规范却由服务器端的JavaScript应用带来，CommonJS规范是由NodeJS发扬光大，这标志着JavaScript模块化编程正式登上舞台。

定义模块

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

模块输出：

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

加载模块：

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

CommonJS与ES6模块化的具体使用方式

所以：只需要将需要暴露给外部的变量或者方法设置为exports的属性就行，

可以把exports看做一个全局对象，把所有暴露出来的函数和变量都存放在里面

1.先写个6.js文件

CommonJS规范规定，每个模块内部，module变量代表当前模板，这个变量是一个对象，他的 exports 属性（相当于 module.exports ）是对外的接口。这里详情请看我的另一篇文章： module、exports 和 require的关系

加载某个模块，其实是加载该模块的module.exports属性。require方法用于加载模块

ES6模块化的使用方法：（注！因为CommonJS类库众多，以及 CommonJS 和 ES6 之间的差异，所以无法直接兼容es6。）

直接/按需导出：可使用多个用变量/常量的方式

导入：需要用按需导入 {解构} 的方式获取

默认导出：只能使用一个（default属性只有es6才有）可以用引入对象定义多个属性，但这样在引入后调用的时候，更麻烦。

导入：优点：可以直接使用文件做接收参数且不用结构。

重命名export和import

如果导入的多个文件中，变量名字相同，即会产生命名冲突的问题，为了解决该问题，ES6为提供了重命名的方法，当你在导入名称时可以这样做：

如果想看CommonJS与ES6模块化的原理可以去看我另一篇文章

[秦圆圆]大佬写的 require和import的区别

[大孩子气]大佬写的 require/exports、import/export 的区别

[七分sunshine!]大佬写的# 前端模块化工具 requireJs的使用;

react+webpack 模块化应该采用CommonJS规范还是ES6规范，为什么

研究react的时候也考虑过这个问题，首先可以先了解下这两种模块的机制。参考这里

要考虑的点：

目前Commonjs是nodejs(浏览器环境需要模块加载器)原生支持的，而es6需要借助babeljs来实现。意味着如果要实现自动编译上线(我司没有在线上安装node_modules做法)可能需要将babel之类的node_modules提交代码仓库，大概45M。

还有要考虑下你选择的react的组件库是基于es6还是Commonjs。如果你业务使用Commonjs规范，组件使用es6，这个就没法统一了。

考虑下团队对es6的熟悉程度，关系到代码质量和维护成本。

暂时就想到这些。

commonjs为什么不适合前端

JavaScript是一个强大面向对象语言，它有很多快速高效的解释器。官方JavaScript标准定义的API是为了构建基于浏览器的应用程序。然而，并没有定于一个用于更广泛的应用程序的标准库。

CommonJS API定义很多普通应用程序（主要指非浏览器的应用）使用的API，从而填补了这个空白。它的终极目标是提供一个类似Python，Ruby和Java标准库。这样的话，开发者可以使用CommonJS API编写应用程序，然后这些应用可以运行在不同的JavaScript解释器和不同的主机环境中。在兼容CommonJS的系统中。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/256924.html