浅述编写模块化的 JavaScript

模块化,就是字面意义的模块化。比方模块化一个表单考证,模块化一个轮播图等。

在寻常 JavaScript 代码的编写中,我们平常是保持着如许一个递次。

1. 无脑式天然编写

function a() {
  alert("a")
}

function b() {
  alert("b")
}

a()
b()

如许的写法在每个人的进修初级阶段都是存在的,当代码量比较少的时刻明显是没有什么题目的。然则当工程量比较大的时刻,就会涌现一些列的不可控,由于这里涌现的变量都是全局变量,到处埋藏着炸弹。

2. 进阶式装 X 编写

在写了轻微多的代码后只如果个一般的人都邑意想到这个题目,然后能够就会涌现下面的写法。

var A = {}
var B = {}

A.a = function() {
  //do
}
A.b = function() {
  //do
}

B.a = function() {
  //do
}
B.b = function() {
  //do
}

在如许子的编写中,我们起首创建了差别的对象,然后在各自的对象内里声明 名字是一样的函数 a 和 b, 所以不会发生争执。相比较第一种写法,明显在争执这件事变上会好许多许多。

然则如许的编写还存在一个题目,对象中的函数或许属性对外部是可见的,并且是可修正的。外部不经意或许有意的修正就会让底本的功用瘫痪,明显如许是存在肯定的安全隐患的。

3. 稍高层马上实行函数

这个时刻多是多多少少用过一些 jQuery 库之类的东西,能够就会如许

(function() {
  // private code

  var a = function() {
     
  }
  
  window.a = a;
})();

如许写的话能够有私立的 private 范例变量,然后将部分的函数提升到 windows 下面,能够让其他地方运用。

听说 jQuery 就是运用这类写法让 windows 有了 $ 这个要领。

固然,也能够写一个马上实行函数,然后返回一个对象,让其他模块去挪用,比方如许

var A = (function(){
  //private code
  
  var a = function() {
    //do
  }
  
  return {a: a}
})()

A.a()

原理和上面的没有太大的区分

4. 现有高等通用写法

未知。。。。

requeryJs…

AMD…

原文链接:http://life.rccoder.net/webpre/1157.html

    原文作者:rccoder
    原文地址: https://segmentfault.com/a/1190000003974243
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