常用js方法的封装

最新推荐文章于 2022-06-24 14:41:03 发布
最新推荐文章于 2022-06-24 14:41:03 发布
阅读量2.3k 收藏 2
点赞数
分类专栏： Js模块化开发案例分析 文章标签： javascript

原来来自：这里写链接内容
`(function() {
var root = window,
tong = {}; //生成一个命名空间tong
root.tong = tong; //把命名空间挂载到window下，以便外部访问

/*私有函数 类型判断*/
var getType = function(para) {
        return Object.prototype.toString.call(para).slice(8, -1);
    }
    /*对象浅拷贝*/
var shallowCopy = function(old, newer) {
        for (i in old) {
            newer[i] = old[i];
        }
    }
    /*对象深拷贝*/
var deepCopy = function(newer) {
        var obj = {};
        for (i in newer) {
            obj[i] = typeof newer[i] == 'object' ? deepCopy(newer[i]) : newer[i];
        }
        return obj;
    }

var util = {};
tong.util = util;
/*传入的字符串是否重复*/
util.isDuplicate=function(){
     var array = Array.prototype.slice.call(arguments);  //arguments为数组
         array.sort(compare);
     var result;
     var compare = function(value1,value2){           //按从小到大的顺序排
            return value1-value2;
            }      
        for(var i = 0;i< array.length-1;i++){
                    if(array[i] == array[i+1]){
                            result = true;
                            break;
                    }
                    else{
                            result = false;
                    }
                        }
                return result;
        }   

    /*数组方法*/
var arr = {};
tong.array = arr;

/*数组中是否含有某值*/
arr.contains = function(arr, content) {
        for (i in arr) {
            if (arr[i] == content) {
                return true;
            }
        }
        return false;
    }
    /*数组去重*/
arr.unique = function(arr) {
        var newArr = [],
            judgeObj = {}; //hash表
        for (var i = 0, len = arr.length; i < len; i++) {
            var item = arr[i];
            if (judgeObj[item] == undefined) { //如果hash表中没有当前项
                newArr.push(item);
                judgeObj[item] = true;
            }
        }
        return newArr;
    }
    /*山形数组去重*/
arr.uniqueMountain = (function(){
    var p,
    q,
    len=arr.length,
    judgeObj = {};
    p=0;
    q=len-1;
    return function print(arr){
         if(p>len || q<0) return;
            if(arr[p]<arr[q]){
                if(!judgeObj[arr[p]]){
                    console.log(arr[p]);
                    judgeObj[arr[p]] = true;
                }
                    p++;
                    arguments.callee(arr);
            }else if(arr[p]>arr[q]){
                if(!judgeObj[arr[q]]){
                    console.log(arr[q]);
                    judgeObj[arr[q]] = true;
                }
                    q--;
                    arguments.callee(arr);

            }else{
                if(!judgeObj[arr[q]] && !judgeObj[arr[p]]){
                    console.log(arr[p]);
                    judgeObj[arr[p]] = true;
                    judgeObj[arr[q]] = true;
                }
                    p++;
                    q--;
                    arguments.callee(arr);
            }
        }
    })();   
    /*删除指定元素*/
arr.remove = function(arr, content) {
        for (var i = 0, len = arr.length; i < len; i++) {
            if (arr[i] == content) {
                arr.splice(i, 1);
            }
        }
        return arr;
    }
    /*优化的数组冒泡排序*/
arr.bubblSort = function(arr) {
        var swap = function(index1, index2) {
            var aux = arr[index1];
            arr[index1] = arr[index2];
            arr[index2] = aux;
        }
        for (var i = 0, len = arr.length; i < len; i++) {
            for (var j = 0; j < len - 1 - i; j++) {
                if (arr[j] > arr[j + 1]) {
                    swap(j, j + 1);
                }
            }
        }
        return arr;
    }
    /*增对数组中的每个元素执行fn函数*/
arr.each = function(arr, fn) {
    for (var i = 0, len = arr.length; i < len; i++) {
        fn.call(arr, i, arr[i]);
    }
}

/*css方法*/
var css = {};
tong.css = css;

/*获取元素css样式*/
css.getCss = function(ele, styleName) {
        var styles = window.getComputedStyle ? window.getComputedStyle(ele, null) : ele.currentStyle;
        return styles[styleName];
    }
    /*设置元素css样式*/
css.setCss = function(ele, styleNames) {
    if (getType(ele) == 'Array') {
        for (var j = 0, len = ele.length; j < len; j++) {
            if (getType(styleNames) == 'Object') {
                for (i in styleNames) {
                    ele[j]['style'][i] = styleNames[i];
                }
            }
        }
    } else if (getType(styleNames) == 'Object') {
        for (i in styleNames) {
            ele['style'][i] = styleNames[i];
        }
    }

}

/*事件方法*/
var eventUtil = {};
tong.eventUtil = eventUtil;

/*添加监听事件*/
eventUtil.addHandler = function(ele, type, handler) {
        if (ele.addEventListener) {
            ele.addEventListener(type, handler, false);
        } else if (ele.attachEvent) {
            ele.attachEvent('on' + type, handler);
        } else {
            ele["on" + type] = handler;
        }
    }
    /*获得事件对象*/
eventUtil.getEvent = function(event) {
        return event ? event : window.event;
    }
    /*获取目标*/
eventUtil.getTarget = function(event) {
        return event.target || event.srcElement;
    }
    /*阻止事件冒泡*/
eventUtil.stopPropagation = function(event) {
        if (event.stopPropagation) {
            event.stopPropagation();
        } else {
            event.cancelable = true;
        }
    }
    /*阻止默认行为*/
eventUtil.preventDefault = function(event) {
    if (event.preventDefault) {
        event.preventDefault();
    } else {
        event.returnValue = false;
    }
}

/*dom操作*/
var dom = {};
tong.dom = dom;

    /*判断给定值是否是DOM元素*/
    dom.isElementDom = function(obj){
        return !!(obj && obj.nodeType == 1);
    }
/*判断元素是否有该类名*/
dom.hasClass = function(ele, className) {
        if (!ele.className) {
            return false;
        } else {
            var arr = ele.className.split(" ");
            for (var i = 0, len = arr.length; i < len; i++) {
                if (arr[i] == className) {
                    return true;
                } else {
                    return false;
                }
            }
        }
    }
    /*为dom增加一个class类名*/
dom.addClass = function(ele, newClassName) {
        if (!ele.className) {
            ele.className = newClassName;
        } else {
            if (!dom.hasClass(ele, newClassName)) {
                var oldName = ele.className;
                var newName = [oldName, newClassName].join(' ');
                ele.className = newName;
            }
        }
    }
    /*为dom删除一个class类名*/
dom.removeClass = function(ele, oldClassName) {
        if (oldClassName == '*') {
            ele.className = '';
        }
        var nameArry = ele.className.split(' ');
        for (var i = 0, len = nameArry.length; i < len; i++) {
            if (nameArry[i] == oldClassName) {
                nameArry.splice(i, 1);
            };
        }
        var names = nameArry.join(' ');
        ele.className = names;
    }
    /*通过类名获取元素*/
dom.getElementsByClass = function(className, parent) {
        if (typeof className != "string") return false;
        var result = [],
            eles;
        parent ? eles = parent.getElementsByTagName("*") : eles = document.getElementsByTagName("*");
        for (var i = 0, len = eles.length; i < len; i++) {
            var arr = eles[i].className.split(" ");
            for (var j = 0, leng = arr.length; j < leng; j++) {
                if (arr[j] == className) {
                    result.push(eles[i]);
                }
            }
        }
        return result;
    }
    /*增加属性值或者获取属性值*/
dom.attr = function(ele, name, value) {
        if (value) {
            ele.setAttribute(name, value);
        } else {
            var attrName = ele.getAttribute(name);
            return attrName;
        }
    }
    /*设置style样式*/
dom.setStyle = function(ele, obj) {
        if (getType(obj) != "Object") return false;
        for (var item in obj) {
            ele["style"][item] = obj[item];
        }
    }
    /*绑定事件*/
dom.on = function(ele, type, handler) {
        eventUtil.addHandler(ele, type, handler);
    }
    /*获取dom位置(元素各边距离页面上和左边的距离)*/
dom.getPosition = function(ele) {
        var box = ele.getBoundingClientRect();
        return {
            top: box.top, // 元素上边距离页面上边的距离
            left: box.left, // 元素左边距离页面左边的距离
            right: box.right, // 元素右边距离页面左边的距离
            bottom: box.bottom
        }
    }
    /*ajax操作*/
tong.ajax = function(options) {
    var createXHR = function() {
        if (typeof XMLHttpRequest != 'undefined') {
            return new XMLHttpRequest;
        } else if (typeof ActiveXObject != 'undefined') {
            if (typeof arguments.callee.activeXString != 'string') {
                var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"],
                    i, len;
                for (var i = 0, len = versions.length; i < len; i++) {
                    try {
                        new ActiveXObect(versions[i]);
                        arguments.callee.activeXString = versions[i];
                        break;
                    } catch (ex) {
                        //跳过
                    }
                }
            }
            return new ActiveXObect(arguments.callee.activeXString);
        } else {
            throw new Error("No XHRobject available.");
        }
    }
    var xhr = createXHR();
    var options = options || {};
    var type = options.type || 'GET';
    var data = options.data || {};
    var url = options.url;
    var success = options.success || function(data) {};
    var fail = options.fail || function(data) {};
    xhr.onreadyStateChange = function() {
        if (xhr.readyState == 4) {
            if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
                success(xhr.responseText, xhr);
            } else if (xhr.readyState == 4 && xhr.status == 404) {
                fail(xhr.responseText, xhr);
            }
        }
    }
    var str = '?';
    if (type.toUpperCase() === 'GET') {
        for (var i in data) {
            var item = data[i];
            str += encodeURIComponent(i) + '=' + encodeURIComponent(JSON.stringify(item)) + '&';
        }
        str = str.substring(0, str.length - 1);
        xhr.open("GET", url + str, true);
        xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
        xhr.send(null);
    } else if (type.toUpperCase() === 'POST') {
        xhr.open("POST", url, true);
        xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhr.send(JSON.stringify(data));
    }
}

    /*url操作*/
    var url = {};
    tong.url = url;

    url.getUrlString = function(){
        var queryStr = location.search > 1 ? location.search.substring(1):''; 
        var args = {};
        var items = queryStr.split('&');    
        var item,key,value,i,len =items.length;
        for(i = 0;i<len;i++){
            item = items[i].split('=');
            key = decodeURIComponent(item[0]);
            value = decodeURIComponent(item[1];
            args[key] = value;  
        }
        return args;
    }

})();`

