擴展DOM但不是元素原型..可能嗎？

我想擴展一些組或類，如果你想在DOM但我不想讓所有的元素擴展。有可能的？擴展DOM但不是元素原型..可能嗎？

例如：

document.getElementsByClass('extended').myMethod(); // working

但

document.getElementById('elementNotExtendedClass').myMethod(); // shouldnt be working

因爲我不想搞砸所有元素，只是選擇的。也許它應該通過在文檔中創建我自己的createElement（）方法版本以某種方式完成。例如document.CreateMyElement（）。

還是有什麼想法？謝謝

編輯06月06日：我正在尋找解決方案，其中原型鏈保留工作，所以我可以一次更改一些共享的方法和屬性。

來源

2012-06-01 Luckylooke

您的最終目標是什麼？你爲什麼需要這個？ –

@AlexanderPavlov：我的目標是爲網頁製作簡單的wysiwyg功能。我的意思是該頁面的編輯器剛剛啓動可編輯模式，很多東西都是可編輯的。所以我認爲用我的方法和屬性擴展一些元素可能是如何實現這一點的最佳方式。 – Luckylooke

爲什麼不是方法添加到每個實例（fiddle）

function test() { 
    this.style.fontWeight = "bold"; 
} 

window.onload = function(){ 
    // add your method to existing elements with class 'extended' 
    var elements = document.getElementsByClassName('extended'); 
    for (var i = 0; i < elements.length; i++){   
     elements[i].test = test; 
    } 
    // just to visualize what happened... 
    var spans = document.getElementsByTagName("span"); 
    alert("span[0].test: " + typeof spans[0].test 
      +"\nspan[1].test: " + typeof spans[1].test); 
    spans[0].test(); 
};

來源

2012-06-01 20:16:31 canon

這可行，但我不想鬆散原型鏈，所以如果我需要改變測試函數，我必須爲所有具有「擴展」類的元素分配這個函數。我正在尋找原型鏈工作的解決方案，所以我可以一次更改一些共享的方法和屬性。謝謝 – Luckylooke

更新

這種方法將確定在其上定義的擴展方法全局接口。把它們放在這樣的界面中可以讓你改變方法而不必重新應用它。

MyExtendedInterface = { 
    test: function() { 
     // this points to the DOM element itself 
     console.log(this); 
    } 
} 

var elements = document.getElementsByClassName('extended'); 
for (var i = 0, el; el = elements[i]; ++i) { 
    for (var j in MyExtendedInterface) { 
     // bind the interface methods to the current element 
     el[j] = MyExtendedInterface[j].bind(el); 
    } 
}

的.bind()是最近加入的JavaScript;另請參閱：https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/bind

來源

2012-06-03 10:18:17

@Luckylooke我已經更新了答案，希望這是你想要更多的東西:) –

我必須先用你的代碼片段做一些測試。在此期間，我發現有趣的部分答案[這裏]（http://stackoverflow.com/questions/1489738/how-to-inherit-from-the-dom-element-class）最有趣的答案是從kangax和他最後寫了封裝或裝飾模式。但我很好奇這種模式應該如何用於案件。 – Luckylooke

擴展DOM但不是元素原型..可能嗎？

回答

相關問題