“requireJs前污染”之为什么要用前端模块化?

 

对此尚未接触过后台的前端同学想要清楚模块化是深拮据的,鉴于未来的可行性,以下是我转载的一模一样首文章,希望对大家有用!

故声明:转载文章,不爱不喷。和谐前端,世界和平!0.0

模块的写法

乘网站逐渐成为”互联网应用程序”,嵌入网页的Javascript代码越来越大,越来越复杂。

网页越来越像桌面程序,需要一个社分工协作、进度管理、单元测试等等……开发者不得不采取软件工程的措施,管理网页的事情逻辑。
Javascript模块化编程,已经改为一个迫切的需要。理想状态下,开发者只待贯彻核心之业务逻辑,其他还足以加载别人已经勾勒好之模块。
但,Javascript不是同等种模块化编程语言,它不支持”类”(class),更遑论”模块”(module)了。(正在制订中的ECMAScript标准第六版,将业内支持”类”和”模块”,但还需特别丰富时才会投入实用。)
Javascript社区做了不少拼命,在存活的周转条件受到,实现”模块”的职能。本文总结了现阶段"Javascript模块化编程"的极品实践,说明什么投入实用。虽然就不是初级教程,但是要是稍加小了解Javascript的核心语法,就能够看懂。

平、原始写法
模块就是兑现特定功能的均等组方法。
比方拿不同之函数(以及记录状态的变量)简单地在一块儿,就到底一个模块。

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

 

方的函数m1()和m2(),组成一个模块。使用的当儿,直接调用就行了。
这种做法的弱点很明确:”污染”了全局变量,无法担保非跟外模块出变量名闯,而且模块成员间看不产生直接关联。

老二、对象写法
为了化解点的欠缺,可以把模块写成一个靶,所有的模块成员都停放这个目标中。

  var module1 = new Object({
    _count : 0,
    m1 : function (){
      //...
    },
    m2 : function (){
      //...
    }
  });

 

方的函数m1()和m2(),都封闭装于module1对象里。使用的时候,就是调用这个目标的属性。
 

 module1.m1();

 

而是,这样的写法会暴露所有模块成员,内部状态可以于表面改写。比如,外部代码可以一直改动中计数器的值。
 

 module1._count = 5;

 

老三、立即执行函数写法
利用”立即施行函数”(Immediately-Invoked Function
Expression,IIFE),可以齐不暴露个人成员的目的。

  var module1 = (function(){
    var _count = 0;
    var m1 = function(){
      //...
    };
    var m2 = function(){
      //...
    };
    return {
      m1 : m1,
      m2 : m2
    };
  })();

 

动用方面的写法,外部代码无法读取内部的_count变量。
 

 console.info(module1._count); //undefined

 

module1就是Javascript模块的为主写法。下面,再针对这种写法进行加工。

季、放大模式
如若一个模块很挺,必须分成几独片,或者一个模块需要后续另一个模块,这时就发生必要运用”放大模式”(augmentation)。

  var module1 = (function (mod){
    mod.m3 = function () {
      //...
    };
    return mod;
  })(module1);

 

点的代码为module1模块添加了一个新点子m3(),然后回来新的module1模块。

五、宽放大模式(Loose augmentation)
于浏览器环境面临,模块的各个部分日常都是自从网上取之,有时无法了解谁部分会预先加载。如果应用上同一节的写法,第一个实施之有些发生或加载一个勿存空对象,这时就要采取”宽放大模式”。

  var module1 = ( function (mod){
    //...
    return mod;
  })(window.module1 || {});

 

和”放大模式”相比,"宽放大模式"就是”立即执行函数”的参数可以是空对象。

六、输入全局变量
独立性是模块的基本点特征,模块内部尽不跟程序的旁一些直接互动。
为了在模块内部调用全局变量,必须显式地用其它变量输入模块。

  var module1 = (function ($, YAHOO) {
    //...
  })(jQuery, YAHOO);

 

