JavaScript:在合作中保护你的代码

204 阅读3分钟

《受到保护的数据--函数篇》-->相对稳妥处理方式

在我们编写javascript代码的过程当中,会创建许多对象与函数,有时候一旦函数多了,就会遇到各种各样的问题,以下是关于一些函数处理的小技巧

一、受到保护的数据

1、同一作用域下的函数角度

问题:

在我们平时编写代码的过程中,需要定义许多的变量,我们可以通过操作这些数据,达到一些想要实现的效果,然而有时候,我们编写的代码可能是一些封装好的准备在之后的开发中,多次复用的代码,而这个时候,对我们封装的数据的保护就显得尤为重要了! 由于变量方法可以被覆盖问题,我们的代码量如果比较多,或者是与别人合作开发的过程中,如果处于同一作用域下的话这种可能性会大大的增加。 同时,变量名一旦重合不小心覆盖之前的函数,之后再次调用该方法时,就会出现问题,而且定义的变量多的话,命名空间也会变少,也容易污染当前作用域。

策略:

对于以上问题,我们可以在我们自己编写的代码中,使用一个匿名的自动执行函数来将代码进行一个分割,使代码得 到保护,防止之后编写的代码将内部定义的数据进行覆盖修改,例如
   !function(){
    // 此处写代码
      }()

这样在外部作用域就无法修改我们内部所定义的变量了,而如果内部有些数据想要通过外部来修改的话,还可以引用外部的变量将可以被修改的数据添加进去

2、构造函数原型的保护 对于构造函数而言,如果我们使用fun.prototype={ }发方式重写了原型对象属性的话,那么该属性会指向当前创建的这个对象,原本保存的引用指针会被清除,这样的话我们就无法去访问原有原型中的方法了,如果代码比较重要的话,为了对我们的原型属性的引用进行保护,我们可以像下面这样来编写构造函数

  ! function(window, undefined) {

var Qyl = (function() {
	function Qyl(el, index) {
		var q = index ? new Qyl.fn.init(el, index) : new Qyl.fn.init(el);
		return q
	}

	Qyl.fn = Qyl.prototype = {
		version: "0.001",
		constructor: Qyl,
		init: function(el, index) {
			el && !index && this.dom(el);
			index && this.dom(el, index);

			return this;
		},
                 //其余代码.........
            }

     Qyl.fn.init.prototype = Qyl.fn;
 return Qyl;
 })();
    window.Qyl = window._ = Qyl;
}(window)

在该自执行函数中,定义了一个名为Qyl的函数,该函数内部的Qyl会在调用的时候返回一个使用new创建的、位于原型中的 init构造函数(通过自己定义的.fn属性引用.fn属性,这一点很重要),在定义Qyl的原型时,我们同时将这个原型对象的引用赋值给了Qyl的fn属性,这样的话就相当于对这个引用指针进行了一个备份操作,然后将这个备份的原型对象赋值给了init的原型(依旧是利用fn引用init)。

在以上这个几步操作中,好像看起来没有太大的意义,只是让new的操作变得简易化了,其实不然!

由于init是通过fn来引用的,而且init构造函数的原型也是指向了我们的Qyl下的fn,所以即使我们的Qyl暴露到了全局环境之下,如果去重写我们Qyl的原型对象,那也只是新创建了个对象然后将这个对象赋值给原型,而不会对我们的init的原型造成影响,因为init保存的是Qyl.fn这一引用,而不是对Qyl.prototype这一引用,就算是prototype引用被清除了。