Класи у бібліотеці WinJS - Блог ITVDN
ITVDN: курси програмування
Відеокурси з
програмування

Вибери свою IT спеціальність

Підписка

Класи у бібліотеці WinJS

advertisement advertisement

Введение

Даже если Вы много раз слышали о классах в 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.

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

КОМЕНТАРІ ТА ОБГОВОРЕННЯ
advertisement advertisement

Купуй передплатуз доступом до всіх курсів та сервісів

Бібліотека сучасних IT знань у зручному форматі

Вибирай свій варіант підписки залежно від завдань, що стоять перед тобою. Але якщо потрібно пройти повне навчання з нуля до рівня фахівця, краще вибирати Базовий або Преміум. А для того, щоб вивчити 2-3 нові технології, або повторити знання, готуючись до співбесіди, підійде Пакет Стартовий.

Стартовий
  • Усі відеокурси на 3 місяці
  • Тестування з 10 курсів
  • Перевірка 5 домашніх завдань
  • Консультація з тренером 30 хв
59.99 $
Придбати
Преміум Plus
  • Усі відеокурси на 12 місяців
  • Тестування з 24 курсів
  • Перевірка 20 домашніх завдань
  • Консультація з тренером 120 хв
  • Завантаження відео уроків
199.99 $
Придбати
Базовий
  • Усі відеокурси на 6 місяців
  • Тестування з 16 курсів
  • Перевірка 10 домашніх завдань
  • Консультація з тренером 60 хв
89.99 $
Придбати
Notification success