摘要：學(xué)習(xí)工作中遇到的問題，和容易忘記的零碎知識，部分為摘抄，如若侵權(quán)，請告知。將構(gòu)造函數(shù)的指向這個(gè)新創(chuàng)建的對象即將指向這個(gè)新對象。取消冒泡這種相當(dāng)于全局取消事件冒泡。前端性能的優(yōu)化避免全局查找，全局查找需要涉及作用域鏈上的查找。

學(xué)習(xí)工作中遇到的問題，和容易忘記的零碎知識，部分為摘抄，如若侵權(quán)，請告知。

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

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

 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單位接受請求的內(nèi)容，并解析其中的HTML構(gòu)建DOM Tree(display:none的元素不會渲染)。CSS構(gòu)建CSS Rule Tree。
2.DOM，CSS合并生成Render Tree。根據(jù)CSS2標(biāo)準(zhǔn)，tree中每個(gè)節(jié)點(diǎn)都成為box，具有width，height，margin，padding等屬性。
3.瀏覽器根據(jù)Render Tree可以知道網(wǎng)頁中的節(jié)點(diǎn)，各節(jié)點(diǎn)的關(guān)系或樣式或位置。最后通過顯卡繪制出來。

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

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

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

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

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

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

1.工廠模式

抽象了創(chuàng)建對象的過程,解決了創(chuàng)建多個(gè)相似對象的問題

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

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

2.原型

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

原型對象初始會默認(rèn)取得constructor屬性,它是一個(gè)指針,指向原型屬性所在的函數(shù)

3.幾種繼承方法

原型鏈繼承：此時(shí)屬性有點(diǎn)像java中的靜態(tài)屬性,沒有個(gè)體之分

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

借用構(gòu)造函數(shù)：可以將屬性變?yōu)閷?shí)例屬性,但是函數(shù)復(fù)用捉襟見肘

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

組合繼承：使用原型實(shí)現(xiàn)方法復(fù)用,借用構(gòu)造函數(shù)實(shí)現(xiàn)每個(gè)實(shí)例有自己的屬性

原型式繼承：對傳入的對象進(jìn)行了淺復(fù)制,包含引用類型值得屬性會共享相應(yīng)的值

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

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

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

this對象是在運(yùn)行時(shí)基于函數(shù)的執(zhí)行環(huán)境綁定的,全局函數(shù)中為window,被作為某個(gè)對象的方法調(diào)用時(shí),this等于那個(gè)對象

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

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

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

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

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

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

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

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

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

首先會執(zhí)行Promise里的方法，方法里會有一個(gè)resolve和result，相當(dāng)于兩個(gè)指針，執(zhí)行到一個(gè)就會觸發(fā)相應(yīng)的then或者是catch，then里是一個(gè)函數(shù)，接受的參數(shù)通過resolve傳入。

onmouseover:移動到子元素也會繼續(xù)觸發(fā)over。
onmouseenter:子元素不會影響。

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

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

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

5.展開循環(huán)：循環(huán)次數(shù)不多可以展開，減少了終止條件的判斷。
思路：Duff裝置，將所有循環(huán)按每八個(gè)一起執(zhí)行。

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

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

可以使用onfoucusin。

參考變量的引用，深拷貝可以先創(chuàng)建一個(gè)空容器，然后向其中賦值實(shí)現(xiàn)拷貝。

1.

-S?--save，?

-D?是?--save-dev

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

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

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

服務(wù)器端:

app.all("*", function (req, res, next) {
  res.header("Access-Control-Allow-Origin", req.headers.origin); //需要顯示設(shè)置來源
  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()

這樣設(shè)置，就可以在請求時(shí)加上cookie了