前端學習札記

時間 2019-12-06

原文原文鏈接

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

HTML篇

CSS篇

box-sizing：

設置盒子模型爲標準模式或者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盒子模型會改變css

四個邊框陰影

邊框陰影也能夠設置透明度，這樣看起來會很美觀，並且還會解決沒透明度會出現陰影和背景色同樣的狀況。前端

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能夠知道網頁中的節點，各節點的關係或樣式或位置。最後經過顯卡繪製出來。java

迴流(reflow)和重繪(repaint)

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

減小reflow

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

css3動畫

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

JavaScript篇

判斷變量是否是數組：

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

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

instanceof

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

javascript繼承/原型/工廠模式

1.工廠模式ajax

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

對於對象識別問題並無解決算法

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做用域。

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

new的意思

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

typeof

避免XSS

(能夠理解爲一種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;這種至關於全局取消事件冒泡。

ajax實現的過程(原生的js)

// 建立對象
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

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

onmouseover/enter

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也會影響性能

onfoucus沒有冒泡

可使用onfoucusin。

淺拷貝深拷貝

參考變量的引用，深拷貝能夠先建立一個空容器，而後向其中賦值實現拷貝。

node.js

npm -S和npm -D

-S --save，
-D 是 --save-dev

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

npm install module-name -save 自動把模塊和版本號添加到dependencies部分，通常是項目開發到上線都會用到的包
npm install module-name -save-dve 自動把模塊和版本號添加到devDependencies部分，通常是工具安裝的使用

react跨域cookie

服務器端:

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了