整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
者｜Michael Shilman
譯者｜謝麗
隨著時間的推移，前端開發者開發的應用比以往任何時候都要大，并隨著邏輯和功能向客戶端轉移，應用變得越來越復雜。有許多很棒的庫可以簡化前端堆棧的不同部分，從構建工具（如 Webpack）到視圖層（如 React）。但迄今為止，還沒有一個通用的工具來構建 UI 組件——應用的原子單元。
Storybook 的目標是幫助每個開發人員構建 UI 組件，無論是框架還是技術棧。近日，Storybook 4.0 的發布讓我們離這個目標又近了一步。
Storybook 4.0 （SB4）將支持 6 個新的視圖層，并引入了可以節省時間的特性來快速構建現代化 UI：
我們很高興為 Storybook 的 UI 組件工具 & 最佳實踐生態系統引入了六個新的視圖層。Storybook 及其插件與視圖層無關。這意味著，每當有人添加一個特性或修復一個 Bug 時，每個用戶都可以從中受益，而不管他們選擇了哪種框架。
例如，引入 Storybook Angular 極大地改進了 Typescript 支持，React Native 的改進將有利于下一代 Web UI，新的視圖層使每個人都可以從中受益。
隨著 Webpack 4 和 Babel 7 的升級，Storybook 4 得到了顯著的性能提升。Storybook 現在可以和一些流行的前端工具兼容，比如 create-response-app 2、Gatsby 2 和 Next 7。
Webpack 4 和 Babel 7 還包含了其他數百個改進，包括 Webpack 4 中的 WebAssembly 支持、Babel 7 中的 JS 配置、Typescript 和 JSX 片段。
如果你正在從舊版本升級，則可以學習 Storybook 4.0 的遷移指南：
https://medium.com/storybookjs/migrating-to-storybook-4-c65b19a03d2c
組件不僅僅局限于 Web。React Native 把組件帶到了移動領域。
Storybook 4.0 使得向團隊的移動設備發布 Storybook 變得非常簡單。它提供了運行 Storybook 應用所需的所有功能，而且無需連接到 Storybook 服務器。
@storybook/react-native 的更新改善了它與應用的集成方式。此外，Storybook 現在有了一個設備內置的用戶界面，可以用于流行的插件，比如旋鈕、便簽和背景。
Storybook 主題
Storybook 4.0 提供了黑色主題
開發人員現在可以精確控制 Storybook 的外觀。Norbert de Langen 引入了主題，它允許你調整樣式以匹配你的品牌。
Storybook 4.0 包含了一個“黑色”主題來展示這些可能性。有關主題說明，請查閱文檔（https://storybook.js.org/configurations/theming/）。
前端開發人員為桌面和移動設備構建 Web 應用，Storybook 4 包含一個專門的移動視圖。
當檢測到移動設備用戶代理時，Storybook 會在三個單獨的選項卡中顯示它的故事目錄、主組件預覽和插件面板。
你可以在手機上瀏覽我們的官方 Storybook 示例，檢出一個演示程序，或者在 Web 瀏覽器的開發工具中設置一個移動用戶代理并重新加載頁面。
借助由 Tom Coleman 開發的新的參數 API，用戶和插件作者現在有了配置故事的標準格式。
例如，不必針對每個故事使用笨拙的 withNotes 修飾符：
storiesOf('My component', module)
.add('story1', withNotes('some notes')(()=> <Component ... />))
.add('story2', withNotes('other notes')(()=> <Component .../>))
你可以在添加故事時通過傳遞一個額外的參數來標注故事：
// .storyook/config.js (全局修飾符，也支持局部修飾符)
addDecorator(withNotes)
// Component.stories.js
storiesOf('My component', module)
.add('story1', ()=> <Component />, { notes: 'some notes' })
.add('story2', ()=> <Component />, { notes: 'other notes' })
所有官方 Storybook 插件都會轉換為使用故事參數，有關如何使用新 API 的更多信息，請參閱文檔：
https://github.com/storybooks/storybook/blob/master/MIGRATION.md#addon-story-parameters
只需一分鐘，你就可以升級到 Storybook 4.0。
如果你對 Storybook 不熟悉，現在就是入門的最佳時機。Storybook 支持最流行的視圖層和前端技術，幫助你創建長久的 UI 組件。查看 Storybook 教程，逐步演練 React/Angular/Vue，或者，你想立即開始：
cd my-project npx -p @storybook/cli sb init yarn storybook
Storybook 仍然是世界上最流行的 UI 組件瀏覽器。最近，該項目在 Github 上的 star 數超過了 3 萬，在 NPM 上每月的下載量超過了 100 萬，還有 500 個貢獻者。
Storybook Open Collective 發展勢頭良好。它每月從 Facebook、Chromatic、Percy、Tipe 和 Applitools 等網站獲得贊助，Algolia 和 Airbnb 最近進行了重大的一次性捐贈，另外，還有許多來自社區的支持者。
英文原文
https://medium.com/storybookjs/storybook-4-0-is-here-10b9857fc7de
家好，我是PrvtSite。PrvtSite一個主要分享網站制作及相關資源的網站，網站由自建PrvtCMS工具制作。
上一節，我們提到了如何使用分組捕獲，匹配HTML標簽及標簽屬性。今天，我們來更進一步的使用它。
匹配HTML標簽及標簽屬性
const reg_tags=/<((["'])+.*?|[^>])+>/g;匹配結果
const reg_tagAttrs=/(?<=\s)[\w:-]+(=(["']).*?)*/g;匹配結果
老樣子，學習新的內容前，我們來看一下其它實例。
假設我們有一個對象，我們要取出其中的屬性值，創建新的變量來記住他們。
var person={
name: 'king',
age: 10000,
}傳統的寫法
var name=person.name;
var age=person.age;
console.log(name, age);// king 10000ES6解構的寫法
var {name, age}=obj;
console.log(name, age);// king 10000假設我們有一個數組，我們要取出其中的值，創建新的變量來記住他們。
var datas=['king', 10000];傳統的寫法
var name=datas[0];
var age=datas[1];
console.log(name, age);// king 10000ES6解構的寫法
var [name,age]=datas
console.log(name, age);// king 10000到此，我們簡單的了解了解構的用法，之后專門出一篇文章來聊它，現在我們回到正則表達式。
var strStart='<div id="main" class="container">';
var strEnd='</div>';獲取開始標簽與結束標簽中的“div”。
\w+
一般寫法
var reg=/\w+/;
var [strStartTagName]=strStart.match(reg) || [];
var [strEndTagName]=strEnd.match(reg) || [];加判斷，加容錯，防止輸入BUG。比如：< id="container"> < div id="container">等等。
// 必須是<或者</開始，并且以>或者非標簽屬性名稱結尾。
var reg=/(?<=<[\/\s]*)\w+(?=(\s+(?![\s=])|>))/;匹配結果
RegExp.- 方式
非標準: 該特性是非標準的，請盡量不要在生產環境中使用它！
var strStart='<div id="main" class="container">';
var reg=/(?<=<[\/\s]*)(\w+)(?=(\s+(?![\s=])|>))/;
// 是否匹配成功
var isNull=reg.test(strStart)==false;
// if(isNull) return '語法錯誤：' + strStart;
//標簽名稱
var strStartTagName=RegExp.$1;前面，我們看到可通過/(?<=\s)[\w:-]+(=(["']).*?)*/g，獲取所有標簽屬性。現在我們來獲取屬性名稱與屬性值。
舉例：onclick="save('submit')"
屬性名：=等號之前內容。
屬性值：一對引號（"或者'）里面的內容
/(^[^=]+|(?<=(['"])).*?(?=))/g;
var reg=/(^[^=]+|(?<=(['"])).*?(?=))/g;匹配結果
var reg=/(^[^=]+|(?<=(['"])).*?(?=\2))/g;
var attr=`onclick="save('submit')"`;
var [key,value]=attr.match(reg) || [];
console.log(key,value);合并上述正則及代碼，一個HTML語法樹正在向您招手。
// **.d.ts
interface IHtml {
tagName?: string,
nodeType: string,
text?:string
attr?:any
}人人為我，我為人人，謝謝您的瀏覽，我們一起加油吧。
、加載和執行
1、<script>標簽放在 </body>之前加載，永遠不要把外鏈腳本緊跟在 <link> 之后，依賴多個 js 腳本的時候，就要使用打包工具合成一個 js 腳本了。
2、H5 中引入 async 屬性，用于異步加載腳本，async 和 defer 的相同點在于采用并行下載，在下載過程中不會產生阻塞。 不同點是在于執行時機，async 是加載完成后自動完成，而 defer (DOM加載之后）需要等待頁面完成后，帶有 defer 的 <script> 標簽可以放在任意位置，不會阻塞瀏覽器的其他進程。
二、數據存取
1、盡可能的使用局部變量，對于瀏覽器而言，一個標識所在的位置越深，讀寫速度就越慢。全局變量總是處于作用域鏈的最末端。
2、try catch 不應該被用來解決 js 的錯誤的，如果你知道某個錯誤會經常的出現，那么就說明代碼本身就有問題，應該盡早修復代碼。
3、將錯誤委托給一個函數進行處理， handleError() 是 catch 字句中唯一執行的代碼
4、對象成員嵌套的越深，讀取的速度就越慢，例如：location.href 比 window.location.href 快，大部分瀏覽器點表示法（Object.name） 和 通過方括號表示法操作并沒有什么太大的區別，只有在 Safari 瀏覽器中，點表示法會比方括號表示法始終更快。
5、所有類似性能問題基本上都和對象成員有關系，因此應該避免對他們的頻繁使用，例如在同一個函數中沒有必要讀取同一個對象成員，可以將值保存到一個局部變量中。性能優化很多的，特別是在處理嵌套對象的時候。（不推薦用于對象的成員方法上）比如：
function test (a, b) {
if (a.name===b.name && a.name==='osenki') {
console.log('1')
}
} // 這種寫法會針對 a.name 成員調用兩次，我們修改如下：
function test (a, b) {
let { name }=a
if (name===b.name && name==='osneki') {
console.log('1')
}
} // 我們將值保存到局部變量中減少一次查詢。局部變量的讀取速度要快很多的
6、屬性或者方法在原型鏈中的位置越深，訪問他的速度就越慢。
三、DOM 編程
1、訪問DOM 的次數越多，代碼的運行速度就越慢，所以應該減少對 DOM 的訪問次數，盡量留到 JS 端處理。
2、每綁定一個事件處理器都是有相應的代價的，要么是加重了頁面的負擔，要么是增加了運行期間的執行時間。簡單而優雅的處理DOM事件的技術是事件委托。事實是：事件逐層冒泡并能被父級元素捕獲。使用事件代理，只需給外層元素綁定一個處理器，就可以處理在其子元素上觸發的所有事件。
3、如果需要多次訪問某個 DOM 節點，請使用局部變量存儲它的引用。
4、動畫中使用絕對定位，使用拖放代理。
四、算法和流程控制
1、代碼的阻止結構和解決具體問題的思路是影響代碼性能的重要因素。
2、不要使用 for-in 遍歷數組。
3、條件數量較少時使用 if-else ,條件數量較大時使用 switch，通常來說 switch 總是比 if-else 快。但不是最佳的解決方案。
4、在進行比較、判斷的時候使用全等(===) 可以避免類型轉換的損耗。
5、改善循環性能的最佳方式是減少每次迭代的運算量和減少循環迭代次數。
6、瀏覽器的調用棧大小限制了遞歸算法在 JS 中的應用。
五、字符串和正則表達式
1、正則表達式的工作原理：
· 編譯：瀏覽器先驗證你的表達式，然后轉化為一個原生代碼程序，用于執行匹配工作
· 設置起始位置：正則類進入使用狀態，首先要確定目標字符串的起始搜索位置
· 匹配每個正則表達式字元：逐個檢查文本和正則表達式模式
· 匹配成功或者失敗： 在字符串當前的位置發現了一個完全匹配，那么正則表達式宣布匹配成功，當字符串的每個字符都經歷這個過程，如果還沒有成功匹配，那么正則表達式就宣布徹底匹配失敗。
2、回溯：也稱之為試探法，本質上就是深度優先搜索算法，其中退到之前的某一步這一過程，就叫'回溯' 。
3、分支：來自 | 操作符。
4、原子組的目的是使用正則引擎回溯結束的更快一點。因此可以有效的阻止海量的回溯。原子組的語法是(?>正則表達式)，位于(?>)之間的所有正則表達式都會被認為是一個單一的正則符號。一旦匹配失敗，引擎將會回溯到原子組前面的正則表達式部分。
六、AJAX
1、減少請求數，可以通過合并 js 和 css 文件，或者只用 MXHR
2、縮短頁面的加載時間，頁面主要內容加載完成后，用 AJAX 獲取那些次要的文件。
七、編程實踐
1、避免使用 eval() 和 Function() 構造器來避免雙重求值帶來的性能小號。
2、盡量使用直接量創建對象和數組。
3、避免做重復的工作。
4、js 的原生方法總會比你寫的任何代碼都要快。
后記：對于大部分轉行的人來說，找機會把自己的基礎知識補齊，邊工作邊補基礎知識，真心很重要。
"我們相信人人都可以成為一個IT大神，現在開始，選擇一條陽光大道，助你入門，學習的路上不再迷茫。這里是北京尚學堂，初學者轉行到IT行業的聚集地。"
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
