首页 » JavaScript » JS 封装库调试封装

最后更新于 2018年12月10日

DOM加载已经做好了,我们需要将他封装到Base中去,然后调用的时候直接通过$(function(){})将需要在dom解析后运行的代码放入圆括号函数中。

封装到Base基础库中

function Base(args) {
    this.arr = [];
    if(typeof args == 'string') {
        if(args.indexOf(' ') != -1){
            var childNodes = args.split(' ');
            var temNodes = [];
            var node = []; 
            for(var i = 0;i < childNodes.length;i++) {
                if(node.length == 0) node.push(document);
                switch(childNodes[i].charAt(0)) {
                    case '#' :
                        temNodes = [];
                        temNodes.push(this.getId(childNodes[i].substring(1)));
                        node = temNodes;
                        break;
                    case '.' :
                        temNodes = [];
                        for(var j = 0;j<node.length;j++) {
                            var temps = this.getclass(childNodes[i].substring(1),node[j]);
                            for(var k = 0;k<temps.length;k++){
                                temNodes.push(temps[k])
                            }
                        }
                        node = temNodes;                    
                        break;
                    default :
                        temNodes = [];
                        for(var j = 0;j<node.length;j++) {
                            var temps = this.getTagName(childNodes[i],node[j]);
                            for(var k = 0;k<temps.length;k++){
                                temNodes.push(temps[k])
                            }
                        }            
                        node = temNodes;
                }            
            }
            this.arr = temNodes;
        }else {
            switch(args.charAt(0)) {
                case '#' :
                    this.arr.push(this.getId(args.substring(1)));
                    break;
                case '.' :
                    this.arr = this.getclass(args.substring(1));
                    break;
                default :
                    this.arr = this.getTagName(args);
            }
        }
    }else if(typeof args == 'object') {
        if(args != undefined) {
            this.arr[0] = args;
        }
    }else if(typeof args == 'function') {
        this.ready(args);
    }        
}

else if判断如果传入的是function,就使用ready的方法运行这个方法,这个ready就是Base原型中的方法,这个方法要运行传入的args,或者单独使用的时候运行传入的其他function。

ready()方法封装addDomloaded

Base.prototype.ready = function(fn) {
    addDomLoaded(fn);
}

筛选节点的一些方法:


//筛选节点,并返回指定节点
Base.prototype.getElemet = function(num) {
    return this.arr[num];
}

//筛选节点,并返回Base对象
Base.prototype.getElementBase = function(num) {
    var element = this.arr[num];
    this.arr = [];
    this.arr[0] = element;
    return this;
}

//筛选节点,返回第一个节点
Base.prototype.first = function() {
    return this.arr[0];
}

//筛选节点,返回最后一个节点
Base.prototype.last = function() {
    return this.arr[this.arr.length - 1];
}

拖拽登录框修缮

之前设置了一个触发条件,通过数组里面进行传入筛选的条件,但是我们已经可以通过$(‘#id .class tagName’)的方式直接获取节点,不需要像之前那样传入一个document.getElementById(‘xxx’)的方式,数组也不需要了,直接

//拖拽登录框
    $('#login').drag($('#login_title').first(),$('#login .other').last(0));

通过筛选的方法返回对应的节点,那么原来的拖拽的插件需要稍微修改一下。

//拖拽功能
 $().extend('drag',function(){
    var tags = arguments;  //不设置传入的参数名,直接通过arguments获取,然后将for循环的tags等于这个arguments即可。
    for(var i = 0;i<this.arr.length;i++)  {
        addEvent(this.arr[i],'mousedown',function(e) {
            if(removeSpen(this.innerHTML).length == 0) e.preventDefault();
            var _this = this;
            var cleft = e.clientX - _this.offsetLeft;
            var ctop = e.clientY - _this.offsetTop;
            var flag = false;
            for(var i = 0;i<tags.length;i++){
                if(e.target === tags[i]) {
                    flag = true;
                    break;
                }
            }
            if(flag) {
                addEvent(document,'mousemove',move);
                addEvent(document,'mouseup',up)
            }
            function move(e) {
                var left = e.clientX - cleft;
                var top = e.clientY - ctop;
                if(left < 0) {
                    left = 0;
                }else if(left > getInner().width - _this.offsetWidth) {
                    left = getInner().width - _this.offsetWidth;
                }
                if(top < 0) {
                    top = 0;
                }else if(top > getInner().height - _this.offsetHeight) {
                    top = getInner().height - _this.offsetHeight;
                }
                _this.style.top =  top + 'px';
                _this.style.left = left + 'px';
                if(typeof _this.setCapture != 'undefined') {
                    _this.setCapture();
                }
            }
            function up() {
                removeEvent(document,'mousemove',move);
                removeEvent(document,'mouseup',up);
                if(typeof _this.releaseCapture != 'undefined'){
                    _this.releaseCapture();
                }
            }
            function removeSpen(html){
                return html.replace(/(^\s*)|(\s*$)/g,'');
            }
        });
    }
    return this;
});

重新调整一下之前的调用函数:

$(function(){
    //个人设置
    $('#header .nav-confin').hover(function(){
            $(this).css('background-color','rgba(0,0,0,.3)');
            $('#header .nav-menu').css('height','120px');
        },function(){
            $(this).css('background-color','rgba(0,0,0,0)');
            $('#header .nav-menu').css('height','0');
        });
    $('#header .menu-li').hover(function(){
            $(this).css('background-color','rgba(0,0,0,.3)');
        },function(){
            $(this).css('background-color','rgba(0,0,0,0)');
        });
    //弹出登录框   
    $('#header .nav-login').hover(function(){
        $(this).css('background-color','rgba(0,0,0,.3)');
        },function() {
            $(this).css('background-color','rgba(0,0,0,0)');
        });
    $('#header .nav-login').click(function(){
        $('#login').css('clip','auto').css('opacity','1').center().Masked().resize(function(){
            if($('#login').css('opacity') == '1'){
                $('#login').Masked();
            };
        });
        $('html').css('overflow','hidden');
    });
    $('#login .login_off').click(function(){
        $('#login').css('clip','rect(0 0 0 0)').css('opacity','0').removeMasked();
        $('html').css('overflow','');
    });
    //拖拽登录框
    $('#login').drag($('#login_title').first(),$('#login .other').last(0));
    
});
  • weixiao kaixin tushetou jingkong deyi fanu liezui liuhan daku ganga bishi nanguo lihai qian yiwen numu tu yi haixiu se fadai minyan hehe henkaixin huaji biyiyan kuanghan maimeng shui xiaku penqi zhangzui pen aini ye niu laji ok chigua renshi kongbu shuai xiaoxiese touxiao huaixiao jingnu chihuai kaisang xiaoku koubi zhuangbi lianhong kanbujian shafa zhijing xiangjiao dabian yaowan redjing lazhu rizhi duocang chixigua hejiu xixi xiaopen goukun xiaobuchu shenme wusuowei guancha lajing chouyan xiaochi bie zhadanzui zhadanxiao