1. 程式人生 > >javascript類模版 自力更生

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;
					}
				}

(未完待續)