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