前端知識部分整理

web標準的理解

• web標準是由網頁有結構，表現，行爲構成！
• 結構的標準
• XML+XHTML到目前的html5都有差別
• 表現的標準行爲
  • css2標準到如今css3的新屬性，兼容
• dom+javascript

瀏覽器的內核差別

• 目前市場上基本有4大內核

• Trident 典型表明IE瀏覽器，網頁的標準兼容性很差

• Gecko 典型表明火狐瀏覽器 功能強大

• Webkit 典型表明谷歌瀏覽器，基本安卓和蘋果手機上都是這個

• Presto Opera瀏覽器，這個在市場上份額不多，可是linux系統上很完美

hack

• 針對全部IE：
• 針對IE9及如下版本：
• 咱們能夠給瀏覽器每一個版本的寫上css的類，而後經過類來在特定的瀏覽器版本生效
• -例如 .ie7 .content{}

css佈局

• 咱們能夠把結構和表現分離開，
• 便於咱們後期維護

盒子模型

• 盒子模型有4個屬性
  • 外邊距 margin
  • 內邊距 padding
  • 邊框 border
  • 內容部分 content
• IE盒子
  • 內容content的width包括了內邊距和邊框

選擇器的優先級

• ！important 這個最高級

• color:blue !important;

• style 優先級第二

• style="color:red"

• id 優先級第三

• #color{color:red}

• :nth-child(3)選擇符 優先級第四

• p:nth-child(3)

• 類選擇符 優先級第五

• .color{color:red}

• 標籤選擇符 優先級第六

• div{color:red}

• 通配符選擇符 優先級第七

• *{margin:0;padding:0}

html5

• html5新增長的標籤，很語義化

  • header
  • footer
  • nav
  • section
  • aside 不重要
  • atrical 不重要

• 重要的標籤

  • video 視頻
  • audio 音樂
  • canvas 畫布

• 新增長的表單新屬性

• placehplder 提示

• required 必填

• tel 電話

• date 日期

• number 數字

• color 顏色

css3

• 樣式

• border-radius 圓角

• box-shadow 陰影

• background-size 北京圖片尺寸

• text-shadow 文本陰影

• linear-gradient 線性漸變

• 動畫

transform 變形

• 單位deg

• rotate(x) 旋轉

  • 參數x必須是以deg結尾的角度數或0，可爲負數表示反向。

• scale 縮放

  • 單位是數字

  • 元素x和y方向均縮放a倍

  • transform: scale(a);

  • 元素x方向縮放a倍，y方向不變

  • transform: scaleX(a);

  -x方向不變,元素y方向縮放b倍

  • transform: scaleY(b);

• translate 平移

  • 單位px

  • 元素x方向位移a，y方向位移b

  • transform: translate(a, b);

  • 元素x方向位移a，y方向不變

  • transform: translateX(a);

  • 元素y方向位移b，x方向不變

  • transform: translateY(b);

• skew() 傾斜

• 單位 deg

  • 元素x方向傾斜角度a
  • transform:skew(a,b)

####transition 過渡

• transition-property

  • 做用與css樣式 也能夠all

• transition-duration

  • 過渡運行總時間
  • 10s

• transition-delay

  • 過渡推遲多少秒執行

animation 動畫

• animation-name

• 動畫名字

• animation-duration

• 動畫運行總時間

• animation-delay

• 動畫延遲多長時間

• animation-iteration-count

• 動畫執行次數，也能夠循環執行 infinite

• 定義一個動畫 ,最後動畫完成必定要100%

• @-webkit-keyframes 動畫名字{0%{}50%{}100%{}}

flex佈局

• display: flex;

• flex

  • 1 佔當前比例的1份
  • 2 佔當前比例的2份

• flex-direction 項目的排列方向

  • row 從下往上排
  • row-reverse 從上往下排
  • column 從左往右排
  • column-reverse 從右往左排

• flex-wrap 決定換不換行

  • wrap 換行
  • nowrap 不換行

