Javascript.RU

Ext Core для NodeJS

Благодарность

Хочу поблагодарить Сергея Широкова за помощь в размещении проекта
на GitHub, огромное количество советов и сайт nodejs.ru
Также хочу сказать, большое спасибо monolithed
за постоянную помощь и советы по js.
Илью Кантора за замечательный сайт и статьи.
И всех всех всех, кто мне помогает.

Вступление

Больше 3-ех месяцев хотел попробовать ExtCore на NodeJS.
В первую очередь мне хотелось применить класс Template
Т.е. класс шаблонизатор.
А так же иметь возможность работать с типами String,Function,Array
также как я работаю с ними в ExtJS.

И вот вчера 07.07.2011 полный решимости это сделать я сел и за 5 часов
перебрал весь Ext Core и из более чем 10000 строк кода debug версии оставил
чуть больше 500.
Решил оставить только самое необходимое:
Расширенную возможность для работы с типами String,Function,Array.
Класс Template(основа для шаблонизации).
Также добавил из ExtJS класс XTemplate для полноценной возможности
работать с Ext Core на сервере как с шаблонизатором.

Замечание:
Классы Template,XTemplate,Ext.util.Format взяты из ExtJS версии 3.4
Также есть небольшое расширение для типа Number тоже из ExtJS версии 3.4
В этой статье хочу привести примеры работы с тем, что получилось.

Поскольку код на js, то примеры будут запускаться в браузере(функций из NodeJS API пока не вставлял, но они обязательно понадобятся для Connection и Ajax).
Смотреть примеры желательно в Chrome, поскольку все костыли для других
браузеров убрал и заточил под Chrome.(т.к. Node.js is an event-driven I/O server-side JavaScript (on V8 JavaScript engine))

GitHub

Проект на GitHub
https://github.com/mycoding/Ext-Core-for-NodeJS

Примеры

<script src="http://moc-081.ru/nodejs/ext-core-for-nodejs-v2.js" type="text/javascript" charset="utf-8"></script> 
<script>
var cls = 'my-class', text = 'Some text';
var s = String.format('<div class="{0}">{1}</div>', cls, text);
alert(s);
</script>

indexOf - можно удалить. Полностью совпадает с аналогом
из EcmaScript 5.
Кроме того встроенное свойство из ES5 работает чуть быстрее,
где то в 1.02~1.08 раз быстрее.

<script src="http://moc-081.ru/nodejs/ext-core-for-nodejs-v2.js" type="text/javascript" charset="utf-8"></script> 
<script>
var arr = [1,2,3,4,5,6,7,8,9,10],
	index = arr.indexOf(10);
alert(index);
</script>

remove - удаляет элемент с указанным значением.
Не путайте с индексом

<script src="http://moc-081.ru/nodejs/ext-core-for-nodejs-v2.js" type="text/javascript" charset="utf-8"></script> 
<script>
var arr = ["?", 2, 3, 4];
arr.remove('?');
arr.remove(4);
alert(arr);
alert("Длина массива "+arr.length);
</script>

Defer - отложенный вызов.
Напоминает setTimeout

<script src="http://moc-081.ru/nodejs/ext-core-for-nodejs-v2.js" type="text/javascript" charset="utf-8"></script> 
<script>
(function(){
  alert('Вызов отложен на 0.5 секунды');
}).defer(500);//
</script>
<script src="http://moc-081.ru/nodejs/ext-core-for-nodejs-v2.js" type="text/javascript" charset="utf-8"></script> 
<script>
function sayHi(name1,name2){
    alert('Привет, ' + name1 + ' и ' + name2);
}

sayHi.defer(2000, null, ['Вася','Петя']);
</script>

Метод defer возвращает timeout id с помощью которого Вы можете остановить
выполнение через clearTimeout.

Есть еще 3 метода:
createCallback,createDelegate,createInterceptor

