JS前端模块化原理与实现方法详解

本文实例讲述了JS前端模块化原理与实现方法。分享给大家供大家参考,具体如下:

1.什么是前端模块化

模块化开发,一个模块就是一个实现特定功能的文件,有了模块我们就可以更方便地使用别人的代码,要用什么功能就加载什么模块。

2.模块化开发的好处

1)避免变量污染,命名冲突
2)提高代码利用率
3)提高维护性
4)依赖关系的管理

3.前端模块化的进程

前端模块化规范从原始野蛮阶段现在慢慢进入“文艺复兴”时代,实现的过程如下:

3.1 函数封装

我们在讲到函数逻辑的时候提到过,函数一个功能是实现特定逻辑的一组语句打包。在一个文件里面编写几个相关函数就是最开始的模块了

function m1() {
 // ...
}
function m2(){
    //...
}

这样做的缺点很明显,污染了全局变量,并且不能保证和其他模块起冲突,模块成员看起来似乎没啥关系。

3.2 对象

为了解决这个问题,有了新方法,将所有模块成员封装在一个对象中

var module = new Object({

  _count:0,

  m1:function (){ ```},

  m2:function (){  ```}    

})

这样,两个函数就被包在这个对象中,看起来没有什么问题,当我们要使用的时候,就是调用这个对象的属性方法

module.m1()

那么问题来了,这样写法会暴露全部的成员,内部状态可以被外部改变,比如外部的代码可直接改变计数器的值

module._count = 10

3.3 立即执行函数(IIFE)

var module = (function(){
 var _count = 5;

  var m1 = function (){ ```};

  var m2 = function (){ ```};

  return{
     m1:m1,
     m2:m2
  }
})()

以上就是模块化开发的基础中的基础,以后会说其他更深层次的模块化开发。

接下来了解几种模块化规范。

1)commonJS

commonJS由nodeJS发扬光大,这标志着js模块化正式登场。

一. 定义模块

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

二. 模块输出

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

三. 加载模块

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

var name = 'Byron'; 

function printName(){
  console.log(name);
} 

function printFullName(firstName){
  console.log(firstName + name);
} 

module.exports = {
  printName: printName,
  printFullName: printFullName
}

然后加载模块

var nameModule = require('./myModel.js');
nameModule.printName();

2)AMD

Asynchronous Moudule Definition,中文名是一步模块。它是一个在浏览器端模块化开发的规范,由于不是js原生支持,使用AMD规范进行页面开发需要用到对应的函数库,也就是大名鼎鼎的Require.js,实际上AMD是RequireJS在推广过程中对模块化定义的规范化的产出。

RequireJS主要解决两个问题:

1)多个js文件可能有依赖关系,被依赖的文件需要早于依赖它的文件加载到浏览器。

2)js加载的时候浏览器会停止页面渲染,加载文件越多,页面失去响应的时间越长。

//定义模块
define(['dependency'],function(){

 var name = 'Byron';
 function printName(){
   console.log(name);
}

 return {
   printName:printName
  }

})

//加载模块

require(['myModule'],function(my){
  my.printName();
})

语法:

requireJS定义了一个函数define,它是全局变量,用来定义模块。

define(id,dependencies,factory)
  • ——id 可选参数,用来定义模块的标识,如果没有提供该参数,脚本文件名(去掉拓展名)
  • ——dependencies 是一个当前模块用来的模块名称数组
  • ——factory 工厂方法,模块初始化要执行的函数或对象,如果为函数,它应该只被执行一次,如果是对象,此对象应该为模块的输出值。

在页面上使用require函数加载模块;

require([dependencies], function(){});

require()函数接受两个参数:

  • ——第一个参数是一个数组,表示所依赖的模块;
  • ——第二个参数是一个回调函数,当前面指定的模块都加载成功后,它将被调用。加载的模块会以参数形式传入该函数,从而在回调函数内部就可以使用这些模块

AMD推崇的是依赖前置,被提前罗列出来并会背提前下载并执行,后来做了改进,可以不用罗列依赖模块,允许在回调函数中就近使用require引入并下载执行模块。

3)CMD

即common module definition

就像AMD有个requireJS,CMD有个浏览器实现的sea.js,sj要解决的问题和rj一样,只不过在模块定义方式和模块加载时机上有所不同。

cmd是sea.js在推广过程中的规范化产出,sea.js是另一种前端模块化工具,它的出现缓解了requireJS的几个痛点。

efine(id, deps, factory)

