前端開發中79條不可忽視的知識點彙總


前端開發中79條不可忽視的知識點彙總


過往一些不足的地方,通過博客,好好總結一下。

1.css禁用鼠標事件

<code>.disabled {
pointer-events: none;
cursor: default;
opacity: 0.6;
}
複製代碼/<code>

2.get/post的理解和他們之間的區別

http

超文本傳輸協議(HTTP)的設計目的是保證客戶機與服務器之間的通信。 HTTP 的工作方式是客戶機與服務器之間的請求-應答協議。 web 瀏覽器可能是客戶端,而計算機上的網絡應用程序也可能作為服務器端。

http方法:

HEAD: 與 GET 相同,但只返回 HTTP 報頭,不返回文檔主體 PUT: 上傳指定的 URI 表示 DELETE: 刪除指定資源 OPTIONS: 返回服務器支持的 HTTP 方法 CONNECT: 把請求連接轉換到透明的 TCP/IP 通道 POST: 向指定的資源提交要被處理的數據

<code>// 查詢字符串(名稱/值對)是在 POST 請求的 HTTP 消息主體中發送的
POST /test/demo_form.asp HTTP/1.1

Host: w3schools.com
name1=value1&name2=value2
複製代碼/<code>

GET: 從指定的資源請求數據

GET和POST的區別

GET 請求可被緩存 GET 請求保留在瀏覽器歷史記錄中 GET 請求可被收藏為書籤 GET 請求不應在處理敏感數據時使用 GET 請求有長度限制(2048字符),IE和Safari瀏覽器限制2k;Opera限制4k;Firefox,Chrome限制8k GET 請求只應當用於取回數據

POST 請求不會被緩存 POST 請求不會保留在瀏覽器歷史記錄中 POST 不能被收藏為書籤 POST 請求對數據長度沒有要求

3.實現條紋網格的方式

nth-child(even/odd)

<code>// odd表示基數,此時選中基數行的樣式,even表示偶數行
.row:nth-child(odd){
background: #eee;
}
複製代碼/<code>

nth-of-type(odd)

<code>.row:nth-of-type(odd){
background: #eee;
}
複製代碼/<code>

漸變實現linear-gradient

<code>.stripe-bg{
padding: .5em;

line-height: 1.5em;
background: beige;
background-size: auto 3em;
background-origin: content-box;
background-image: linear-gradient(rgba(0,0,0,.2) 50%, transparent 0);
}
複製代碼/<code>

4.js求平面兩點之間的距離

<code>// 數據可以以數組方式存儲,也可以是對象方式
let a = {x:'6', y:10},
b = {x: 8, y: 20};
function distant(a,b){
let dx = Number(a.x) - Number(b.x)
let dy = Number(a.y) - Number(b.y)
return Math.pow(dx*dx + dy*dy, .5)
}
複製代碼/<code>

5.css禁止用戶選擇

