关于前端开发中的模块化理解

作为一个前端开发者，掌握必要的专业知识是必要的，css,js,html,frame等，但对于规范还是要有一定的掌握，如开发规范，前端越来越复杂，其中模块化的问题引起重视，工程的模块化究竟是什么？

首先来了解下各种概念：

（1）CommonJS

它就是为了JS的表现来制定规范，因为js中没有模块的功能，CommonJS应运而生，它定义的模块分为：模块引用require 、模块定义exports和模块标识module。（Node遵循CommonJS规范，但相比还是有所不同）

require()用来引入外部模块，exports对象用于导出当前模块的方法或变量，唯一的导出口，module对象就代表模块本身，详细的栗子代码如下：

 //sum.jsexports.sum = function(){//todo}//main.jsvar m = require('sum');exports.add = function(n){return m.sum(n);}

但是CommonJS是主要为了JS在后端的表现制定的，并不适合前端，为何，这就要思考下浏览器端js和服务器端js的不同了，首先，资源的加载方式不同，服务器端require一个模块，直接从硬盘或内存中读取，而浏览器则不同，需要从服务端下载所需的文件，然后发送资源请求，于是AMD（异步模块定义）出现了。

（2）AMD

"Asynchronous Module Definition"

它是一种对模块的定义，将模块和它的依赖可以被异步的加载，还可以正确的顺序执行，模块的加载不影响它后面的语句执行，所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成后，这个回调函数才会执行。

（3）RequireJS

是一个工具库，主要用于客户端的模块管理，它可以让客户端的代码分成一个个模块，实现异步或者动态加载，从而提高代码的性能和可维护性，它的模块管理遵循AMD规范。（后续关于具体的requirejs的使用）

（4）CMD

seajs遵循CMD规范，与AMD类似，但是更加方便些。

用seajs定义模块的写法如下：

 //a.jsdefine(function(require,exports,module){console.log('a.js执行..');return {hello:function(){console.log('hello a.js');}}})//main.jsdefine(function(require,exports,module){console.log('main.js执行..');var exam = require('a');exam.hello();});

（5 ）面向ES6的模块标准

定义一个模块不需要专门的工作，因为一个模块的作用及时对外提供的API，所以只需要export导出即可。

使用模块的时候用import关键字：

import { run as go} from 'a'

run()

如果要想使用模块中的全部API，使用module关键字

module foo from 'a'

a.run()

关于前端开发中的模块化理解相关推荐

中引入文件报错_关于前端开发中的模块化
前端开发离不开模块化,与模块化有关的关键字有以下几个: require/module.exports export/import define/require/exprots define/seajs ...
熟悉html css,编写HTML和CSS的前端开发中不一定熟悉JavaScript
原标题:编写HTML和CSS的前端开发中不一定熟悉JavaScript 作为前端开发人员,HTML.css.Java是必备的知识技能,但是现实工作工作中并非所有的前端都知道Java,根据外国一个网站的 ...
前端开发中的地理定位问题小总结
项目中遇到地理定位的问题,没遇过不知道,遇过就发现这是个比较坑的问题.这个问题其实困扰了我挺久的,还不如一次性了解清楚.所以本文进行了一些小总结,先简单总结我看过的关于定位技术的资料,然后介绍前端开发 ...
前端开发中组件化的优点
前端开发中组件化的优点解耦的思想,函数封装到组件内部执行模块化,代码清晰,易于维护,迭代更新复用性高屏蔽逻辑,可以迅速定位问题
前端开发中需要用到的变换矩阵（2D游戏适用）
http://shawphy.com/2011/01/transformation-matrix-in-front-end.html 前端开发中需要用到的变换矩阵 6条回复想写写关于矩阵变换的博文已 ...
前端开发中常用设计模式-总结篇
本文是向大家介绍前端开发中常用的设计模式,它使我们编写的代码更容易被复用,也更容易被人理解,并且保证代码的稳定可靠性. 1.什么是设计模式通俗来讲,就是日常使用设计的一种惯性思维. 因为对应的这种思 ...
前端开发中的MCRV模式
针对前端开发中基于ajax的复杂页面开发所面临的代码规模大,难以组织和维护,代码复用性.扩展性和适应性差等问题,本文尝试以MVC思想为基础,结合Web前端开发中内容-结构-表现-行为相分离的开发标准, ...
前端开发中的性能那点事
前端开发中的性能那点事(一)巧用xdebug 前言: 在我们平时的php开发中,一个大的项目经过长时间的积累以后你会发现性能越来越慢,而性能到底消耗在了什么地方,常常是一个令人头疼的问题,funct ...
前端开发中的Error以及异常捕获
本文首发于公众号:符合预期的CoyPan 写在前面在前端项目中,由于JavaScript本身是一个弱类型语言,加上浏览器环境的复杂性,网络问题等等,很容易发生错误.做好网页错误监控,不断优化代码,提 ...

关于前端开发中的模块化理解

关于前端开发中的模块化理解相关推荐

最新文章

热门文章