因为CMD推崇一个文件一个模块,所以经常就用文件名作为模块id;
CMD推崇依赖就近,所以一般不在define的参数中写依赖,而是在factory中写。

factory有三个参数:

function(require, exports, module){}

一,require

require 是 factory 函数的第一个参数,require 是一个方法,接受 模块标识 作为唯一参数,用来获取其他模块提供的接口;

二,exports

exports 是一个对象,用来向外提供模块接口;

三,module

module 是一个对象,上面存储了与当前模块相关联的一些属性和方法。

demo

// 定义模块 myModule.js
define(function(require, exports, module) {
 var $ = require('jquery.js')
 $('div').addClass('active');
});

// 加载模块
seajs.use(['myModule.js'], function(my){

});

AMD与CMD区别

总结如下:

最明显的区别就是在模块定义时对依赖的处理不同。

AMD推崇依赖前置 在定义模块的时候就有声明其依赖的模块

CMD推崇就近依赖 只有在用到某模块的时候再去require

AMD和CMD最大的区别是对依赖模块的执行时机处理不同,注意不是加载的时机或者方式不同。

很多人说requireJS是异步加载模块,SeaJS是同步加载模块,这么理解实际上是不准确的,其实加载模块都是异步的,只不过AMD依赖前置,js可以方便知道依赖模块是谁,立即加载,而CMD就近依赖,需要使用把模块变为字符串解析一遍才知道依赖了那些模块,这也是很多人诟病CMD的一点,牺牲性能来带来开发的便利性,实际上解析模块用的时间短到可以忽略。
为什么我们说两个的区别是依赖模块执行时机不同,为什么很多人认为ADM是异步的,CMD是同步的(除了名字的原因。。。)
同样都是异步加载模块,AMD在加载模块完成后就会执行改模块,所有模块都加载执行完后会进入require的回调函数,执行主逻辑,这样的效果就是依赖模块的执行顺序和书写顺序不一定一致,看网络速度,哪个先下载下来,哪个先执行,但是主逻辑一定在所有依赖加载完成后才执行。
CMD加载完某个依赖模块后并不执行,只是下载而已,在所有依赖模块加载完成后进入主逻辑,遇到require语句的时候才执行对应的模块,这样模块的执行顺序和书写顺序是完全一致的。
这也是很多人说AMD用户体验好,因为没有延迟,依赖模块提前执行了,CMD性能好,因为只有用户需要的时候才执行的原因。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

(0)