<code>body{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
複製代碼/<code>

6.數組去重

<code>// indexOf實現
var array = [1, 1, '1'];

function unique(array) {
var res = [];
for (var i = 0, len = array.length; i < len; i++) {
var current = array[i];
if (res.indexOf(current) === -1) {
res.push(current)
}
}

return res;
}

console.log(unique(array));

// 排序後去重
var array = [1, 1, '1'];

function unique(array) {
var res = [];
var sortedArray = array.concat().sort();
var seen;
for (var i = 0, len = sortedArray.length; i < len; i++) {
// 如果是第一個元素或者相鄰的元素不相同
if (!i || seen !== sortedArray[i]) {
res.push(sortedArray[i])
}
seen = sortedArray[i];
}
return res;
}

console.log(unique(array));

// filter實現
var array = [1, 2, 1, 1, '1'];
function unique(array) {
var res = array.filter(function(item, index, array){
return array.indexOf(item) === index;
})
return res;
}
console.log(unique(array));

// 排序去重
var array = [1, 2, 1, 1, '1'];
function unique(array) {
return array.concat().sort().filter(function(item, index, array){
return !index || item !== array[index - 1]
})
}
console.log(unique(array));

// Object鍵值對
var array = [{value: 1}, {value: 1}, {value: 2}];

function unique(array) {

var obj = {};
return array.filter(function(item, index, array){
console.log(typeof item + JSON.stringify(item))
return obj.hasOwnProperty(typeof item + JSON.stringify(item)) ? false : (obj[typeof item + JSON.stringify(item)] = true)
})
}

console.log(unique(array)); // [{value: 1}, {value: 2}]

// ES6 Set實現
var unique = (a) => [...new Set(a)]
複製代碼/<code>

7.什麼是CDN和CDN的好處

CDN:CDN是將源站內容分發至最接近用戶的節點,使用戶可就近取得所需內容,提高用戶訪問的響應速度和成功率。解決因分佈、帶寬、服務器性能帶來的訪問延遲問題,適用於站點加速、點播、直播等場景。 好處: 1、多域名加載資源 一般情況下,瀏覽器都會對單個域名下的併發請求數(文件加載)進行限制,通常最多有4個,那麼第5個加載項將會被阻塞,直到前面的某一個文件加載完畢。 因為CDN文件是存放在不同區域(不同IP)的,所以對瀏覽器來說是可以同時加載頁面所需的所有文件(遠不止4個),從而提高頁面加載速度。

2、文件可能已經被加載過並保存有緩存 一些通用的js庫或者是css樣式庫,如jQuery,在網絡中的使用是非常普遍的。當一個用戶在瀏覽你的某一個網頁的時候,很有可能他已經通過你網站使用的CDN訪問過了其他的某一個網站,恰巧這個網站同樣也使用了jQuery,那麼此時用戶瀏覽器已經緩存有該jQuery文件(同IP的同名文件如果有緩存,瀏覽器會直接使用緩存文件,不會再進行加載),所以就不會再加載一次了,從而間接的提高了網站的訪問速度

3、高效率 你的網站做的再NB也不會NB過百度NB過Google吧?一個好的CDNs會提供更高的效率,更低的網絡延時和更小的丟包率。

4、分佈式的數據中心 假如你的站點佈置在北京,當一個香港或者更遠的用戶訪問你的站點的時候,他的數據請求勢必會很慢很慢。而CDNs則會讓用戶從離他最近的節點去加載所需的文件,所以加載速度提升就是理所當然的了。

5、使用情況分析 一般情況下CDNs提供商(如百度雲加速)都會提供數據統計功能,可以瞭解更多關於用戶訪問自己網站的情況,可以根據統計數據對自己的站點適時適當的做出些許調整。

6、有效防止網站被攻擊 一般情況下CDNs提供商也是會提供網站安全服務的

8.聖盃佈局和雙飛翼佈局

參考連接

9.正則表達式匹配手機號

<code>function checkPhone(){
if(!(/^1[345678]\\d{9}$/.test(phone))){
alert("手機號碼有誤,請重填");
return false;
}
}
複製代碼/<code>

10.如何提高首頻加載速度

1.js外聯文件放到body底部,css外聯文件放到head內 2.http靜態資源儘量用多個子域名 3.服務器端提供html和http靜態資源時最好開啟gzip 4.在js,css,img等資源響應的http headers裡設置expires,last-modified 5.儘量減少http requests的數量 6.js/css/html/img資源壓縮 7.使用css spirtes,可以減少img請求次數 8.大圖使用lazyload懶加載 9.避免404,減少外聯js 10.減少cookie大小可以提高獲得響應的時間 11.減少dom elements的數量 12.使用異步腳本,動態創建腳本

11.瀏覽器內核(渲染引擎)

IE/360/搜狗瀏覽器: Trident Chrome/Safari/Opera: WebKit(KHTML的一個開源的分支) (雖然我們稱WebKit為瀏覽器內核,但不太適合直接稱渲染引擎,因為WebKit本身主要是由兩個引擎構成的,一個正是渲染引擎“WebCore”,另一個則是javascript解釋引擎“JSCore”,它們均是從KDE的渲染引擎KHTML及javascript解釋引擎KJS衍生而來。) (在13年發佈的Chrome 28.0.1469.0版本開始,Chrome放棄Chromium引擎轉而使用最新的Blink引擎(基於WebKit2——蘋果公司於2010年推出的新的WebKit引擎),Blink對比上一代的引擎精簡了代碼、改善了DOM框架,也提升了安全性。) (為了減少研發成本,Opera在2013年2月宣佈放棄Presto,轉而跟隨Chrome使用WebKit分支的Chromium引擎作為自家瀏覽器核心引擎) Firefox/SeaMonkey: Gecko

12.瀏覽器渲染過程及優化建議

1)解析: 一個是HTML/SVG/XHTML,事實上,Webkit有三個C++的類對應這三類文檔。解析這三種文件會產生一個DOM Tree。 CSS,解析CSS會產生CSS規則樹。 Javascript,腳本,主要是通過DOM API和CSSOM API來操作DOM Tree和CSS Rule Tree. 2)渲染:瀏覽器引擎會通過DOM Tree 和 CSS Rule Tree 來構造 Rendering Tree。注意: Rendering Tree 渲染樹並不等同於DOM樹,因為一些像Header或display:none的東西就沒必要放在渲染樹中了。 CSS 的 Rule Tree主要是為了完成匹配並把CSS Rule附加上Rendering Tree上的每個Element。也就是DOM結點。也就是所謂的Frame。 然後,計算每個Frame(也就是每個Element)的位置,這又叫layout和reflow過程。 3)繪製:最後通過調用操作系統Native GUI的API繪製。

