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

javascript类模版 从零开始(一)

javascript对于新手或者其他语言爱好者来说,是一个很难从写法上面去理解的,于是突发奇想,写一个javascript类模版,大概模样如下:

?

Package("cn.test");//申明当前命名空间
Import("com.data");//导入包
Class({
	classname:"Test",//类名
	properties:{
		$name:"jake",//$开头代表私有属性
		$h:new HashMap()
	},
	construct:function(){//构造方法
		this.id = 0;
		this.name="jake c";
		this.h=new HashMap();
	},
	methods:{//方法列表
		getName:function(){
			return this.name;
		},
		setName:function(v){
			if(typeof v == "undefined")
				return ;
			this.name=v;
		},
		setH:function(){
			return;
		}
	}
});
Package.finish();//当前包结束

Import("cn.test");//导入刚刚定义的类

var t = new Test();
Logger.get("view").info(t);//日志输出t对象
Logger.get("view").info("before set " + t.getName());

var t1 = new Test();//创建第二个对象

t.setName("jake1");
Logger.get("view").info("after set " +  t.getName());

Logger.get("view").info("t1.name " + t1.getName());

Logger.get("view").info("t.name " + t1.name);//私有属性无法访问 undefined

Logger.get("view").info(t1.getH());

?目前支持包(命名空间,引用的是Module.js),私有属性,对象类型属性的实例化,构造方法,继承,接口,静态方法等,感兴趣的同学可以下载看看。目前只是做了一个大概,还有一些功能未实现,希望大家可以给点意见,呵呵

? ? 其实主要意图还是注重在统一的写法,模式上面,形成一个大项目所具备的一些条理,层次等,从基层写起。

? ? (第一次写博客,见笑了,呵呵)

?

1.日志

?

在调试的过程中,我们经常需要看到输出结果,之前喜欢用alert,这是个很苦逼的方法,每次都有点确定,关掉之后才能继续运行下一步,所以采用log形式会方便一些。代码采用的是Log4Jse.js,这个工具很方便调用,而且兼容各大浏览器

?

?

Logger.get("view").info("(" + e.x + "," + e.y + ")");
?

?

?


2.加载完所以元素之后初始化类

?

由于javascript是动态加载的,html和script加载的先后顺序不一样,在javascript里面经常需要引用到html的DOM元素,如果采用面向对象可能需要在类的属性里面引用一个DOM,如

?

var Scence = function(){
	this.x = 0,
	this.y = 0,
	this.width = 600,
	this.height = 400,
	this.canvas = document.getElementById("canvas1");//需要引用的DOM元素
	this.ctx = this.canvas.getContext("2d");
	this.components = new HashSet();
};

Scence.prototype.draw = function(){
	for ( var it = this.generalviewers.iterator(); it.hasNext();) {
		var obj = it.next();
		obj.getValue().draw();
	}
}

?

?从代码可以看出需要用DOM元素作为Scence类(我们称之为类) 的属性,所以需要在html加载完成之后进行初始化实例。想到Jquery有个$(document).ready();,从中拿了一下代码过来,实现自定义的类可以在加载完html之后,再进行初始化。Class()就相当于$(document).ready(Class(...))

?

3.关键字

?

为了避免和javascript内部关键字冲突,于是另外加了自己的关键字

?

var KEYWORDS_ = [ "classname", "construct", "hashCode", "properties",
		"methods", "implement", "extend", "statics", "borrows", "constructor",
		"superclass", "super", "proto_properties", "clone", "Package", "Import" ];

?

?KEYWORDS_里面的每一个单词代表这个模版设计的关键字,有些是类的定义用的如"classname", "construct", "properties","methods", "implement", "extend", "statics", "borrows", "constructor", "Package", "Import"

而"hashCode"作为每个对象的唯一标识,在在面向对象语言里面比较两个对象是否相等通过比较hashcode来判定,

用类模版定义类的对象都自动赋予hashCode方法(采用闭包实现),从而确定唯一性?。

"proto_properties"并没有在外部用到,内部用到的一个最为初始化对象类型属性初始的值的备份列表,每个对象在初始化的时候都需要从里面获取对象的属性值,并且克隆(clone)一份,赋予新的对象。

?

                              // 初始化对象属性
				for (p in classProxy["proto_properties"]) {

					if (!CheckForKeyWords(p)) {
						var cp = $.clone(classProxy["proto_properties"][p]);
						this[p] = cp;
					}
				}
?

?

(未完待续)