前端记事簿

Web

原型链

1. 所有的对象都有__proto__ 指向其原型对象
2. 只有函数(Function.prototype除外)有prototype属性,初始值为空对象,如果把此函数当作构造函数(custructor)调用,则会创建并返回一个新的对象,并将这个对象的__proto__指向函数的prototype
3. 一切函数(包括Obect Array) 的__proto__都为Function.prototype
4. Function.prototype的__proto__ 也为Object.prototype

关于Function.prototype

1. Function.prototype像普通函数一样可以调用，但总是返回undefined
2. Function.prototype没有prototype属性
3. Function的prototype属性与__proto__相同,都指向函数Function.prototype.
4. 普通函数实际上是Function的实例, 默认的prototype是一个空对象
5. 所以，Function.prototype其实是个另类的函数，由Object直接派生,再生成Function

类型

所有的内建有:

1. null
2. undefined
3. number
4. string
5. object
6. boolean
7. symbol

值得注意的事项有:

typeof null === "object";
typeof undefined === "undefined"
typeof function(){} === "function"
typeof typeof 42; // "string"

Ajax

• IE8/IE9、Opera Mini 完全不支持xhr对象
• IE10/IE11部分支持，不支持 xhr.responseType为json
• 部分浏览器不支持设置请求超时，即无法使用xhr.timeout
• 部分浏览器不支持xhr.responseType为blob

function sendAjax() {
  //构造表单数据
  var formData = new FormData();
  formData.append('username', 'johndoe');
  formData.append('id', 123456);
  //创建xhr对象 
  var xhr = new XMLHttpRequest();
  //设置xhr请求的超时时间
  xhr.timeout = 3000;
  //设置响应返回的数据格式
  xhr.responseType = "text";
  //创建一个 post 请求，采用异步
  xhr.open('POST', '/server', true);
  //注册相关事件回调处理函数
  xhr.onload = function(e) { 
    if(this.status == 200||this.status == 304){
        alert(this.responseText);
    }
  };
  // 或者
  xhr.addEventListener("readystatechange",function(e){
    if(e.target.readyState===4&&e.target.status===200){
      ....
    }
  })
  xhr.ontimeout = function(e) { ... };
  xhr.onerror = function(e) { ... };
  xhr.upload.onprogress = function(e) { ... };
  //发送数据
  xhr.send(formData);
}

request header

DOMString getAllResponseHeaders();
DOMString getResponseHeader(DOMString header); 
//两者无法获得set-cookie,或在cors的时候只能获得简单的头部信息.
void setRequestHeader(DOMString header, DOMString value);
//setRequestHeader必须在open()方法之后，send()方法之前调用，否则会抛错
//setRequestHeader可以调用多次，最终的值不会采用覆盖override的方式，而是采用追加append的方式。

responseType

XML Level 1不支持该属性,只能返回纯文字,或者使用下面方法手动接受图片数据

var xhr = new XMLHttpRequest();
//向 server 端获取一张图片
xhr.open('GET', '/path/to/image.png', true);
// 这行是关键！
//将响应数据按照纯文本格式来解析，字符集替换为用户自己定义的字符集
xhr.overrideMimeType('text/plain; charset=x-user-defined');
xhr.onreadystatechange = function(e) {
  if (this.readyState == 4 && this.status == 200) {
    //通过 responseText 来获取图片文件对应的二进制字符串
    var binStr = this.responseText;
    //然后自己再想方法将逐个字节还原为二进制数据
    for (var i = 0, len = binStr.length; i < len; ++i) {
      var c = binStr.charCodeAt(i);
      //String.fromCharCode(c & 0xff);
      var byte = c & 0xff; 
    }
  }
};
xhr.send();

readyState

Timeout

1. xhr.timeout计时从send()即loadstart开始
2. 可以在send()之后再设置此xhr.timeout，但计时起始点仍为调用xhr.send()方法的时刻。
3. 当xhr为一个sync同步请求时，xhr.timeout必须置为0，否则会抛错。

progress

