注册公司网站地址该如何填,photoshop在线制作,国内最快的wordpress主题,用哪个网站做相册视频大家好#xff0c;我是若川。我持续组织了近一年的源码共读活动#xff0c;感兴趣的可以 点此扫码加我微信 ruochuan12 参与#xff0c;每周大家一起学习200行左右的源码#xff0c;共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试…大家好我是若川。我持续组织了近一年的源码共读活动感兴趣的可以 点此扫码加我微信 ruochuan12 参与每周大家一起学习200行左右的源码共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外目前建有江西|湖南|湖北籍前端群可加我微信进群。1Quark Design 是什么Quark夸克 Design 是由哈啰平台 UED 和增长电商前端团队联合打造的一套面向移动端的跨框架 UI 组件库。与业界第三方组件库不一样Quark Design 底层基于 Web Components 实现它能做到一套代码同时运行在各类前端框架中。Quark Design 历经一年多的开发时间已在集团内部大量业务中得到验证本着“共创、共建、共享”的开源精神我们于即日起将 Quark 正式对外开源Github地址https://github.com/hellof2e/quark-design (求star、求关注)注文档表现/样式参考了HeadlessUI/nutui/vant等。2Quark Design 与现有主流组件库的区别是什么Quark(夸克)有别于业界主流的移动端组件库Quark 能同时运行在业界所有前端框架/无框架工程中做到真正的技术栈无关我们不一样)不依赖技术栈eg. Vue、React、Angular等不依赖技术栈版本(eg. Vue2.x、Vue3.x)全新的Api设计eg. 弹窗的打开属性由传统的 Visible 调整为符合浏览器原生弹窗的 open等公司前端技术生态项目技术栈多时保持视觉/交互统一完全覆盖您所需要的各类通用组件支持按需引用详尽的文档和示例支持定制主题性能优势-优先逻辑无阻塞我们以对 React 组件的 Web Components 化为例一个普通的 React 组件在初次执行时需要一次性走完所有必须的节点逻辑而这些逻辑的执行都同步占用在 js 的主线程上那么当你的页面足够复杂时一些非核心逻辑就将会阻塞后面的核心逻辑的执行。比如首次加载时你的页面中有一个复杂的交互组件交互组件中又包含 N多逻辑和按钮等小组件此时页面的首次加载不应该优先去执行这些细节逻辑而首要任务应当是优先渲染出整体框架或核心要素而后再次去完善那些不必要第一时间完成的细节功能。例如一些图像处理非常复杂但你完全没必要在第一时间就去加载它们。当我们使用 Web Components 来优化 React的时候这个执行过程将会变得简洁的多比如我们注册了一个复杂的逻辑组件在 React 执行时只是执行了一个 createElement 语句创建它只需要 1-2 微秒即可完成而真正的逻辑并不在同时执行而是等到“核心任务”执行完再去执行甚至你可以允许它在合适的时机再去执行。我们也可以简单的理解为部分逻辑在之后进行执行然后被 render 到指定 id 的 Div 中的那么为什么传统的组件为什么不能这么做呢而非得 Web Components 呢那就不得不提到它所包含的另一个技术特性Shadow DOM组件隔离Shadow DomShadow DOM 为自定义的组件提供了包括 CSS、事件的有效隔离不再担心不同的组件之间的样式、事件污染了。这相当于为自定义组件提供了一个天然有效的保护伞。Shadow DOM 实际上是一个独立的子 DOM Tree通过有限的接口和外部发生作用。我们都知道页面中的 DOM 节点数越多运行时性能将会越差这是因为 DOM 节点的相互作用会时常在触发重绘Repaint和重排reflow时会关联计算大量 Frame 关系。而对 CSS 的隔离也将加快选择器的匹配速度即便可能是微秒级的提升但是在极端的性能情况下依然是有效的手段。3Quark 能为你带来什么提效降本几乎是所有企业的主旋律Quark 本身除了提供了通用组件之外我们还为大家提供了开箱即用的 CLI可以让大家在直接在日常开发中开发横跨多个技术栈/框架的业务组件。比如一个相同样式的营销弹窗可以做到同时运行在不同技术栈Angular、Vue、React等的前端工程中同时运行在不同版本的技术栈中比如能同时运行在 Vue2.x、Vue3.x 中CLI 内部 Beta 版本目前初版已完成github 地址[https://github.com/hellof2e/quark-cli]。适合场景前端团队想发布一个独立的组件或npm包让其他各类技术栈的工程使用从而达到提效降本的目的。npm i -g quarkd/quark-clinpx create-quark4写在最后Quark Design 历经一年多的开发时间期间有不少集团内部的同学参与并贡献了代码在此先表示感谢感谢大家对于 Quark Design 的热情和支持。同时在开源后也欢迎更多的社区同学参与共建 Quark DesignQuark Design loves u ❤️相关链接GitHub: [https://github.com/hellof2e/quark-design]Quark Doc: [https://quark-design.hellobike.com/][https://developer.mozilla.org/en-US/docs/Web/Web_Components][https://www.webcomponents.org/]2022 Web Components 趋势解读和展: [https://zhuanlan.zhihu.com/p/475779606]可以点击 阅读原文 查看 github 仓库。
