Введение
Даже если Вы много раз слышали о классах в JavaScript, это не объектно-ориентированный язык программирования. JS можно назвать прототипным языком. Работа с классами в JS вполне возможна, но весьма неудобна синтаксически. WinJS – библиотека JS, одна из задая которой уменьшить синтаксическую сложность работы с классами.
В этой статье Вы научитесь использовать классы в WinJS. Начнем с создания класса в стандартном JS. JavaScript класс может быть создан так:
function Product(name, price) {
this.name = name;
this.price = price;
this.Display = function () {
console.log(this.name + this.price);
}
}
var p = new Product("Pen", 30);
p.Display();
Вы можете получить прототип класса – он организовывает основную работу с классами в JS. Класс в WinJS можно создать с помощью WinJS.Class.define. Он, как правило, состоит из трёх частей: конструктор, экземпляр класса и статические члены.
var Product = WinJS.Class.define(
//constructor
//instancemembers
//staticmembers
)
Вы можете создать конструктор с помощью функции. Также сможете передать параметры в конструкторе и установить значение частных переменных. Конструктор с двумя входящими параметрами создаётся так:
var Product = WinJS.Class.define(
//constructor
function (name, price) {
this.name = name;
this.price = price;
}
//instancemembers
//staticmembers
);
После конструктора поставьте запятую, а затем откройте фигурные скобки. Внутри скобок можно поместить все элементы экземпляра.
{
Display: function () {
return this.name + " costs " + this.price + "$";
}
}
Также Вы можете добавить статический элемент в класс WinJS. Он может быть добавлен в качестве третьего параметра после элемента экземпляра. А теперь Вы можете добавить распределитель статического элемента. Это возможно таким образом:
//staticmembers
{
DistributorName: "ABC Corp"
}
Весь класс Product, включая конструктор, функции экземпляра и статические элементы, будет выглядеть так:
var Product = WinJS.Class.define(
//constructor
function (name, price) {
this.name = name;
this.price = price;
},
//instancemembers
{
Display: function () {
return this.name + " costs " + this.price + "$";
}
},
//staticmembers
{
DistributorName: "ABC Corp"
}
);
После того, как класс создан, Вы можете создать экземпляр класса и использовать свойства.
var product1 = new Product(name, price);
var textToDisplay = product1.Display();
var disName = Product.DistributorName;
Видео курсы по схожей тематике:
Обратите внимание, что имя статической переменной используется непосредственно с именем класса. Если у Вас есть опыт работы с классами в JS, Вы заметите, что работа с классами в WinJS синтаксически проста.
Теперь давайте рассмотрим реальный пример работы с классом Product, созданным ранее. В нём пользователь может ввести имя, цену и, кликнув на кнопку в классе Product, данные будут обновлены.
<input id="txtName" type="text" />
<input id="txtPrice" type="text" />
<br />
<button id="btnDisplay">Display Productbutton>
br/>
<label id="lblProduct">result here label>
<label id="lblDis">result here label>
Если в JS-файле кликнуть на кнопку события, создаётся экземпляр класса Product, пропуская пользовательский ввод и вывод сообщения.
document.querySelector("#btnDisplay").onclick=
function () {
var name = document.querySelector("#txtName").value;
var price = document.querySelector("#txtPrice").value;
var product1 = new Product(name, price);
var textToDisplay = product1.Display();
var disName = Product.DistributorName;
document.querySelector("#lblProduct").textContent=textToDisplay;
document.querySelector("#lblDis").textContent = disName;
А вот как можно извлечь один класс из другого:
var SportsProduct = WinJS.Class.derive(Product,
function(name,price,color)
{
this.name = name;
this.price = price;
this.color = color;
},
{
//instance members
},
{
//static members
});
Бесплатные вебинары по схожей тематике:
Производный класс будет иметь доступ ко всем членам базового класса. Теперь возможно использование производного класса для создания нового экземпляра:
var product1 = new SportsProduct("Pen", 30, "Red");
Таким образом Вы можете работать с классами в WinJS. Как видите, работа с классом гораздо удобнее в плане синтаксиса, по сравнению с JavaScript.
Статьи по схожей тематике