分为上传和下载

• 上传触发的是xhr.upload对象的onprogress事件
• 下载触发的是xhr对象的onprogress事件
• progress = e.lengthComputable? e.loaded/e.total: 0

Content-Type

xhr.send(data)中,如果是Get、Head请求,data会被自动忽略.否则,浏览器会根据data类型自动设置Content-type.

• 如果data是 Document 类型，同时也是HTML Document类型，则content-type默认值为text/html;charset=UTF-8;否则为application/xml;charset=UTF-8；
• 如果data是 DOMString 类型，content-type默认值为text/plain;charset=UTF-8；
• 如果data是 FormData 类型，content-type默认值为multipart/form-data; boundary=[xxx]
• 如果data是其他类型，则不会设置content-type的默认值

跨域

1. 服务器需要设置Access-Control-Allow-Origin
2. 默认跨域请求不带cookies,必须手动设置xhr.withCredentials=true才能携带cookies,服务器也要设置允许接受:Access-Control-Allow-Credentials:true
3. IE 8/9 需要使用XDomainRequest

Jquery

1. jquery版本的ajax可以使用下面方法来扩展原有的xhr

   var progress;
   $.ajax({
     url: a_cross_domain_url,
     xhrFields: {
        withCredentials: true,
        onprogress:function(e){
          if(e.lengthComputable)progress = e.loaded / e.total; 
        }
     }
   });

HTTP Code

1. 2xx 成功, 200 OK, 201 Created,202 Accepted,204 No Content, 205 Reset Content, 206 Partial Content
2. 3xx 重定向, 300 Multiple Choises,301 Move Permanently, 302 Found(临时的),304 Not Modified,307 Temporary Redirect(有些浏览器不支持)
3. 4xx 客户端错误, 400 Bad Request,401 Unauthorized, 403 Forbidden,404 Not Found
4. 5xx 服务器错误, 502 Bad Gateway,503 Service Unavailable

三次握手和四次挥手

其中四次挥手后面客户端还要等待两个周期是防止最后一个ACK信号丢失而使得服务器无法关闭的情况.

当服务器如果检测到2个周期内没收到ACK信号则会重发FIN请求,此时客户端还能正常响应.

总的来说:客户端给服务器一次没听清楚的机会

属性封装

  var man = {}
  Object.defineProperty(man, 'name', {
    value: 'kid',            // 值
    writable: true,          // 是否可写
    enumerable: true,        // 是否可枚举
    configurable: true       // 除 writable外其他Descriptor属性是否可覆盖
  });
  Object.getOwnPropertyDescriptor(man,'name');
  // {
  //    value: 'kid',       
  //    writable: true,       
  //    enumerable: true,      
  //    configurable: true
  //  } 
  Object.defineProperties(man, {
    name: {
      value: 'kid',
      writable: false
    },
    age: {
      //访问器,Vue中实现数据绑定
      get: function(){},  
      set: function(age){}
    }
  })

1. 如果属性已经存在，Object.defineProperty()将尝试根据描述符中的值以及对象当前的配置来修改这个属性。
2. 如果描述符的configurable 特性为false（即该特性为non-configurable），那么除了writable外，其他特性都不能被修改.
3. 如果一个属性的configurable为 false，则其 writable 特性也只能修改为 false。
4. 上述规则如果违背,则会得到一个TypeError

兼容问题

IE<=8 兼容问题:

1. 不支持 addEventListener, 不支持事件捕获. 不支持stopProgagation和preventDefault. 没有target而是srcElement.

   document.attachEvent("onclick",function(e){
    e.returnValue = false; // preventDefault()
    e.cancelBubble = true; // stopPropagation()
   });
   // polyfill
   (function () {
      if (window.addEventListener) return;
      var exts = [window, HTMLDocument.prototype, Element.prototype];
      for (var i = 0; i < exts.length; i++) {
          if (!exts[i]) continue;
          exts[i].addEventL1istener = addEventListener;
          exts[i].removeEventListener = removeEventListener;
          exts[i].dispatchEvent = dispatchEvent;
      }
      var registry = [];
      // add event
      function addEventListener(type, listener) {
          var target = this;
          registry.unshift([target, type, listener, function (e) {
              e.currentTarget = target;
              e.preventDefault = function () { e.returnValue = false };
              e.stopPropagation = function () { e.cancelBubble = true };
              e.target = e.srcElement || target;
              listener.call(target, e);
          }]);
          target.attachEvent("on" + type, registry[0][3]);
      }
      // remove event
      function removeEventListener(type, listener) {
          for (var i = 0; i < registry.length; i++) {
              var c = registry[i];
              if (c[0] === this && c[1] === type && c[2] === listener) {
                  return this.detachEvent("on" + type, registry.splice(i, 1)[0][3]);
              }
          }
      }
      //dispatch event
      function dispatchEvent(e) {
          return this.fireEvent("on" + e.type, e);
      }
   })();

2. forEach,map,filter,reduce都不能用

3. window.getComputedStyle,Element都不支持,只支持element.currentStyle.

4. Element.getBoundingClientRect 不能得到height和width

5. getElementsByClassName

6. querySelector和querySelectorAll只支持CSS2.1和下面四种CSS选择器：

   1. a ~ b
   2. [attr^=val]
   3. [attr$=val]
   4. [attr*=val]

   // ie 6~7
   // 用于在IE6和IE7浏览器中，支持Element.querySelectorAll和Element.querySelector方法
   if (!document.querySelectorAll) {
     document.querySelectorAll = function (selectors) {
         var style = document.createElement('style'), elements = [], element;
         document.documentElement.firstChild.appendChild(style);
         document._qsa = [];
         style.styleSheet.cssText = selectors + '{x-qsa:expression(document._qsa && document._qsa.push(this))}';
         window.scrollBy(0, 0);
         style.parentNode.removeChild(style);
         while (document._qsa.length) {
             element = document._qsa.shift();
             element.style.removeAttribute('x-qsa');
             elements.push(element);
         }
         document._qsa = null;
         return elements;
     };
   }
   if (!document.querySelector) {
     document.querySelector = function (selectors) {
         var elements = document.querySelectorAll(selectors);
         return (elements.length) ? elements[0] : null;
     };
   }
   var qsaWorker = (function () {
     var idAllocator = 10000;
     function qsaWorkerShim(element, selector) {
         var needsID = element.id === "";
         if (needsID) {
             ++idAllocator;
             element.id = "__qsa" + idAllocator;
         }
         try {
             return document.querySelectorAll("#" + element.id + " " + selector);
         }
         finally {
             if (needsID) {
                 element.id = "";
             }
         }
     }
     function qsaWorkerWrap(element, selector) {
         return element.querySelectorAll(selector);
     }
     // Return the one this browser wants to use
     return document.createElement('div').querySelectorAll ? qsaWorkerWrap : qsaWorkerShim;
   })();

7. 支持HTMLElement.click()

window.getComputedStyle

let style = getComputedStyle(document.documentElement,null);
style.getPropertyValue('color');
style.setPropertyValue('color','red','important');

EMCA 5新增API,(IE >= 9)

   Object.defineProperty && Object.defineProperties // ie8 only work in DOM object.
   Object.getOwnPropertyDescriptor // ie8 also ok
   Object.getPrototypeOf(object) // es5 - only object, es6 - primitive && object
   Object.getOwnPropertyNames(object) //es5 - only object, es6 - primitive && object
   Object.keys(object) //es5 - only object, es6 - primitive && object
   Object.freeze && Object.isFrozen
   Object.preventExtensions() && Object.isExtensiable(object)

1. Object.getOwnPropertyNames能够获得所有可枚举和不可枚举的属性,Object.keys则只会获得可枚举的属性.
2. freeze是全部无法修改, seal仅仅可以更改属性的值(不能删除), extension只是不能添加新元素.

检测文档加载

