Storybook 4.0大升级：为RN提供一级支持

Storybook 4.0大升级：为RN提供一级支持、引入6个新视图层

者｜Michael Shilman

译者｜谢丽

随着时间的推移，前端开发者开发的应用比以往任何时候都要大，并随着逻辑和功能向客户端转移，应用变得越来越复杂。有许多很棒的库可以简化前端堆栈的不同部分，从构建工具（如 Webpack）到视图层（如 React）。但迄今为止，还没有一个通用的工具来构建 UI 组件——应用的原子单元。

Storybook 的目标是帮助每个开发人员构建 UI 组件，无论是框架还是技术栈。近日，Storybook 4.0 的发布让我们离这个目标又近了一步。

Storybook 4.0 （SB4）将支持 6 个新的视图层，并引入了可以节省时间的特性来快速构建现代化 UI：

视图层：Ember、MarkoJS、Mithril、HTML、Svelte、Riot
构建：Webpack 4、Babel 7
移动：移动设备视图 React Native
UI：主题
内核：Story 参数

Storybook 支持 6 种新的视图层

我们很高兴为 Storybook 的 UI 组件工具 & 最佳实践生态系统引入了六个新的视图层。Storybook 及其插件与视图层无关。这意味着，每当有人添加一个特性或修复一个 Bug 时，每个用户都可以从中受益，而不管他们选择了哪种框架。

例如，引入 Storybook Angular 极大地改进了 Typescript 支持，React Native 的改进将有利于下一代 Web UI，新的视图层使每个人都可以从中受益。

Ember（由 Gabriel J Csapo 和 Robert Jackson 创建）
MarkoJS（由 Neville Mehta 创建）
Mithril（由 Sangmin Yoon 创建）
HTMLSnippets（由 Filipp Riabchun 创建）
Svelte（由 Gavin King 创建）
Riot.js（由 Lionel Ben ychou 创建）

使用 Webpack4 和 Babel7 提升构建速度

随着 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

为 React Native 提供一级支持

组件不仅仅局限于 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 应用开发

前端开发人员为桌面和移动设备构建 Web 应用，Storybook 4 包含一个专门的移动视图。

当检测到移动设备用户代理时，Storybook 会在三个单独的选项卡中显示它的故事目录、主组件预览和插件面板。

你可以在手机上浏览我们的官方 Storybook 示例，检出一个演示程序，或者在 Web 浏览器的开发工具中设置一个移动用户代理并重新加载页面。

Story 参数 API

借助由 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 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标签及标签属性

1、匹配HTML标签

const reg_tags=/<((["'])+.*?|[^>])+>/g;

匹配结果

2、匹配HTML标签属性

const reg_tagAttrs=/(?<=\s)[\w:-]+(=(["']).*?)*/g;

匹配结果

老样子，学习新的内容前，我们来看一下其它实例。

3、了解ES6的解构，感受语法之美。

假设我们有一个对象，我们要取出其中的属性值，创建新的变量来记住他们。

var person={
	name: 'king',
	age: 10000,
}

传统的写法

var name=person.name;
var age=person.age;
console.log(name, age);// king 10000

ES6解构的写法

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 10000

ES6解构的写法

var [name,age]=datas
console.log(name, age);// king 10000

到此，我们简单的了解了解构的用法，之后专门出一篇文章来聊它，现在我们回到正则表达式。

4 、获取标签的名称

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;

5 、获取属性名与值

前面，我们看到可通过/(?<=\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行业的聚集地。"

在线咨询

上一篇：如何使用 JavaScript 实现前端导入和导出
下一篇：Java编程都学什么？关于JavaScript之BO

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

Storybook 4.0大升级：为RN提供一级支持

Storybook 支持 6 种新的视图层

使用 Webpack4 和 Babel7 提升构建速度

为 React Native 提供一级支持

简化移动 Web 应用开发

Story 参数 API

升级到 Storybook 4.0

1、匹配HTML标签

2、匹配HTML标签属性

3、了解ES6的解构，感受语法之美。

4 、获取标签的名称

5 、获取属性名与值

您的项目需求