文章/答案/技术大牛

发布

社区首页 >专栏 >js学习：自定义类库 - miniQuery 2.0

js学习：自定义类库 - miniQuery 2.0

剽悍一小兔

发布于 2018-05-17 06:41:06

1.8K00

代码可运行

文章被收录于专栏：web编程技术分享web编程技术分享

运行总次数：0

代码可运行

Paste_Image.png

在上一篇零基础打造自己的 js 类库（1）中，原本只是为了写个小案例，说明一下闭包，js对象的作用。

后来我隐约有一个想法，我是不是可以将miniQuery写得更完善一些呢。我的意思是说，尽量使用jQuery的调用规则，看看自己能不能把常用的方法模拟出来？

这个想法产生以后，我感觉挺兴奋，正好可以藉由这个机会把js的知识点再复习一下。

今后只要有时间，我就把miniQuery更新一下，添加新的api方法进去。作为自己的一个学习记录。

零基础打造自己的 js 类库（1）写完后，我又陆陆续续地改了很多代码，继而有了下面这个版本，暂且就叫做miniQuery v2.0吧，嘿嘿。

Paste_Image.png

Paste_Image.png

API方法目前大概分为三个区域：

1. dom 相关 ：主要获取dom元素

2. css 相关：给dom元素设置css样式

3. 事件相关 ：给元素添加事件

4. 属性相关：对元素属性进行各种操作

5. 简易ui ：额，目前只写了一个按钮

我利用零碎时间写了一个礼拜，没想到假模假式的也弄了不少方法了，当然，这些肯定是远远不够的。不够以后写案例的时候我差不多就可以直接调用这个miniQuery.js了，主要方便了自己，如果觉得有必要，我就可以立即在里面添加新的方法，实现了订制功能。

当然，目前这个版本功能还比较少，bug估计还有很多，不过没关系，反正就搞着玩玩，出了问题自己背锅就行了。主要还是用于培养兴趣，我本身不是做前端开发的，但是个人隐约感觉js在未来必定会火，当然现在也非常受欢迎了，我打算继续学下去。

首先来看看miniQuery怎么使用吧。

来一个测试页面，引入miniQuery

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="js/miniQuery.js"></script>
        <title>测试页面</title>
        <script type="text/javascript">
        
            window.onload = function(){
                
            }
            
        </script>
    </head>
    <body>
        <div class='box'></div>
    </body>
</html>

页面上只画了一个div，其他啥也没有。

Paste_Image.png

div没有宽高。

接下来，我们用miniQuery来拿到这个对象。

var $box = $('.box').eq(0);
console.log($box);

Paste_Image.png

可见，返回的并不是一个dom对象，而是一个miniQuery对象，具体的原理在上一节中已经阐明。

OK，我们来给它定义宽高和背景色。

var $box = $('.box').eq(0);
$box.css({
    width : 80 ,
    height : 80 ,
    background : 'deeppink'
});

效果：

Paste_Image.png

我们在api上还看到有width，height，backgroundColor方法，而且miniQuery还支持链式调用，所以能这么写:

$box.height(80).width(80).backgroundColor('deeppink');

效果是一样的。

然后，我们给它添加一个事件，当点击的时候就把颜色换为skyblue：

var $box = $('.box').eq(0);
$box.css({
    width : 80 ,
    height : 80 ,
    background : 'deeppink'
}).on('click',function(){
    this.css({
        background:'skyblue'
    });
});

123.gif

再来看一看简单的ui。

我们来引入css文件：

<link rel="stylesheet" type="text/css" href="css/mui.css"/>

var $box = $('.box').eq(0);
$box.linkbutton();

Paste_Image.png

按钮的样式就出来了，然后我们来设置按钮的属性。

var $box = $('.box').eq(0);
$box.linkbutton({
    text : '保存' ,
    click : function(){
        alert('保存成功！');
    }
});

Paste_Image.png

按钮的大小也自动变大了。

123.gif

至于其他方法，我就不一一测试了，问题肯定还是有的，以后慢慢完善吧。

至于这个miniQuery的具体实现，以后有机会的话我再开贴记录吧。

附上目前的源代码：

mui.css

.linkbutton {
    padding: .4em .9em; /*em的好处就是随着父元素的字体大小而变化，当该元素的字体变化时，会自适应*/
    border: 1px solid rgba(0,0,0,.1);
    background-color: #ac0;
    border-radius: .2em;
    box-shadow: 0 1px 5px rgba(0,0,0,.5);
    color: #fff;
    text-shadow: 0 -.06em .24em rgba(0,0,0,.5); /*将阴影设置为半透明，就无所谓底色了，都能很好地适应*/
    font-size: 130%; 
    line-height: 1.5; /*行高是字号的1.5倍*/
    display:inline-block;
    cursor:pointer;
    font-family: "微软雅黑";
}

