HTML
- 對html5的理解，web語義話批什，SEO
- 頁面加載過程
- 新增API廊佩，本地存儲，Canvas
CSS
- 經(jīng)典圣杯布局
- CSS3 transition transform animate
- w3c盒模型和IE盒模型刻炒，box-sizing屬性
- 居中
- 浮動，position
- 塊級元素和行內(nèi)元素
- 塊級元素: div,h1,p,ul,ol,li
- 行內(nèi)元素: a,span,img,em, input, label
- 區(qū)別：
- 塊級元素占一行且寬度默認(rèn)占滿父元素自沧，行內(nèi)元素可以排在同一行；
- 塊級元素可以設(shè)置寬高，當(dāng)仍然占一行拇厢；行內(nèi)元素設(shè)置寬高無效爱谁；
- 塊級元素可以設(shè)置margin和padding屬性，行內(nèi)元素可以設(shè)置水平方向的margin和padding屬性孝偎，豎直方向無效
- BFC
- 優(yōu)先級
- less與sass
- background-*系列屬性
JS
原型
-
對象
工廠模式
function createPerson(name, age, job) { var o = new Object(); o.name = this.name; o.age = this.age; o.job = this.job; o.sayName = function () { alert(this.name); }; return o; } var person1=createPerson('lin',29,'programmer'); var person2=createPerson('li',30,'teacher');解決創(chuàng)建多個相似對象的問題访敌，沒解決對象識別的問題
構(gòu)造函數(shù)模式
function Person(name, age, job) { this.name = name; this.age = age; this.job = job; this.sayName = function () { alert(this.name); }; } var person1 = new Person('lin', 29, 'programmer'); var person2 = new Person('li', 30, 'teacher');調(diào)用構(gòu)造函數(shù)4個步驟：
- 創(chuàng)建一個對象；
- 將構(gòu)造函數(shù)的作用域賦給新對象衣盾；（this指向新對象）
- 執(zhí)行構(gòu)造函數(shù)中的代碼
- 返回新對象
主要問題：每個方法都要在每個實(shí)例上重新創(chuàng)建一遍寺旺，不同實(shí)例上的同名函數(shù)是不想等的。
原型模式
function Person() {} Person.prototype.name = 'lin'; Person.prototype.age = 29; Person.prototype.job = 'programmer'; Person.prototype.sayName = function () { alert(this.name); } var person1 = new Person();- 創(chuàng)建函數(shù)會創(chuàng)建一個prototype屬性势决，指向函數(shù)的原型對象
- Person的每個實(shí)例內(nèi)部包含一個屬性阻塑，指向Person.prototype
- 讀取某個對象的某個屬性，搜索先從對象實(shí)例本身開始果复，沒有再搜索指針指向的原型對象
- 在實(shí)例對象上添加或修改同名屬性陈莽，會屏蔽原型對象屬性，但對于包含引用類型值的屬性虽抄，會直接修改原型對象上的屬性
- 對象字面量重寫原型對象走搁，其constructor屬性會指向Object構(gòu)造函數(shù)，切斷現(xiàn)有原型與之前存在的實(shí)例對象之間的聯(lián)系（即之前生成的的實(shí)例無法訪問現(xiàn)有原型對象上的屬性與方法）
function Person() { } var friend = new Person(); Person.prototype = { constructor: Person, name: 'lin', age: 29, sayName: function () { alert(this.name); } }; friend.sayName(); //error原型模式問題：省略了構(gòu)造函數(shù)參數(shù)傳遞迈窟，結(jié)果所有的實(shí)例在默認(rèn)情況下都取得相同的屬性值私植；實(shí)例改變包含引用類型值的屬性時，會改變原型對象上的相應(yīng)屬性值车酣，其他實(shí)例的相應(yīng)屬性值也會改變兵琳；
組合使用構(gòu)造和原型模式
function Person(name.age,job) { this.name=name; this.age=age; this.job=job; this.friends=['lucy','lily'] } Person.prototype={ constructor:Person, sayName:function(){ alert(this.name); } } var person1=new Person('lin',29,'programmer');動態(tài)原型模式
function Person(name.age,job) { this.name=name; this.age=age; this.job=job; if(typeof this.sayName !='function') { Person.prototype.sayName = function() { alert(this.name); } } } var person1=new Person('lin',29,'programmer');注意不能使用對象字面量重寫原型
寄生構(gòu)造函數(shù)模式
穩(wěn)妥構(gòu)造函數(shù)模式
-
繼承
原型鏈
每個構(gòu)造函數(shù)都有一個原型對象，原型對象都包含一個指向構(gòu)造函數(shù)的指針骇径，而實(shí)例都包含一個指向原型對象內(nèi)部的指針躯肌；讓原型對象等于另一個構(gòu)造函數(shù)的實(shí)例，此時原型對象就有指向另一個原型的指針破衔，另一個原型也包含著指向另一個構(gòu)造函數(shù)的指針清女，以此類推構(gòu)成實(shí)例與原型的鏈條。
function One() { this.oneprototype = true; } One.prototype.getOneValue = function () { return this.oneprototype; } function Two() { this.twoprototype = false; } Two.prototype = new One(); Two.prototype.getTwoValue = function () { return this.twoprototype; } var Three = new Two(); alert(Three.getOneValue()); //true通過重寫Two的原型對象晰筛，繼承One嫡丙，原本存在One的實(shí)例中的屬性和方法，現(xiàn)在也存在Two.prototype中读第，新原型中還有一個指向One原型的指針曙博。最終時Three指向Two的原型，Two的原型指向One的原型怜瞒。oneprototype在Two.prototype中父泳，但getOneValue()方法仍在One.prototype上般哼。
給子類原型添加或則覆蓋某個方法，添加方法的代碼放在原型重寫代碼的后面惠窄。
原型鏈繼承的問題：超類實(shí)例中屬性的值為引用類型值時蒸眠，子類的實(shí)例修改該屬性，其他子類實(shí)例中也會相應(yīng)改變杆融。
function One() { this.color = ['red', 'blue']; } function Two() { } Two.prototype = new One(); var three = new Two(); three.color.push('black'); alert(three.color); // 'red,blue,black' var four = new Two(); alert(four.color); //'red,blue,black' var five = new One(); alert(five.color); //'red,blue'借用構(gòu)造函數(shù)
function One() { this.color = ['red', 'blue']; } function Two() { One.call(this); this.age=29; } var three = new Two(); three.color.push('black'); alert(three.color); // 'red,blue,black' alert(three.age) //29 var four = new new Two(); alert(four.color); //'red,blue'問題：無法避免構(gòu)造函數(shù)模式存在的問題楞卡。
組合繼承
function Ono(name) { this.name = name; this.num = [1, 2, 3]; } One.prototype.sayName = function () { alert(this.name); } function Two(name, age) { One.call(this, name); this.age = age; } Two.prototype = new One(); Two.prototype.constructor = One; Two.prototype.sayAge = function () { alert(this.age); } var three = new Two('lin', 29); three.num.push(4); alert(this.num); //1,2,3,4 three.sayAge(); //29 three.sayName(); //'lin' var four = new Two('li', 30); alert(four.num); //1,2,3 four.sayAge(); //30 four.sayName(); //'li'通過原型鏈對原型屬性和方法繼承，通過借用構(gòu)造函數(shù)對實(shí)例屬性繼承脾歇。
問題：調(diào)用兩次超類的構(gòu)造函數(shù)蒋腮，一次是創(chuàng)建子類型原型的時候，另一次是在子類型構(gòu)造函數(shù)內(nèi)部
原型式繼承
function object(o) { function F(){}; F.prototype=o; return new F(); } ES5 Object.create() var person={ name:'lin', num:[1,2,3]; } var person2=Object.create(person); person2.name='li'; person.num.push(4); alert(person.num); //1,2,3,4寄生式繼承
function createAnother(original) { var clone = abject(original); clone.sayHi = function () { alert('hi'); } return clone; } var person = { name: 'lin', num: [1, 2, 3]; } var person2 = createAnother(person); person2.sayHi(); //'hi';寄生組合繼承
function inheritPrototype(Two,One) { var prototype = Object(One.prototype); prototype.constructor=Two; Two.prototype=prototype; } function One(name) { this.name=name; this.num=[1,2,3]; } One.prototype.sayName=function(){ alert(this.name); } function Two(name,age) { One.call(this,name); this.age=age; } inheritPrototype(Two,One); Two.prototype.sayAge=function() { alert(this.age); }通過借用構(gòu)造函數(shù)來繼承實(shí)例屬性藕各，通過原型鏈的混成形式繼承原型方法和屬性池摧。不必為了指定子類的原型而調(diào)用超類型構(gòu)造函數(shù)，使用寄生式繼承來繼承超類型的原型座韵，在將結(jié)果指定給子類型的原型
-
變量 作用域
變量
變量包含兩種不同數(shù)據(jù)類型值险绘，基本類型值和引用類型值。
基本類型值：簡單的數(shù)據(jù)段誉碴；
number宦棺，string，boolean黔帕，null代咸，undefined引用類型值：由多個值構(gòu)成的對象；保存在堆內(nèi)存中成黄，復(fù)制對象的某個變量時實(shí)際上是操作對象的引用呐芥，但在為對象添加屬性時，操作的是實(shí)際對象奋岁。
執(zhí)行環(huán)境
定義變量或函數(shù)有權(quán)訪問的其他數(shù)據(jù)思瘟；
環(huán)境中定義的所有變量和函數(shù)都保存在一個變量對象中；
作用域鏈
保證對執(zhí)行環(huán)境有權(quán)訪問的變量和函數(shù)的有序訪問闻伶；
作用域鏈的前端滨攻，是當(dāng)前執(zhí)行代碼所在環(huán)境的變量對象，接著是來自包含環(huán)境的變量對象蓝翰，以此類推光绕，一直延續(xù)到全局執(zhí)行環(huán)境，全局執(zhí)行環(huán)境的變量對象是作用域鏈的最后一個對象畜份。
內(nèi)部環(huán)境通過作用域鏈訪問外部環(huán)境诞帐。
-
閉包
閉包是指有權(quán)訪問另一個函數(shù)作用中的變量的函數(shù)，常見的創(chuàng)建方式爆雹，在一個函數(shù)內(nèi)部創(chuàng)建另一個函數(shù)停蕉；
閉包的作用包含外部函數(shù)的變量對象愕鼓；
閉包只能取得包含函數(shù)中任何變量的最后值
function fun() { var result = new Array(); for (var i = 1; i < 10; i++) { result[i] = function () { return i; }; } return result; } function fun() { var result = new Array(); for (var i = 1; i < 10; i++) { result[i] = function (num) { return function(){ return num; }; }(i); } return result; }在匿名函數(shù)中定義的任何變量會在執(zhí)行結(jié)束被銷毀，從而限制像全局作用中添加更多的變量和函數(shù)
利用閉包的作用域鏈訪問外部函數(shù)的變量谷徙，用于創(chuàng)建訪問私有變量的公有方法
模塊模式：為單例（只有一個實(shí)例的對象拒啰，通過對象字面量創(chuàng)建）創(chuàng)建私有變量和特權(quán)方法（有權(quán)訪問私有變量和函數(shù)）
閉包的作用驯绎，通過作用域可以提供訪問私有變量和函數(shù)的接口
-
函數(shù)調(diào)用方式
- 方法調(diào)用
- 函數(shù)調(diào)用
- 構(gòu)造器調(diào)用
- apply調(diào)用
JSON
高階函數(shù)
JSONP跨域iframe通信
Ajax
原生DOM操作完慧，逆序DOM節(jié)點(diǎn)
-
事件捕獲，冒泡剩失，代理
事件流
* 手指放在同心圓的圓心屈尼，手指向的不是一個圓，而是所有的圓拴孤；即單擊按鈕的同時脾歧，也單擊了按鈕的容器元素，也單擊了整個頁面演熟。
* 事件流描述的是從頁面中接受事件的順序鞭执。
* IE的事件流是事件冒泡，即事件開始時由最具體的元素接收芒粹，然后逐級向上傳播到較為不具體的節(jié)點(diǎn)：div > body >html > document
* Netscape事件流是事件捕獲兄纺，與IE相反；
* DOM 事件流包括三個階段：事件捕獲階段化漆，處于目標(biāo)階段和事件冒泡階段事件處理
- DOM2級事件處理程序
var btn = document.getElementById('myBtn'); btn.addEventListener('click',handle,fasle); //fasle表示事件在冒泡階段觸發(fā) btn.removeEventListener('click',handle,false) handle 如果為匿名函數(shù)則取消無效- IE事件處理程序
var btn = document.getElementById('myBtn'); btn.attachEvent('onclick',handle); btn.detachEvent('onclick',handle) 只有IE和Opera支持- 跨瀏覽器事件處理程序
var EventUtil = { addHandler: function (element,type,handler) { if (element.addEventListener) { element.addEventListener (type,handler,false); } else { element.attachEvent ('on'+type,handler); } else { element['on'+type] = handler; } }, removeHandler:function (element,type,handler) { if(element.removeEventListener) { element.removeEventListener (type,handler,false); } else { element.detachEvent ('on' + type,handle); } else { element['on'+type] = null; } } } var btn = document.getElementById('mybtn'); EventUtil.addHandler(btn,'click',handler); EventUtil.removeHandler(btn,'click',handler);事件對象
-
DOM中的事件對象:event
this = currentTarget :事件處理程序存在對象估脆；
target:事件的目標(biāo)（如單擊的按鈕）；
阻止特定的默認(rèn)行為：event.preventDefault()
阻止事件冒泡：stopPropagation()
-
IE中的事件對象:window.event
- srcElemnt事件的目標(biāo)
- 阻止特定的默認(rèn)行為:window.event.returnvalue =false
- 阻止事件冒泡:window.event.cancelBubble()
var EventUtil = { addHandler: function (element, type, handler) { }, getEvent: function (event) { return event ? event : window.event; }, getTarget: function (event) { return event.target || event.srcElement; }, preventDefault: function (event) { if (event.preventDefault) { event.preventDefault(); } else { event.returnvalue = false; } }, stopPropagation: function (event) { if (event.stopPropagation) { event.stopPropagation(); } else { event.cancelBubble = true; } } }
事件委托
- 事件處理程序數(shù)量關(guān)系到頁面性能座云，因?yàn)槊總€函數(shù)都是對象疙赠，會占用內(nèi)存
- 利用事件冒泡，只指定一個事件處理程序朦拖，管理某一類型的所有事件圃阳；
- 為document對象添加一個事件處理程序，處理頁面上發(fā)生的某種特點(diǎn)類型的事件：document對象訪問快璧帝，只添加一個事件處理程序所需DOM的引用少捍岳，用時短，占內(nèi)存空間小
-
Array常用函數(shù)
檢測數(shù)組
if(Array.isArray(value)) { }轉(zhuǎn)換方法
var colors =['red','blue','green']; alert(colors.toString()); //red,blue,green alert(colors.join('-')); //red-blue-green棧方法
- last-in-first-out
- push()：將任意數(shù)量的參數(shù)裸弦，逐個添加到數(shù)組末尾祟同，并返回修改后數(shù)組的長度；
- pop()：從數(shù)組末尾移除最后一項(xiàng)理疙，然后返回移除的項(xiàng)晕城。
var colors = new Array(); var count = colors.push('red','blue'); alert(count.length); //2 count.push('black'); alert(count.length); //3 var item = count.pop(); alert(item); //'black' alert(count.length); //2隊(duì)列方法
- first-in-first-out
- shift()：移除數(shù)組的第一項(xiàng)并返回該項(xiàng)，同時將數(shù)組長度減1窖贤；
- unshift()：在數(shù)組前端添加任意個項(xiàng)砖顷，并返回新數(shù)組的長度贰锁。
var num = [1,2,3]; num.push(4); var item = num.shift(); alert(item); //1 alert(num.length) //3 num.unshift(5); alert(num.length); //4重排序
- reverse():反轉(zhuǎn)數(shù)組項(xiàng)的順序
- sort():調(diào)用每個數(shù)組項(xiàng)的toString()轉(zhuǎn)型方法，然后比較得到的字符串滤蝠，確定如何排序
function compare(value1, value2) { if (value1 < value 2) { return -1; } else if (value1 > value2) { return 1; } else { return 0; } } var values = [0,1,4,2,10]; values.sort(compare); alert(values); //0,1,2,4,10操作方法
- concat():創(chuàng)建當(dāng)前數(shù)組的副本豌熄，將接收到的參數(shù)添加到副本的末尾，返回新構(gòu)建的數(shù)組物咳；
- slice():參數(shù)為起始和結(jié)束項(xiàng)位置锣险，返回起始和結(jié)束位置之間的項(xiàng)不包括結(jié)束位置，沒有結(jié)束位置览闰，則到末尾,不影響原始數(shù)組芯肤；
- splice():參數(shù)為刪除項(xiàng)的起始位置，項(xiàng)數(shù)压鉴，插入的項(xiàng)崖咨。返回一個數(shù)組，包含從原始數(shù)組中刪除的項(xiàng)（如沒有刪除則返回一個空數(shù)組）油吭；
var colors = ['red','green']; var colors2 = colors.concat('yellow',['blue','purple']); alert(colors2); //red,green,yellow,blue,purple var colors3 = colors2.slice(2); //yellow,blue,purple var colors4 = colors2.slice(1,4); //green,yellow,blue var removed = colors2.splice(0,2); //red,green alert(colors2); //yellow,blue,purpel var removed2 = colors2.splice(1,0,'red','green'); //空數(shù)組 alert(colors2); //yellow,red,green,blue,purple位置方法
- indexOf():參數(shù)為要查找的項(xiàng)和起點(diǎn)位置索引击蹲，返回查找項(xiàng)所謂位置索引，為找到返回-1
- lastIndexOf()
var num = [1,2,34,5,4,2,6]; alert(num.indexOf(2)); //1 alert(num.indexOf(2,3); //5迭代方法
- every():數(shù)組中每一項(xiàng)運(yùn)行給定函數(shù)婉宰，每一項(xiàng)都返回true歌豺，則返回true；
- some(): ...芍阎，任意項(xiàng)返回true世曾，則返回true；
- filter(): ...,返回該函數(shù)會返回true的項(xiàng)組成的數(shù)組谴咸；
- forEach(): ...,沒有返回值轮听；
- map(): ...,返回每次函數(shù)調(diào)用的結(jié)果組成的函數(shù)。
var nums = [1,2,3,4,5]; var everyResult = nums.every(function(item,index,array) { return (item > 2); }) alert(everyResult); //false var someResult = nums.some(function(item,index,array) { return (item > 2); }) alert(someResult); //true var filterResult = nums.filter(function(item,index,array) { return (item > 2); }) alert(filterResult); //[3,4,5] var mapResult = nums.map(function(item,index,array) { return (item * 2); }) alert(mapResult); //[2,4,6,8,10];歸并方法
- reduce():四個參數(shù)岭佳，前一個值血巍，當(dāng)前值，項(xiàng)的索引珊随，數(shù)組對象
var values = [1,2,3,4,5]; var sum = values.reduce(function(prev,cur,index,array) { return prev + cur }) alert(sum); //15 -
string常用函數(shù)
字符方法
var stringvalue = 'Hello, world!'; alert(stringvalue.charAt(2))字符操作方法
- concat(): same as Array;
- slice(): same as Array;
- substring: same as slice;
- substr: 第二個參數(shù)表示返回的個數(shù)
字符串位置方法
- indexOf()
var stringValue = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit'; var positions = []; var pos = stringValue.indexOf('e'); while(pos > -1) { positions.push(pos); pos = stringValue.indexOf('e',pos + 1); } alert(positions); //[3,24,32,35,52]trim()
創(chuàng)建一個字符串的副本述寡，刪除前置及后綴的所有空格，返回結(jié)果叶洞；
字符串大小寫轉(zhuǎn)換
- toLowerCase()
- toUpperCase()
- toLocalLowerCase()
- toLocalUpperCase()
字符串匹配方法
var text = 'cat, bat, sat, fat'; var result = text.replace('at','ond); //'cond, bat, sat, fat' result = text.replace(/at/g,'ond'); //'cond, bond, sond, fond' result.split(','); //['cond','bond','sond','fond'] ES5+ES6
框架
手動實(shí)現(xiàn)MVC
衍生部分
HTTP1/2理解鲫凶，狀態(tài)碼，優(yōu)化衩辟，緩存控制
-
頁面加載過程
- 輸入URL
- 解析URL獲取協(xié)議螟炫，主機(jī)，端口艺晴，path昼钻，組裝http請求報文掸屡，獲取主機(jī)ip地址；
- 打開socket與目標(biāo)ip地址建立TCP鏈接：瀏覽器與遠(yuǎn)程
Web服務(wù)器通過TCP三次握手協(xié)商來建立一個TCP/IP連接然评。該握手包括一個同步報文仅财，一個同步-應(yīng)答報文和一個應(yīng)答報文，這三個報文在 瀏覽器和服務(wù)器之間傳遞碗淌。該握手首先由客戶端嘗試建立起通信盏求，而后服務(wù)器應(yīng)答并接受客戶端的請求，最后由客戶端發(fā)出該請求已經(jīng)被接受的報文贯莺。 - 發(fā)送HTTP請求风喇，服務(wù)器接受宁改，檢查緩存缕探，返回對應(yīng)狀態(tài)碼
- 瀏覽器接受響應(yīng)，關(guān)閉TCP还蹲，檢查響應(yīng)狀態(tài)碼爹耗，進(jìn)行緩存，解碼
- 解析HTML文檔谜喊，構(gòu)建DOM樹潭兽，下載資源，構(gòu)建CSSOM樹斗遏，執(zhí)行js腳本
TCP三次握手山卦，四次揮手
XSS與CSRF
學(xué)習(xí)經(jīng)歷和方法
性能優(yōu)化
單元測試
React+Reduct
模塊機(jī)制 AMD CMD commonjs
webpack
