简单的js逻辑封装

darryrzhong 发布于2019-08-23 10:30 / 2491人阅读

摘要：删除空白结点封装鼠标坐标标准下下封装阻止浏览器默认行为封装阻止冒泡元素封装获取样式表样式元素要看到的样式封装级添加事件，事件类型，函数封装级移除事件事件类型函数去除左右空格正则表达式替换转驼峰正则找以后的第一个值替换将此值转为大写解析查

1.删除空白结点

function delate(parent){
    var lis=parent.childNodes;
        for(var i=0;i
2.封装鼠标坐标
function hetpos(e){
    //标准下
    var x1=e.pageX;
    var y1=e.pageY;
    var pos={
        x:x1,
        y:y1
    }
    //IE下
    if(pos.x==="undefined"){
        pos.x=e.clientX+(document.documentElement.scrollLeft||document.body.scrollLeft);
    }else if(pos.y==="undefined"){
        pos.y=e.clientY+(document.documentElement.scrollTop||document.body.scrollTop);
    }
    return pos;
}
3.封装阻止浏览器默认行为
function stopDefault(e){
            if(e.preventDefault){
                return e.preventDefault();
            }else{
                return e.returnValue=false;
            }
        }
4.封装阻止冒泡
function  stopBubble(e){
    if(e.stopPropagation){
        return e.stopPropagation();
    }else{
        return e.cancelBubble=true;
    }
}
//stopBubble(元素)
5.封装获取样式表样式
function getStyle(newobj,style){
            if(newobj.currentStyle){
                return newobj.currentStyle[style];
            }else{
                return getComputedStyle(newobj,null)[style];
            }
        }
        //getStyle(dom元素,"要看到的css样式");


6.封装DOM2级添加事件
function addEvent( obj , type , fun){
            if(obj.addEventListener){
                return obj.addEventListener(type,fun,false);
            }else if(obj.attachEvent){
                return obj.attachEvent("on"+type, fun);
            }else{
                return obj["on"+type]=fun;
            }
        }
//addEvent(dom，事件类型，函数)
7.封装DOM2级移除事件
function remEvent( obj , type , fun){
            if(obj.removeEventListener){
                return obj.removeEventListener(type,fun,false);
            }else if(obj.detachEvent){
                return obj.detachEvent("on"+type, fun);
            }else{
                return obj["on"+type]=null;
            }
        }
        //remEvent( dom , 事件类型 , 函数)
8.去除左右空格
function trim(str){
            var reg=/^s+|s+$/g;//正则表达式
            return str.replace(reg,"");//替换
        }
        // console.log(trim(str));

9.转驼峰
function tf(str1){
            var reg1=/-(w){1}/g;//正则  找-以后的第一个值
            var strn=str1.replace( reg1 , function(){//替换
                return arguments[1].toUpperCase();//将此值转为大写
            });
             return strn;
        }
        // console.log(tf(str1));
10.解析url
（1）function jx(str2){
            var en=str2.indexOf("?");//查找?下标 记录
            var news=str2.slice(en+1);//截取?以后的所有值
            var arr=news.split("&");//以&转数组
            var obj={}
            for(var i=0;i
（3）function getUrl(name){
    var reg=new RegExp("(^|&)"+name+"([^&]*)($|&)");
    var arr=location.search.substr(1).match(reg);

    if(arr){
        return decodeURI(arr[2]);
    }
}
getUrl("要查询名")

11.集合
var $={
            //查找    找到返回下标   找不到返回-1
            hasClass:function(newo,clas){
                var arr=newo.className.split(/s+/);//以空格转数组
                var con = -1;//赋初始值
                for(var i=0;i

混合云专线服务封装的js文件冲突l js实现的简单特效简单js做的特效简单的js提示框

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96414.html

关于如何把项目做得更好的一次思考

摘要：怎么样才能把项目做的好一点或者更好首先，在老板看来，他肯定希望今天提的需求可以立马就上线。关于注释注释是有必要的，这个对个人和他人都是有好处的。之前做开发的时候对项目完全没有一个整体的思考，需求来了就知道做，只关心自己做的那部分的功能，做完拉到。但最近所做的项目中，遇到了不少问题，自己都忍不住吐槽起来了。如：项目经常性延期、代码冗余、添加一个很小的新功能都需要改动很多地方，还对之前的...

罗志环 2019-08-23 11:00 评论0 收藏0
关于如何把项目做得更好的一次思考

摘要：怎么样才能把项目做的好一点或者更好首先，在老板看来，他肯定希望今天提的需求可以立马就上线。关于注释注释是有必要的，这个对个人和他人都是有好处的。之前做开发的时候对项目完全没有一个整体的思考，需求来了就知道做，只关心自己做的那部分的功能，做完拉到。但最近所做的项目中，遇到了不少问题，自己都忍不住吐槽起来了。如：项目经常性延期、代码冗余、添加一个很小的新功能都需要改动很多地方，还对之前的...

王晗 2019-08-05 18:05 评论0 收藏0
关于如何把项目做得更好的一次思考

摘要：怎么样才能把项目做的好一点或者更好首先，在老板看来，他肯定希望今天提的需求可以立马就上线。关于注释注释是有必要的，这个对个人和他人都是有好处的。之前做开发的时候对项目完全没有一个整体的思考，需求来了就知道做，只关心自己做的那部分的功能，做完拉到。但最近所做的项目中，遇到了不少问题，自己都忍不住吐槽起来了。如：项目经常性延期、代码冗余、添加一个很小的新功能都需要改动很多地方，还对之前的...

Enlightenment 2019-08-02 11:14 评论0 收藏0
精读《React 八种条件渲染》

摘要：引言本期精读的文章是介绍了八种条件渲染方式。此时小王接到了需求，终于维护了一个大项目。更多讨论讨论地址是精读八种条件渲染如果你想参与讨论，请点击这里，每周都有新的主题，周末或周一发布。 1 引言本期精读的文章是：8 React conditional rendering methods 介绍了八种 React 条件渲染方式。模版条件渲染非常常见，遇到的时候往往会随机选择一种方式使用...

Rainie 2019-08-22 18:07 评论0 收藏0
JavaScript基础学习——面向对象（对象创建之工厂模式）

摘要：官方解释工厂是构造方法的抽象，抽象了创建具体对象的过程。工厂方法模式的实质是定义一个创建对象的接口，但让实现这个接口的类来决定实例化哪个类。前言上一章回顾了JS对象的属性类型，那么除了我们常用的new Object()构造函数创建对象和字面量方式创建对象的方式外，还需要用到更多的模式来解决对象被多次复用的问题。什么意思呢？就是我们很有可能会在各个地方去使用已经创建过的对象，但是对象...

qpal 2019-08-23 17:12 评论0 收藏0