一點關於初學前端的總結

時間 2019-11-17

標籤一點 1點關於初學前端總結简体版

原文原文鏈接

【概念性的基本都是度娘等方式找到的O(∩_∩)O~，可能會有一些差錯】css

語法糖（Syntactic sugar），也譯爲糖衣語法，是由英國計算機科學家彼得·約翰·蘭達（Peter J. Landin）發明的一個術語，指計算機語言中添加的某種語法，這種語法對語
言的功能並無影響，可是更方便程序員使用。一般來講使用語法糖可以增長程序的可讀性，從而減小程序代碼出錯的機會。html

promise:
異步執行的同步代碼前端

一、promise是一個構造函數python

二、參數是一個回調回調中有2個參數一個是resolve 一個是reject程序員

三、當異步執行完畢的時候若是成功則調用resolve 經過.then裏面的第一個參數來接受成功的回調若是失敗則調用reject 經過.then裏面的第二個參數來接受失敗
的回調es6

如何解決多個異步同步執行web

var p1 = new Promise(function(resolve){
        setTimeout(function() {
            console.log('1');
            resolve();
        },4000)    
})

 

function p2(){
    return new Promise(function(resolve){
        setTimeout(function() {
        console.log('2')
        resolve()
        },3000)
    })
}

function p3(){
    return new Promise(function(resolve){
        setTimeout(function() {
            console.log('3')
            resolve()
        },2000)
    })
}

function p4(){
    return new Promise(function(resolve){
        setTimeout(function() {
            console.log('4')
            resolve();
        },1000)
    })
}


p1.then(function(){
    return p2();
}).then(function(){
    return p3();
}).then(function(){
    return p4();
})

封裝promiseajax

function PromiseFn(cb){
    //狀態值
    this.status = "pending";
    //參數
    this.msg = "";
    //回調
    let _this = this;
    cb(function(res){
        _this.status = "resolve";
        _this.msg = res;
    },function(){
        _this.status = "reject";
    })
    return this;
}


PromiseFn.prototype = {
    then(){
        var cb = arguments;
        var _this = this;
        var timer = null;
        timer = setInterval(function(){
            if(_this.status == "resolve"){
                cb[0](_this.msg);
                clearInterval(timer)
            }else if(_this.status == "reject"){
                cb[1]()
                clearInterval(timer)
            }
        }, 500)
    }
}

new PromiseFn(function(resolve){
    setTimeout(function(){
        console.log('1');
        resolve("123");
    },2000)
})
.then(function(res){
    console.log(res)
})

三次握手四次揮手：https://m.pythontab.com/article/1323編程

子類選擇器和後代選擇器的區別和性能的優劣：json

>做用於元素的第一代後代，空格做用於元素的全部後代。
子選擇器的效率更高點。

用僞類選擇器設計一個麪包屑導航：

<style>
    li{
        list-style:none;
        float:left;
        margin-right:5px;
    }
    #box li a{
        display:block;
        position:relative;
        text-indent:3px;
        height:20px;
        padding:0 5px 0 6px;
        font-size:12px;
        line-height:20px;
        background:#3498db;
        color:#fff;
    }
    #box li a:after{
        content: ""; 
        /* 該屬性用於定義元素以前或以後放置的生成內容。默認地，這每每是行內內容，不過該內容建立的框類型能夠用屬性 display 控制。 */
        border-top:10px solid pink;
        border-bottom:10px solid pink;
        border-left:10px solid #3498db;
        position:absolute;
        top:0;
        right:-10px;
        z-index:4;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        /* border-left: 10px solid #3498db; */
    }
    #box li a:before{
        content:"";
        border-top:10px solid pink;
        border-bottom:10px solid pink;
        border-left:10px solid #fff;
        position:absolute;
        left:0;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
    }
    #box li:first-child  a{
        border-top-left-radius: 2px; 
        border-bottom-left-radius: 2px;
    }
    #box ul li:first-child a:before { 
        display: none; 
        
    }
    #box ul li:last-child a:after { 
        display: none;         
    }
    #box li a:hover{
        background:salmon;
    }
    #box li a:hover:after{
        border-left-color:salmon;
    }

    </style>
</head>
<body>
    <div id="box">
        <ul>
            <li><a href="#">首頁</a></li>
            <li><a href="#">首頁1</a></li>
            <li><a href="#">首頁2</a></li>
            <li><a href="#">首頁3</a></li>
            <li><a href="#">首頁4</a></li>
        </ul>
    </div>
</body>

css預編譯：less語言

什麼是css預處理器？優勢是什麼？

css預處理器用一種專門的編程語言，進行web頁面樣式設計，而後在編譯成正常的css文件，以供項目使用。在css中使用變量、簡單的邏輯程序、函數。可讓你的css更加簡潔、適應性更強、可讀性更佳、更易於代碼的維護。

