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

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

    Почати безкоштовно

    Обери свою 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

      Пакети підписки з доступом до всіх курсів та сервісів

      Стартовий
      • Усі відеокурси на 3 місяці
      • Тестування з 10 курсів
      • Перевірка 5 домашніх завдань
      • Консультація з тренером 30 хв
      Базовий
      • Усі відеокурси на 6 місяців
      • Тестування з 16 курсів
      • Перевірка 10 домашніх завдань
      • Консультація з тренером 60 хв
      Преміум
      • Усі відеокурси на 1 рік
      • Тестування з 24 курсів
      • Перевірка 20 домашніх завдань
      • Консультація з тренером 120 хв
      new
      Преміум Plus
      • Усі відеокурси на 1 рік
      • Тестування з 24 курсів
      • Перевірка 20 домашніх завдань
      • Консультація з тренером 120 хв
      • Завантаження відео уроків
      Notification success
      Ми використовуємо cookie-файли, щоб зробити взаємодію з нашими веб-сайтами та послугами простою та значущою.