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

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

    Начать бесплатно

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

    Начать бесплатно

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

      Введение

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

      КОММЕНТАРИИ И ОБСУЖДЕНИЯ

      Пакеты подписки с доступом ко всем курсам и сервисам

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