JS預編譯:進行函數和變量的聲明提高，先進行空間分配，執行時進行賦值

const arr = [] arr.push(6)會不會報錯，爲何？

不會

js 動畫和css動畫的區別：

代碼複雜度，js 動畫代碼相對複雜一些
動畫運行時，對動畫的控制程度上，js 可以讓動畫，暫停，取消，終止，css動畫不能添加事件
動畫性能看，js 動畫多了一個js 解析的過程，性能不如 css 動畫好

深拷貝淺拷貝：
深拷貝和淺拷貝是隻針對Object和Array這樣的複雜類型的
也就是說a和b指向了同一塊內存，因此修改其中任意的值，另外一個值都會隨之變化，這就是淺拷貝
淺拷貝，」Object.assign() 方法用於將全部可枚舉的屬性的值從一個或多個源對象複製到目標對象。它將返回目標對象
深拷貝，JSON.parse()和JSON.stringify()給了咱們一個基本的解決辦法。可是函數不能被正確處理

事件流：

當一個HTML元素產生一個事件時,該事件會在元素節點與根節點之間的路徑傳播，路徑所通過的節點都會收到該事件，這個傳播的過程叫作DOM事件流；

元素觸發事件時，事件的傳播過程稱爲事件流，過程分爲捕獲和冒泡兩種
冒泡事件：微軟提出的事件由子元素傳遞到父元素的過程，叫作冒泡
捕獲事件：網景提出的事件由父元素到子元素傳遞的過程，叫作事件捕獲

事件處理機制：事件冒泡事件處理事件捕獲事件默認

jsonp 發起一次請求以後不能再發起，再次調用須要再建立一個script標籤

es6定義變量的方式有6種：function var class let const import

ajax 同步發起請求接收數據不用寫onreadyststechange事件直接寫ajax.responseText

垂直居中的幾種方法
1）margin:0 auto
2 ) position 定位
父元素設置爲：position: relative;
子元素設置爲：position: absolute;
距上50%，據左50%，而後減去元素自身寬度的距離就能夠實現
3）position transform
transform: translate(-50%,-50%); 【待補充】

4 ) flex佈局
5） table-cell佈局

父元素設置相對定位，子元素設置絕對定位，top、bottom、left和right 均設置爲0，*margin設置爲auto

僞數組轉成真數組方法
1）使用Array.prototype.slice.call();
2）使用ES6中Array.from方法;
3）能夠聲明一個空數組，經過遍歷僞數組把他們從新添加到新的數組中
4）使用原型繼承
aLi.__proto__ = Array.prototype
var aLi = document.querySelectorAll('li');
console.log(aLi.constructor === Array) //false4
aLi.__proto__ = Array.prototype;
console.log(aLi.constructor === Array) //true

簡述一下src與href的區別

href 是指向網絡資源所在位置，創建和當前元素（錨點）或當前文檔（連接）之間的連接，用於超連接。

src是指向外部資源的位置，指向的內容將會嵌入到文檔中當前標籤所在位置；在請求src資源時會將其指向的資源下載並應用到文檔內，例如js腳本，img圖片和frame等元素。當瀏覽器解析到該元素時，會暫停其餘資源的下載和處理，直到將該資源加載、編譯、執行完畢，圖片和框架等元素也如此，相似於將所指向資源嵌入當前標籤內。這也是爲何將js腳本放在底部而不是頭部。

px和em的區別
相同點：px和em都是長度單位；

異同點：px的值是固定的，指定是多少就是多少，計算比較容易。em得值不是固定的，而且em會繼承父級元素的字體大小。
瀏覽器的默認字體高都是16px。因此未經調整的瀏覽器都符合: 1em=16px。那麼12px=0.75em, 10px=0.625em。

rem是相對於html爲基準的單位，通常會將html設置爲font-sieze：100px,如下的font-size值設置爲/100後的值就能夠了

瀏覽器的內核分別是什麼?
IE: trident內核 360瀏覽器遨遊一、2 獵豹。。。。 -ms-
Firefox：gecko內核 -moz-
Safari：webkit內核（遨遊3.x爲IE與Webkit雙核） -webkit-
Opera：之前是presto內核，Opera現已改用Google Chrome的Blink內核 -o-
Chrome：Blink(基於webkit，Google與Opera Software共同開發)

優雅降級、漸進加強：
優雅降級是從複雜的現狀開始，並試圖減小用戶的體驗供給，而漸進加強是從很是基礎的可以起做用的版本開始不斷擴充，以適應將來環境的需求，漸進意味着往前看，降級意味
着日後看；