減少reflow和repaint 1)不要一條一條地修改DOM的樣式。還不如預先定義好css的class,然後修改DOM的className。

  1. 把DOM離線後修改。如: 使用documentFragment 對象在內存裡操作DOM 先把DOM給display:none(有一次reflow),然後你想怎麼改就怎麼改。比如修改100次,然後再把他顯示出來。 clone一個DOM結點到內存裡,然後想怎麼改就怎麼改,改完後,和在線的那個的交換一下。 3)不要把DOM結點的屬性值放在一個循環裡當成循環裡的變量。不然這會導致大量地讀寫這個結點的屬性 4)為動畫的HTML元件使用fixed或absoulte的position,儘量使用transfoem,那麼修改他們的CSS是不會reflow的 5)儘量少使用table佈局。因為可能很小的一個小改動會造成整個table的重新佈局

13. 頁面導入樣式時,使用link和@import有什麼區別?

(1)link屬於XHTML標籤,除了加載CSS外,還能用於定義RSS, 定義rel連接屬性等作用;而@import是CSS提供的,只能用於加載CSS; (2)頁面被加載的時,link會同時被加載,而@import引用的CSS會等到頁面被加載完再加載; (3)import是CSS2.1 提出的,只在IE5以上才能被識別,而link是XHTML標籤,無兼容問題; (4)link支持使用js控制DOM去改變樣式,而@import不支持;

14. 簡述一下你對HTML語義化的理解?

用正確的標籤做正確的事情。 html語義化讓頁面的內容結構化,便於對瀏覽器、搜索引擎解析; 即使在沒有樣式CSS情況下也以一種文檔格式顯示,並且是容易閱讀的; 搜索引擎的爬蟲也依賴於HTML標記來確定上下文和各個關鍵字的權重,利於SEO; 使閱讀源代碼的人對網站更容易將網站分塊,便於閱讀維護理解。

15. 請描述一下 cookies,sessionStorage 和 localStorage 的區別?

cookie是網站為了標示用戶身份而儲存在用戶本地終端(Client Side)上的數據(通常經過加密)。 cookie數據始終在同源的http請求中攜帶(即使不需要),記會在瀏覽器和服務器間來回傳遞。 sessionStorage和localStorage不會自動把數據發給服務器,僅在本地保存。

