Javascript 代码片段

克隆

对象深度克隆

Object.prototype.clone = function () {
    var newObj = {};
    for (var i in this) {
        console.log("i = " + i)
        if (typeof(this[i]) == 'object'|| typeof(this[i]) == 'function') {
            newObj[i] = this[i].clone()
        } else {
            newObj[i] = this[i]
        }
    }
    return newObj
}

简单的克隆：

方法一

obj = eval(uneval(o));

方法二(系列化对象)

obj= JSON.parse(JSON.stringify(o));

数组深度克隆

Array.prototype.clone = function () {
    var newArray = []
    for (var i = 0; i < this.length; i++) {
        if (typeof(this[i]) == 'object' || typeof(this[i]) == 'function') {
            newArray[i] = this[i].clone()
        } else {
            newArray[i] = this[i]
        }
    }
    return newArray
}

函数深度克隆

Function.prototype.clone = function () {
    var that = this;
    var newFunc = function () {
        return that.apply(this, arguments);
    };
    for (var o in this) {
        newFunc[o] = this[o];
    }
    return newFunc;
}

全屏

使用全屏

var docElm = document.documentElement;
if (docElm.requestFullscreen) {    //W3C  
    docElm.requestFullscreen();  
}else if (docElm.mozRequestFullScreen) {  //FireFox  
    docElm.mozRequestFullScreen();  
}else if (docElm.webkitRequestFullScreen) {  //Chrome等  
    docElm.webkitRequestFullScreen();  
}else if (elem.msRequestFullscreen) { //IE11
  elem.msRequestFullscreen();
}

退出全屏

if (document.exitFullscreen) {  
    document.exitFullscreen();  
}else if (document.mozCancelFullScreen) {  
    document.mozCancelFullScreen();  
}else if (document.webkitCancelFullScreen) {  
    document.webkitCancelFullScreen();  
}else if (document.msexitFullscreen) {
      document.msexitFullscreen();
}

事件监听

document.addEventListener("fullscreenchange", function () {  
    fullscreenState.innerHTML = (document.fullscreen)? "" : "not ";}, false);  
}
document.addEventListener("mozfullscreenchange", function () {  
    fullscreenState.innerHTML = (document.mozFullScreen)? "" : "not ";}, false);  
}
document.addEventListener("webkitfullscreenchange", function () {  
    fullscreenState.innerHTML = (document.webkitIsFullScreen)? "" : "not ";}, false);
}
document.addEventListener("msfullscreenchange", function () {
    fullscreenState.innerHTML = (document.msFullscreenElement)? "" : "not ";}, false);
}

全屏样式设置

在浏览器全屏的使用我们还可以进行样式设置
html:-moz-full-screen { 
    background: red;  
}  
html:-webkit-full-screen {  
    background: red;  
}  
html:fullscreen {  
    background: red;  
}

防抖节流

防抖（Debouncing/Debounce）

debounce 的关注点是空闲的间隔时间,强制函数在某段时间内只执行一次。

空闲控制 返回函数连续调用时，空闲时间必须大于或等于 delay，fn 才会执行

function debounce(fn,delay){
    var timer;
    return function(){
        var context = this;
        var args = arguments;
        timer&&clearTimeout(timer);
        timer = setTimeout(function(){
            fn.apply(context,args);
        },delay);
    }
}

节流（Throttling/Throttle）

throttle 的关注点是连续的执行间隔时间,强制函数以固定的速率执行。

频率控制 返回函数连续调用时，action 执行频率限定为 次 / delay

function throttle(fn, threshhold){
    var last;
    var timer;
    threshhold || (threshhold = 250);
    return function(){
        var context = this;
        var args = arguments;
        var now = + new Date();
        if(last && now < last + threshhold){
            timer&&clearTimeout(timer);
            timer = setTimeout(function(){
                last = now;
                fn.apply(context, args);
            },threshhold);
        }else{
            last = now;
            fn.apply(context,args);
        }
    }
}

事件处理

通用事件兼容框架：EventUtil

取消浏览器默认行为