相关推荐

  • Javascript模块化编程(三)require.js的用法及功能介绍

    这个系列的第一部分和第二部分,介绍了Javascript模块原型和理论概念,今天介绍如何将它们用于实战. 我采用的是一个非常流行的库require.js.  一.为什么要用require.js? 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了.后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载.下面的网页代码,相信很多人都见过. 复制代码 代码如下: <script src="1.js"></script> &l

  • JavaScript模块化之使用requireJS按需加载

    模块加载器的概念可能稍微接触过前端开发的童鞋都不会陌生,通过模块加载器可以有效的解决这些问题: JS文件的依赖关系. 通过异步加载优化script标签引起的阻塞问题 可以简单的以文件为单位将功能模块化并实现复用 主流的JS模块加载器有requireJS,SeaJS等,加载器之间可能会因为遵循的规范不同有微妙的差别,从纯用户的角度出发,之所以选requireJS而不是SeaJS主要是因为: 功能实现上两者相差无几,没有明显的性能差异或重大问题. 文档丰富程度上,requireJS远远好于SeaJS

  • Javascript模块化编程详解

    模块化编程是一种非常常见Javascript编程模式.它一般来说可以使得代码更易于理解,但是有许多优秀的实践还没有广为人知. 基础 我们首先简单地概述一下,自从三年前Eric Miraglia(YUI的开发者)第一次发表博客描述模块化模式以来的一些模块化模式.如果你已经对于这些模块化模式非常熟悉了,大可以直接跳过本节,从"进阶模式"开始阅读. 匿名闭包 这是一种让一切变为可能的基本结构,同时它也是Javascript最棒的特性.我们将简单地创建一个匿名函数并立即执行它.所有的代码将跑在

  • javascript模块化是什么及其优缺点介绍

    如今backbone.emberjs.spinejs.batmanjs 等MVC框架侵袭而来.CommonJS.AMD.NodeJS.RequireJS.SeaJS.curljs等模块化的JavaScript扑面而来.web前端已经演变成大前端,web前端的发展速度之快. 1)我们来看看什么是模块化? 模块化是一种将系统分离成独立功能部分的方法,可将系统分割成独立的功能部分,严格定义模块接口.模块间具有透明性.javascript中的模块在一些C.PHP.java中比较常见: c中使用inclu

  • jsp、struts、spring、mybatis实现前端页面功能模块化拆分的方案

    前端页面功能模块化拆分 当一个系统的功能很多时,不可能所有功能模块的页面都写在一个页面里面,这时就需要将不同功能模块的页面拆分出去,就像模板一样,需要哪块的功能就调用哪块的页面,然后加载相应数据并展示到相应的页面. 本应用的使用spring+struts+mybatis+jsp的方式,用两种方案来完成前端页面功能的拆分. 方案一: 在JSP页面中,利用EL表达式或者Java代码的方式,在后台完成页面数据的填充.然后在js中来完成页面的切换. jsp代码: 业务详情模块页面:riskDetailI

  • 详解Js中的模块化是如何实现的

    由于 Js 起初定位的原因(刚开始没想到会应用在过于复杂的场景),所以它本身并没有提供模块系统,随着应用的复杂化,模块化成为了一个必须解决的问题.本着菲麦深入原理的原则,很有必要来揭开模块化的面纱 一.模块化需要解决的问题 要对一个东西进行深入的剖析,有必要带着目的去看.模块化所要解决的问题可以用一句话概括 在没有全局污染的情况下,更好的组织项目代码 举一个简单的栗子,我们现在有如下的代码: function doSomething () { const a = 10; const b = 11

  • Javascript模块化编程(一)AMD规范(规范使用模块)

    这个系列的第一部分介绍了Javascript模块的基本写法,今天介绍如何规范地使用模块.  (接上文) 七.模块的规范 先想一想,为什么模块很重要? 因为有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就加载什么模块. 但是,这样做有一个前提,那就是大家必须以同样的方式编写模块,否则你有你的写法,我有我的写法,岂不是乱了套!考虑到Javascript模块现在还没有官方规范,这一点就更重要了. 目前,通行的Javascript模块规范共有两种:CommonJS和AMD.我主要介绍AMD,

  • 详解JavaScript模块化开发

    什么是模块化开发? 前端开发中,起初只要在script标签中嵌入几十上百行代码就能实现一些基本的交互效果,后来js得到重视,应用也广泛起来了,jQuery,Ajax,Node.Js,MVC,MVVM等的助力也使得前端开发得到重视,也使得前端项目越来越复杂,然而,JavaScript却没有为组织代码提供任何明显帮助,甚至没有类的概念,更不用说模块(module)了,那么什么是模块呢? 一个模块就是实现特定功能的文件,有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就加载什么模块.模块开发

  • 关于Javascript模块化和命名空间管理的问题说明

    [关于模块化以及为什么要模块化] 先说说我们为什么要模块化吧.其实这还是和编码思想和代码管理的便利度相关(没有提及名字空间污染的问题是因为我相信已经考虑到模块化思想的编码者应该至少有了一套自己的命名法则,在中小型的站点中,名字空间污染的概率已经很小了,但也不代表不存在,后面会说这个问题). 其实模块化思想还是和面向对象的思想如出一辙,只不过可能我们口中所谓的"模块"是比所谓的"对象"更大的对象而已.我们把致力完成同一个目的的功能函数通过良好的封装组合起来,并且保证其

  • Javascript模块化编程(一)模块的写法最佳实践

    随着网站逐渐变成"互联网应用程序",嵌入网页的Javascript代码越来越庞大,越来越复杂.  网页越来越像桌面程序,需要一个团队分工协作.进度管理.单元测试等等......开发者不得不使用软件工程的方法,管理网页的业务逻辑. Javascript模块化编程,已经成为一个迫切的需求.理想情况下,开发者只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块. 但是,Javascript不是一种模块化编程语言,它不支持"类"(class),更遑论"模块&

  • JavaScript的模块化:封装(闭包),继承(原型) 介绍

    虽然 JavaScript 天生就是一副随随便便的样子,但是随着浏览器能够完成的事情越来越多,这门语言也也越来越经常地摆出正襟危坐的架势.在复杂的逻辑下, JavaScript 需要被模块化,模块需要封装起来,只留下供外界调用的接口.闭包是 JavaScript 中实现模块封装的关键,也是很多初学者难以理解的要点.最初,我也陷入迷惑之中.现在,我自信对这个概念已经有了比较深入的理解.为了便于理解,文中试图封装一个比较简单的对象. 我们试图在页面上维护一个计数器对象 ticker ,这个对象维护一

随机推荐