Введение

Даже если Вы много раз слышали о классах в JavaScript, это не объектно-ориентированный язык программирования. JS можно назвать прототипным языком. Работа с классами в JS вполне возможна, но весьма неудобна синтаксически. WinJS – библиотека JS, одна из задая которой уменьшить синтаксическую сложность работы с классами. 

 

Классы в библиотеке WinJS


 

В этой статье Вы научитесь использовать классы в 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.

Источник: http://debugmode.net/2014/12/11/classes-in-winjs/