immy框架入門系列(2)——class
上文談了module,本文談class。可以說,這兩個東西是本框架的兩個“基石”(至少對我這樣沒有在js中應用過OOP和“模組程式設計”的小白來說是)。module vs. class,兩者是各自獨立的技術點:我們可以只用module而不用class,同樣也可以只用class而不用module。總之,他倆沒有毛關係。也可以說,module是“檔案”層面上的封裝機制,class則是“程式碼”層面上封裝機制。
還是以“儘量排除干擾”的原則,本文將框架中純class的內容摘出來,僅談class,不談module。
js本沒有class
背景:ES5及以前的標準中,並沒有class這個關鍵字。(ES6才開始有)教科書上教我們建立一個class並例項的方式如下:
class定義及例項化
// 定義
function Dog(name) {
this.name = name;
this.foots = 4;
}
Dog.prototype.eat = function() {
console.log('I like bone');
}
// 例項化
var dog = new Dog('da-huang');
dog.eat();
potato.createClass
zy框架下,隨處可見這樣的程式碼塊(註釋為我加):
define(['some/base/module'],function(Base) {
var Module = (function(){
var CON = function(dom){ // CON: constructor
Base.call(this, dom);
}
potato.createClass(CON, Base); // 實現繼承
// 在createClass之後,對prototype增加方法(必須如此?)
CON.prototype.someMothed = function() {
// do some thing
}
CON.prototype.someMothed2 = function() {
// do some thing
}
// ....
return CON;
})();
return Module;
});
我認為,potato.createClass 是需要理解的一個關鍵方法。其實現了類的繼承。potato是一個基礎庫,其中createClass的定義為:
var _pt = {
"__CID__" : 0
};
var createClass = function (A, B) {
_pt.__CID__++;
var CID = "__"+_pt.__CID__+"__";
A.__CID__ = CID;
if(B){
var fun = function(){this.constructor = A;};
fun.prototype = B.prototype;
A.prototype = new fun();
A.prototype[CID] = B.prototype;
}
fun = null;
return CID;
};
(為了簡化,進行了些許修改)
其中,CID應為 "class id" 之意,其作用不甚了了,待趙勇同學解惑。我不揣冒昧,將這段程式碼關鍵部分取出(如有謬誤,請斧正):
var createClass = function (A, B) {
var fun = function() {}
fun.prototype = B.prototype;
A.prototype = new fun();
};
如有以下程式碼:
function Base() {}
// Base.prototype.xxx ....
function Some() {}
createClass(Some, Base);
// 此時,Some就繼承了Base的prototype(方法們)
周知,js的類及繼承,是個不太好理解的問題。寫過一篇文章 javascript prototype試圖深入探討,但寫的也不好。如果尚不能真正理解,就先記住:createClass就是為了實現繼承,然後按照範例來寫新的類吧。
web.git中有個demo:/m/src/demo/class,呈現的是本文的意思。
相關文章
- YoyoGo微服務框架入門系列-基本概念Go微服務框架
- ABP框架入門框架
- Flask框架入門Flask框架
- YoyoGo微服務框架入門系列-快速編寫WEB APIGo微服務框架WebAPI
- SpringMVC框架入門SpringMVC框架
- Spring框架入門Spring框架
- Play框架入門使用框架
- DWR框架入門例子框架
- Java Mybatis 框架入門教程JavaMyBatis框架
- CppUnit測試框架入門框架
- Android 網路程式設計系列(5)Volley 網路框架入門Android程式設計框架
- Casbin訪問控制框架入門框架
- CQRS架構和Axon框架入門實踐架構框架
- J.U.C之Executor框架入門指引框架
- 手把手教你寫Router框架入門篇框架
- SSM框架入門和搭建 十部曲SSM框架
- Pygame - Python 遊戲程式設計入門 class2GAMPython遊戲程式設計
- Data-Mediator入門系列2-2
- java ssm框架入門(二)新增語言濾器JavaSSM框架
- PHP Yii開源框架入門學習(一)薦PHP框架
- Data-mediator入門系列2
- Spark大資料處理框架入門(單機版)Spark大資料框架
- CSharp使用Thrift作為RPC框架入門(一)CSharpRPC框架
- grails框架入門小結(一)—後臺基礎搭建AI框架
- 微軟同步框架入門之二--增量和修改同步方式微軟框架
- OAuth 2.0(Open Authorization 2.0)授權框架入門介紹OAuth框架
- JAVA_WEB專案之Lucene檢索框架入門案例JavaWeb框架
- 【Ionic2系列】 一、入門介紹
- 知新 | koa框架入門到熟練第一章框架
- 易車網實戰+【保姆級】:Feapder爬蟲框架入門教程爬蟲框架
- Newbe.Claptrap 框架入門,第二步 —— 建立專案APT框架
- 【JVM】JVM系列之Class檔案(三)JVM
- Hadoop入門系列(2)-安裝HadoopHadoop
- Hapi.js 起步 - 寫給前端開發的 Node Web 框架入門APIJS前端Web框架
- 【譯】2. Java反射——Class物件Java反射物件
- Bootstrap3系列:輸入框組boot
- NIO框架入門(三):iOS與MINA2、Netty4的跨平臺UDP雙向通訊實戰框架iOSNettyUDP
- Angular2入門系列(五)———— 路由引數設定Angular路由