javascriptコントロール開発の継承関係
4054 ワード
前のページを通じて、ファイルのダイナミックロードを実現しました.コントロールを簡単に作成できるように、後続の私たちは類似の継承関係を利用して、複数のjsファイルを作成し、ページに動的にロードします.
目次のcomonにexted.jsファイルを追加し、関数Extedを定義します.ここでは3つのパラメータを持って、最初のパラメータはベースクラス、2番目のパラメータはサブクラス、3番目のパラメータは結合this状態となります.便利さのために、パラメータは互換性のある処理をしました.つまり、サブクラスのchild Classのみの処理が可能です.
したがって、次は関数に一つを追加し、関数体curClass、および同名の関数をマージする方法mergFun、残りは関数prototypeの継承調整と関数と属性のコピーと構築を行いました.
+--デモ
+--スクリプト
+--common
+--init.js
+--static Script.js
+--exted.js
+--css
+--comp.com Style.css
+--web
+--test.
そしてstatic Script.jsファイルに追加します.
ソースは添付ファイルのようです
次の記事に注目してください.javascriptコントロール開発のレンダリング対象
目次のcomonにexted.jsファイルを追加し、関数Extedを定義します.ここでは3つのパラメータを持って、最初のパラメータはベースクラス、2番目のパラメータはサブクラス、3番目のパラメータは結合this状態となります.便利さのために、パラメータは互換性のある処理をしました.つまり、サブクラスのchild Classのみの処理が可能です.
function Extend(baseClass, childClass, isBind) {
// jClass({}, true)
if(typeof childClass === "boolean"){
isBind = childClass;
}
// - jClass(childClass)
if (typeof (baseClass) === "object") {
childClass = baseClass;
baseClass = null;
}
}
便宜上、後続のクラス構造はすべてjson構造を中心としており、jsonオブジェクトを標準的な関数構造に変換し、ベースクラスの方法をサブクラスにコピーし、同じ名前の関数を統合する必要があります.したがって、次は関数に一つを追加し、関数体curClass、および同名の関数をマージする方法mergFun、残りは関数prototypeの継承調整と関数と属性のコピーと構築を行いました.
function Extend(baseClass, childClass, isBind) {
// jClass({}, true)
if(typeof childClass === "boolean"){
isBind = childClass;
}
// - jClass(childClass)
if (typeof (baseClass) === "object") {
childClass = baseClass;
baseClass = null;
}
// ,
var initializing = false;
/**
* , ( )
*/
function curClass() {
// , init
if (!initializing) {
//
if(typeof this.init == "function") {
this.init.apply(this, arguments);
}
}
}
/**
*
* , , ,
* , this.base, ,
* ,
*/
function mergeFunc(funcName) {
//
var func = function() {
// base
var _base = this.base;
// this.base , 。
this.base = baseClass.prototype[funcName];
// ,
var result = childClass[funcName].apply(this, arguments);
// this.base
this.base = _base;
//
return result;
};
//
return func;
}
//
if (baseClass) {
initializing = true;
// , javascript
curClass.prototype = new baseClass();
curClass.prototype.constructor = curClass;
initializing = false;
}
// prototype
for (var name in childClass) {
if (childClass.hasOwnProperty(name)) {
// baseClass name
if (baseClass && typeof (childClass[name]) === "function"
&& typeof (curClass.prototype[name]) === "function") {
//
curClass.prototype[name] = mergeFunc(name);
} else {
curClass.prototype[name] = childClass[name];
}
}
}
// prototype
for(var name in baseClass){
if(typeof baseClass[name] !== "function") continue;
curClass[name] = baseClass[name];
}
// bind this ,
if(isBind){
for(var name in curClass.prototype){
if(typeof curClass.prototype[name] === "function"){
curClass.prototype[name] = curClass.prototype[name].bind(this);
}
}
}
return curClass;
}
このファイルを追加したら、私達のディレクトリは以下の通りです.+--デモ
+--スクリプト
+--common
+--init.js
+--static Script.js
+--exted.js
+--css
+--comp.com Style.css
+--web
+--test.
そしてstatic Script.jsファイルに追加します.
staticScript = [
"../css/com.comStyle.css",
"extend.js"
]
これで私達の対象に向かう継承関係は完成しました.ソースは添付ファイルのようです
次の記事に注目してください.javascriptコントロール開発のレンダリング対象