Часть 1. Улучшаем веб-разработку. Дружелюбный javascript

Введение

Порой сочетание javascript-html поражает своими возможностями. Возможно, уже не далеко будущее, в котором большинство приложений будет работать из-под браузера. Здесь и офис, и игры, и мультимедиа, и облачные вычисления. Чем масштабнее приложение, тем больше усилий оно требует при разработке.

Сегодня хочу рассказать вам о веб-библиотеке, которая, на мой взгляд, может упростить разработку и поддержку веб-приложений.

О библиотеке

Использовать будем AWeb-library. Библиотека написана на чистом javascript и использует возможности только html-javascript-css. Полный обзор библиотеки отложим на потом, рассмотрим лишь ее небольшую часть по работе с javascript-объектами.

Для подключения библиотеки необходимо в блоке head вашей html-страницы дописать:

<script type="text/javascript" src="http://a-web.me/scripts/a-web.js"></script>

Привет, мир

Напишем наше первое приложение. Стартовой функцией проекта, по аналогии с языками C/C++, является функция main. Она будет вызвана после загрузки HTML кода страницы, загрузки javascript'ов и стилей. Не нужно подстраиваться под браузеры, обрабатывать различные события. Все очень просто.

Пример функции, показывающей сообщение: "Hello, world".

function main() {
   alert( "Hello, world" );
}

Если вы пишете, например, свою библиотеку, и вам необходимо из разных частей программы определить действия, связанные с загрузкой страницы, то можно воспользоваться функцией AWeb.ready.

Новая объектная модель

Значительно переработан процесс создания классов. Появился уровень абстракции, возможности и синтаксис которого приближен к языкам C++/Java.

Класс реализуется через обертку AWeb.class. Может содержать public, protected и private методы.

• Public-методы/свойства могут быть вызываны как из методов своего класса, так и из методов других классов или внешних функций
• Protected-методы могут быть вызываны как из методов своего класса, так и из методов классов наследников. Из других классов или внешних функции protected-методы не доступны.
• Private-методы/свойства могут быть вызваны только из методов своего класса. Из других классов или внешних функций private-методы не доступны.

Опишем простой класс "A", имеющий:

• Public-метод getInfo
• Private-метод incCalls
• Private-свойства variable1, calls

/**
  * A-class
  */
var ClassA = AWeb.class({
   public : {
      /**
        * A-class constructor
        */
      constructor : function() {
         /* Private variable */
         this.variable1 = "A";
         this.calls = 0;
      },
      
      /**
        * Function returns information about the object
        */
      getInfo : function() {
         this.incCalls();
         return "variable1=" + this.variable1 + ", calls=" + this.calls;
      }
   },
   private : {
      /**
        * Private function
        */
      incCalls : function() {
         this.calls++;
      }
   }
});


/**
  * Main project function
  */
function main() {
   var a = new ClassA();
   
   alert(
      "a.getInfo(1)=" + a.getInfo() + "\n" +
      "a.getInfo(2)=" + a.getInfo() + "\n" +
      "a.variable1="  + a.variable1 + "\n" +
      "a.incCalls="   + a.incCalls
   );
}

Конструктор любого класса описывается функцией constructor. Public, protected и private-методы описываются каждый в своем блоке. Конструктор класса обязательно должен быть описан в блоке public.

Переменная this в каждом методе класса содержит внутренние (private) переменные класса. Таким образом, написав выражение this.variable1 = "A", мы создали private-переменную, которую может читать и изменять любой метод класса, но которая не видна вне методов класса.

Результатом работы указанного примера будет:

a.getInfo(1)=variable1=A, calls=1
a.getInfo(2)=variable1=A, calls=2
a.variable1=undefined
a.incCalls=undefined

Свойства класса

Класс позволяет описать свойства, внутренняя организация которых скрыта от вызывающей стороны. Любое свойство может содержать get-функцию, которая возвращает значение свойства и set-функцию, которая устанавливают значение свойства. В зависимости от наличия этих функций свойства могут быть:

• Read-write
• Readonly
• Writeonly

Создадим класс "B", в котором определены свойства: secretKey и loadedSign.
Значением свойства secretKey пользователь управляет сам. Значение свойства loadedSign пользователь изменить не может, оно только для чтения. Значение свойства loadedSign становится равным истине при первом изменении свойства secretKey.

/**
  * B-class
  */
var ClassB = AWeb.class({
   public : {
      /**
        * A-class constructor
        */
      constructor : function() {
         this.key = "<empty>";
         this.loaded = false;
      },
      
      /**
        * Read-write. Contains user's secret key
        */
      secretKey : {
         get : function () {
            return this.key;
         },
         set : function( value ) {
            this.key = value;
            this.loaded = true;
         }
      },
      
      /**
        * Readonly. True if loaded
        */
      loadedSign : {
         get : function() {
            return this.loaded;
         }
      }
   }
});