点的module1模块需要用jQuery库和YUI库,就管当下片独仓库(其实是简单个模块)当作参数输入module1。这样做除了确保模块的独立性,还使模块之间的借助关系转移得显然。这地方又多的讨论,参见Ben
Cherry的老牌文章《JavaScript Module Pattern: In-Depth》。
斯系列之老二组成部分,将讨论哪些以浏览器环境集团不同的模块、管理模块之间的仗。

本条系列之第一有介绍了Javascript模块的中心写法,今天牵线如何规范地应用模块。

AMD规范

七、模块的规范
先行想同一想,为什么模块很关键?
因为起了模块,我们尽管得重复便于地运他人的代码,想如果啊力量,就加载什么模块。
可是,这样做有一个前提,那就是大家必坐同样的方法编写模块,否则你来您的写法,我有本人之写法,岂不是混了套!考虑到Javascript模块现在尚从来不法定正式,这同样碰就算重重要了。
手上,通行的Javascript模块规范共有两栽:CommonJS和AMD。我要介绍AMD,但是一旦先由CommonJS讲起。

八、CommonJS
2009年,美国程序员Ryan
Dahl创造了node.js项目,将javascript语言用于服务器端编程。

这表明”Javascript模块化编程”正式落地。因为老实说,在浏览器环境下,没有模块也非是专门怪的题目,毕竟网页程序的复杂性有限;但是以劳务器端,一定要是发生模块,与操作系统和另外应用程序互动,否则从没法编程。
node.js的模块系统,就是参照CommonJS规范落实之。在CommonJS中,有一个全局性方法require(),用于加载模块。假定有一个数学模块math.js,就可像下这样加载。

  var math = require('math');

 

下一场,就可以调用模块提供的法子:

  var math = require('math');
  math.add(2,3); // 5

 

因为这个系列重要对浏览器编程,不关乎node.js,所以本着CommonJS就无多做牵线了。我们以此间而了解,require()用于加载模块就尽了。

九、浏览器环境
产生矣服务器端模块然后,很当然地,大家便想要客户端模块。而且极端好两岸会配合,一个模块不用修改,在服务器和浏览器还可以运行。
但,由于一个第一的受制,使得CommonJS规范不适用于浏览器环境。还是高达等同节约之代码,如果以浏览器被运行,会产生一个良十分之题目,你可知看出来吧?

  var math = require('math');
  math.add(2, 3);

 

其次行math.add(2,
3),在第一行require(‘math’)之后运行,因此必须顶math.js加载完成。也就是说,如果加载时间特别丰富,整个应用就是会停在那里当。
立对准劳动器端不是一个题目,因为具有的模块都存放于地方硬盘,可以协同加载成功,等待时便是硬盘的读取时间。但是,对于浏览器,这也是一个老大题材,因为模块都在服务器端,等待时在网速的速,可能使对等非常丰富时,浏览器处于”假死”状态。
就此,浏览器端的模块,不克运用”同步加载”(synchronous),只能使用”异步加载”(asynchronous)。这即是AMD规范诞生之背景。

十、AMD
AMD是”Asynchronous Module
Definition”的缩写,意思就是是”异步模块定义”。它使异步方式加载模块,模块的加载不影响它背后语句的运转。所有因是模块的言语,都定义在一个回调函数中,等及加载成功之后,这个回调函数才会运作。
AMD也下require()语句加载模块,但是不同为CommonJS,它要求简单个参数:
  

   require([module], callback);

 

首先单参数[module],是一个屡次组,里面的成员即使使加载的模块;第二单参数callback,则是加载成功后的回调函数。如果用前的代码改写成AMD形式,就是下这样:

  require(['math'], function (math) {
    math.add(2, 3);
  });

 

math.add()与math模块加载不是共同的,浏览器不见面发假死。所以特别显著,AMD比较可浏览器环境。
眼前,主要出个别独Javascript库实现了AMD规范:require.js和curl.js。本系列之老三部分,将由此介绍require.js,进一步讲解AMD的用法,以及如何用模块化编程投入实战。

点击上requireJS

 

转自:http://www.xidayun.com/index.php/2016/06/28/amdjs/