前端开发常用函数及小技巧(持续更新)

版权声明:本文为吴孔云博客原创文章,转载请注明出处并带上链接,谢谢。 https://blog.csdn.net/wkyseo/article/details/51274460

日常项目用到的及网上收集而来

css样式的百分比都相对于谁?

  • 相对于父元素宽度的: [max/min-]width、left、right、padding、margin 等;
  • 相对于父元素高度的: [max/min-]height、top、bottom 等;
  • 相对于继承字号的: font-size 等;
  • 相对于自身字号的: line-height 等;
  • 相对于自身宽高的: border-radius、background-size、transform: translate()、transform-origin、zoom、clip-path 等;
  • 特殊算法的: background-position(方向长度 / 该方向除背景图之外部分总长度 * 100)、
  • filter 系列函数等;

rem相关

html的样式font-size可以根据javascript去计算,一般根据设计稿来写原始尺寸,其次通过媒体查询来设置缩放,所以通过相应设备尺寸去做media query设置也可以实现适配,

最常见的是html{font-size: 62.5%}, 因为任何桌面浏览器的默认字体大小都是16px,这样1rem = 10px。常见的响应式查询,可参考网站m.dx.com

html {
    font-size : 20px;
}
@media only screen and (min-width: 401px){
    html {
        font-size: 25px !important;
    }
}
@media only screen and (min-width: 428px){
    html {
        font-size: 26.75px !important;
    }
}
@media only screen and (min-width: 481px){
    html {
        font-size: 30px !important; 
    }
}
@media only screen and (min-width: 569px){
    html {
        font-size: 35px !important; 
    }
}
@media only screen and (min-width: 641px){
    html {
        font-size: 40px !important; 
    }
}

javascript对象的深度克隆

//判断是否是数组
function isArray(arr) {
    return Object.prototype.toString.call(arr).slice(8, -1) === 'Array';
}

function deepClone(obj) {
    if(typeof obj !== 'object' || typeof obj !== 'function') {
        return obj;
    }
    var o = isArray(obj) ? [] : {};
    for(var i in obj) {
        if(obj.hasOwnProperty(i)) {
            //递归调用
            o[i] = (typeof obj[i] === 'object') ? deepClone(obj[i]) : obj[i];
        }
    }
    return o;
}

原生方法实现jquery的extend方法

function extend(defaultObj, extendObj){
    var obj = {};
    for(var key in defaultObj) {
        if(defaultObj.hasOwnProperty(key)) {
            if(extendObj[key] === false || extendObj[key] === 0) {
                obj[key] = extendObj[key];
            }else{
                obj[key] = extendObj[key] || defaultObj[key];
            }
        }
    }
    return obj;
}

不定宽高的元素居中显示

position:absolute;
left:50%;
top:50%;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);

DOM获取方法

//封装了id,class,tagname所有方法
var get = {
    byId: function (id) {
        return document.getElementById(id)
    },
    byClass: function (sClass, oParent) {
        var aClass = [];
        var reClass = new RegExp("(^| )" + sClass + "( |$)");
        var aElem = this.byTagName("*", oParent);
        for (var i = 0; i < aElem.length; i++) {
        //此处逻辑与&&的判断,当一个为ture时,返回第二个对象
            reClass.test(aElem[i].className) && aClass.push(aElem[i]);
        }
        return aClass
    },
    byTagName: function (elem, obj) {
        return (obj || document).getElementsByTagName(elem)
    }
};

//类的获取
function getByClass(oParent, sClass)
//oParent为父节点DOM对象,sClass为需要获取的类
{
    var aEle = oParent.getElementsByTagName('*');
    var aResult = [];
    var re = new RegExp('\\b' + sClass + '\\b', 'i');
    var i = 0;
    for (i = 0; i < aEle.length; i++) {
        if (re.test(aEle[i].className)) {
            aResult.push(aEle[i]);
        }
    }
    return aResult;
    //此处返回的是一个数组DOM对象
}

编码和解码

var decToHex = function(str) {
    var res=[];
    for(var i=0;i < str.length;i++)
        res[i]=("00"+str.charCodeAt(i).toString(16)).slice(-4);
    return "\\u"+res.join("\\u");
}
var hexToDec = function(str) {
    str=str.replace(/\\/g,"%");
    return decodeURI(str);
}