存儲大小: cookie數據大小不能超過4k。 sessionStorage和localStorage 雖然也有存儲大小的限制,但比cookie大得多,可以達到5M或更大。

有期時間: localStorage 存儲持久數據,瀏覽器關閉後數據不丟失除非主動刪除數據; sessionStorage 數據在當前瀏覽器窗口關閉後自動刪除。 cookie 設置的cookie過期時間之前一直有效,即使窗口或瀏覽器關閉

16. iframe有那些缺點?

*iframe會阻塞主頁面的Onload事件; *搜索引擎的檢索程序無法解讀這種頁面,不利於SEO; *iframe和主頁面共享連接池,而瀏覽器對相同域的連接有限制,所以會影響頁面的並行加載。 使用iframe之前需要考慮這兩個缺點。如果需要使用iframe,最好是通過javascript 動態給iframe添加src屬性值,這樣可以繞開以上兩個問題。

17. vue父子組件生命週期的順序及作用?


前端開發中79條不可忽視的知識點彙總

(圖片來自vue官網,更多vue學習推薦去官網查看詳細文檔)


18. 網頁驗證碼是幹嘛的,是為了解決什麼安全問題?

區分用戶是計算機還是人的公共全自動程序。可以防止惡意破解密碼、刷票、論壇灌水; 有效防止黑客對某一個特定註冊用戶用特定程序暴力破解方式進行不斷的登陸嘗試。

19. 介紹一下標準的CSS的盒子模型?低版本IE的盒子模型有什麼不同的?

(1)有兩種, IE 盒子模型、W3C 盒子模型; (2)盒模型: 內容(content)、填充(padding)、邊界(margin)、 邊框(border); (3)區 別: IE的content部分把 border 和 padding計算了進去;

20. position的值relative和absolute定位原點是?

absolute 生成絕對定位的元素,相對於值不為 static的第一個父元素進行定位。 fixed (老IE不支持) 生成絕對定位的元素,相對於瀏覽器窗口進行定位。 relative 生成相對定位的元素,相對於其正常位置進行定位。 static 默認值。沒有定位,元素出現在正常的流中(忽略 top, bottom, left, right z-index 聲明)。 inherit 規定從父元素繼承 position 屬性的值。

21. 經常遇到的瀏覽器的兼容性有哪些?原因,解決方法是什麼,常用hack的技巧 ?

png24位的圖片在iE6瀏覽器上出現背景,解決方案是做成PNG8.

  • 瀏覽器默認的margin和padding不同。解決方案是加一個全局的*{margin:0;padding:0;}來統一。
  • IE6雙邊距bug:塊屬性標籤float後,又有橫行的margin情況下,在ie6顯示margin比設置的大。 浮動ie產生的雙倍距離 #box{ float:left; width:10px; margin:0 0 0 100px;} 這種情況之下IE會產生20px的距離,解決方案是在float的標籤樣式控制中加入 ——_display:inline;將其轉化為行內屬性。(_這個符號只有ie6會識別) 漸進識別的方式,從總體中逐漸排除局部。 首先,巧妙的使用“\\9”這一標記,將IE遊覽器從所有情況中分離出來。 接著,再次使用“+”將IE8和IE7、IE6分離開來,這樣IE8已經獨立識別。 css .bb{ background-color:red;/所有識別/ background-color:#00deff\\9; /IE6、7、8識別/ +background-color:#a200ff;/IE6、7識別/ _background-color:#1e0bd1;/IE6識別/ }
  • IE下,可以使用獲取常規屬性的方法來獲取自定義屬性, 也可以使用getAttribute()獲取自定義屬性; Firefox下,只能使用getAttribute()獲取自定義屬性。 解決方法:統一通過getAttribute()獲取自定義屬性。
  • IE下,even對象有x,y屬性,但是沒有pageX,pageY屬性; Firefox下,event對象有pageX,pageY屬性,但是沒有x,y屬性。
  • 解決方法:(條件註釋)缺點是在IE瀏覽器下可能會增加額外的HTTP請求數。
  • Chrome 中文界面下默認會將小於 12px 的文本強制按照 12px 顯示, 可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決。