Сомневаюсь, что эти методы понадобятся кому-либо.
Лично я createDelegate - использую в ExtJS для передачи
аргументов в handler-ы, остальные не использую совсем.
Вот несколько примеров.
Немного надуманные.

createCallback

<script src="http://moc-081.ru/nodejs/ext-core-for-nodejs-v2.js" type="text/javascript" charset="utf-8"></script> 
<script>
function sayHello(firstName, lastName){
    alert('Hello ' + firstName + ' ' + lastName);
};

setTimeout(sayHello.createCallback('John', 'Smith'),1000);
</script>

createDelegate

<script src="http://moc-081.ru/nodejs/ext-core-for-nodejs-v2.js" type="text/javascript" charset="utf-8"></script> 
<script>
var sayHello = function(firstName, lastName, e){
    alert('Hello ' + firstName + ' ' + lastName);

};

setTimeout(sayHello.createDelegate(this, ['John',     'Smith']),1000);
</script>

createInterceptor

<script src="http://moc-081.ru/nodejs/ext-core-for-nodejs-v2.js" type="text/javascript" charset="utf-8"></script> 
<script>
var sayHi = function(name){
    alert('Привет, ' + name);
}

var sayHiToFriend = sayHi.createInterceptor(function(name){
    return name == 'Петя';
});

sayHiToFriend('Вася');  // no alert
sayHiToFriend('Петя'); // alerts "Привет, Петя"
</script>

apply копирует все свойства второго объекта в первый, если
такое свойсво уже есть, то оно заменяется новым.

<script src="http://moc-081.ru/nodejs/ext-core-for-nodejs-v2.js" type="text/javascript" charset="utf-8"></script> 
<script>
var person = {
    name: 'Вася',
    age: 30,
	zip:450690
};

Ext.apply(person, {
    hobby: 'Coding',
    city: 'London',
	zip:40000
});
var str = ' ';
for(var p in person){
   str+= p+":" + person[p]+', ';
}
alert(str);
</script>

applyIf практически тоже самое, что и apply с той лищь разницой, что
копирует свойства которых еще нет в объекте.

<script src="http://moc-081.ru/nodejs/ext-core-for-nodejs-v2.js" type="text/javascript" charset="utf-8"></script> 
<script>
var person = {
    name: 'Вася',
    age: 30,
	zip:450690
};

Ext.applyIf(person, {
    hobby: 'Coding',
    city: 'London',
	zip:40000
});
var str = ' ';
for(var p in person){
   str+= p+":" + person[p]+', ';
}
alert(str);
</script>

extend - наследование
override - перезапись методов и свойств класса.

extend
Есть два способа вызова этой функции
1 -ый

<script src="http://moc-081.ru/nodejs/ext-core-for-nodejs-v2.js" type="text/javascript" charset="utf-8"></script> 
<script>
function A(){
    var me = this;
    me.a = 1;
    me.b = 2;
    me.c = 10;
}

A.prototype = {
    c:3,
    d:4,
    e:5f
}

B = function(){
    Ext.XTemplate.superclass.constructor.apply(this, arguments);
}

Ext.extend(B,A,{
    h:8
});

var b1 = new B();	
</script>

2 -ой

<script src="http://moc-081.ru/nodejs/ext-core-for-nodejs-v2.js" type="text/javascript" charset="utf-8"></script> 
<script>
function A(){
    var me = this;
    me.a = 1;
    me.b = 2;
    me.c = 10;
}

A.prototype = {
    c:3,
    d:4,
    e:5
}

new A();

B = function(){
    Ext.XTemplate.superclass.constructor.apply(this, arguments);
}

B = Ext.extend(A,{
    h:8
});

var b1 = new B();
alert(str);
</script>

override

<script src="http://moc-081.ru/nodejs/ext-core-for-nodejs-v2.js" type="text/javascript" charset="utf-8"></script> 
<script>
function A(){
    var me = this;
    me.a = 1;
    me.b = 2;
    me.c = 10;
}

A.prototype = {
    c:3,
    d:4,
    e:5
}