BFC：
塊級格式化上下文，是一個獨立的渲染區，規定了內部的塊如何佈局，而且與外部不相關，是web頁面中盒模型佈局的css渲染模式，屬於常規文檔流；
做用：自適應兩檔佈局，清楚內部浮動，防止margin上下重疊；

instanceof 運算符是用來在運行時指出對象是不是特定類的一個實例，它返回的是一個布爾值

http狀態碼：
1開頭表示信息類：接收到請求並繼續處理；
2開頭表示響應類：動做被成功接收理解和接受；
3開頭表示重定向類：爲了完成指定動做，必須接收進一步的處理；
4開頭表示客戶端錯誤：請求包含語法錯誤或不能正確執行；
5開頭表示服務器錯誤：服務器不能正確執行一個正確的請求；

jq jsonp ajax是兩種技術；前端解決跨域的方式jsonp；後端能夠設置請求頭或者正向代理反向代理等

fetch能夠在前端解決跨域可是不能拿回請求

js的垃圾回收機制是什麼原理（js）!!

找出再也不使用的變量，而後釋放掉其佔用的內存，而且垃圾收集器會按照固定的時間間隔，週期性地執行這一操做；

垃圾回收策略：標記清除(較爲經常使用)和引用計數。

標記清除：定義和用法：當變量進入環境時，將變量標記"進入環境"，當變量離開環境時，標記爲："離開環境"。某一個時刻，垃圾回收器會過濾掉環境中的變量，以及被環境變量引用的變量，剩下的就是被視爲準備回收的變量。

到目前爲止，IE、Firefox、Opera、Chrome、Safari的js實現使用的都是標記清除的垃圾回收策略或相似的策略，只不過垃圾收集的時間間隔互不相同。

引用計數：
定義和用法：引用計數是跟蹤記錄每一個值被引用的次數。
基本原理：就是變量的引用次數，被引用一次則加1，當這個引用計數爲0時，被視爲準備回收的對象。

常常遇到的解決js兼容性問題列舉至少三個（js）!
事件 e = e || window.event
事件委託 e.target || e.srcElement
添加事件監聽 addEventListener || attachEvent
鍵盤事件 e.keyCode || e.which
阻止冒泡 e.stopPropagation || e.cancelBubble
得到非行間樣式 getComputedStyle(div1,null)[‘color’] ||div1.currentStyle[‘color’]
document.documentElement || document.body

你知道哪些針對jQuery的優化方法

(1)基於Class的選擇性的性能相對於Id選擇器開銷很大，由於需遍歷全部DOM元素。

(2)頻繁操做的DOM，先緩存起來再操做。用Jquery的鏈式調用更好。
好比：var str=$("a").attr("href");
for (var i = size; i < arr.length; i++) {}

(3)for 循環每一次循環都查找了數組 (arr) 的.length 屬性，在開始循環的時候設置一個變量來存儲這個數字，可讓循環跑得更快：
for (var i = size, length = arr.length; i < length; i++) {}

網頁加載速度優化的方法：減小請求，整合資源（講js代碼和css放到一個公共的文件中供多個頁面使用），

箭頭函數和普通函數的區別

匿名函數的this指向不能用bind / call之類的去改變

(1).this的區別

緣由：箭頭函數不會自動綁定局部變量，如this，arguments，super(ES6)，new.target(ES6)等，因此箭頭函數沒有它本身的this值，箭頭函數內的this值繼承自外圍做用域。在
箭頭函數中調用 this 時，僅僅是簡單的沿着做用域鏈向上尋找，找到最近的一個 this 拿來使用

[--- 箭頭函數中的this指向問題

定義一個函數時是不知道this指向的，只能在函數調用時才能肯定；箭頭函數自己的this是不指向任何，會沿着做用域鏈向上查找，最接近的一個普通函數中的this就是指向；
匿名函數和閉包中this指向window ----]

(2).實際上箭頭函數中並不僅是 this 和普通函數有所不一樣，箭頭函數中沒有任何像 this 這樣自動綁定的局部變量，包括：this，arguments，super(ES6)，new.target(ES6)…
…在普通函數中，會自動綁定上的各類局部變量，箭頭函數都是十分單純的沿着做用域鏈向上尋找……

AMD和CMD的區別
【AMD：異步模塊化定義，是一個模塊化開發的規範，AMD在定義模塊的時候要先聲明其依賴的模塊。】
共同點：都是一種框架在推廣的過程當中對模塊定義的規範產出；並且他們都是異步加載模塊。
CMD 推崇依賴就近,是延遲執行。AMD 推崇依賴前置,是提早執行

js/css等優化

js方面(事件委託：節約內存，提升性能；for循環中將length屬性放到外面，這樣就只作一次查找)

css（精靈圖：多張圖片整合到一張圖上，減小http請求的次數）