ImEx.js прикрасить ваш код

Ви писали великі проекти використовуючи JS? У вас було багато об'єктів в об'єктах об'єктів (напр. LIB.Module.object.param)? У мене таке було часто і це викликало досить велика незручність і поганий вигляд коду. Аналогічно часто доводилося використовувати анонімні функції, вони виглядають не особливо акуратно.
 
 

ImEx.js

Хотілося якогось дуже простого й акуратного вирішення проблеми. Сталося так, що проект над яким я працюю має модуль на node.js, який збирає воєдино все. Js файли в один build.js. І тут виникла думка, а чому б не додати якийсь пре-процесор, який кілька модифікує вхідний код, тим самим дозволивши зробити нестандартні функції (легковаговий CoffyScript або TypeScript). Так і з'явився маленький препроцесор ImEx.js
 
 

Мета

 
Уникнути довгих конструкцій
Припустимо у нас є три сутності World, World.Animal, World.animals.Dog, давайте уявимо як воно буде виглядати на чистому JS:
 
 
// World.js

var World = {
    animals: {}
};

 
// Animal.js

World.Animal = function ( name, legNum ) {

    this.name = name;
    this.legNum = legNum;

};


 
// Dog.js

World.animals.Dog = function () {

    this.barking = false;

};
World.animals.Dog.prototype = Object.create( World.Animal );

World.animals.Dog.prototype.bark = function () {

    this.barking = true;

};

World.animals.Dog.prototype.stopBark = function () {

    this.barking = false;

};


 
Якщо скористатися ImEx.js код буде виглядати ось так:
 
 
// World.js

namespace Global;

export World = {
    animals: {}
};

 
// Animal.js

namespace World;

export Animal = function ( name, legNum ) {

    this.name = name;
    this.legNum = legNum;

};


 
// Dog.js

namespace World.animals;

import World.Animal;

export Dog = function () {

    this.barking = false;

};
Dog.prototype = Object.create( Animal );

Dog.prototype.bark = function () {

    this.barking = true;

};

Dog.prototype.stopBark = function () {

    this.barking = false;

};


 
Було додано три директиви 'namespace', 'import', 'export'. Все настільки просто, що думаю не вимагає пояснень.
 
 
Зробити більш явною модульність
Це досягається за допомогою директив import, export.
 
 
Повністю уникнути анонімних функцій, але мати їх переваги
Якщо виникають в реалізацію то кожен модуль обертається в анонімну функцію і всі змінні які не позначені префіксом import або export глобальними не стають. Це якраз те, чого ми хотіли добитися.
 
 
На завершення
Думаю, щось подібне вже існує і якщо хтось тицьне пальцем для порівняння буду вдячний.
 
 Код відкритий тут
Можна легко встановити: npm install imex-g
Більш повна інструкція з встановлення та запуску з прикладами є в readme .

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.