摘要：學習工作中遇到的問題，和容易忘記的零碎知識，部分為摘抄，如若侵權，請告知。將構造函數的指向這個新創建的對象即將指向這個新對象。取消冒泡這種相當于全局取消事件冒泡。前端性能的優化避免全局查找，全局查找需要涉及作用域鏈上的查找。

學習工作中遇到的問題，和容易忘記的零碎知識，部分為摘抄，如若侵權，請告知。

設置盒子模型為標準模式或者IE模式。屬性有三個：
1.content-box：默認值，border和padding不計算到width。
2.padding-box：padding算入width。
3.border-box：border和padding都會算入width。
4.另外標準模式下，背景其實是包括邊框的，可以使用background-clip來設置。
5.同理background-origin也可以設置背景圖片的位置。
6.IE盒子模型會改變

邊框陰影也可以設置透明度，這樣看起來會很美觀，而且還會解決沒透明度會出現陰影和背景色一樣的情況。

 box-shadow: -1px 0 2px rgb(000, 000, 000, 0.2),
      0 0 0 rgb(000, 000, 000, 0.2),
      1px 0 2px rgb(000, 000, 000, 0.2), 
      0 2px 4px rgb(000, 000, 000, 0.2);

(不同瀏覽器大同小異)
1.一般以8K單位接受請求的內容，并解析其中的HTML構建DOM Tree(display:none的元素不會渲染)。CSS構建CSS Rule Tree。
2.DOM，CSS合并生成Render Tree。根據CSS2標準，tree中每個節點都成為box，具有width，height，margin，padding等屬性。
3.瀏覽器根據Render Tree可以知道網頁中的節點，各節點的關系或樣式或位置。最后通過顯卡繪制出來。

回流：Render Tree中一些元素尺寸布局等發生改變，頁面需要重新構建，頁面需要執行reflow操作。
重繪：Render Tree中一些元素外觀一類的屬性發生改變，不會影響布局，這會觸發repaint。

Dom Tree的每個節點都有reflow方法，一個節點的reflow可能觸發其他節點的reflow，reflow不可避免，難以預測。
1.將多次的樣式操作合并到一次操作，可以新建一個類選擇器，將這些樣式添加進來。
2.display:none不在Tree中，修改屬性不會觸發回流，可以先隱藏再操作，再顯示。
3.DocumentFragment緩存操作，這個還沒聽過。
4.position設置為absolute或fixed。這樣改變CSS會大大減少reflow。
5.不要使用table布局。
6.避免不必要的復雜CSS選擇器，尤其是后代選擇器！

/*css3動畫可以在css中編寫*/
/*1.設置*/
@keyframes animateName {
 /*animate here,0%可以設置動畫的初始狀態*/
 0%{
    transform: translateX(0px);
    transform: rotate(0deg);
    opacity: 1;
 }
 50%{
    /*...css code here*/
 }
 100%{
    /*...css code here*/
 }
}
/*2.使用*/
.someEle{
/*縮寫： 動畫名稱 執行時間 延遲時間*/
 animation: animateName 0.5s 1.5s;
/*全稱
animation-name: ;
animation-duration: ;
animation-delay: ;
用來保持動畫處于最后一幀的狀態
animation-fill-mode: forwards;
*/
}

(注意跨frame實例化對象不共享原型)

var a=[];
a.constructor===Array;
a instanceof Array ===true;

用法：(object instanceof constructor)
用來檢驗constructor.prototype是否存在于參數object的原型鏈上，用于檢測對象類型

1.工廠模式

抽象了創建對象的過程,解決了創建多個相似對象的問題

對于對象識別問題并沒有解決

   function createPerson(name,age) {
     var obj = {};
     obj.name=name;
     obj.age=age;
     obj.info=function() {
       // ...code here
     }
     return obj;
   }

2.原型

我們創建的每個函數都有prototype(原型)屬性,它是一個指針,指向一個對象(原型對象),它可以使所有對象實例共享屬性和方法

