日期:2014-05-16  浏览次数:20446 次

关于如何编写优美的JavaScript代码之我见

如何编写出优美的JavaScript代码?我在网上一次又一次的看见这个东西,我基本都仔细看过,然后觉得这些所谓的JS优雅的优美的代码,总觉得非常不适应,今天我也来吐吐槽,不一定正确,供大家参考,我熟悉很多语言,例如java,c/c++/c#,ios,delphi,pb,我相信这些语言也是很多人会的,也熟悉其习惯,那么能不能让JS的编程手法和这些语言相同或者相似呢,答案肯定是有的,请往下看

?

我认为一个JS文件就是一个类(class),那么他的结构应该是以下

// 1.创建包名(命名空间)
// 2.导入需要的类名
// 3.构造方法
// 4.继承父类
// 5.编写方法
?

现在,就是每个段的代码实现
1.创建包名(命名空间)

namespace("pjaf.form");

//代码:
function namespace(fullNS) {
	// 将命名空间切成N部分, 比如Kmf、Soft、Ext等
	var nsArray = fullNS.split('.');
	var sEval = "";
	var sNS = "";
	for ( var i = 0; i < nsArray.length; i++) {
		if (i != 0) {
			sNS += ".";
		}
		sNS += nsArray[i];
		// 依次创建构造命名空间对象(假如不存在的话)的语句
		// 比如先创建pjaf,然后创建pjaf.form,依次下去JavaScript 的命名空间
		sEval += "if (typeof(" + sNS + ") == 'undefined') " + sNS + " = new Object();";
	}
	if (sEval != "") {
		eval(sEval);
	}
};

?2.导入需要的类名

register("pjaf.form.Field");

//代码:这个稍微复杂,里面使用了一个jquery的ajax方法,同步去获取文件并执行
function register(clazzName) {
	// 将传入的类名转化成实际文件的地址,为什么这样你懂的
	var _clazzName = clazzName;
	// 将所有.换成/
	while (true) {
		_clazzName = _clazzName.replace(".", "/");
		if (_clazzName.indexOf(".") == -1) {
			break;
		}
	}
	// 组成最终的JS详细地址
	_clazzName = _clazzName + ".js";
	
	$.ajax({
		url : _clazzName,
		dataType : 'text',
		scriptCharset : "GBK",
		async : false, //同步调用,这个非常重要!!
		cache : false,
		success : function(data) {
			// 如果到之后就直接执行
			eval(data);
		}
	});
}

?3.构造方法,创建了一个pjaf.form.Field类

pjaf.form.Field = function() {
	this.id = null;
	this.name = null;
};

4.继承父类,继承于pjaf.form.Field类

pjaf.form.TextField.inherit(pjaf.form.Field);

//代码:为所有Function增加该方法
Function.prototype.inherit = function(clazz) {
    this.prototype = new clazz();
    this.prototype.constructor = this;
    this.prototype.father = function(name) {
        f = clazz.prototype[name];
        return f.apply(this, Array.prototype.slice.call(arguments, 1));
    };
};

??? 注意:这里的inherit名称不要改为extends,因为在JSCompiler中是关键字,将会无法编译此JS文件

?

5.编写方法,这里重写了父类的一个方法

pjaf.form.TextField.prototype.show = function(name) {
	this.father("show", name);
	alert("这里是类pjaf.form.TextField的show:" + name);
};

??? 注意:这里的father名称不要改为super,因为在JSCompiler中是关键字,将会无法编译此JS文件

?

最后是示例代码,我晓得这个年头懒人多,直接放到你的项目,运行里面的test.html就是,本人测试过

1 楼 SonofGod 2012-12-07  
支持楼主!