javascript Erweiterung des vorhandenen Prototyp-Musters zur Unterstützung weiterer Optionen

Question

Ich versuche zu sehen, wie grundlegende Prototyp-Muster funktionieren. Ich versuche zu sehen, wie ich bestehende Funktionalität eines Widgets erweitern kann. Betrachten Sie es als Plugin Erweiterungssystem

Voraussetzung:

1. Datei widgets.calculator.js hat ein option={ text: ''}
2. in main.js ich jetzt new window.widgets.calculator({ text: 'Root Element' });
3. in einer anderen Datei aufrufen können widgets.calculator-extension.js ich möchte erweitern Funktionalität bestehende widgets.calculator.js, um eine weitere Option und vielleicht einige andere Funktionen zu unterstützen
4. so tha t jetzt in main.js sollte ich in der Lage sein, als auch andere Option zu verwenden, wie
   new window.widgets.calculator({ text: 'Root Element', input: 'form input' });

JSFIDDLE:https://jsfiddle.net/bababalcksheep/7scxed7j/

Code:

// file widgets.calculator.js 
(function (widgets, $, undefined) { 
    'use strict'; 
    widgets.calculator = function (options) { 
    this.options = $.extend(true, { 
     text: 'some text' 
    }, options); 
    // 
    this.ele = $('<div/>').html(this.options.text).addClass('ui-calculator').appendTo('body'); 
    // 
    }; 
    widgets.calculator.prototype = { 
    getRootElement: function() { 
     return this.ele; 
    } 
    }; 
}(window.widgets = window.widgets || {}, jQuery)); 
// 
// 
//main.js 
var widget = new window.widgets.calculator({ 
    text: 'Root Element' 
}); 
console.log(widget.getRootElement()); 
// 

/* 
// widgets.calculator-extension.js 
// how to extend existing widgets.calculator with more options 
// 
//main.js 
var widget = new window.widgets.calculator({ 
    text: 'Root Element', 
    input: 'form input' 
}); 
console.log(widget.getInput()); 
*/ 

Answer 1

// file widgets.calculator.js 
(function (widgets, $, undefined) { 
    'use strict'; 
    widgets.calculator = function (options) { 
    this.options = $.extend(true, { 
     text: 'some text' 
    }, options); 
    // 
    this.ele = $('<div/>').html(this.options.text).addClass('ui-calculator').appendTo('body'); 
    // 
    }; 
    widgets.calculator.prototype = { 
    getRootElement: function() { 
     return this.ele; 
    } 
    }; 
}(window.widgets = window.widgets || {}, jQuery)); 
// 
// widgets.calculator-extension.js 
(function (widgets, $, undefined) { 
    'use strict'; 
    var extension = Object.create(widgets.calculator); 
    console.log(extension); 
    //cannot use extension.options because extensions is not an instance 
    //if (extension.options.input) { 
    // extension.eleInput = $('<input/>').addClass('ui-input').appendTo(extension.ele); 
// } 
    extension.getInput = function() { 
    return this.ele; 
    }; 
    widgets.calculator.prototype = extension; 
    widgets.calculator.constructor = widgets.calculator; 

}(window.widgets = window.widgets || {}, jQuery)); 
// how to extend existing widgets.calculator with more options 
// 
//main.js 
var widget = new window.widgets.calculator({ 
    text: 'Root Element', 
    input: 'dd' 
}); 
console.log(widget.getInput()); 
//