加入收藏 | 设为首页 | 会员中心 | 我要投稿 核心网 (https://www.hxwgxz.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 建站 > 正文

2019 JSConf.Asia尤雨溪:在框架设计中寻求平衡

发布时间:2019-08-05 13:41:47 所属栏目:建站 来源:qiangdada
导读:特别说明 这是一个由simviso团队对 JSConf.Asia 中关于前端框架设计取舍相关话题进行翻译的文档,内容并非直译,其中有一些是笔者自身的思考。而分享者正是 Vue.js 的作者 @尤雨溪,Vue 仓库地址:github.com/vuejs/vue 让我们一起来了解下在当前框架三足

为了将一个像素放到屏幕中,你必须跳过一些步骤才能做到,这对于初学者来说是一个很大的障碍。对于那些不适应的人,我这里不说那些适应的人哈,如果你没有类似使用 Java 或者 C# 等语言经验的话,而是仅仅只学过 HTML/CSS 以及 JavaScript 的话,当你看到 Angular 文档的时候,你可能会觉得有点不可思议。

对我来说也是如此。

然后,如果内置的解决方案是不适合当前用例的话,它则会变得不灵活。有时候你可能觉得我只是想用另外一种方式来做,但是我却没方法来将其替换。

最后,一个职责范围大且成型的框架会使得引入一些底层新想法的成本更高,因为太多的地方都要保持其一致性。

然后当你想尝试用一个底层想法的时候,它会影响到你项目中的每个组件(牵一发而动全身)。

所以要做这种 “改变”,就变成了一件很困难的事情。而如果你在 React 的生态系统中说,我引入 Hooks 会让 Redux 更加冗余,那么朋友,这并不是一个真正的问题,因为 React 它的核心团队实际上并不会负责这些解决方案。

就是这样,okay。

4、渐进式框架 Vue

「2019 JSConf.Asia - 尤雨溪」在框架设计中寻求平衡,深度好文

这正是 Vue 所处的位置。但在我们深入了解 Vue 现在正在做的事情之前,我想强调的是,我并不是说 Vue 比这两个框架都好。

因为处于中间位置不一定就是最好的。如果 NG 和 React 在某个功能的封装程度上差异很大,Vue 要做的就是去缩小差异,然后你会发现实际上 Vue 并没有做到最佳。

所以,这就好像我们稍微推迟去寻求我们所认为的最佳平衡点。而每一个选择都会适用于不同人群的需要。

它并不像一件东西一样,可以适用于所有人。

所以我所说的 Vue 在职责范围这个问题的处理方式上,你可能知道我们都叫 Vue 是一个渐进式框架。

优点

「2019 JSConf.Asia - 尤雨溪」在框架设计中寻求平衡,深度好文

职责范围渐进意味着框架使用分层设计,它允许以渐进的方式选择特性。也就是说,如果你不需要路由,如果你不需要状态管理,甚至如果你不需要构建步骤。你可以使用没有任何特性的 Vue,你只需要将 vuejs 拉到你的页面中,然后你就可以立即开始做一些事情。

对于初学者来讲,一个需要翻越的学习障碍,就是刚开始学习时就要求你从屏幕中获取一个像素并移除它。

所以,低的学习门槛对我们来真的很重要,这也是 Vue 的一个使命:允许更多的人参与 Web 开发,允许人们学习它(Vue)并专注于开发,而不是让你学习一堆在你当前开发可能不需要的概念。

但是对于当前的这些问题,我们仍然有通过文档去提供解决方案。当你的用例变得更复杂的时候,当你要构建更复杂的东西的时候,这时你意识到自己需要一个路由。然后你就开始翻阅文档,你会发现,okay,我确实可以使用路由去做这个。

但与此同时,路由它又并不是必需的。并且,如果你愿意的话,你自己也能实现一个路由,因为你能看到 Vue 的路由是如何构建的,并且它的核心实现是非常干净的, 所以如果你愿意的话,是可以用自己的方式去构建一个的。

缺点

「2019 JSConf.Asia - 尤雨溪」在框架设计中寻求平衡,深度好文

它并不完美,因为作为中间者,我们需要去权衡两者的利弊。

所以首先,尽管我们会采用新增模块(集成 router、vuex 等),但我们仍然需要负责维护它们(router、vuex 等)

所以,我们分享了大职责范围下统一维护面的问题,我们要想从根本上改变一些东西,我们必须确保整个生态系统的一致性。

这个维护负担几乎与大职责范围相同,同时也因为我们提供了这些预置的解决方案。

我们的生态系统可能不会像小职责范围那样多样化。因为小职责范围喜欢把问题抛给社区。而在我们的案例中,很多用户很满意我们的解决方案,同时自己也不用再花费时间去找答案。

这就是职责范围的问题,希望你现在已经有所了解了,我认为这就是 React、Vue 和 Angular 之间最根本的区别。

这是它的准确定位,也定义了我们不同的用户群。

很多时候,我们都是在有意决定所扩展的领域。作为框架设计者,我们知道我们正在驾驭不同的领域。这是件好事,因为在整个阶段,不同的开发人员需要不同的解决方案,以及拥有覆盖整个主要框架的规范,确保每个人都得到他们想要的。

四、渲染机制

OK,现在我们来谈谈渲染机制。

也就是说你该如何通过框架来表现自己的UI结构以及该框架是如何进行渲染的。

「2019 JSConf.Asia - 尤雨溪」在框架设计中寻求平衡,深度好文

首先,从操作层面来讲它真的很复杂,它不仅仅是一件事,它包含了很多层面。

「2019 JSConf.Asia - 尤雨溪」在框架设计中寻求平衡,深度好文

简单点来讲,可以将它看成 JSX 与 Templates,即动态渲染函数和基于静态字符串的复杂的 Vue 表达式。然后就是表现力和原生性能,以及运行时调度和提前优化。

有些人对此会有很强烈的意见,但我个人认为他们本质上是很相似的,他们只是对同一个底层理念的不同策略表达。

可以说更多的是技术上的权衡。

一方面,当然是 JSX React 以及所有使用 VDOM 的 react-like 库,比如 pre-act、 stencil, infernal 等。

另一方面,则是基于模板的解决方案。我稍后会讨论 Vue,但更具代表性的基于模板的解决方案有 Svelte,还有就是 ember。

(编辑:核心网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

热点阅读