关于如何编写优美的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  

支持楼主！