如何將原型 jquery function 轉換為 javascript 原型 ZC1C425268E68385D1AB5074C141

Question

我在 jquery 中使用填字游戲，出於某種原因，我需要將其轉換為 javascript 並避免使用 jquery。 我已經設法轉換了它的許多部分，但我在原型 function 中有一個大問題，我無法理解如何轉換它。

以下是代碼摘要：

$("#"+cw_id).crossword();

(function($) {
// plugin definition
$.fn.crossword = function(options) {
    .....
    // implementation code goes here.    
    return this.each(function(){
      ....
    }
})();
// end plugin definition

我已經嘗試過這樣做並且與此調用類似，但沒有任何工作正常。

document.getElementById("#"+cw_id).crossword();
(function() {
// plugin definition
Object.prototype.crossword = function(options) {

})();
// end plugin definition

這個原型function的實際代碼在這個鏈接： https://github.com/electricg/jQuery-Html5-Crossword/blob/master/crossword.js#L1

調用者位於索引鏈接： https://github.com/electricg/jQuery-Html5-Crossword/blob/master/index.html#L62

我真的需要知道如何將此原型 function 轉換回 javascript 提前感謝您提供的任何幫助

Answer 1

對於與 jQuery 類似的功能，您正在尋找HTMLElement.prototype 。

 HTMLElement.prototype.crossword = function(text) { this.innerHTML = text; }; document.getElementById('crossword1').crossword('crossword here');

 <div id=crossword1 />

由於這是一個壞主意，我將使用 function 並綁定元素以獲得類似的結果。 您也可以將其作為參數傳遞，但這需要對現有代碼進行更多重構。

 const crossword = function(text) { this.innerHTML = text; }; crossword.bind(document.getElementById('crossword1'))('crossword here');

 <div id=crossword1 />

Answer 2

在這里，您在 HTML 元素上調用 function

document.getElementById("#"+cw_id).crossword();

因此您需要在其原型上定義 function

HTMLElement.prototype.crossword = function(options) {

}