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
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¶m2=2',
method:'GET',
success: function(data){
var obj = Ext.decode(data);
console.log(obj);
},
failure: function(){
console.log('failure');
}
}).request();
Необходимо переписать функцию namespace(сейчас она не работает).
Переписать Ajax.
Переписать отправку email сообщений.
Хочется разработать framework, который будет решать основные задачи серверной части.
|
Отправить комментарий
Приветствуются комментарии:Для остальных вопросов и обсуждений есть форум.