window onload 实现多次监听

function addloadEvent(func){
    var oldonload=window.onload;
    if(typeof window.onload !='function'){
        window.onload=func;
    }
    else{
        window.onload=function(){
            oldonload();
            func();
        }
    }
}

insertAfter

function insertAfter(newElement,targetElement){
    var parent=targetElement.parentNode;
    if(parent.lastChild === targetElement){
        parent.appendChild(newElement);
    }else{
        parent.insertBefore(newElement,targetElement.nextSibling);
    }
}

重复字符串

//利用array的join方法,创建指定长度的空数组,用str来拼接数组,不会改变原有数组
function repeatstr(str,n){
    return new Array(n+1).join(str);
}
console.log(repeatstr('hi',3));

获取url?后面的参数值

 //方法一:正则法 
    function getQueryString(name) {
        var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
        var r = window.location.search.substr(1).match(reg);
        if (r != null) {
            return unescape(r[2]);
        }
        return null;
    }
    // 这样调用:
    alert(GetQueryString("参数名1"));
    alert(GetQueryString("参数名2"));
    alert(GetQueryString("参数名3"));

//方法二:split拆分法
    function GetRequest() {
        var url = location.search; //获取url中"?"符后的字串
        var theRequest = new Object();
        if (url.indexOf("?") != -1) {
            var str = url.substr(1);
            strs = str.split("&");
            for(var i = 0; i < strs.length; i ++) {
                theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
            }
        }
        return theRequest;
    }
    var Request = new Object();
    Request = GetRequest();
    // var 参数1,参数2,参数3,参数N;
    // 参数1 = Request['参数1'];
    // 参数2 = Request['参数2'];
    // 参数3 = Request['参数3'];
    // 参数N = Request['参数N'];

js实现类似于add(1)(2)(3)调用方式的方法

function add(x) {
    var sum = x;
    var tmp = function (y) {
        sum = sum + y;
        return tmp;
    };
    tmp.toString = function () {
        return sum;
    };
    return tmp;
}
console.log(add(1)(2)(3));  //6
console.log(add(1)(2)(3)(4));   //10
/*首先要一个数记住每次的计算值,所以使用了闭包,在tmp中记住了x的值,第一次调用add(),初始化了tmp,并将x保存在tmp的作用链中,然后返回tmp保证了第二次调用的是tmp函数,后面的计算都是在调用tmp, 因为tmp也是返回的自己,保证了第二次之后的调用也是调用tmp,而在tmp中将传入的参数与保存在作用链中x相加并付给sum,这样就保证了计算*/

/*但是在计算完成后还是返回了tmp这个函数,这样就获取不到计算的结果了,我们需要的结果是一个计算的数字那么怎么办呢,首先要知道JavaScript中,打印和相加计算,会分别调用toString或valueOf函数,所以我们重写tmp的toString和valueOf方法,返回sum的值*/

检测对象{}是否为空对象

/* 
 * 检测对象是否是空对象(不包含任何可读属性)。 //如你上面的那个对象就是不含任何可读属性
 * 方法只既检测对象本身的属性,不检测从原型继承的属性。 
 */
function isOwnEmpty(obj) 
{ 
    for(var name in obj) 
    { 
        if(obj.hasOwnProperty(name)) 
        { 
            return false; 
        } 
    } 
    return true; 
}; 

/* 
 * 检测对象是否是空对象(不包含任何可读属性)。 
 * 方法既检测对象本身的属性,也检测从原型继承的属性(因此没有使hasOwnProperty)。 
 */
function isEmpty(obj) 
{ 
    for (var name in obj)  
    { 
        return false; 
    } 
    return true; 
}; 

判断某个数组中是否包含另一个数组

//是否被包含,是返回true,不是返回false
function isContained(a, b){
            if(!(a instanceof Array) || !(b instanceof Array)) return false;
            if(a.length < b.length) return false;
            //把数组转成字符串,通过indexOf来判断
            var aStr = a.toString();
            console.info(aStr);
            for(var i = 0, len = b.length; i < len; i++){
                console.info(aStr.indexOf(b[i]));
                if(aStr.indexOf(b[i]) == -1) return false;
            }
            return true;
        }
        //例子
        (function(){
            var a = [1,2,3,4,5];
            var b = [1,4,3,2];
            var c = [1,6];
            alert(isContained(a,b));//true
            alert(isContained(a,c));//false
        })()

