首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >前端开发常用函数及小技巧(持续更新)

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

作者头像
空空云
发布2018-09-27 11:59:36
8760
发布2018-09-27 11:59:36
举报
文章被收录于专栏:大前端_Web大前端_Web

版权声明:本文为吴孔云博客原创文章,转载请注明出处并带上链接,谢谢。 https://cloud.tencent.com/developer/article/1347600

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

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();
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2016年04月28日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • css样式的百分比都相对于谁?
  • rem相关
  • javascript对象的深度克隆
  • 原生方法实现jquery的extend方法
  • 不定宽高的元素居中显示
  • DOM获取方法
  • 编码和解码
  • window onload 实现多次监听
  • insertAfter
  • 重复字符串
  • 获取url?后面的参数值
  • js实现类似于add(1)(2)(3)调用方式的方法
  • 检测对象{}是否为空对象
  • 判断某个数组中是否包含另一个数组
  • 异步加载的JS如何在chrome浏览器断点调试
  • css样式表important优先级大于内联style设置的样式的解决办法
  • 数组排序按照字母在数字前面
  • 简单的单例模式
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档