今天周六,也不能总宅着,跑到市图书馆看了一本javascript的书,书是16年了,忘了叫什么的了,写的不错。
越看越觉得javascript水深,越看越看不懂,但是突然想尝试写写库。
其实我并没有学会javascript面向对象,下面的代码完全是照葫芦画瓢写出来的,模仿了一点jquery的功能,但是实现方法不一样。
对prototype的概念还是模模糊糊,要不都说js水深,确实要有非常扎实的面向对象的基础,才能深入学js,坑很大。
初学js,代码丑陋不堪,希望各路大佬指点一二
实现了id、class、name选择器,实现了设置和获取value、html、css
css那个地方用了两个eval,因为不知道怎么用字符串取属性,就用了两个eval。。。
class和name选择器因为我不会遍历就只取了第一个,只能操作第一个对象
可以链式调用,比如m('.text2').hide().show().css('color','red').val('23333')
查到的链式调用的文章中用的都是prototype,不知道有什么不一样
(function(){
"use strict";
//public
var fun = {
val:function(val){
val = val || null;
if(this.main !== null && typeof this.main.value !== 'undefined' && val !== null){
this.main.value = val;
}else{
return this.main.value;
}
return this;
},
html:function(html){
html = html || null;
if(this.main !== null && typeof this.main.innerHTML !== 'undefined' && html !== null){
this.main.innerHTML = html;
}else{
return this.main.innerHTML;
}
return this;
},
css:function(css,val){
css = css || null;
val = val || null;
if(this.main === null){
return this;
}else if(typeof css === 'string' && typeof val === 'string'){
eval('this.main.style.'+css+'="'+val+'"');
return this;
}else if(typeof css === 'string'){
return eval('this.main.style.'+css);
}
return this;
},
hide:function(){
this.css('display','none');
return this;
},
show:function(){
this.css('display','block');
return this;
}
};
window.m =function(select){
select = select || null;
if(typeof select !== 'string'){
return;
};
//设置选择器名称
fun.selector = select;
//id选择器
if(select[0] === '#'){
fun.main = document.getElementById(select.slice(1,select.length));
}else
//class选择器
if(select[0] === '.'){
fun.main = document.getElementsByClassName(select.slice(1,select.length))[0];
}else
//tag选择器
{
fun.main = document.getElementsByTagName(select)[0];
};
if(typeof fun.main === 'undefined'){
fun.main = null;
};
return fun;
};
}());
js还真是有趣