Jin-2015年度小知识点和技巧笔记

2015年虽然已经过去3个半月，但是想了又想还是觉得有必要把这篇笔记写一下。知识点比较多，就不按时间来咯。

1. 随机取色

  return '#'+(Math.random()*0xffffff<<0).toString(16);

扩展

字符串解析模版

  [].forEach.call($$("*"),function(a){
    a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16);
  });

2.histrory.pushState 无刷新修改地址栏显示地址的方法

需求：Ajax局部刷新是小菜一碟。但现在每次ajax请求后，在不刷新页面的情况下改变url地址。

限制

1.传递的url必须域名相同，不能跨域
2.state对象虽然可以存储很多自定义的属性，但对于不可序列化的对象则不能存储，如：DOM对象。

  var stateObj = { foo: "bar" };
  history.pushState(stateObj, "page 2", "list.html");

比如我现在的页面的url是：https://yi-love.github.io,我的目标是要让点击Github之后：https://github.com/Yi-love，然后点击返回回退到： https://yi-love.github.iolist.html 这个页面。

所以通过ajax我们可以每次都pushState一个json对象。这样就会让用户点击回退的时候可以回退到他之前查询过的页面，而不是一个新的页面。

其它相关连参数

1.history.replaceState: 操作类似于history.pushState()，不同之处在于replaceState()方法会修改当前历史记录条目而并非创建新的条目。
2.window.onpopstate: 是popstate事件在window对象上的事件句柄.每当处于激活状态的历史记录条目发生变化时,popstate事件就会在对应window对象上触发.

  history.replaceState();
  window.onpopstate = funcg;

参考资料

histrory.pushState

window.onpopstate

3.页面性能测试

http://www.webpagetest.org/

4. JSONP IE8兼容

因为ie8在script元素上没有onload事件。所以只能通过监听script.onreadystatechange判断js是否加载完成。

  script.src = url;
  script.onload = function(){
   //成功
  };
  script.onreadystatechange = function(){ //兼容 ie8
    if (script.readyState === 'loaded' || script.readyState === 'complete' ){
      //成功
    }
  };
  script.onerror = function(){
    //失败
  };
  window[_callbackName] = function(){//callback函数注册到window
    responseData = arguments;
  };
  head.appendChild(script);

5. 事件触发trigger

通过js代码触发某个dom元素的事件。

  /**
  * [trigger 触发事件]
  * @param  {[element]} element [目标元素]
  * @param  {[string]} event [需要触发的事件]
  */
  function trigger(element,event){
    if( !(typeof event === 'string')) ) return;
    if ( element.dispatchEvent ){
      var evt = document.createEvent( 'Events' );// initEvent接受3个参数
      evt.initEvent(event, true, true);
      element.dispatchEvent(evt);     
    }else if ( element.fireEvent ){ //IE
      element.fireEvent('on'+event);
    }
  };

6. JS类型判断

  var class2type = [];
  ;"Boolean Number String Function Array Date RegExp Object Error".split(" ").forEach(function(name){
    class2type["[object "+name+"]"] = name.toLowerCase();
  });
  function isType(obj){	return obj == null ? String(obj) : class2type[toString.call(obj)] || 'object'};
  //案例
  isType([]) //"array"
  isType({})//"object"
  isType(null)//"null"
  isType(/\d/g)//"regexp"
  //typeof
  typeof [] //"object"
  typeof {}//"object"
  typeof null//"object"
  typeof /\d/g//"object"

扩展

  function likeArray(obj) { return typeof obj.length == 'number' };
  function isDocument(obj)   { return obj != null && obj.nodeType == obj.DOCUMENT_NODE };
  function isWindow(obj) { return obj != null && obj == obj.window };
  function isFunction( value ){	return isType(value) == 'function'};
  function isObject(obj){ return isType(obj) == "object" };
  function isString( obj ){ return isType(obj) == 'string'};
  function isPlainObject(obj) {
    return isObject(obj) && !isWindow(obj) && Object.getPrototypeOf(obj) === Object.prototype;
  }

7.CSS样式优先级

优先级：style > id > class > name

 * 标签选择符、伪类及伪对象：优先级别积分为1。
 * 类选择符、属性选择符：优先级别积分为10。
 * ID选择符：优先级别积分为100。
 * style属性：优先级积分为1000。

8.CSS画三角形

#triangle-down {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 100px solid red;
}

9.获取当前设备的dpr

javaScript方法：

  var dpr = window.devicePixelRatio;

css方法

  //-webkit-device-pixel-ratio
  //-webkit-min-device-pixel-ratio
  //-webkit-max-device-pixel-ratio
  @media screen and (-webkit-min-device-pixel-ratio:0){
  	//css
  }

10.Retina屏幕1px边框

element{
 border-width:thin;
}

11.圆角bug

element{
 background-clip:padding-box;
}

12.禁止复制文本

element{
 -moz-user-select: none;
 -webkit-user-select: none;
 -ms-user-select: none;
 -khtml-user-select: none;
 user-select: none;
}

13.透明度

element{
 filter:alpha(opacity=65);
 opacity:0.65;
}

14.文本省略

element{
  overflow：hidden;
  white—space：nowrap;
  text—overflow：ellipsis;
}

15.背景色渐变