子墨爸爸
关注
专栏目录
常用的js方法封装(27个)
weixin_56658592的博客
11-28 629
1.输入一个值,返回其数据类型 function type (para) { return Object.prototype.toString.call(para) } 2. 数组去重 // 方法一 function unique1(arr) { return [...new Set(arr)] } // 方法二 function unique2(arr) { var obj = {}; return arr.filter(ele => { if (!obj
常用js方法封装
12-13
do.1.21.js，常用js的封装，使用了JSDuck文档生成工具，生成了说明文档。
js中方法的封装
小花的前端博客
07-25 941
为什么要进行方法的封装?在平时的生产环境中,我们经常写出这样的代码:function fAdd(iA,iB){ return iA+iB; } function fMul(iA,iB){ return iA-iB; }其本质上是这样的:var fAdd = function(iA,iB){ return iA+iB; } var fMul = function(iA,iB){
Javascript 面向对象编程（一）：封装
arrin的博客
07-17 432
学习Javascript，最难的地方是什么？ 我觉得，Object（对象）最难。因为Javascript的Object模型很独特，和其他语言都不一样，初学者不容易掌握。 ============================ Javascript 面向对象编程（一）：封装 Javascript是一种基于对象（object-based）的语言，你遇到的所有东西几
JS常用方法封装
油墨香^-^的博客
05-20 1789
数组扁平化 数组扁平化是指将一个多维数组变为一个一维数组 const arr = [1, [2, [3, [4, 5]]], 6];// => [1, 2, 3, 4, 5, 6] 方法一：使用flat()
常用的js封装
ylp的博客
01-14 189
let Public = new Object(); //姓名 Public.name = function(val) { let reg=/^[\u2E80-\u9FFF]+$/;//Unicode编码中的汉字范围 return reg.test(val); }; // 手机正则 Public.checkMobile = function(sMobile) { var reg = /^1[3|4|5|7|8|6|9][0-9]{9}$/; return reg.test(sMobile); };
utils.js:前端开发常用的js方法封装
05-08
前端开发常用的js方法封装 例如： // 输入身份证号码获取生日 export const getBirthday = idcard => idcard.substring(6, 10) + "-" + idcard.substring(10, 12) + "-" + idcard.substring(12, 14); // 输入身份证...
js方法封装汇总
JHLIN的博客
09-21 775
//根据文件路径获取扩展名 getKzName(str){//获取文件路径的扩展名 var url = str var pos = url.lastIndexOf("."); if(pos == -1){ pos = url.lastIndexOf("\\") } ar filename = url.substr(pos +1); eturn filename }, getKzName("xxxxx.mp4") //mp4 //判断是否手机号码 export function is...
JavaScript 之封装方法（10种）
weixin_48053972的博客
11-26 3542
一些常用的javascript方法，希望可以帮到大家 1、输入一个值，返回其数据类型 function type(para) { return Object.prototype.toString.call(para) } 2、数组去重 function unique1(arr) { return [...new Set(arr)] } function unique2(arr) { var obj = {}; return arr.filter(ele => {
新手常用的几个JS封装类
05-10
新手常用的几个JS封装类： 包括拖拽、class添加删除、变换、继承等
Utiljs一些很实用的javaScript函数封装集合
08-12
Util.js 是对常用函数的封装，方便在实际项目中使用，主要内容包含：数组类、浏览器类、日期类、函数类、数学类、媒体类、节点类、对象类、字符串类、类型检测类、正则表达式类等内容。
JS封装方法
weixin_46878085的博客
05-19 919
JS封装就是尽量把使用的方式简单化，内部逻辑和使用解耦。通俗的说就是使用的时候只需要知道抄参数和返回值，其他条件尽量不要使用人员进行设置。 2、JS封装的方法有函数方式、对象的方式、闭包的方式。 举例 1）函数方式 function kk(a,b){ 内部对a，b怎么处理就不需要关心了 } 2）对度象方式 function kk(a,b){ this.x = a; this.y = b; } var k = new kk(1,2);//通过面向对象的方式 alert(k.x); 3）闭包方式 functio
js常用方法封装
一路从容
08-12 519
//日期格式化 function formatDate(date, fmt) { if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)) } let o = { 'M+': date.getMonth() +...
常用js 封装方法
ranshakalove的博客
06-24 1982
手机项目中的一些js 封装方法
方法封装
weixin_44588370的博客
05-27 2056
单独创建一个类来存放，以后做项目直接拷贝过去就可以用了，能节约很多时间，思路： 先把代码写好，能出功能了，就把该代码全部剪切过去事先创建好的类中，其中将需要的参数也写好，当然，如果你逻辑清晰的话，也可以直接封装好调用。如果是想操作页面的文本框、下拉框等等，传输的参数就不是字符串类型的了，而是创建该页面对应的标签。给你们举个简单的列子 ： 就是该标签，在封装方法的时候一定要...
常用的js封装方法
秋来九月八
02-15 2002
前端开发过程中，有一些事件或者函数，会被频繁地触发（短时间按内多次触发），最常见的例如，onresize，scroll，mousemove ,mousehover 等，这些事件的触发频率很高，不做限制的话，有可能一秒之内执行几十次、几百次，如果在这些函数内部执行了其他函数，尤其是执行了操作 DOM 的函数（浏览器操作 DOM 是很耗费性能的），那不仅会造成计算机资源的浪费，还会降低程序运行速度，甚至造成浏览器卡死、崩溃。第一个形参被获取样式的元素,第二个形参样式的名称，用来获取css上的样式具体的值。
封装方法
qq_44568325的博客
04-08 402
开发工具与关键技术：vs 封装方法 作者：周乐献 撰写时间：2019/4/8 当我们需要获取某些数据的时候，我们通常会创建一些方法来进行引用从而获取到我们想要的数据。但是某些时候可能因为我们某些地方的疏忽就会造成数据获取的混乱。如图所示 $("#StTime").text(jsDate(data1[0].StartTime)); 从上面的图片我们可以看到因为我们的疏忽大意，造...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值