function stopDefault( e ) {
    if ( e && e.preventDefault ){
        e.preventDefault();
    }else{
        window.event.returnValue = false;
    }
    return false;
}

阻止事件冒泡

function stopBubble(e){
    if (e && e.stopPropagation) {
        e.stopPropagation();
    }else if (window.event) {
        window.event.cancelBubble = true;
    }
}

模拟触发点击事件

function simulateClick(el) {
  var evt;
  if (document.createEvent) { // DOM Level 2 standard
    evt = document.createEvent("MouseEvents");
    evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    el.dispatchEvent(evt);
  } else if (el.fireEvent) { // IE
    el.fireEvent('onclick');
  }
}
createEvent(eventType)
参数描述
eventType想获取的 Event 对象的事件模块名。

返回值

返回新创建的 Event 对象，具有指定的类型。

抛出

如果实现支持需要的事件类型，该方法将抛出代码为 NOT_SUPPORTED_ERR 的 DOMException 异常。

说明

该方法将创建一种新的事件类型，该类型由参数 eventType 指定。注意，该参数的值不是要创建的事件接口的名称，而是定义那个接口的 DOM 模块的名称。

下表列出了 eventType 的合法值和每个值创建的事件接口：
eventType 的合法值和每个值创建的事件接口：

参数事件接口初始化方法
HTMLEventsHTMLEventiniEvent()
MouseEventsMouseEventiniMouseEvent()
UIEventsUIEventiniUIEvent()

用该方法创建了 Event 对象以后，必须用上表中所示的初始化方法初始化对象。

正则表达式

电子邮箱

/^[0-9a-z][0-9a-z\-\_\.]+@([0-9a-z][0-9a-z\-]*\.)+[a-z]{2,}$/i

固定电话

/^0[0-9]{2,3}[2-9][0-9]{6,7}$/

手机号码

/^(\+?0{0,2}86([\ |\-])?)?1((3[0-9])|(4[57])|(5([0-3]|[5-9]))|(66)|(7[01])|(8[0-9])|(9[89]))\d{8}$/

移动号段：139 138 137 136 135 134 147 150 151 152 157 158 159 178 182 183 184 187 188 198

联通号段：130 131 132 155 156 185 186 145 176 166

电信号段：133 153 177 173 180 181 189 199

虚拟运营商号段：170 171

身份证号码

/^(\d{15}$|^\d{18}$|^\d{17}(\d|X|x))$/

ip地址

// IPv4
/^((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9]\d)|\d)(\.((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9]\d)|\d)){3}$/

// IPv6
/^\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))(%.+)?\s*$/

域名

/^([a-zA-Z0-9][-a-zA-Z0-9]{0,62}\.)+([a-zA-Z]{0,63})\.?$/

任意Unicode字符

/[\0-\uD7FF\uE000-\uFFFF]|\uD800-\uDBFF|\uD800-\uDBFF|(?:1|^)[\uDC00-\uDFFF]/

数组

数组复制技巧

方法一

var a = [1,2,3];
b = a.slice(0);

方法二

var a = [1,2,3];
b = a.concat();

打乱数字数组的顺序

numbers.sort(function(){ return Math.random() - 0.5});

给数组创建一个随机项

var items = [12, 548 , 'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' , 2145 , 119];
var randomItem = items[Math.floor(Math.random() * items.length)];

数组追加

Array.prototype.push.apply(array1, array2);

获得数组中的最大值

写法一

var a = [10,1,2,3,4,8,9];
Math.max.apply(null,a);

写法二

Array.prototype.max = function() {
    return Math.max.apply({},this); 
}

类数组转换成数组

写法一

var args = Array.prototype.slice.call(arguments, 0);

写法二

var args = [].slice.call(arguments);

ES6的实现

var args = Array.from(arguments);

不用for循环创造0～100的数组

Array.from({length:100}).map(function(item,index){return index});
Array(100).join(",").split(",").map(function(key,index){return index;});
Object.keys(Array(100).toString().split(","));
  1. \uD800-\uDBFF ↩

标签: none

添加新评论