原型對象初始會默認取得constructor屬性,它是一個指針,指向原型屬性所在的函數

3.幾種繼承方法

原型鏈繼承：此時屬性有點像java中的靜態屬性,沒有個體之分

    function Super(name) {
         this.name=name;
       }
    Sub.prototype = new Super();
    Sub.prototype.constructor = Sub;

借用構造函數：可以將屬性變為實例屬性,但是函數復用捉襟見肘

   function Super(name) {
     this.name=name;
   }
   function Sub(name) {
     Super.call(this,name);
   }

組合繼承：使用原型實現方法復用,借用構造函數實現每個實例有自己的屬性

原型式繼承：對傳入的對象進行了淺復制,包含引用類型值得屬性會共享相應的值

   function object(o) {
     function F() {}
     F.prototype=o;
     return new F();
   }
   // ES5新增Object.create()方法規范了原型式繼承
   

寄生式繼承：組合繼承會兩次超類型構造函數,一次是創建子類型原型(new),一次是在子類型構造函數內部(call),最終實例上的屬性會屏蔽原型中的同名屬性,這是可以用寄生式繼承解決：通過借用構造函數繼承屬性,通過原型鏈的混成形式來繼承方法

   function inheritPrototype(subType,superType){
     var prototype = Object(subType.prototype); //創建對象
     prototype.constructor = subType;           //增強對象
     subType.prototype = prototype;             //指定對象
   }   
   function SuperType(name) {
         this.name=name;
       }
       function SubType(name,age) {
         Super.call(this,name);
         this.age = age
       }
       inheritPrototype(SubType,SuperType);
   // 這個例子的高效率體現在只調用了一次SuperType構造函數,同時原型鏈還能保持不變,可以正常的使用instanceof呵呵isPrototypeOf()

this對象是在運行時基于函數的執行環境綁定的,全局函數中為window,被作為某個對象的方法調用時,this等于那個對象

每個函數執行時都會自動取得兩個特殊變量：argumens和this,內部函數搜索這兩個變量時只會搜索到其活動對象位置,所以不可能直接訪問外部函數中的這兩個變量

把外部作用域中的this對象保存在一個閉包能夠訪問的變量里,就可以讓閉包訪問該對象了

    var obj = {
    name:"inner",
    getName:function() {
        // 這里的this指向obj
        // 保存this
        var that = this;
      return function() {
          // 這里的this不能指向外部函數中的this
          // console.log(this.name)
          console.log(that.name);
      }
    }
    }

箭頭函數的this指向當前上下文，而且使用bind/apply無效，在Vue中也可能會導致一些錯誤，React中有時則可以很方便的綁定組件中的this

1.創建一個新對象
2.將這個新對象的__proto__指向構造函數的prototype(即將新創建對象的隱式原型指向構造函數的顯示原型)。
3.將構造函數的this指向這個新創建的對象(即將this指向這個新對象)。
4.無返回值或非對象返回則返回這個對象，否則返回這個返回的新對象。

(可以理解為一種js注入，既然是注入就需要對輸入進行規范)
XSS方式：a.注入出現在URL中，然后又隨服務器返回到瀏覽器b.這個注入會存儲在服務端。
1.避免使用eval，new Function方法可接受字符串形式的js代碼。
2.cookie的httpOnly可以阻止js讀取cookie。
3.注意innerHTML,document.write方法。
4.對用戶輸入的數據進行HTML Entity編碼。

event.cancleBubble=true;這種相當于全局取消事件冒泡。

// 創建對象
var http = new XMLHttpRequest();
// 設置請求詳情
http.open(method, url, true);
// 發送
http.send();
// 通過事件判斷請求處理結果,處理返回的數據
http.onreadystatechange = function () {
    if (http.readyState == 4 && http.status == 200) {
            // http.responseText為返回的字符串
            // code here
        
        }
    }