Ext.override(A,{
    c:10,
    d:14
});
</script>

namespace - делает области видимости
ns - Сокрашенный вариант записи.

isEmpty,isArray,isDate,isObject,isPrimitive,isFunction,isNumber,isString,isBoolean,isDefined

urlEncode,urlDecode,urlAppend - не уверен, что нужно, в NodeJS есть отличный модуль для работы с url
toArray() работает не совсем так, как я хочу
isIterable,each,iterate - чуть позже опишу

И наконец самое основное. В первую очередь для чего мне и нужен был
Ext Core на сервере.

Класс Template является родителем для класса XTemplate.
Возможностей полноценного шаблонизатора у него нет.

<script src="http://moc-081.ru/nodejs/ext-core-for-nodejs-v2.js" type="text/javascript" charset="utf-8"></script> 
<script>
var t = new Ext.Template(
    '<div name="{id}">',
        '<span class="{cls}"></span>',
    '</div>'
);
var html = t.applyTemplate({id: 'myid', cls: 'myclass'});
alert(html);
</script>

XTemplate - полноценный шаблонизатор.

<script src="http://moc-081.ru/nodejs/ext-core-for-nodejs-v2.js" type="text/javascript" charset="utf-8"></script> 
<script>
var data = {
    name: 'Jack Slocum',     
    kids: [{
        name: 'Sara Grace',
        age:3
    },{
        name: 'Zachary',
        age:2
    },{
        name: 'John James',
        age:0
    }]
};

var tpl = new Ext.XTemplate(
    '<p>Name: {name}</p>',
    '<p>Kids: ',
    '<tpl for="kids">',
        '<tpl if="age > 1">',
            '<p>{name}</p>',
            '<p>Dad: {parent.name}</p>',
        '</tpl>',
    '</tpl></p>'
);

var html = tpl.applyTemplate(data);
alert(html);
</script>

На базе модуля https://github.com/mycoding/node-email
сделал расширение для отправки email.
Требует переработки и дополнения функционала(возможности делать вложения и
отправку html)

new Ext.Mail({
		to: "mycoding@mail.ru",
		from: "me@example.com",	
		subject: "Knock knock...",
		body: "Who's there?",
		success:function(){
			console.log('Success');
		},
		failure:function(err){
			console.log('Error:'+err);
		}
	}).send();

Тестовый вариант.
На данный момент есть возможность делать только GET запросы.

new Ext.Ajax({
		url: 'http://moc-081.ru/json.php?param1=1&param2=2',
		method:'GET',
		success: function(data){
			var obj = Ext.decode(data);
			console.log(obj);
		},
		failure: function(){
			console.log('failure');
		}
	}).request();

Текущие задачи

Необходимо переписать функцию namespace(сейчас она не работает).
Переписать Ajax.
Переписать отправку email сообщений.

Перспективы на будущее

Хочется разработать framework, который будет решать основные задачи серверной части.

+3

Отправить комментарий

Приветствуются комментарии:
  • Полезные.
  • Дополняющие прочитанное.
  • Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
    Для остальных вопросов и обсуждений есть форум.
P.S. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.
Содержание этого поля является приватным и не предназначено к показу.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Разрешены HTML-таги: <strike> <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <u> <i> <b> <pre> <img> <abbr> <blockquote> <h1> <h2> <h3> <h4> <h5> <p> <div> <span> <sub> <sup>
  • Строки и параграфы переносятся автоматически.
  • Текстовые смайлы будут заменены на графические.

Подробнее о форматировании

CAPTCHA
Антиспам
9 + 2 =
Введите результат. Например, для 1+3, введите 4.
 
Поиск по сайту
Другие записи этого автора
mycoding
Содержание

Учебник javascript

Основные элементы языка

Сундучок с инструментами

Интерфейсы

Все об AJAX

Оптимизация

Разное

Дерево всех статей

Популярные таги
Последние комментарии
Последние темы на форуме
Forum