异步加载的JS如何在chrome浏览器断点调试

  • 方案一: 在js文件代码的头部或者尾部加上“//@ sourceURL=test.js”,其中test.js是文件名,然后在(sources面板的no domain)里面找到它进行调试。
  • 方案二: 把$.getScript这种异步的方式换成创建script标签同步加载的方式。

css样式表important优先级大于内联style设置的样式的解决办法

提高内联样式style的优先级也需要增加important或者用js设置对象样式增加important属性,这样才能覆盖样式表中的样式

<style>
.c{color:Red !important}
</style>
<div class="c" style="color:#000000 !important">内联样式也增加important,这里就显示黑色的了,而不是红色</div>

通过脚本设置,需要注意的是不能直接设置obj.style.color=’#000000 !important’,而是设置obj.style.cssText=’color:#000000 !important’

数组排序按照字母在数字前面

function arrSort(a, b){
                if (/^\d/.test(a) ^ /^\D/.test(b)) {
                    return a>b?1:(a==b?0:-1);
                }else{
                    return a>b?-1:(a==b?0:1);
                }

            }
            var pyArray=["a","d","fa","5","t","fw2","a31","b","e","2fs","4","0"];
            pyArray.sort(arrSort)
            //["a", "a31", "b", "d", "e", "fa", "fw2", "t", "0", "2fs", "4", "5"]

简单的单例模式

类只会被实例化一次

var Singleton = function(fn) {
 var result;
 return function() {
  return result || (result = fn());
 };
};
var CreateMask = Singleton(function() {
 var __mask = document.createElement('div');
 __mask.className = 'mask';
 //...
 return document.body.appendChild(__mask);
});
var mask = new CreateMask();

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏网络

Bootstrap HTML编码规范

语法 用两个空格来代替制表符(tab) -- 这是唯一能保证在所有环境下获得一致展现的方法。 嵌套元素应当缩进一次(即两个空格)。 对于属性的定义,确保全部使用...

2149
来自专栏Android群英传

从数字滚动动画看自定义View的绘制思路

2162
来自专栏我的小碗汤

用go语言爬取珍爱网 | 第二回

昨天我们一起爬取珍爱网首页,拿到了城市列表页面,接下来在返回体城市列表中提取城市和url,即下图中的a标签里的href的值和innerText值。

1124
来自专栏偏前端工程师的驿站

WebComponent魔法堂:深究Custom Element 之 标准构建

前言  通过《WebComponent魔法堂:深究Custom Element 之 面向痛点编程》,我们明白到其实Custom Element并不是什么新东西,...

20210
来自专栏Petrichor的专栏

python: and & or 探究

今天处理的数据集里,图片同时有 “.jpg” 和 “.JPG” 两种后缀名,因此我要实现一个 找出所有不同后缀图片 的功能。一开始,实现该功能的模块我是这么写的...

1292
来自专栏数据科学学习手札

(数据科学学习手札41)folium基础内容介绍

  folium是js上著名的地理信息可视化库leaflet.js为Python提供的接口,通过它,我们可以通过在Python端编写代码操纵数据,来调用leaf...

6517
来自专栏阮一峰的网络日志

jQuery最佳实践

上周,我整理了《jQuery设计思想》。 那篇文章是一篇入门教程,从设计思想的角度,讲解"怎么使用jQuery"。今天的文章则是更进一步,讲解"如何用好jQue...

3716
来自专栏葡萄城控件技术团队

Mobile First! Wijmo 5 之 架构

本文就开发者关心的话题之一架构,展开叙述。 ? Wijmo 5是一组JavaScript控件,但是不要与Widgets混淆。在此前开发Wijmo的时候,我们能够...

22810
来自专栏简书专栏

基于Excel2013的数据转换和清洗

数字可以被设成的格式有12种:常规、数值、货币、会计专用、日期、时间、百分比、分数、科学记数、文本、特殊、自定义

1542
来自专栏全沾开发(huā)

总结CSS3新特性(媒体查询篇)

总结CSS3新特性(媒体查询篇) CSS3的媒体查询是对CSS2媒体类型的扩展,完善; CSS2的媒体类型仅仅定义了一些设备的关键字,...

43010

扫码关注云+社区

领取腾讯云代金券