Cоздание js методов через prototype на лету!
javascript, 07.02.2009 Суббота, 14:21
Теги:
Теги:
Недавно открыл для себя javscript prototype. C помощью прототипов можно создавать различные методы к классам, как к только что созданным так и к стандартным. Про последнее хочу рассказать подробнее. Итак, как создать свой метод:
Например у нас есть куча цифровых строк, и все надо увеличить на 2 и умножить на число, в каждом случае разное. Если писать это обычным кодом для каждой строки, получится вот что:И это только для одной переменной.. а писать так для 20 переменных - смерть. Но на помощь приходят прототипы и код становится гораздо проще!Видите как просто, хотя пример и не очень удачен, так как функция проста! Прототип объявляется один раз и работает во всем скрипте и в других прототипах кстати тоже. С помощью прототипов можно разительно сократить объем кода. Прототипы можно объявить к любым стандартным классам, будь то Number, String, Boolean или Object. Достаточно большой код... зато теперь мы можем вместо длинного getElementBiId('блаблабла') искать наши элементы вот так:Это полностью рабочий код, можете скачать к себе и испытать. Вот так то, прототип, это - сила!
Например у нас есть куча цифровых строк, и все надо увеличить на 2 и умножить на число, в каждом случае разное. Если писать это обычным кодом для каждой строки, получится вот что:
Code
<script>
var stroka = 55;
var num = 3; // число которое разное =)
// прибавляем 2 и умножаем на 3
var stroka = (stroka+2)*num;
alert(stroka);
//выдаст 171
</script>
var stroka = 55;
var num = 3; // число которое разное =)
// прибавляем 2 и умножаем на 3
var stroka = (stroka+2)*num;
alert(stroka);
//выдаст 171
</script>
Code
<script>
// назовем нашу функцию например count (счет)
Number.prototype.count = function(num){return (this+2)*num; } // сам прототип
var stroka = 55;
alert(stroka.count(3)); // 3 - меняющееся число
//выдаст 171
//мы создали новый метод count() с числом в качестве параметра,
//теперь его можно применять для любых цифровых функций!
</script>
// назовем нашу функцию например count (счет)
Number.prototype.count = function(num){return (this+2)*num; } // сам прототип
var stroka = 55;
alert(stroka.count(3)); // 3 - меняющееся число
//выдаст 171
//мы создали новый метод count() с числом в качестве параметра,
//теперь его можно применять для любых цифровых функций!
</script>
Теперь я покажу, как можно сделать применение прототипов ОЧЕНЬ полезным. Кстати продажа авто в Светогорске не менее полезна, но вернемся к прототипам. Напишем код, который позволит нам обратиться к любому элементу по Id, TagName, Name (только для специфических элементов) или Class (который в js вообще не реализован!). Смотрите, вот код прототипа:
Code
<script>
Object.prototype.$= function(dat){
var node = this;
if(node==window){node = document;}
var type = dat.charAt(0);
var obj = dat.replace(type,'');
if(type=='#'){return node.getElementById(obj);} else
if(type=='@'){return node.getElementsByName(obj);} else
if(type!='@' && type!='#' && type!='.'){return node.getElementsByTagName(dat);} else
if(type=='.'){
var class=new Array();
var elems=document.getElementsByTagName('*');
var num=elems.length;
var pat=new RegExp("(^|\\b)"+obj+"(\\b|$)");
for (i=0,j=0;i<num;i++){if(pat.test(elems[i].className)){class[j]=elems[i];j++;}}
return class;
}
};
</script>
Object.prototype.$= function(dat){
var node = this;
if(node==window){node = document;}
var type = dat.charAt(0);
var obj = dat.replace(type,'');
if(type=='#'){return node.getElementById(obj);} else
if(type=='@'){return node.getElementsByName(obj);} else
if(type!='@' && type!='#' && type!='.'){return node.getElementsByTagName(dat);} else
if(type=='.'){
var class=new Array();
var elems=document.getElementsByTagName('*');
var num=elems.length;
var pat=new RegExp("(^|\\b)"+obj+"(\\b|$)");
for (i=0,j=0;i<num;i++){if(pat.test(elems[i].className)){class[j]=elems[i];j++;}}
return class;
}
};
</script>
Code
<html>
<head>
</head>
<body>
<div id="mydiv"></div>
<div class="myclass"></div>
<input name="myinput" type="button" value="Кнопка">
</p>
<script>
// объявляем прототип
Object.prototype.$ = function(dat){
var node = this;
if(node==window){node = document;}
var type = dat.charAt(0);
var obj = dat.replace(type,'');
if(type=='#'){return node.getElementById(obj);} else
if(type=='@'){return node.getElementsByName(obj);} else
if(type!='@' && type!='#' && type!='.'){return node.getElementsByTagName(dat);} else
if(type=='.'){
var class=new Array();
var elems=document.getElementsByTagName('*');
var num=elems.length;
var pat=new RegExp("(^|\\b)"+obj+"(\\b|$)");
for (i=0,j=0;i<num;i++){if(pat.test(elems[i].className)){class[j]=elems[i];j++;}}
return class;
}
};
$('p')[0].$('.myclass')[0].innerHTML = 'Нашли по классу и по тегу!';
// можно использовать цепь поиска элементов!
// Обратите внимание что работает поиск по классу
$('@myinput')[0].value = 'Нашли по имени!';
// поиск по атрибуту name
$('#mydiv').innerHTML = 'Нашли по идентификатору!';
// вот как сократился поиск по id
// $('#myinput') вместо
// document.getElementBy('myinput')
</script>
</body>
</html>
<head>
</head>
<body>
<div id="mydiv"></div>
<div class="myclass"></div>
<input name="myinput" type="button" value="Кнопка">
</p>
<script>
// объявляем прототип
Object.prototype.$ = function(dat){
var node = this;
if(node==window){node = document;}
var type = dat.charAt(0);
var obj = dat.replace(type,'');
if(type=='#'){return node.getElementById(obj);} else
if(type=='@'){return node.getElementsByName(obj);} else
if(type!='@' && type!='#' && type!='.'){return node.getElementsByTagName(dat);} else
if(type=='.'){
var class=new Array();
var elems=document.getElementsByTagName('*');
var num=elems.length;
var pat=new RegExp("(^|\\b)"+obj+"(\\b|$)");
for (i=0,j=0;i<num;i++){if(pat.test(elems[i].className)){class[j]=elems[i];j++;}}
return class;
}
};
$('p')[0].$('.myclass')[0].innerHTML = 'Нашли по классу и по тегу!';
// можно использовать цепь поиска элементов!
// Обратите внимание что работает поиск по классу
$('@myinput')[0].value = 'Нашли по имени!';
// поиск по атрибуту name
$('#mydiv').innerHTML = 'Нашли по идентификатору!';
// вот как сократился поиск по id
// $('#myinput') вместо
// document.getElementBy('myinput')
</script>
</body>
</html>
