wrapping document.createElement() с настраиваемым типом

Question

Я хочу создать тип видового экрана, который в основном обертывает тег <div> с некоторыми пользовательскими параметрами стиля, но я не уверен, как добавить методы элементов в мой тип вида просмотра, я попробуйте что-то вроде этого:

var viewport = function(){ 
    document.createElement.call(this, 'div'); 
    // additional custom properties... 
    this.customStuff = ExtraProperty; 
} 

//would this work? 
viewport.prototype = Object.create(document.createElement.prototype); 

// additional custom methods... 
viewport.prototype.constructor = viewport; 

Я хочу, чтобы объекты моего видового экрана могли использоваться как объект Element. Так что я мог бы назвать так:

var myVP = new viewport(); 
myVP.appendChild(someotherElementType); 

Я просто не знаю, как правильно/эффективно, как я не знаю, где .appendChild и другие методы живут и т.д. Если это было использовано как обернуть document.createElement типичный конструктор, я знаю, что могу использовать шаблон выше, но так как вам не нужно писать new document.createElement('type'); Я не уверен.

Спасибо.

Answer 1

1. document.createElement должно всегда выполняться в контексте документа. Использование .call или .apply здесь не имеет смысла.
2. Элементы, созданные с использованием document.createElement do не наследуют от document.createElement.prototype (это даже не конструктор!). Элементы DOM реализуют интерфейсы . Когда метод/свойство определяется на Node и Element, то имеет значение Element. В общем, это должен быть порядок «наследования»:
   Node>Element>HTMLElement> HTML Наименование Элемент.

Если вы хотите добавить нестандартное свойство, продлите один из этих прототипов, например.

Node.prototype.foo = 1; 
console.log(document.createElement('div').foo); //"1" 

Но они не могут быть использованы в качестве конструктора:

new HTMLDivElement; // TypeError: HTMLDivElement.prototype is not a constructor 
Object.create(HTMLLIElement).innerHTML; // undefined 
Object.create(HTMLAnchorElement).href ; // undefined 

Но вы не можете создавать пользовательские элементы, определив глобальную HTML Имя Элемент объекта:

window.HTMLHelloElement = HTMLDivElement; // Expected: Create alias for div 
document.createElement('hello');   // Result: [object HTMLUnknownElement] 

Совместимость:

• IE 7- не обнаруживает наследуемого прототипа
• IE8: Элементы наследуют только от Element.prototype.
• IE9 +/Chrome 1+/Firefox 1+/Opera 8+/Safari 3+: соответствует стандарту.

---

«Я хочу сделать тип окна просмотра, который в основном оборачивает тег с некоторыми пользовательскими вариантами стайлинга»

именами классов и CSS является более подходящими для определения стилей классовых.Например:

var foo = document.createElement('div'); 
foo.className = 'type-viewport';  // CSS style sheet: .type-viewport { ... }