常見總結(jié)-創(chuàng)新互聯(lián)
JavaScript的數(shù)據(jù)類型 6種
object number function boolean undefined string
創(chuàng)新互聯(lián)建站-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比襄城網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式襄城網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋襄城地區(qū)。費用合理售后完善，十余年實體公司更值得信賴。基本數(shù)據(jù)類型：數(shù)值型、字符串型和布爾型；Number String Boole
數(shù)組去重
最簡單的還是用ES6的Set方法去重
https://www.cnblogs.com/mahmud/p/10283343.html
JavaScript設(shè)計模式淺析
http://blog.alanwu.site/2020/03/17/designMode/
性能優(yōu)化和跨域的解決方法
什么是作用域鏈？
JavaScript 原型，原型鏈 ? 有什么特點？ 1. 原型對象也是普通的對象，是對象一個自帶隱式的 __proto__ 屬性，原型也有可能有自己的原型，如果一個原型對象的原型不為 null 的話，我們就稱之為原型鏈 2. 原型鏈是由一些用來繼承和共享屬性的對象組成的（有限的）對象鏈原型與原型鏈
- 所有原型鏈的終點都是 Object 函數(shù)的 prototype 屬性
- 每一個構(gòu)造函數(shù)都擁有一個 prototype 屬性，此屬性指向一個對象，也就是原型對象
- 原型對象默認擁有一個 constructor 屬性，指向指向它的那個構(gòu)造函數(shù)
- 每個對象都擁有一個隱藏的屬性 __ proto __，指向它的原型對象
Gulp
Gulp 就是為了規(guī)范前端開發(fā)流程，實現(xiàn)前后端分離、模塊化開發(fā)、版本控制、文件合并與壓縮、mock數(shù)據(jù)等功能的一個前端自動化構(gòu)建工具。說的形象點，“Gulp就像是一個產(chǎn)品的流水線，整個產(chǎn)品從無到有，都要受流水線的控制，在流水線上我們可以對產(chǎn)品進行管理?！?/h4>
另外，Gulp是通過task對整個開發(fā)過程進行構(gòu)建。
Webpack
Webpack 是當(dāng)下最熱門的前端資源模塊化管理和打包工具。它可以將許多松散的模塊按照依賴和規(guī)則打包成符合生產(chǎn)環(huán)境部署的前端資源。還可以將按需加載的模塊進行代碼分隔，等到實際需要的時候再異步加載。通過 loader的轉(zhuǎn)換，任何形式的資源都可以視作模塊，比如 CommonJs 模塊、AMD 模塊、ES6 模塊、CSS、圖片、JSON、Coffeescript、LESS 等
gulp嚴格上講，模塊化不是他強調(diào)的東西，他旨在規(guī)范前端開發(fā)流程。
webpack更是明顯強調(diào)模塊化開發(fā)，而那些文件壓縮合并、預(yù)處理等功能，更像是附帶的功能。
防抖和節(jié)流 https://www.jianshu.com/p/b7b698db8352
html:負責(zé)定義頁面的內(nèi)容
css:負責(zé)定義頁面的樣式
javascript:負責(zé)控制頁面的行為
以上三種為前端學(xué)習(xí)的基本課程
jquery:javascript框架，javascript函數(shù)庫，極大簡化了javascript。
bootstrap:一個用于快速開發(fā) Web 應(yīng)用程序和網(wǎng)站的前端框架。
AngularJS: 是一個 JavaScript 框架。
JSON: 是存儲和交換文本信息的語法.
Ajax: 可以用于創(chuàng)建快速動態(tài)的網(wǎng)頁。AJAX 是一種在無需重新加載整個網(wǎng)頁的情況下，能夠更新部分網(wǎng)頁的技術(shù)。
Angular 2:是一個開源的JavaScript框架
React: 是一個用于構(gòu)建用戶界面的 JAVASCRIPT 庫。React主要用于構(gòu)建UI .
LESS:是一個CSS預(yù)處理器，可以為網(wǎng)站啟用可自定義，可管理和可重用的樣式表。是一種動態(tài)樣式表語言，擴展了CSS的功能
Vue.js ：是用于構(gòu)建交互式的 Web 界面的庫。
Node.js ：是運行在服務(wù)端的 JavaScript。
那么在移動端如何配置視口呢？ 簡單的一個meta標簽即可！
rem適配
舉個例子：
//假設(shè)我給根元素的大小設(shè)置為14px
html{
font-size：14px
}
//那么我底下的p標簽如果想要也是14像素
p{
font-size:1rem
}
//如此即可
復(fù)制代碼rem的布局 不得不提flexible，flexible方案是阿里早期開源的一個移動端適配解決方案，引用flexible后，我們在頁面上統(tǒng)一使用rem來布局。
W3C 標準盒模型： 屬性width,height只包含內(nèi)容content，不包含border和padding IE 盒模型： 屬性width,height包含border和padding，指的是content+padding+border content-box（標準盒模型） border-box（IE盒模型）ES6的新特性 http://blog.alanwu.site/2020/03/11/ES6/
- let、var、const區(qū)別
- 箭頭函數(shù)
- 解構(gòu)賦值
- 模板字符串
- Set、Map數(shù)據(jù)結(jié)構(gòu)
- Promise對象
- Proxy
cookie與session
- cookie保存在客戶端（瀏覽器）；session保存在服務(wù)端（redis）
- Session是由應(yīng)用服務(wù)器維持的一個服務(wù)器端的存儲空間，用戶在連接服務(wù)器時，會由服務(wù)器生成一個唯一的SessionID,用該SessionID 為標識符來存取服務(wù)器端的Session存儲空間
例子：
當(dāng)客戶端第一次請求登錄服務(wù)器的時候，服務(wù)器隨機下發(fā)一個字符串sessionId給瀏覽器，以cookie的形式保存在客戶端。當(dāng)下次登錄的時候會帶上這個cookie，從而識別你是誰。
cookie的優(yōu)點：
1.極高的擴展性和可用性 2.通過良好的編程，控制保存在cookie中的session對象的大小。 3.通過加密和安全傳輸技術(shù)（SSL），減少cookie被破解的可能性。 4.只在cookie中存放不敏感數(shù)據(jù)，即使被盜也不會有重大損失。 5.控制cookie的生命期，使之不會永遠有效。偷盜者很可能拿到一個過期的cookie。
cookie的缺點：
1.cookie數(shù)量和長度的限制。每個domain最多只能有20條cookie，每個cookie長度不能超過4KB，否則會被截掉。 2.安全性問題。如果cookie被人攔截了，那人就可以取得所有的session信息。即使加密也與事無補，因為攔截者并不需要知道cookie的意義，他只要原樣轉(zhuǎn)發(fā)cookie就可以達到目的了。 3.有些狀態(tài)不可能保存在客戶端。例如，為了防止重復(fù)提交表單，我們需要在服務(wù)器端保存一個計數(shù)器。如果我們把這個計數(shù)器保存在客戶端，那么它起不到任何作用。
Cookie、sessionStorage、localStorage的區(qū)別
共同點：都是保存在瀏覽器端，并且是同源的 Cookie：cookie數(shù)據(jù)始終在同源的http請求中攜帶（即使不需要），即cookie在瀏覽器和服務(wù)器間來回傳遞。而sessionStorage和localStorage不會自動把數(shù)據(jù)發(fā)給服務(wù)器，僅在本地保存。cookie數(shù)據(jù)還有路徑（path）的概念，可以限制cookie只屬于某個路徑下,存儲的大小很小只有4K左右。 （key：可以在瀏覽器和服務(wù)器端來回傳遞，存儲容量小，只有大約4K左右） sessionStorage：僅在當(dāng)前瀏覽器窗口關(guān)閉前有效，自然也就不可能持久保持，localStorage：始終有效，窗口或瀏覽器關(guān)閉也一直保存，因此用作持久數(shù)據(jù)；cookie只在設(shè)置的cookie過期時間之前一直有效，即使窗口或瀏覽器關(guān)閉。（key：本身就是一個回話過程，關(guān)閉瀏覽器后消失，session為一個回話，當(dāng)頁面不同即使是同一頁面打開兩次，也被視為同一次回話） localStorage：localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。（key：同源窗口都會共享，并且不會失效，不管窗口或者瀏覽器關(guān)閉與否都會始終生效） 補充說明一下cookie的作用： 保存用戶登錄狀態(tài)。例如將用戶id存儲于一個cookie內(nèi)，這樣當(dāng)用戶下次訪問該頁面時就不需要重新登錄了，現(xiàn)在很多論壇和社區(qū)都提供這樣的功能。 cookie還可以設(shè)置過期時間，當(dāng)超過時間期限后，cookie就會自動消失。因此，系統(tǒng)往往可以提示用戶保持登錄狀態(tài)的時間：常見選項有一個月、三個 月、一年等。 跟蹤用戶行為。例如一個天氣預(yù)報網(wǎng)站，能夠根據(jù)用戶選擇的地區(qū)顯示當(dāng)?shù)氐奶鞖馇闆r。如果每次都需要選擇所在地是煩瑣的，當(dāng)利用了cookie后就會顯得很人性化了，系統(tǒng)能夠記住上一次訪問的地區(qū)，當(dāng)下次再打開該頁面時，它就會自動顯示上次用戶所在地區(qū)的天氣情況。因為一切都是在后 臺完成，所以這樣的頁面就像為某個用戶所定制的一樣，使用起來非常方便定制頁面。如果網(wǎng)站提供了換膚或更換布局的功能，那么可以使用cookie來記錄用戶的選項，例如：背景色、分辨率等。當(dāng)用戶下次訪問時，仍然可以保存上一次訪問的界面風(fēng)格。| 特性 | cookie | localStorage | sessionStorage | indexDB |
|---|---|---|---|---|
| 數(shù)據(jù)生命周期 | 一般由服務(wù)器生成，可以設(shè)置過期時間 | 除非被清理，否則一直存在 | 頁面關(guān)閉就清理 | 除非被清理，否則一直存在 |
| 數(shù)據(jù)存儲大小 | 4K | 5M | 5M | 無限 |
| 與服務(wù)端通信 | 每次都會攜帶在 header 中，對于請求性能影響 cookie在瀏覽器和服務(wù)器間來回傳遞 | 不會自動把數(shù)據(jù)發(fā)給服務(wù)器，僅在本地保存 | 不會自動把數(shù)據(jù)發(fā)給服務(wù)器，僅在本地保存 | 不參與 |
重要的是多刷題，可以看劍指offer，leetcode！ 樣式優(yōu)先級 !important > 內(nèi)聯(lián) > id > class > tag CSS3有哪些新特性？
參考答案
1. CSS3實現(xiàn)圓角（border-radius），陰影（box-shadow）， 2. 對文字加特效（text-shadow、），線性漸變（gradient），旋轉(zhuǎn)（transform） 3. transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋轉(zhuǎn),縮放,定位,傾斜 4. 增加了更多的CSS選擇器 多背景 rgba 5. 在CSS3中唯一引入的偽類是 ::selection. 6. 媒體查詢，多欄布局 7. border-image#parent:after{
content:".";
height:0;
visibility:hidden;
display:block;
clear:both;
}
new操作符具體干了什么呢?
參考答案
1. 創(chuàng)建一個空對象，并且 this 變量引用該對象，同時還繼承了該函數(shù)的原型 2. 屬性和方法被加入到 this 引用的對象中 3. 新創(chuàng)建的對象由 this 所引用，并且最后隱式的返回 this| 1 2 3 |
var obj = {};
obj.__proto__ = Base.prototype;
Base.call(obj); |
參考答案
1. 創(chuàng)建XMLHttpRequest對象,也就是創(chuàng)建一個異步調(diào)用對象 2. 創(chuàng)建一個新的HTTP請求,并指定該HTTP請求的方法、URL及驗證信息 3. 設(shè)置響應(yīng)HTTP請求狀態(tài)變化的函數(shù) 4. 發(fā)送HTTP請求 5. 獲取異步調(diào)用返回的數(shù)據(jù) 6. 使用JavaScript和DOM實現(xiàn)局部刷新 請解釋一下 JavaScript 的同源策略。參考答案
概念： 同源策略是客戶端腳本（尤其是Javascript）的重要的安全度量標準。它最早出自Netscape Navigator2.0，其目的是防止某個文檔或腳本從多個不同源裝載。 這里的同源策略指的是：協(xié)議，域名，端口相同，同源策略是一種安全協(xié)議，指一段腳本只能讀取來自同一來源的窗口和文檔的屬性。 為什么要有同源限制： 我們舉例說明：比如一個黑客程序，他利用Iframe把真正的銀行登錄頁面嵌到他的頁面上，當(dāng)你使用真實的用戶名，密碼登錄時，他的頁面就可以通過Javascript讀取到你的表單中input中的內(nèi)容，這樣用戶名，密碼就輕松到手了。 Ajax 是什么？Ajax 的交互模型？同步和異步的區(qū)別？如何解決跨域問題？參考答案
Ajax 是什么： 1. 通過異步模式，提升了用戶體驗 2. 優(yōu)化了瀏覽器和服務(wù)器之間的傳輸，減少不必要的數(shù)據(jù)往返，減少了帶寬占用 3. Ajax 在客戶端運行，承擔(dān)了一部分本來由服務(wù)器承擔(dān)的工作，減少了大用戶量下的服務(wù)器負載。 Ajax 的大的特點： 1. Ajax可以實現(xiàn)動態(tài)不刷新（局部刷新） 2. readyState 屬性 狀態(tài) 有5個可取值： 0 = 未初始化，1 = 啟動， 2 = 發(fā)送，3 = 接收，4 = 完成 Ajax 同步和異步的區(qū)別: 1. 同步：提交請求 -> 等待服務(wù)器處理 -> 處理完畢返回，這個期間客戶端瀏覽器不能干任何事 2. 異步：請求通過事件觸發(fā) -> 服務(wù)器處理（這是瀏覽器仍然可以作其他事情）-> 處理完畢 ajax.open方法中，第3個參數(shù)是設(shè)同步或者異步。 Ajax 的缺點： 1. Ajax 不支持瀏覽器 back 按鈕 2. 安全問題 Ajax 暴露了與服務(wù)器交互的細節(jié) 3. 對搜索引擎的支持比較弱 4. 破壞了程序的異常機制 5. 不容易調(diào)試 解決跨域問題： 1. jsonp 2. iframe 3. window.name、window.postMessage 4. 服務(wù)器上設(shè)置代理頁面 js對象的深度克隆代碼實現(xiàn)參考答案
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
function clone(Obj) {
var buf;
if (Objinstanceof Array) {
buf = []; // 創(chuàng)建一個空的數(shù)組
var i = Obj.length;
while (i--) {
buf[i] = clone(Obj[i]);
}
return buf;
}else if (Objinstanceof Object){
buf = {}; // 創(chuàng)建一個空對象
for (var kin Obj) { // 為這個對象添加新的屬性
buf[k] = clone(Obj[k]);
}
return buf;
}else{
return Obj;
}
}
|
標題名稱：常見總結(jié)-創(chuàng)新互聯(lián)
分享網(wǎng)址：http://m.jiaotiyi.com/article/coseei.html