记录Web前端学习路上的一些笔记，代码段……

HTML

CSS

清除默认样式

html{
    color:#000;
    background:#FFF
}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
    margin:0;
    padding:0
}
table{
    border-collapse:collapse;
    border-spacing:0
}
fieldset,img{
    border:0
}
address,caption,cite,code,dfn,em,strong,th,var{
    font-style:normal;
    font-weight:normal
}
ol,ul{
    list-style:none
}
caption,th{
    text-align:left
}
h1,h2,h3,h4,h5,h6{
    font-size:100%;
    font-weight:normal
}
q:before,q:after{
    content:''
}
abbr,acronym{
    border:0;
    font-variant:normal
}
sup{
    vertical-align:text-top
}
sub{
    vertical-align:text-bottom
}
input,textarea,select{
    font-family:inherit;
    font-size:inherit;
    font-weight:inherit;
    *font-size:100%
}
legend{
    color:#000
}

清除浮动方法

方案一

.clearfix:before,
.clearfix:after {
  content: ".";    
  display: block;    
  height: 0;    
  overflow: hidden;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  zoom: 1;
}

方案二

.clearfix:before, .clearfix:after {
  content:"";
  display:table;
}
.clearfix:after{
  clear:both;
  overflow:hidden;
}
.clearfix{
  zoom:1;
}

文本超出省略号

display:block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

多行文本超出省略号

display: -webkit-box;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
overflow: hidden;
-webkit-line-clamp: 2;

重置默认行为

禁止文本选中

-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-khtml-user-select: none;
user-select: none;

禁用输入法

ime-mode:disabled;

禁用系统默认菜单

-webkit-touch-callout:none;

禁止触发鼠标或者触屏事件

pointer-events: none;

自定义文本选择

::selection { background: #e2eae2; }
::-moz-selection { background: #e2eae2; }
::-webkit-selection { background: #e2eae2; }

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;
}

防抖（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);
        }
    }
}