window.onload=function(){...}和$(document).ready(function(){...})
1.js中需要等待圖片等所有元素加載完畢才會執行，jq中則是等待DOM結構繪制完成即可執行。
2.js這方法只能執行一個，jq編寫多個入口函數，多個都會執行。
3.如果需要等待所有元素加載完畢則使用$(window).load(function(){...}),這個相當于js中的window.onload。
4.一些問題：jq3版本js入口函數總是會先執行。jq2版本是正常順序，3版本好像在網頁資源很少的時候js的入口函數就會先執行。
5.jq可簡寫為$(function(){...})。

首先會執行Promise里的方法，方法里會有一個resolve和result，相當于兩個指針，執行到一個就會觸發相應的then或者是catch，then里是一個函數，接受的參數通過resolve傳入。

onmouseover:移動到子元素也會繼續觸發over。
onmouseenter:子元素不會影響。

1.避免全局查找，全局查找需要涉及作用域鏈上的查找。
2.避免使用with一句，with會創建自己的作用域，會增加執行代碼的作用域鏈的長度，with語句中的代碼的執行時間肯定會比外面的代碼的執行時間長。

function test(){
  with(document.body){
  alert(tagName);
  innerHtml="Hello";
  }
}
function test(){
  var body=document.body;
  alert(body.tagName);
  body.innerHtml="Hello";
  }
}

3.幾個算法復雜度的例子
O(1):var value=10;arr[1];
O(log n):二分查找，總的執行時間和值得數量有關，但并不一定要獲得的每個值。
O(n):遍歷一個數組中的元素。
O(n^2):每個值至少需要獲取n次，例如插入排序。
思路：可以將多次使用的一個復雜度高點的變量設為局部變量。
4.優化循環：
減值迭代：
優化循環體
簡化終止條件：因為每次循環都會計算終止條件，然后和他比較。
使用后測試循環（do-while）：

5.展開循環：循環次數不多可以展開，減少了終止條件的判斷。
思路：Duff裝置，將所有循環按每八個一起執行。

var iterations = Math.floor(values.length/8);
var leftover = values.length&8;//處理多余的幾個元素
var i=0;
/*用來處理多出來的幾個元素*/
if(leftover>0){
  do{
  process(values[i++]);
  }while(--leftover>0);
}
/*余下數量為8的倍數，不用擔心下標越界*/
do{
  process(values[i++]);
  //...以下省略其余7個循環體
}while(--iterations>0);
/*簡單的數組循環測試發現其實要慢很多*/

6.避免雙重解釋:Function(),eval();
7.原生方法快點，switch語句快點，位運算符快點，var語句可以合并，迭代可以arr[i++]，只用一條語句創建數組或對象。
8.減少js和DOM的交互，可以判斷event.target的nodeName來綁定事件，利用事件冒泡的機制減少循環綁定事件。
9.訪問集合元素時使用局部變量，這樣不用反復遍歷作用域鏈？所以稍微快點，過多使用hover也會影響性能

可以使用onfoucusin。

參考變量的引用，深拷貝可以先創建一個空容器，然后向其中賦值實現拷貝。

1.

-S?--save，?

-D?是?--save-dev

2.-save和save-dev可以省掉你手動修改package.json文件的步驟。

npm install module-name -save?自動把模塊和版本號添加到dependencies部分 ，一般是項目開發到上線都會用到的包

npm install module-name -save-dve?自動把模塊和版本號添加到devDependencies部分 ，一般是工具安裝的使用

服務器端:

app.all("*", function (req, res, next) {
  res.header("Access-Control-Allow-Origin", req.headers.origin); //需要顯示設置來源
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
  res.header("Access-Control-Allow-Credentials", true); //帶cookies7     res.header("Content-Type", "application/json;charset=utf-8");
  next();
});

客戶端使用axios:

 var params = new URLSearchParams();
      params.append("username", "");
      params.append("password", "");
      params.append("nickname", "");
      axios({
          method: "post",
          headers: {
            "Content-Type": "application/x-www-form-urlencoded; charset=utf-8",
          },
          url: "http://localhost:3000/users/register",
          data: params
        }).then().catch()

這樣設置，就可以在請求時加上cookie了