常用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常见的几种封装方法，方便调用
zyfacd的博客
03-05 1773
事件委托的封装 function eveEnt(child,cb){ return function(eve){ let e = eve || window.eveEnt; let targetEle = e.target || e.srcElement; for(let i=0;i<child.length;i++){ ...
常用的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...
新手常用的几个JS封装类
05-10
新手常用的几个JS封装类： 包括拖拽、class添加删除、变换、继承等
Utiljs一些很实用的javaScript函数封装集合
08-12
Util.js 是对常用函数的封装，方便在实际项目中使用，主要内容包含：数组类、浏览器类、日期类、函数类、数学类、媒体类、节点类、对象类、字符串类、类型检测类、正则表达式类等内容。
JavaScript 之封装方法（10种）
weixin_48053972的博客
11-26 3537
一些常用的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封装方法
weixin_46878085的博客
05-19 918
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 1999
前端开发过程中，有一些事件或者函数，会被频繁地触发（短时间按内多次触发），最常见的例如，onresize，scroll，mousemove ,mousehover 等，这些事件的触发频率很高，不做限制的话，有可能一秒之内执行几十次、几百次，如果在这些函数内部执行了其他函数，尤其是执行了操作 DOM 的函数（浏览器操作 DOM 是很耗费性能的），那不仅会造成计算机资源的浪费，还会降低程序运行速度，甚至造成浏览器卡死、崩溃。第一个形参被获取样式的元素,第二个形参样式的名称，用来获取css上的样式具体的值。
JavaScript工作常用工具方法封装实例
本文档分享了作者在实际开发过程中常用的JavaScript工具方法封装，主要包括以下几个方面： 1. **类型判断**： - `isString(o)`：用于检查一个值是否为字符串，通过调用`Object.prototype.toString.call(o)`获取该...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值