日期:2014-05-16 浏览次数:20581 次
如何编写出优美的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就是,本人测试过