摘要:函數節流使得一定時間內只觸發一次函數。區別函數節流不管事件觸發有多頻繁,都會保證在規定時間內一定會執行一次真正的事件處理函數,而函數防抖只是在最后一次事件后才觸發一次函數。這樣的場景,就適合用節流技術來實現。需要注意一點,服務端也要支持。
原文 https://github.com/Ritr/mark/...
js
閉包
要理解閉包,首先要知道javascript的作用域。通常javascript作用域分為全局作用域和函數內作用域,通常來說一個函數執行開始到結束也意味著一個作用域的創建到銷毀,如果函數A內變量被引用,則A會在內存中駐留一段時間直至A內變量都被釋放,我們就可以將這個函數作用域稱之為閉包。也可以這么說,閉包是函數作用域的一種使用方式的實現。使用閉包會引起內存升高,應盡量規避閉包,使用let替代var是一種非常好的方式。
原型和繼承
JavaScript 原型
</>復制代碼
由于 JS 沒有"類", 所以采用了原型的方式實現繼承,正確的說法是引用或者委托,因為對象之間的關系不是復制,而是委托。在查找屬性的時候,引用(委托)原型對象的屬性,也就是我們常說的原型繼承。
JavaScript 繼承
</>復制代碼
原型繼承
</>復制代碼
function Person(name){
this.name=name;
this.className="person"
}
Person.prototype.getClassName=function(){
console.log(this.className)
}
function Man(){
}
Man.prototype=new Person();//1
//Man.prototype=new Person("Davin");//2
var man=new Man;
>man.getClassName()
>"person"
>man instanceof Person
>true
</>復制代碼
構造函數繼承
</>復制代碼
function Person(name){
this.name=name;
this.className="person"
}
Person.prototype.getName=function(){
console.log(this.name)
}
function Man(name){
Person.apply(this,arguments)
}
var man1=new Man("Davin");
var man2=new Man("Jack");
>man1.name
>"Davin"
>man2.name
>"Jack"
>man1.getName() //1 報錯
>man1 instanceof Person
>true
</>復制代碼
組合繼承
</>復制代碼
function Person(name){
this.name=name||"default name"; //1
this.className="person"
}
Person.prototype.getName=function(){
console.log(this.name)
}
function Man(name){
Person.apply(this,arguments)
}
//繼承原型
Man.prototype = new Person();
var man1=new Man("Davin");
> man1.name
>"Davin"
> man1.getName()
>"Davin"
</>復制代碼
寄生組合繼承
</>復制代碼
function Person(name){
this.name=name; //1
this.className="person"
}
Person.prototype.getName=function(){
console.log(this.name)
}
function Man(name){
Person.apply(this,arguments)
}
//注意此處
Man.prototype = Object.create(Person.prototype);
Man.prototype.constructor = Man;
var man1=new Man("Davin");
> man1.name
>"Davin"
> man1.getName()
>"Davin"
</>復制代碼
ES6繼承
</>復制代碼
class Person{
//static sCount=0 //1
constructor(name){
this.name=name;
this.sCount++;
}
//實例方法 //2
getName(){
console.log(this.name)
}
static sTest(){
console.log("static method test")
}
}
class Man extends Person{
constructor(name){
super(name)//3
this.sex="male"
}
}
var man=new Man("Davin")
man.getName()
//man.sTest()
Man.sTest()//4
輸出結果:
Davin
static method test
還是用TypeScript吧,強行安利
TypeScript,
再強行安利angular哈哈
解決回調地獄
這個講解很清晰:Promise
async await
this
tihs
this是Javascript語言的一個關鍵字。 它代表函數運行時,自動生成的一個內部對象,只能在函數內部使用。隨著函數使用場合的不同,this的值會發生變化。但是有一個總的原則,那就是this指的是,調用函數的那個對象
深拷貝淺拷貝
深拷貝是遞歸復制了一個對象的屬性和值到另一個對象上
淺拷貝相當于對象引用
箭頭函數
沒找到比較好的中文資料,看MDN吧
Arrow function
ES6、7
ES6看這里
ES7看這里
防抖節流
看這里
函數防抖:將幾次操作合并為一此操作進行。原理是維護一個計時器,規定在delay時間后觸發函數,但是在delay時間內再次觸發的話,就會取消之前的計時器而重新設置。這樣一來,只有最后一次操作能被觸發。
函數節流:使得一定時間內只觸發一次函數。原理是通過判斷是否到達一定時間來觸發函數。
區別: 函數節流不管事件觸發有多頻繁,都會保證在規定時間內一定會執行一次真正的事件處理函數,而函數防抖只是在最后一次事件后才觸發一次函數。 比如在頁面的無限加載場景下,我們需要用戶在滾動頁面時,每隔一段時間發一次 Ajax 請求,而不是在用戶停下滾動頁面操作時才去請求數據。這樣的場景,就適合用節流技術來實現。
DOM
事件冒泡
</>復制代碼
所謂冒泡就是子元素會將事件傳遞給父元素,向上傳遞過程就像冒泡一樣。當然這個冒泡事件可以阻止
```
//阻止事件冒泡-標準瀏覽器
e.stopPropagation();
//阻止事件冒泡-IE
event.cancelBubble = true;
```
事件委托
事件委托通常會用在處理動態元素的事件上,利用的原理就是事件冒泡。例如父元素parent的子元素child是動態生成的,如果要監聽child元素的事件,可以通過在父元素事件內判斷事件源是否是child元素,由此來執行對應的函數。這種方式通常用在以jquery為主的技術棧的項目,如果你使用的是mvvm一類框架,那么使用到事件委托的機會可能會很少
css
標準盒模型
IE盒模型
兼容寫法
頭部加入
</>復制代碼
html5
Web Worker
Web Worker 使用教程
注意,這種多線程能力不是JavaScript語言原生具有的,而是瀏覽器宿主環境提供的。
還有一個有意思的東西 shared worker,可以多頁面共享一個woker以此來實現頁面之間的通信
WebSocket
</>復制代碼
WebSocket 是 HTML5 開始提供的一種在單個 TCP 連接上進行全雙工通訊的協議。
WebSocket 使得客戶端和服務器之間的數據交換變得更加簡單,允許服務端主動向客戶端推送數據。在 WebSocket API 中,瀏覽器和服務器只需要完成一次握手,兩者之間就直接可以創建持久性的連接,并進行雙向數據傳輸。
需要注意一點,服務端也要支持WebSocket。在node環境下可以試試 socket.io
css3
flex布局
掌握flex關鍵在于掌握兩個軸:main axis和cross axis.
main aixs即是主軸,cross axis即是和主軸交叉的軸,可以叫它交叉軸,實在不好翻譯。
注意當main aixs方向改變時(水平->垂直 或者 垂直->水平),cross axis也會隨著改變
在線demo
animation
animation可以理解為像電影膠卷一樣,讓元素在某個時間段處于某種表現方式
https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation
transition
trabsition相當于只有兩個關鍵幀的animation,一個是開始狀態一個是結束狀態。
https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition
transform
transform是干嘛的呢?它是控制元素的縮放,旋轉,位移等屬性的。transform使元素變成了舞蹈家。
https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform
@font-face
為什么要把字體列出來呢?因為有了這個神器,網頁中的圖標都被解放了!將圖標轉換成矢量字體,或者直接用圖標(字體)庫,實現效果杠杠的!簡直就是健康美味,好吃不貴!
https://developer.mozilla.org/zh-CN/docs/Web/CSS/@font-face
RESTful和狀態碼
RESTful是一種風格而不是規范,具體API設計還要結合本身的開發情況來考慮
RESTful API 最佳實踐
優化
減少請求次數
合并圖片、js、css
減少請求體積
壓縮圖片、js、css
懶加載
對非必須立刻展示的內容,延遲加載或者懶加載(需要時再加載)
預加載
將資源提前加載到瀏覽器備用
緩存
首頁靜態化,redis緩存,網站緩存,CDN緩存,客戶端緩存。
工程化
工程化是必須的
https://roshanca.com/2017/front-end-engineering-system/
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/102958.html
摘要:重構總共耗時個工作日。第一個重構原因就是沒有引入靜態類型,導致查看一個對象結構需要翻來覆去在多個文件中查找。第三是各個狀態模塊耦合度高,加大了代碼維護難度。但如果耦合度過高,往往是因為模塊沒有細分到位。這個項目也不列外。 showImg(https://segmentfault.com/img/remote/1460000019660483); 不知不覺已是2019年的7月,恍惚之間已...
摘要:前言微服務微架構的基礎,通信框架的元老級別框架,即之前的與的實現聊天室的功能后已經過了不到一周的時間啦,今天我們更新了項目版本從到的升級。 前言 SpringBoot!微服務微架構的基礎,Netty通信框架的元老級別框架,即之前的SpringBoot與Netty的實現聊天室的功能后已經過了不到一周的時間啦,今天我們更新了項目版本從V1.0.0到V1.2.0的升級。 介紹 升級要點一:前...
摘要:十年鏟碼,八大體系超千篇數百萬字技術筆記系列匯總悅享版十年鏟碼兩茫茫,縱思量,卻易忘不覺筆者步入程序員已有十年。十年之期,正巧筆者從阿里離開,重回打印制造業的懷抱,希望能依托于設備優勢逐步真正構建分布式制造網絡。 showImg(https://segmentfault.com/img/remote/1460000020151971); 十年鏟碼,八大體系超千篇數百萬字技術筆記系列匯總...
閱讀 1952·2021-11-19 09:40
閱讀 2142·2021-10-09 09:43
閱讀 3299·2021-09-06 15:00
閱讀 2817·2019-08-29 13:04
閱讀 2773·2019-08-26 11:53
閱讀 3532·2019-08-26 11:46
閱讀 2327·2019-08-26 11:38
閱讀 396·2019-08-26 11:27