"use strict";

/**
 * miniQuery 和 工具类库
 * 版本 2.0 (修正了一部分Bug，增加了一些方法)
 * 作者：剽悍一小兔
 */

// ------------------------ 基本扩展, 字符串,数组等---------------------------------//
function extend_base (){
    
    if(!String.prototype.format ){
        String.prototype.format = function() {
            var e = arguments;
            return this.replace(/{(\d+)}/g,function(t, n) {
                return typeof e[n] != "undefined" ? e[n] : t
            })
        };
    }
    
    if (!Array.prototype.forEach && typeof Array.prototype.forEach !== "function") {
        Array.prototype.forEach = function(callback, context) {
           // 遍历数组,在每一项上调用回调函数，这里使用原生方法验证数组。
           if (Object.prototype.toString.call(this) === "[object Array]") {
               var i,len;
               //遍历该数组所有的元素
               for (i = 0, len = this.length; i < len; i++) {
                   if (typeof callback === "function"  && Object.prototype.hasOwnProperty.call(this, i)) {
                       if (callback.call(context, this[i], i, this) === false) {
                           break; // or return;
                       }
                   }
               }
           }
        };
    }
    
    if(!String.prototype.format ){
        Array.isArray = function(obj){
            return obj.constructor.toString().indexOf('Array') != -1;
        }
    }
    
}


extend_base(); 


// ------------------------ 工具包---------------------------------//
var utils = {
            center : function(dom){
                dom.style.position = 'absolute';
                dom.style.top = '50%';
                dom.style.left = '50%';
                dom.style['margin-top'] = - dom.offsetHeight / 2 + 'px';
                dom.style['margin-left'] = - dom.offsetWidth / 2 + 'px';
            },
        
            /** dom相关 * */
            isDom : ( typeof HTMLElement === 'object' ) ?
                function(obj){
                    return obj instanceof HTMLElement;
                } :
                function(obj){
                    return obj && typeof obj === 'object' && obj.nodeType === 1 && typeof obj.nodeName === 'string';
                } ,
             
            /** 数组相关 * */
            isArray : function(obj){
                return obj.constructor.toString().indexOf('Array') != -1;
            }
            
        }
        