• justify-content 對齊方式

  • center 橫向居中對齊
  • flex-start 左邊對齊
  • flex-end 右邊對齊

• align-items 對齊方式

  • center 縱向對齊方式
  • flex-start 上邊對齊
  • flex-end 下邊對齊

js數據類型

• null 不存在，連聲明變量都沒有
• undefined 未定義，聲明變量了卻沒有值
• number 數字
• string 字符串
• boolean 布爾
• object 對象

js運算

• 基本運算符
• • 加
• • 減
• • 乘
• / 除
• = 賦值
• ++ 累加
• -- 累減
• % 求餘
• += 每次賦值累加
• -= 每次賦值累減

js對象

• 定義一個對象
• let obj={}

js 原型

• 每個函數上都有一個屬性叫prototype
• prototype

js 閉包

• 函數執行都會造成一個私有做用域，保護裏面的私有變量不受外界干擾,這種保護叫閉包

var a=10; function fe(){ var a=666; //私有變量 console.log(a); } a=10000; //全局 fe() //666 私有的變量受保護，沒有被全局影響 console.log(a) //10000

繼承

• es5 繼承就是修改原型鏈

• es6 a繼承b的一些屬性和方法

• class a extends b{ constructor(props){ //調用實現父類的構造函數 super(props); } }

做用域

• 做用就是保護變量
• {}

原型鏈

• _proto_是任何對象都有的屬性

經常使用事件

• onclick

• 點擊事件

• onmouseover

• 鼠標滑進

• onmouseoute

• 鼠標劃出

• onload

• 頁面加載完成

• onkeydown

• 鍵盤按下

• onkeyup

• 鍵盤彈起

• onfocus

• 獲取焦點

• onblur

• 失去焦點

• onchange

• 用戶改變input輸入或者select下拉框改變

• oninput

• 文本框中輸入就執行

• ondblclick

• 雙擊

• onscroll

• 滾動

• onresize

• 瀏覽器的窗口重置大小就發生

• onselect

• 文本被選中

事件對象

• onclick(event)

• 觸發事件的元素節點

• event.target

• 阻止當前事件 e.cancelBubble=true;

• event.stopPropagation()

• 阻止默認行爲

• e.preventDefault()

正則表達式

• RegExp

• 匹配三個數字

• new RegExp("/\d{3}$/")

• search()

• 檢索字符串開始的位置

-match()

• value值.match(正則表達式)

• test()

• 正則表達式.test(value值)

json

• json格式

• {}，{'':[{},{}]},[{},{}]等

• 將字符串轉爲json對象

• JSON.parse()

• 將json對象轉爲字符串

• JSON.stringify()

DOM操做

• 建立一個標籤

• document.createElement('div')

• 獲取元素 -根據id或者class獲取元素

  • document.querySelector("#id"或者".class")
  • 根據id獲取元素
    • document.getElementById()
  • 根據class名字獲取
    • document.getElementsByClassName('class')
  • 根據標籤獲取
    • document.getElementsByTagName('table')

• 獲取父元素

• ele.parentNode

• 獲取子元素

• ele.children

• 兼容寫法

• var ele.firstElementChild||ele.children[0];

• 獲取當前元素的第一個子元素

• ele.firstChild

• 獲取當前元素的最後一個子元素

  • ele.firstElementChild

• 頭部添加子元素

  • appendChild()

• 刪除子元素

  • removeChild()

• 屬性操做

• 判斷有沒有這個類

• ele.hasAttribute('class')

• 移除屬性

• ele.removeAttribte('class')

-獲取屬性

• ele.getAttribte('class')

-設置屬性

• ele.setAttribute('class','值')

• 設置值

• innerHTML 內部html

• innerText 內部文本

• outerHTML 外部HTML

• outerText 外部文本

BOM 瀏覽器對象

• window.history.go(-1) 返回上一個窗口頁面

• setInterval 循環執行計時器

• clearInterval 暫停執行

• setTimeout 定時執行一次

• clearTimeout 暫停執行

• location.href 跳轉頁面

跨域

• 同源策略

• 域名

• 協議

• 端口

• 違法上面的一個不一樣，就叫跨域

• jsonp

• 動態建立script請求，src寫連接

• jquery的$ajax

  • dataType:'jsonp'

• fetch ，跨域和不跨域都不用設置

let myHeaders = new Headers({ 'Access-Control-Allow-Origin': '*', 'Content-Type': 'text/plain' }); fetch(url, { method: 'GET', headers: myHeaders, mode: 'cors' }) .then((res) => { // TODO })

異步加載

動態建立標籤,而後插到body結束標籤後

(function() { var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = 'http://yourdomain.com/script.js'; var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x); })();

mvvm框架

• vue.js
• vue-router 路由
• vuex 狀態管理

mac框架

• react
• angular

響應式

• all表明全部設備
• screen 電腦顯示器
• handled 便攜設備
• media all and(min-width:1200px)

自動化構建工具

• webpack
• 之前老版的grunt,gulp沒有必要細琢磨

http狀態碼

• 200:'ok', //成功
• 206:'', //部分類容
• 301:'', //永久重定向
• 302:'', //臨時重定向
• 304:'', //緩存發現
• 400:'', //客戶端請求錯誤
• 401:'', // 未受權
• 403:'', // 登陸以後，無權訪問
• 404:'', //資源沒有找到
• 500:'', //服務器端內部錯誤
• 503:'' //服務暫時不可用

html5本地存儲

• localStorage 永久化本地存儲，只要不主動刪除 就會一直存在
• sessionStoage 會話級存儲，關閉瀏覽器客戶端，銷燬存儲

設置存儲

• localStorage.setItem('存儲名字', 存儲類容);
  • 將對象轉爲string再存儲
  • localStorage.setItem('user',JSON.stringify({username:'老王'，ID:1}));
  • 獲取存儲
    • localStorage.getItem('user');
• 根據指定的key刪除一個元素清空存儲 localStoage.clear();
  • localStorage.removeItem('username');

web安全

• XSS
• CSRF 跨站僞造

可維護性

• 重複寫的代碼封裝成一個，重複的功能模塊化
• 結構樣式必須分離開，整潔乾淨
• 重複操做構建工具去作
• 代碼風格一致，可讀性好，別人接手絕不費力

易用性

• 我的推崇頁面簡潔，操做簡單，直觀可見，重點突出
• 一種主調色彩，搭配少了的輔助相近色，合理佈局，輕易突出須要表現的東西

職業生涯、快速學習能力

• 學習職業生涯不是天天重複你絕不費力的事情，

• 學會溝通，明確描述本身的問題，並大膽說出本身解決的思路， 調試現象，溝通和請教的時候態度謙虛點不是錯，這是基本禮貌，學會 聆聽別人的見解。

• 學會梳理本身技術結構，前端不止頁面，後端也屬於前端的一種技術，說 這句話不過度，前端愈來愈複雜，如今應該是全端了，後端不在侷限於後端人員 學會接受市場變化，多學習對你職業發展有利的技術

• 學習應該是一種習慣，自主不討厭的進行，這不該該是一種 逼迫，應該是一種習慣，不該該有任何埋怨，由於學習是提升你更多了一種認知 ，工做不是應付完成就行，多思考性能優化問題，多重方案的優缺點

css佈局

• 左邊100px,右邊100px，中間自適應
• flex佈局
• flex:0 0 100px

.content{ display: flex; height: 20px; border:1px solid #eeeeee; } .left{ width: 100px; height: 20px; flex-grow: 0; flex-shrink: 0; flex-basis: 100px; background: red; } .center{ flex: 1; } .right{ width: 100px; height: 20px; flex-grow: 0; flex-shrink: 0; flex-basis: 100px; background: red; }

• calc 計算

.content{ width: 100%; height: 20px; border:1px solid #eeeeee; } .content:after{ display: block; height: 0; clear: both; } .left{ width: 100px; height: 20px; float: left; background: red; } .center{ width:-webkit-calc(100% - 200px); width:-moz-calc(100% - 200px); width:calc(100% - 200px); height: 20px; float: left; } .right{ width: 100px; height: 20px; float: left; background: red; }

• 浮動

<div style="width:100%; margin:0 auto;"> <div style="width:200px; float:right; background-color:#960">這是右側的內容 固定寬度</div> <div style="width:150px; float:left; background:#6FF">這是左側的內容 固定寬度</div> <div style="margin-left:150px;margin-right:200px; background-color:#9F3">中間內容，自適應寬度</div> </div>

• 定位

.left,.right{ position: absolute; top:0; width: 200px; height: 20px; background: red; } .left{ left: 0; } .center{ margin: 0 200px; width: 100%; } .right{ right: 0; }

左側菜單欄佔300px，右側內容能夠根據瀏覽器自適應

• 解決思路如今提供兩個
• flex 和calc

.content{ width: 100%; height: 20px; border:1px solid #eeeeee; display: flex; } .left{ width:100px; height: 20px; flex: 0 0 100px; background: red; } .right{ flex:1; }

CSS選擇器又哪些？有哪些新特性？有哪些僞類？

• id選擇器 (#myid)

• 類選擇器 (.className)

• 標籤選擇器 (div)

• 相鄰選擇器 (h1+p)

• 子選擇器 (ul>li)

• 後代選擇器 (li a)

• 通配符選擇器 (*)

• 屬性選擇器 (input[type="text"])

• 僞類選擇器 (a:hover,li:nth-child())

• 僞類

  • :active

  • 鼠標點擊，增長特效，鼠標鬆開，特效消失，多用在按鈕上

  • :hover

  • 鼠標劃入標籤，增長特效，鼠標鬆開，特效消失

  • :focus

  • 咱們點擊元素後想一直擁有某些樣式，多用於input標籤有焦點時候

  • :first-child

  • 對元素第一個子元素添加樣式

  • :nth-child(index)

  • 對元素第幾個添加樣式

  • :before和after

  • 多用於消除元素浮動

清除浮動

• clear:both

• 結尾處加空div標籤設置clear:both

• 父級標籤訂義僞類:after給樣式來消除

.clearfloat:after{ display:block; clear:both; content:""; visibility:hidden; height:0; } //針對IE .clearfloat{ zoom:1 }

• 父級div設置overflow:hidden

• 父級div定義display:table

div裏面圖片設置垂直居中

• 首先設置div爲table-cell

div{ width:100%; height:100%: position: fixed; display:table-cell; vertical-align:center; } img{ width:100px; height:100px }

• 第二種定位設置

div { width:100%; height:500px; position:relative; } img{ width:100px; height:100px; position:absolute; top:50%; left:50%; margin-top:-50px; margin-left:-50%; }

• 第三中transform: translate(-50%.-50%)

.div{ width:100%; height:100%; border:1px solid black; position: fixed; background-color: rgba(0,0,0,0.5); } img{ position:absolute; width:50px; height:50px; top:50%; left:50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); background:#22B14C; }

2級DOM

• addEventListener():能夠爲元素添加多個事件處理程序，觸發時會按照添加順序依次調用。
• removeEventListener() 移除事件

##DOM事件捕獲和冒泡的具體流程

• 事件捕獲階段

  • 事件從最上一級標籤開始往下找，直到捕獲到事件目標（target）

• 事件冒泡階段

  • 事件從事件目標（target）開始，往上冒泡到頁面最上一級標籤

• 阻止冒泡

• IE下設置cancelBubble = true；

• event.stopPropagation()

• 通常也就點擊事件冒泡多一點

Event對象的常見應用場景

• 一個完整的事件系統，通常存在3個角色

  • 事件對象 用來儲存事件狀態
  • 事件源對象 當前事件在操做的對象
  • 事件監聽 當一個事件源生成一個事件對象時，它會調用相應的回調函數進行操做

• event.target 當前事件目標元素

• preventDefault() 不要執行與事件關聯的默認動做

• stopPropagation() 阻止事件冒泡

• 獲取event對象兼容寫法

• event || (event = window.event);

• 獲取target兼容寫法

• event.target || event.srcElement

• 阻止瀏覽器默認行爲兼容寫法

• event.preventDefault ? event.preventDefault() : (event.returnValue = false);

• 阻止冒泡寫法

• event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true);

事件委託

• 事件委託就是利用事件冒泡，指定一個事件處理程序，管理 某一類型相同的全部事件

// 利用事件委託 比一個一個綁定事件 性能提升多倍 var oUl = document.getElementById('oUl'); var list = oUl.getElementsByTagName('li'); // 利用事件委託 比一個一個綁定事件 性能提升多倍 oUl.onclick = function (e) { e = e || window.event; var tar = e.target || e.srcElement; //tar 當前節點 <li></li> //tar.tagName當前標籤名字li //toUpperCase()轉爲大寫 if(tar.tagName.toUpperCase() === 'LI'){ console.log(tar.innerHTML); } }

JS中常遇到的瀏覽器兼容問題

• 網頁可見區域寬和高

• document.body.clientWidth||document.docuemntElement.clientWidth;

• document.body.clientHeight||document.docuemntElement.clientHeight;

• event事件對象

document.onclick=function(ev){//兼容寫法； var e=ev||window.event; var mouseX=e.clientX;//鼠標X軸的座標 var mouseY=e.clientY;//鼠標Y軸的座標 }

• event中的target

document.onmouseover=function(e){ var e=e||window.event; var Target=e.target||e.srcElement;//獲取target的兼容寫法，後面的爲IE var from=e.relatedTarget||e.formElement;//鼠標來的地方，一樣後面的爲IE... var to=e.relatedTarget||e.toElement;//鼠標去的地方 }

js建立對象三種方式

• var obj={}
• var obj=new 函數名()
• var obj=new Object()

js 繼承的幾種方式

• 原型鏈繼承 ，私有，公有都繼承
  • 將父類實例化後綁定在子類的原型上
  • 而後實例化子類，能夠調用父類的方法

function Parent(name) { this.name = name } Parent.prototype.home = '北京'; function Child() { this.age = 8; } //將父類的實例綁定在子類的原型上 Child.prototype = new Parent('aa'); //實例化子類 let child = new Child(); //這時候繼承父類的公有私有屬性 console.log(child.home+child.name); // 結果 北京 + aa

• 構造函數繼承 ，私有繼承，公有不繼承
  • 在子類裏面，call改變父類this

function Parent(name) { this.name = name } //父類的公有屬性 Parent.prototype.home = '北京'; function Child(name) { this.age = 8; Parent.call(this,...arguments); } let child = new Child('hello'); console.log(child.home+child.name); //結果是 undefined +hello

• 組合繼承 公有繼承，私有不繼承

function Parent(name) { this.name = name } Parent.prototype.home = '北京'; function Child() { this.age = 8; } Child.prototype = Object.create(Parent.prototype); let child = new Child(); //這時候繼承只繼承父類的公有屬性 父類的私有屬性沒有繼承 console.log(child.home+child.name); // 結果 北京 + indefined

• es6繼承

class Person { //控制器 constructor(name,age){ this.name=name; this.age=age; } eat(){ console.log("吃飯"); } } //關鍵字 extends 公私有都會繼承 class Girl extends Person{ constructor(name,age){ super(name,age); //默認調用父類，而且this就是girl實例 } } let g=new Girl('aa',18); console.log(g.name,g.age); g.eat(); //結果aa 18 // 吃飯

js合併兩個對象

• Object.assign

var o1 = { a: 1 }; var o2 = { b: 2 }; var obj = Object.assign(o1, o2);

• jquery合併兩個對象
• $extend

a = {'a': 1}; b = {'b': 1}; c = $.extend(a, b)

• 事件綁定和普通事件的區別

  • 普通添加事件的方法不支持添加多個事件，最下面的事件會覆蓋上面的，而事件綁定（addEventListener）方式添加事件能夠添加多個。

• 高性能動態向一個div中插入1000個div標籤

• document.createdocumentfragment 文檔碎片

• 一次性拼接完字符串，最後一次插入節點，減小dom操做

//先建立文檔碎片 var oFragmeng = document.createDocumentFragment(); for(var i=0;i<1000;i++) { var op = document.createElement("div"); var oText = document.createTextNode(i); op.appendChild(oText); //先附加在文檔碎片中 oFragmeng.appendChild(op); } //最後一次性添加到document中 document.body.appendChild(oFragmeng);

jquery.extend , jquery.fn.extend的區別

• jquery.extend 爲jquery的擴展類
• jquery.fn.extend 給jquery對象添加方法
• 大部分插件都用jquery.fn.extend

jquery中的bind，live，delegate，on區別

• bind() 是直接綁定在元素上，若是沒有設置阻止冒泡stopPropagatio 頗有可能他全部父元素，祖宗元素都會受影響

• unbind() 解除綁定

• live() 經過冒泡方式綁定到元素上

• 基本淘汰了，阻止冒泡都無論用

• on() 這個最好

• off() 解除綁定

document.ready和document.load和$(function(){})有什麼區別

• ready比load先執行

• ready事件在DOM結構繪製完成以後就繪執行。這樣能確保就算有大量的媒體文件沒加載出來，JS代碼同樣能夠執行

• load事件必須等到網頁中全部內容所有加載完畢以後才被執行

• 若是一個網頁中有大量的圖片的話，則就會出現這種狀況：網頁文檔已經呈現出來，但因爲網頁數據尚未徹底加載完畢，致使load事件不可以即時被觸發。

$(function(){}) 匿名函數，你能夠當成$(document).ready(function(){})的簡寫

$.data()和$('#aaa').data()各自做用是什麼？有什麼區別

• $('#aaa').data()向元素附加數據，或從元素中獲取數據

//向元素中附加數據greeting $("#btn1").click(function(){ $("div").data("greeting", "Hello World"); }); //從元素中獲取數據 $("#btn2").click(function(){ alert($("div").data("greeting")); });

es6 箭頭函數

• 首先箭頭函數沒有本身的this
• 若是你要當前函數的this,那麼箭頭函數不行

async/await 解決回調函數嵌套問題

如何在項目中解析處理es6和es7代碼

• babel

promise方法

• Promise 類
• 兩個參數提供then()回調方法
  • resolve成功
  • reject失敗
• Promise.all()併發執行方法

function buypack(){ return new Promise((resolve,reject)=>{ setTimeout(()=>{ if(Math.random()>0.5){ resolve('買') }else{ reject('不買，被打死'); } },Math.random()*10*1000) }) }; buypack().then((data)=>{ console.log(data); },(err)=>{ console.log(err); })

async和await異步操做

• async 和 await解決異步問題，基於primise

• 主要解決promise的then方法嵌套

• async和await這兩個關鍵字一塊兒使用

• await後面智能跟promise對象

Promise.all()併發讀取

//es7 let fs=require('fs'); function read(url) { //new Promise 須要傳入一個executor 執行器 //executor須要傳入兩個函數 resolve reject return new Promise((resolve,reject)=>{ //異步讀取文件 fs.readFile(url,'utf8',function (err,data) { if(err){ reject(err) }else{ resolve(data); } }) }) }; //async await 解決異步問題，基於promise //async await這兩個關鍵字一塊兒使用 //await 後面只能跟promise對象 async function getData(){ try{ //Promise.all()併發讀取 let result =await Promise.all([read('name.txt'),read('age.txt')]); console.log(result); }catch (e){ console.log(e); } } getData(); //Promise 解決多層嵌套，回調地獄 // 解決異步請求，同步結果的問題