/**
  * Main project function
  */
function main() {
   var b = new ClassB();
   
   alert( b.secretKey + " " + b.loadedSign );
   
   b.secretKey = "<new>";
   alert( b.secretKey + " " + b.loadedSign );
}

Результатом работы указанного примера будет:


<empty> false
<new> true


Наследование классов

Для создания класса-наследника используется ключевое слово extends в описании класса. Унаследовать можно свойства и методы только одного класса.
Класс наследник получает доступ ко всем public и protected методам родительского класса. При этом protected методы родительского класса становятся private-методами дочернего класса.

Создадим класс "C", являющийся наследником класса "A". В классе "A" определим protected-функцию changeVariable1, а в классе "C" определим public-функцию getLongInfo.

Полный пример кода приведен ниже. В нем показано, какие методы присутствуют у родительского и дочернего классов, и какие методы доступны вне классов.

/**
  * A-class
  */
var ClassA = AWeb.class({
   public : {
      /**
        * A-class constructor
        */
      constructor : function() {
         /* Private variable */
         this.variable1 = "A";
         this.calls = 0;
      },
      
      /**
        * Function returns information about the object
        */
      getInfo : function() {
         this.incCalls();
         
         return "variable1=" + this.variable1 + ", calls=" + this.calls;
      }
   },
   protected : {
      /**
        * Protected function
        */
      changeVariable1 : function( value ) {
         this.variable1 = value;
      }
   },
   private : {
      /**
        * Private function
        */
      incCalls : function() {
         this.calls++;
      }
   }
});


/**
  * C-class
  */
var ClassC = AWeb.class({
   extends : ClassA,
   public : {
      /**
        * B-class constructor
        */
      constructor : function() {
         this.super();
         this.changeVariable1( "C" );
      },
      
      /**
        * Function returns extended information about the object
        */
      getLongInfo : function() {
         return this.incCalls !== undefined ? "incCalls visible" : "incCalls undefined";
      }
   }
});


/**
  * Main project function
  */
function main() {
   var a = new ClassA(),
       c = new ClassC();
       
   alert(
      "a instanceof ClassA: " + (a instanceof ClassA) + "\n" +
      "a instanceof ClassC: " + (a instanceof ClassC) + "\n" +
   
      "a.getInfo " + (a.getInfo ? "exists" : "undefined") + "\n" +
      "a.getLongInfo " + (a.getLongInfo ? "exists" : "undefined") + "\n" +
      "a.changeVariable1 " + (a.changeVariable1 ? "exists" : "undefined") + "\n" +
      "a.getInfo()=" + a.getInfo() + "\n\n" +
      
      "c instanceof ClassA: " + (c instanceof ClassA) + "\n" +
      "c instanceof ClassC: " + (c instanceof ClassC) + "\n" +
      
      "c.getInfo " + (c.getInfo ? "exists" : "undefined") + "\n" +
      "c.getLongInfo " + (c.getLongInfo ? "exists" : "undefined") + "\n" +
      "c.changeVariable1 " + (c.changeVariable1 ? "exists" : "undefined") + "\n" +
      
      "c.getInfo()=" + c.getInfo() + "\n" +
      "c.getLongInfo()=" + c.getLongInfo()
   );
}

Результатом работы кода будет:


a instanceof ClassA: true
a instanceof ClassC: false
a.getInfo exists
a.getLongInfo undefined
a.changeVariable1 undefined
a.getInfo()=variable1=A, calls=1



c instanceof ClassA: true
c instanceof ClassC: true
c.getInfo exists
c.getLongInfo exists
c.changeVariable1 undefined
c.getInfo()=variable1=C, calls=1
c.getLongInfo()=incCalls undefined


Особо следует обратить внимание на вызов конструктора родительского класса. Такой вызов осуществляется функцией super в конструкторе дочернего класса. Функция super поддерживает неограниченное количество параметров, которые передаются в конструктор родительского класса.

Интерфейсы и многое другое

По аналогии с языком Java можно организовать множественное наследование классов-интерфейсов. В этом случае класс наследник должен реализовать все методы, описанные в классе интерфейсе.

Есть еще полезные особенности вида:

• Уникальный идентификатор типа класса
• Уникальный идентификатор экземпляра класса

Но об этом можно написать отдельно.

Вместо заключения

По сравнению с классическим javascript описывать объекты стало значительно проще. Появились визуально понятные конструкции описания классов, появились области видимости в классе, появились полноценные свойства классов.

В итоге, использование данной библиотеки позволит:

• повысить качество кода
• уменьшить время на разработку и сопровождение кода