element{
  filter: progid:DXImageTransform.Microsoft.Gradient(
    gradientType=0,startColorStr=#fff,endColorStr=#e4e5f0); /*IE 6 7 8*/
  background: -ms-linear-gradient(top, #fff,  #e4e5f0);/* IE 10 */
  background:-moz-linear-gradient(top,#fff,#e4e5f0);/*火狐*/
  background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#fff), to(#e4e5f0));/*谷歌*/
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#e4e5f0));/* Safari 4-5, Chrome 1-9*/
  background: -webkit-linear-gradient(top, #fff, #e4e5f0);   /*Safari5.1 Chrome 10+*/
  background: -o-linear-gradient(top, #fff, #e4e5f0);  /*Opera 11.10+*/
}

16.利用a标签解析url

function parseURL(url) {
  var a =  document.createElement('a');
  a.href = url;
  return {
      source: url,
      protocol: a.protocol.replace(':',''),
      host: a.hostname,
      port: a.port,
      query: a.search,
      params: (function(){
          var ret = {},
              seg = a.search.replace(/^\?/,'').split('&'),
              len = seg.length, i = 0, s;
          for (;i<len;i++) {
            if (!seg[i]) { continue; }
              s = seg[i].split('=');
              ret[s[0]] = s[1];
          }
          return ret;
      })(),
      file: (a.pathname.match(/\/([^\/?#]+)$/i) || [,''])[1],
      hash: a.hash.replace('#',''),
      path: a.pathname.replace(/^([^\/])/,'/$1'),
      relative: (a.href.match(/tps?:\/\/[^\/]+(.+)/) || [,''])[1],
      segments: a.pathname.replace(/^\//,'').split('/')
  };
}

17.禁止别人以iframe加载你的页面

  if (window.location != window.parent.location) 
    window.parent.location = window.location;

18.整数操作

JavaScript中是没有整型概念的，但利用好位操作符可以轻松处理，同时获得效率上的提升。 |0和~~是很好的一个例子，使用这两者可以将浮点转成整型且效率方面要比同类的parseInt,Math.round 要快。在处理像素及动画位移等效果的时候会很有用。

  var foo = (12.4 / 4.13) | 0;//结果为3
  var bar = ~~(12.4 / 4.13);//结果为3

19.CSS中也可以做简单运算

element{
  background-position: calc(100% - 50px) calc(100% - 20px);
}

20.加载CDN文件时，可以省掉HTTP标识

CDN即从专门的服务器加载一些通用的JS和CSS文件，出于安全考虑有的CDN服务器使用HTTPS方式连接，而有的是传统的HTTP，其实我们在使用时可以忽略掉这个，将它从URL中省去。

<script src="//domain.com/path/to/script.js"></script>

21. requestAnimationFrame VS setInterval

 requestAnimationFrame
  // 基于：关键帧
  //窗口不可见的时候会把动画停掉
    velocity.js ： $.animate
    greensock: 高性能 ,大

setInterval
  // 基于:时间

22. select > option 选择

  var obj = document.getElementById('select');
  var index = obj.selectedIndex; //序号，取当前选中选项的序号
  var val = obj.options[index].text.trim();

23. Javascript 按位取反运算符 (~)

  var temp = ~5;
  /*
   5 二进制 101，补满 32位
   00000000000000000000000000000101
      按位取反
   11111111111111111111111111111010
     由于32位开头第一个是1，所以这是一个负数，将二进制转换成负数，需要先反码
   00000000000000000000000000000101
    之后，再+1
   00000000000000000000000000000110
    转换成十进制为6，加上符号变成负数 -6
  */
  alert(temp);// -6
  
  i = ~~index;//~~一种利用符号进行的类型转换,转换成数字类型
  if (obj.length === +obj.length)   
  //等价于 
  if (typeof obj.length === "number" && !isNaN(obj.length))

24. 最佳清空数组的方法

最佳的请空数组方式是：将length设置为0.

  a.length = 0;

25.html5 canvas画图

rgba表示颜色的方法：即红绿蓝三原色和透明值。

/*
* r=red
* g=green
* b=blue
* a=alpha
*/
var canvas = document.getElementById('canvas');
var ctxt = canvas.getContext('2d');
var img = new Image;
img.onload = function(){
    ctxt.drawImage(img, 0, 0);
    var data = ctxt.getImageData(0, 0, 480, 480).data;
    console.log(data, data.toString());
}
img.src = 'img/pic.jpg';

26.图像数组的遍历

var data = ctxt.getImageData(0, 0, 480, 480).data;
for(var i =0,len = data.length; i<len;i+=4){
    var red = data[i],
    green = data[i+1],
    blue = data[i+2],
    alpha = data[i+3];
}

27.图片颜色反转

颜色反转的算法就是三原色求反，即255-原色

function draw(img){
    ctxt.clearRect(0, 0, 480, 480);
    // console.log(img);
    ctxt.putImageData(img,0,0);
}
function invert(){
    var back = ctxt.createImageData(480, 480);
    var arr = back.data;

    for(var i=0,len = data.length;i<len;i+=4){
        var red = data[i],
        green = data[i+1],
        blue = data[i+2],
        alpha = data[i+3];

        arr[i] = 255-red;
        arr[i+1] = 255-green;
        arr[i+2] = 255-blue;
        arr[i+3] = alpha;
    }
    return back;
}
//颜色反转
draw(invert());

28.颜色一些算法

去色

把图片变成黑白图，只要把每个像素的R、G、B设为亮度（Y）的值就行了。

关于R、G、B、Y的关系可以看到这里看看，这里只要记住这条公式：Y = 0.299R + 0.587G + 0.114B，使用位：(R* 4899 + G * 9617 + B* 1868 + 8192) » 14，速度会快

反相（反转）

就是将一个颜色换成它的补色。

补色就是用255（8位通道模式下，255即2的8次方，16位要用65535去减，即2的16次方）减去它本身得到的值：R(补) = 255–R。

2015年度小知识点和技巧笔记