// ------------------------ miniQuery.js ---------------------------------//
;(function(win){
    
    var miniQuery = function(selector){
        var miniQuery = null;
        var length = 0;
        var children = [];
        if(!selector) return;
        
        /** 1. 传入的是id * */
        if(selector.toString().indexOf('#') != -1) {
            selector = selector.replace('#','');
            miniQuery = document.getElementById(selector);
        } 
        
        /** 2. 传入的是class * */
        else if(selector.toString().indexOf('.') != -1){
            selector = selector.replace('.','');
            miniQuery = document.getElementsByClassName(selector);
        }
        
        
        /** 3. 传入的是dom元素 * */
        else if(utils.isDom(selector)){
            miniQuery = selector;
        }
        
        if(!miniQuery) return; //如果本类库包装不了，就返回
        
        if(miniQuery.length){   //如果是一个类数组元素的话，就获取他的长度
            length = miniQuery.length; 
        }else{
            length = 1; //这种情况，说明成功包裹了元素，但是该元素还是存在的，就将长度设定为1
        }
        
        children = miniQuery.children; //取得所有的孩子节点
        
        return {
            
            /** 属性区 */
            obj : miniQuery,    //返回的dom元素
            index : 0 ,         //默认的角标（假如 miniquery 是一个类数组的话）
            length : length,    //元素的个数（假如 miniquery 是一个类数组的话）
            children : children,//所有孩子节点
            
            
            /** 方法区 */
            
            // ------------------------ dom 相关 ---------------------------------//
            
            /**获取dom对象本身,返回纯粹的dom元素，而非miniQuery元素*/
            getObj : function(){
                return this.obj;
            } ,
            
            /**获取元素的长度*/
            size : function(){
                return this.length;
            } ,
            
            /** 假如 miniquery 是一个类数组的话，用于返回其中一个元素 */
            eq : function(index){
                if(length > 0) {
                    return $(this.obj[index]); //eq返回的还是miniQuery对象
                }else{
                    return null;
                }
            } ,
            
            /** 获得第一个匹配元素 */
            first : function(){
                return $(this.obj[0]);
            } ,
            
            /** 获得最后一个匹配元素 */
            last : function(){
                return $(this.obj[this.length - 1]);
            } ,
            
            /** 获得最后一个匹配元素 */
            getChildren : function(){
                return this.obj.children;
            } ,
            
            /** 获得某一个孩子节点 */
            getChild : function(i){
                return $(this.children[i]);
            } ,
            
            /** 获得父节点 */
            getParent : function(){
                return $(this.obj.parentElement);
            } ,
            
            /** 获得上一个节点 */
            previous : function(){
                var parent = this.getParent();
                var children = parent.children;
                for(var i = 0; i < children.length; i++){
                    if(this.obj == children[i]) {
                        return $(children[i - 1]);
                    }
                }
                return null;
            } ,
            
            /** 获得下一个节点 */
            next : function(){
                var parent = this.getParent();
                var children = parent.children;
                for(var i = 0; i < children.length; i++){
                    if(this.obj == children[i]) {
                        return $(children[i + 1]);
                    }
                }
                return null;
            } ,
            
            findClassDom : function(className){
                 this.obj = this.obj.getElementsByClassName(className) ;
                 return this ;
            } ,
            
            findIdDom : function(id){
                 var $this = this; 
                 var children = this.getChildren();
                 children = Array.prototype.slice.call(children); //obj 转  []
                 children.forEach(function(item){
                    //console.log(item.id);
                    (id === item.id) && ($this = item) ;
                 });
                 return this ;
            } ,
            
            // ------------------------ css 相关 ---------------------------------//
            /** 添加背景色 */
            backgroundColor : function(color){
                this.obj.style.backgroundColor = color;
                return this;
            } ,
            
            /** 获取style */
            getStyle : function(){
                var styleEle = null;
                if(window.getComputedStyle){
                    styleEle = window.getComputedStyle(this.obj,null);
                }else{
                    styleEle = ht.currentStyle;
                }
                return styleEle;
             } ,
            
            /** 设置或者拿到高度 */ 
            height : function(h){
                if(!h) return this.getStyle().getPropertyValue('height');
                (typeof h == 'number') && (h = h + 'px');
                this.obj.style.height = h;
                return this;
            } ,
            
            /** 设置或者拿到宽度 */ 
            width : function(w){
                if(!w) return this.getStyle().getPropertyValue('width');
                (typeof w == 'number') && (w = w + 'px');
                this.obj.style.width = w;
                return this;
            } ,
            
            /** 设置自定义样式 */
            css : function(obj){
                if(!obj) return;
                for(var key in obj){
                    //console.log(key + '=========' + obj[key]);
                    this.obj.style[key] = typeof obj[key] === 'number' ? obj[key] + 'px' : obj[key];
                }
                return this;
            } ,
            
            /** 设置放大 倍数*/
            scale : function(scaleNumber){
                this.css({
                    scale : scaleNumber
                });
                return this;
            } ,
            
            
            hasClass : function(cls) {  
                return this.obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));  
            }  ,
            
            addClass : function(cls){
                if (!this.hasClass(cls)) this.obj.className += " " + cls;  
            } ,
            
            removeClass : function(cls) {  
                if (this.hasClass(cls)) {  
                    var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');  
                    this.obj.className = obj.className.replace(reg, ' ');  
                }  
            } ,
            
            toggleClass : function(cls){  
                if(this.hasClass(cls)){  
                    this.removeClass(cls);  
                }else{  
                    this.addClass(cls);  
                }  
            }  ,
            
            
            
            // ------------------------ 动画 相关 ---------------------------------//
            
            //TODO
            animate : function(){
                
            } ,
            
            // ------------------------ 事件相关 ---------------------------------//
            
            on : function(eventName,callback){
                var $this = this;
                this.obj['on' + eventName] = function(){
                    callback.call($this,$this.obj); //context指向$this，参数传入dom对象
                };
                return this;
            } ,
            
            // ------------------------ 属性相关 ---------------------------------//
            
            attr : function(attr){
                return this.obj.attributes[attr];
            } ,
            
            
            // ------------------------ ui ---------------------------------//
            
            linkbutton : function(opts){
                var opts = opts || {};
                /**添加基本样式* */
                this.addClass('linkbutton');
                this.on('mouseover' , function(e){
                    //console.log(e);
                    this.css({
                        backgroundColor: '#d4ef50'
                    });
                }).on('mouseout',function(e){
                    this.css({
                        backgroundColor: '#ac0'
                    });
                });
                
                opts.text && (this.obj.innerText = opts.text);
                opts.click && (this.on('click' , opts.click));
                
                
            }
            
            
            
        }
    }
    
    win.$ = miniQuery;
    
})(window);