今天周六,也不能总宅着,跑到市图书馆看了一本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还真是有趣

最后修改:2017 年 06 月 14 日
如果觉得我的文章对你有用,请随意赞赏