畅聊编写模块化的 JavaScript

发布时间：2021-11-19 10:35:42 所属栏目：PHP教程来源：互联网

导读：模块化，就是字面意思的模块化。比如模块化一个表单验证，模块化一个轮播图等。在平常 JavaScript 代码的编写中，我们一般是保持着这样一个顺序。 1. 无脑式自然编写 function a() { alert(a) } function b() { alert(b) } a() b() 这样的写法在每个人的学

模块化，就是字面意思的模块化。比如模块化一个表单验证，模块化一个轮播图等。

在平常 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...

（编辑：应用网_丽江站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

php读取大文件最好的实	php无限遍历文件夹示例
php中实现过滤UBB代码	Laravel模板引擎Blade