超鏈接訪問過後hover樣式就不出現了 被點擊訪問過的超鏈接樣式不在具有hover和active瞭解決方法是改變CSS屬性的排列順序: L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}

22. CSS優化、提高性能的方法有哪些?

關鍵選擇器(key selector)。選擇器的最後面的部分為關鍵選擇器(即用來匹配目標元素的部分); 如果規則擁有 ID 選擇器作為其關鍵選擇器,則不要為規則增加標籤。過濾掉無關的規則(這樣樣式系統就不會浪費時間去匹配它們了); 提取項目的通用公有樣式,增強可複用性,按模塊編寫組件;增強項目的協同開發性、可維護性和可擴展性; 使用預處理工具或構建工具(gulp對css進行語法檢查、自動補前綴、打包壓縮、自動優雅降級);

23. 如何修改chrome記住密碼後自動填充表單的黃色背景 ?

<code> input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
background-color: rgb(250, 255, 189); /* #FAFFBD; */
background-image: none;
color: rgb(0, 0, 0);
}
複製代碼/<code>

24. 讓頁面裡的字體變清晰,變細用CSS怎麼做?

<code>-webkit-font-smoothing: antialiased;
複製代碼/<code>

25. 讓overflow:scroll平滑滾動?

<code>-webkit-overflow-scrolling: touch;
複製代碼/<code>

26. 如何將浮點數點左邊的數每三位添加一個逗號,如12000000.11轉化為『12,000,000.11』?

<code>function commafy(num){
\treturn num && num
\t\t.toString()
\t\t.replace(/(\\d)(?=(\\d{3})+\\.)/g, function($1, $2){
\t\t\treturn $2 + ',';
\t\t});
}
複製代碼/<code>

27. Javascript作用鏈域?

全局函數無法查看局部函數的內部細節,但局部函數可以查看其上層的函數細節,直至全局細節。 當需要從局部函數查找某一屬性或方法時,如果當前作用域沒有找到,就會上溯到上層作用域查找, 直至全局函數,這種組織形式就是作用域鏈。

28. 談談This對象的理解。

this總是指向函數的直接調用者(而非間接調用者); 如果有new關鍵字,this指向new出來的那個對象; 在事件中,this指向觸發這個事件的對象,特殊的是,IE中的attachEvent中的this總是指向全局對象Window;

29. eval是做什麼的?

它的功能是把對應的字符串解析成JS代碼並運行; 應該避免使用eval,不安全,非常耗性能(2次,一次解析成js語句,一次執行)。 由JSON字符串轉換為JSON對象的時候可以用eval,var obj =eval('('+ str +')');

30. 什麼是window對象? 什麼是document對象?

window對象是指瀏覽器打開的窗口。 document對象是Documentd對象(HTML 文檔對象)的一個只讀引用,window對象的一個屬性。

31. ["1", "2", "3"].map(parseInt) 答案是多少?

["1", "2", "3"].map(parseInt) 答案也就是:[1, NaN, NaN]

32. 什麼是閉包(closure),為什麼要用它?

閉包是指有權訪問另一個函數作用域中變量的函數,創建閉包的最常見的方式就是在一個函數內創建另一個函數,通過另一個函數訪問這個函數的局部變量,利用閉包可以突破作用鏈域,將函數內部的變量和方法傳遞到外部。

33. javascript 代碼中的"use strict";是什麼意思 ? 使用它區別是什麼?

