摘要:本來很久以前就該把前端面試系列的文章更新完,但是自己懶,加上發現網上有些文章確實寫的不錯,就一直拖著沒寫。但是有次去圖書館,看到一本書叫前端面試江湖,索性找了一個時間,把全部內容整合到一起。
本來很久以前就該把前端面試系列的文章更新完,但是自己懶,加上發現網上有些文章確實寫的不錯,就一直拖著沒寫。但是有次去圖書館,看到一本書叫《前端面試江湖》,索性找了一個時間,把全部內容整合到一起。這里面肯定有你不了解的東西,那些東西能夠很大程度上提高你的開發效率。這本書2016年5月出的,卻還在講JQuery。所以有些地方我對其進行了補充
如何處理IE和Firefox如果處理事件兼容性獲取事件:
function et(e) { let event = window.event || e }
鍵盤值的獲取:
Firfox下event.which和IE的event.keyCode相當
let key = event.keyCode || event.which
事件源的獲取:
let target = event.srcElement || event.target
事件監聽:
IE: element.attacthEvent("on" + eventName, function(){}) Firfox: element.addEventListener(eventName, handler, false)
鼠標位置:
在IE下,event對象有x、y屬性,在Firfox下,event有PageX, PageY屬性
所有獲取鼠標位置時:
x = event.x || event.pageX
阻止默認瀏覽器行為:
e.preventDefault() || event.returnValue = false
阻止冒泡事件:
e.stopPropagation() || event.cancelBubble = true獲取下拉框中選中項的內容
拿到選中項的索引:
let index = document.getElementById("test").selectIndex.
selectIndex表示選中項的index
在Form表單中get和post方式提交的區別這個問題一直在爭論,我就覺得明明一句話解決的問題,非要弄得這么復雜。這是書上的答案:
get是從服務器上獲取數據,post是向服務器提交數據
get是把參數數據提交到表單的action屬性所指的URL中,值和表單各個字段一一對應。post是通過HTTP
post機制,將表單內各個字段和其內容放置在HTML HEADER內一起傳到action屬性所指的URL地址。
get傳送的數據不能大于2kb,post傳送的數據更大,但也有限制。
get安全性能非常低,post安全性較高
get限制Form表單的數據集的值必須為ASCII字符,而post支持整個ISO10646字符集。
AJAX的簡單實現var xhr = new XMLHttpRequest() xhr.onreadystatechange = function () { if (xhr.readyState == 4) { if ((xhr.status >= 200 && xhr.status < 300 || xhr.status == 304)) { alert(xhr.responseText) } else { alert("unsuccessful:" + xhr.status) } } } xhr.open("get", "example.txt", true) xhr.send(null)HTTP協議狀態碼
具體內容看看MDN,這里就懶的寫了
1xx: 信息
2xx: 成功
3xx:重定向
4xx:客戶端錯誤
5xx:服務器錯誤
getResponseHeader從響應信息中返回指定的http信息
getAllResonponseHeaders 獲取響應的所有HTTP頭信息
var Jsonp = document.createElement("script") // Firfox: onload, IE: onreadyStatechange Jsonp.onload = Jsonp.onreadyStatechange = function () { if (!this.readyState || this.readyState === "loaded" || this.readyState === "complete") { alert($("#demo").html()) // 清理防止IE內存泄露 Jsonp.onload = Jsonp.onreadyStatechange = null } } Jsonp.type = "text/javascript" Jsonp.src = "http://www.xxx.com/JS/JQuery.js" // 往header里邊添加 document.getElementByTagName("head")[0].appendChild(Jsonp)HTML5和CSS3的了解
1、更多的描述性標簽
2、良好的媒體支持
3、更強大的Web應用
4、跨文檔信息通信
5、Web Sockets
6、客戶端存儲
7、更加精美的頁面
8、更強大的表單
9、提升可訪問性
10、先進的選擇器
11、視覺效果
除了頁面在首次加載時必然要經歷該過程之外,還有以下行為會觸發這個行為:
1、dom元素的添加、修改、刪除。(這就是為什么避免dom元素的修改,因為reflow和repaint最耗性能)
2、僅修改DOM元素的字體顏色(只有repaint,因為不需要調整布局)
3、應用新的樣式或者修改任何影響元素外觀的屬性
4、resize瀏覽器窗口,滾動頁面
5、讀取元素的某些屬性
存儲:localStorage.setItem(key, value)
獲取:localStorage.getItem(key)
刪除:localStorage.removeItem(key)
全部刪除:localStorage.clear()
cookie數據始終在同源的HTTP請求中攜帶。而sessionStorage和localStorage不會自動把數據發送給服務器,僅在本地保存。cookie數據還有路徑(path)的概念,可以限制cookie只屬于某個路徑下。
存儲大小限制不同,cookie數據不能超過4KB,同時因為每次HTTP請求都會攜帶cookie,所以cookie只適合保存很小的數據。sessionStorage和localStorage也有存儲限制,但是要大的多
數據有效期不同: sessionStorage:僅在當前瀏覽器窗口關閉前有效。localStorage:始終有效,窗口或瀏覽器關閉也一直保存。cookie:只要在設置的cookie過期時間之前一直有效
作用域不同:sessionStorage不在不同的瀏覽器窗口中共享(我們可以不可以通過使用sessionStorage實現跨域).localStorage在所有同源串口都是共享的。cookie在所有同源窗口都是共享的。
1、CSS Sprites: 通俗來講就是圖片合并,可以把網站中一些比較通用的小圖,合并到一張大圖上
2、啟用keep-alive屬性:Keep-Alive可以理解為長連接。啟用connection的Keep-Alive屬性之外,這個連接能保持一段時間,從而提高頁面加載的速度
3、啟用瀏覽器緩存,可以用緩存技術來提高頁面的加載速度
4、啟用GZIP壓縮
1、用Web Storage替換cookie
2、使用css動畫代替JavaScript動畫
3、使用客戶端數據庫
4、使用JavaScript的新功能
5、使用硬件加速
@font-face {font-family: name; src: url(url); sRules}
sRules樣式表定義
談談對前端安全的理解,有什么,怎么防范前端安全問題主要有XSS、CSRF攻擊
XSS:跨站腳本攻擊
它允許用戶將惡意代碼植入到提供給其他用戶使用的頁面中,可以簡單的理解為一種javascript代碼注入。
XSS的防御措施:
過濾轉義輸入輸出
避免使用eval、new Function等執行字符串的方法,除非確定字符串和用戶輸入無關
使用cookie的httpOnly屬性,加上了這個屬性的cookie字段,js是無法進行讀寫的
使用innerHTML、document.write的時候,如果數據是用戶輸入的,那么需要對象關鍵字符進行過濾與轉義
CSRF:跨站請求偽造
其實就是網站中的一些提交行為,被黑客利用,在你訪問黑客的網站的時候進行操作,會被操作到其他網站上
CSRF防御措施:
檢測http referer是否是同域名
避免登錄的session長時間存儲在客戶端中
關鍵請求使用驗證碼或者token機制
其他的一些攻擊方法還有HTTP劫持、界面操作劫持
使用prototype的方法并不是很好,很容易出錯,建議使用ES6的class。但這里不講,因為有些老項目沒用ES6,所以了解prototype還有有必要的
借用構造函數實現繼承:
function Parent1(){ this.name = "parent1" } function Child1(){ Parent1.call(this); this.type = "child1"; }
借用原型鏈實現繼承:
function Parent2(){ this.name = "parent2"; this.play = [1,2,3]; } function Child2(){ this.type = "child2"; } Child2.prototype = new Parent2();
組合式繼承:
function Parent3(){ this.name = "parent3"; this.play = [1,2,3]; } function Child3(){ Parent3.call(this); this.type = "child3"; } Child3.prototype = Object.create(Parent3.prototype); Child3.prototype.constructor = Child3;創建對象的方法(摘自《高級程序設計》):
工廠模式:
function cratePerson (name, age, job) { var o = new Object( o.name = name o.age = age o.job = job o.sayName = function () { alert(this.name) } return o } var person1 = cratePerson("Greg", 27, "Doctor")
構造函數:
function Person (name, age, job) { this.name = name this.age = age this.job = job this.sayName = function () { alert(this.name ) } } var person1 = cratePerson("Greg", 27, "Doctor")
原型模式:
function Person () { } Person.prototype.name = "Greg" Person.prototype.age = 18 Person.prototype.job = "Doctor" Person.prototype.sayName = function () { alert(this.name) } var person1 = new Person() person1.sayName() // Greg
本文只講了一些理論性的知識,很少涉及編程。編程的部分我決定使用leetcode習題的方式進行講解
o)因為這個不太好多帶帶寫一篇博客來進行講解。請關注我的github了解實時的進度
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/54443.html
摘要:本來很久以前就該把前端面試系列的文章更新完,但是自己懶,加上發現網上有些文章確實寫的不錯,就一直拖著沒寫。但是有次去圖書館,看到一本書叫前端面試江湖,索性找了一個時間,把全部內容整合到一起。 本來很久以前就該把前端面試系列的文章更新完,但是自己懶,加上發現網上有些文章確實寫的不錯,就一直拖著沒寫。但是有次去圖書館,看到一本書叫《前端面試江湖》,索性找了一個時間,把全部內容整合到一起。這...
摘要:筆者作為一位,將工作以來用到的各種優秀資料神器及框架整理在此,畢竟好記性不如爛鍵盤,此前端知識點大百科全書前端掘金,,不定期更新技巧前端掘金技巧,偶爾更新。計算數組的極值技巧使你的更加專業前端掘金一個幫你提升技巧的收藏集。 CSS 樣式畫各種圖形 - 前端 - 掘金下面是一些我在 CSS 中經常用到的圖案,還有一些是在css-tricks看到的。記錄一下,以后會用到。會持續更新… 一、...
閱讀 2604·2021-11-02 14:39
閱讀 4321·2021-10-11 10:58
閱讀 1446·2021-09-06 15:12
閱讀 1837·2021-09-01 10:49
閱讀 1326·2019-08-29 18:31
閱讀 1882·2019-08-29 16:10
閱讀 3331·2019-08-28 18:21
閱讀 866·2019-08-26 10:42