document.addEventListener("DOMContentLoaded",function(){,  // IE > 8 ,});
document.attachEvent("onreadystatechange",function(e){
if(document.readyState=== 'complete'){,    // IE = 8,  }});// 使用上方的polyfill
document.addEventListener("readystatechange",function(e){
if(document.readyState === 'complete'){    // IE >= 8 }})

先序遍历DOM树

/*** 使用递归的方式先序遍历DOM树,   
* @param node  根节点,   
* */
function traversal(node){   
  //对node的处理 
  if(node && node.nodeType === 1){  console.log(node.tagName);    }     
  var i = 0, childNodes = node.childNodes,item;    
  for(; i < childNodes.length ; i++){ 
      item = childNodes[i];
      if(item.nodeType === 1){
          //递归先序遍历子节点 
          traversal(item);
      }
  }
}

documentFragment

因为文档片段存在与内存中，并不在DOM树中，所以将子元素插入到文档片段时不会引起页面回流(reflow)(对元素位置和几何上的计算)。因此，使用文档片段document fragments 通常会起到优化性能的作用(better performance)。

var ul = document.getElementsByTagName("ul")[0]; // assuming it exists
var docfrag = document.createDocumentFragment();
var browserList = ["Internet Explorer", "Mozilla Firefox", "Safari", "Chrome", "Opera"];
browserList.forEach(function(e) {
  var li = document.createElement("li");
  li.textContent = e;
  docfrag.appendChild(li);
});
ul.appendChild(docfrag);
// a list with well-known web browsers

各种宽度

页可见区域宽： document.body.clientWidth;
网页可见区域高： document.body.clientHeight;
网页可见区域宽： document.body.offsetWidth (包括边线的宽);
网页可见区域高： document.body.offsetHeight (包括边线的宽);
网页正文全文宽： document.body.scrollWidth;
网页正文全文高： document.body.scrollHeight;
网页被卷去的高： document.body.scrollTop;
网页被卷去的左： document.body.scrollLeft;
网页正文部分上： window.screenTop;
网页正文部分左： window.screenLeft;
屏幕分辨率的高： window.screen.height;
屏幕分辨率的宽： window.screen.width;
屏幕可用工作区高度： window.screen.availHeight;

React

生命周期

• render

• getInitialState

• getDefaultProps

• componentWillMount

• componentDidMount 在此发起ajax请求

• componentWillReceiveProps 在该函数中调用 this.setState() 将不会引起第二次渲染。

• shouldComponentUpdate

• componentWillUpdate 在props和state改变时候调用，不能调用this.setState()

• componentDidUpdate

• componentWillUnmount

回调渲染模式

传入的props.children是一个函数，然后render里面调用this.props.children(this.state.user)

Controlled Component和Uncontrolled Component

前者数据一个在state里面后者数据在DOM里。

Children API

解决children可能不为array的情况

object React.Children.map(object children, function fn [ object context])
React.Children.forEach(object children, function fn [object context])
number React.Children.count(object children)

JSON和XML

JSON(Javascript Object Notation) 是一種輕量級的數據交換格式。易於人閱讀和編寫。同時也易於機器解析和生成。它基於Javascript Programming Language,Standard ECMA-262 3rd Edition - December 1999的一個子集。JSON採用完全獨立於語言的文本格式，但是也使用了類似於C語言家族的習慣（包括C, C++, C#,Java, Javascript, Perl, Python等）。這些特性使JSON成為理想的數據交換語言。

XML（EXtensible Markup Language），XML是一種類似於HTML的標記語言，XML是用來描述數據的，可以用來標記數據、定義數據類型，是一種允許用戶對自己的

標記語言進行定義的源語言。 XML使用DTD(document type definition)文檔類型定義來組織數據;格式統一，跨平台和語言，早已成為業界公認的標準。

XML是標準通用標記語言 (SGML) 的子集，非常適合 Web 傳輸。XML 提供統一的方法來描述和交換獨立於應用程式或供應商的結構化數據。

网络安全

1. XSS
2. CSRF
3. DDOS

#