使JS編碼更加規範化的模式,消除Javascript語法的一些不合理、不嚴謹之處,減少一些怪異行為。 默認支持的糟糕特性都會被禁用,比如不能用with,也不能在意外的情況下給全局變量賦值; 全局變量的顯示聲明,函數必須聲明在頂層,不允許在非函數代碼塊內聲明函數,arguments.callee也不允許使用; 保證代碼運行的安全,限制函數中的arguments修改; 提高編譯器效率,增加運行速度;

34. 如何判斷一個對象是否屬於某個類?

<code>if(a instanceof Person){
alert('yes');
}
// 判斷對象類型最好的方式
// 對於 Object 對象,直接調用 toString() 就能返回 [object Object] 。而對於其他對象,則需要通過 call / apply 來調用才能返回正確的類型信息。
Object.prototype.toString.call('') ; // [object String]
Object.prototype.toString.call(1) ; // [object Number]
Object.prototype.toString.call(true) ; // [object Boolean]
Object.prototype.toString.call(Symbol()); //[object Symbol]
Object.prototype.toString.call(undefined) ; // [object Undefined]
Object.prototype.toString.call(null) ; // [object Null]
Object.prototype.toString.call(new Function()) ; // [object Function]
Object.prototype.toString.call(new Date()) ; // [object Date]
Object.prototype.toString.call([]) ; // [object Array]
Object.prototype.toString.call(new RegExp()) ; // [object RegExp]
Object.prototype.toString.call(new Error()) ; // [object Error]
Object.prototype.toString.call(document) ; // [object HTMLDocument]
Object.prototype.toString.call(window) ; //[object global] window 是全局對象 global 的引用
複製代碼/<code>

35. new一個對象的過程

<code>1、創建一個空對象,並且 this 變量引用該對象,同時還繼承了該函數的原型。
2、屬性和方法被加入到 this 引用的對象中。
3、新創建的對象由 this 所引用,並且最後隱式的返回 this 。
複製代碼/<code>

36. Ajax 解決瀏覽器緩存問題

1、在ajax發送請求前加上 anyAjaxObj.setRequestHeader("If-Modified-Since","0")。

2、在ajax發送請求前加上 anyAjaxObj.setRequestHeader("Cache-Control","no-cache")。 3、在URL後面加上一個隨機數: "fresh=" + Math.random();。 4、在URL後面加上時間戳:"nowtime=" + new Date().getTime();。 5、如果是使用jQuery,直接這樣就可以了 $.ajaxSetup({cache:false})。這樣頁面的所有ajax都會執行這條語句就是不需要保存緩存記錄。

37. 如何解決跨域問題?

jsonp、 iframe、window.name、window.postMessage、服務器上設置代理頁面

38. 模塊化開發怎麼做

立即執行函數,不暴露私有成員

<code>var module1 = (function(){
    var _count = 0;
    var m1 = function(){
      //...
    };
    var m2 = function(){
      //...
    };
    return {
      m1 : m1,
      m2 : m2
    };
  })();
複製代碼/<code>

39. AMD(Modules/Asynchronous-Definition)、CMD(Common Module Definition)規範區別?

對於依賴的模塊,AMD 是提前執行,CMD 是延遲執行。不過 RequireJS 從 2.0 開始,也改成可以延遲執行(根據寫法不同,處理方式不同)。 2. CMD 推崇依賴就近,AMD 推崇依賴前置。

<code>// CMD 

define(function(require, exports, module) {
var a = require('./a')
a.doSomething()
// 此處略去 100 行
var b = require('./b') // 依賴可以就近書寫
b.doSomething()
// ...
})

// AMD 默認推薦
define(['./a', './b'], function(a, b) { // 依賴必須一開始就寫好
a.doSomething()
// 此處略去 100 行
b.doSomething()
// ...
})
複製代碼/<code>

40. requireJS的核心原理是什麼?(如何動態加載的?如何避免多次加載的?如何 緩存的?)

參考鏈接

41. 如何實現一個模塊加載器

參考連接

42. 列舉幾條 JavaScript 的基本代碼規範

(1)不要在同一行聲明多個變量 (2)如果你不知道數組的長度,使用 push (3)請使用 ===/!== 來比較 true/false 或者數值 (4)對字符串使用單引號 ''(因為大多時候我們的字符串。特別html會出現") (5)使用對象字面量替代 new Array 這種形式 (6)絕對不要在一個非函數塊裡聲明一個函數,把那個函數賦給一個變量。瀏覽器允許你這麼做,但是它們解析不同 (7)不要使用全局函數 (8)總是使用 var 來聲明變量,如果不這麼做將導致產生全局變量,我們要避免汙染全局命名空間 (9)Switch 語句必須帶有 default 分支 (10)使用 /**...*/ 進行多行註釋,包括描述,指定類型以及參數值和返回值 (11)函數不應該有時候有返回值,有時候沒有返回值 (12)語句結束一定要加分號 (13)for 循環必須使用大括號 (14)if 語句必須使用大括號 (15)for-in 循環中的變量應該使用 var 關鍵字明確限定作用域,從而避免作用域汙染 (16)避免單個字符名,讓你的變量名有描述意義 (17)當命名對象、函數和實例時使用駝峰命名規則 (18)給對象原型分配方法,而不是用一個新的對象覆蓋原型,覆蓋原型會使繼承出現問題

43. DOM操作——怎樣添加、移除、移動、複製、創建和查找節點?

1)創建新節點 createDocumentFragment() //創建一個DOM片段 createElement() //創建一個具體的元素 createTextNode() //創建一個文本節點 (2)添加、移除、替換、插入 appendChild() removeChild() replaceChild() insertBefore() //在已有的子節點前插入一個新的子節點 (3)查找 getElementsByTagName() //通過標籤名稱 getElementsByName() //通過元素的Name屬性的值(IE容錯能力較強,會得到一個數組,其中包括id等於name值的) getElementById() //通過元素Id,唯一性

44. jquery實現原理

參考鏈接

45. jquery中如何將數組轉化為json字符串,然後再轉化回來?

<code>jQuery中沒有提供這個功能,所以你需要先編寫兩個jQuery的擴展: 
$.fn.stringifyArray = function(array) {
return JSON.stringify(array)
}

$.fn.parseArray = function(array) {
return JSON.parse(array)
}

然後調用:
$.fn.stringifyArray(array)
複製代碼/<code>

46. jquery的$.extend深複製和淺複製原理

<code>// 淺複製
$ = {

extend : function(target, options) {


for (name in options) {

target[name] = options[name];

}

return target;

}

};
// 深複製
$ = {
extend : function(deep, target, options) {
for (name in options) {
copy = options[name];
if (deep && copy instanceof Array) {
target[name] = $.extend(deep, [], copy);
} else if (deep && copy instanceof Object) {

target[name] = $.extend(deep, {}, copy);
} else {
target[name] = options[name];
}
}

return target;
}
};
複製代碼/<code>

47. jquery.extend 與 jquery.fn.extend的區別?

jquery.extend 為jquery類添加類方法,可以理解為添加靜態方法

  • jquery.fn.extend: 源碼中jquery.fn = jquery.prototype,所以對jquery.fn的擴展,就是為jquery類添加成員函數 使用: jquery.extend擴展,需要通過jquery類來調用,而jquery.fn.extend擴展,所有jquery實例都可以直接調用。

48. 如何判斷當前腳本運行在瀏覽器還是node環境中?(阿里)

<code>this === window ? 'browser' : 'node';
複製代碼/<code>

49. 實現一個頁面操作不會整頁刷新的網站,並且能在瀏覽器前進、後退時正確響應。給出你的技術實現方案?

參考鏈接

50. 把 Script 標籤 放在頁面的最底部的body封閉之前 和封閉之後有什麼區別?瀏覽器會如何解析它們?

之前推薦的方法(已過時):之前解決這個問題的方法是把script標籤放到body標籤之後 ,這確保瞭解析到


分享到:


相關文章: