哈啰 Quark Design 正式开源，新一代跨技术栈前端组件库

最新推荐文章于 2024-07-30 21:15:00 发布
最新推荐文章于 2024-07-30 21:15:00 发布
阅读量435 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： java vue 编程语言 大数据 react
原文链接：https://mp.weixin.qq.com/s?__biz=MzIyMjQ0MTU0NA==&mid=2247536791&idx=2&sn=631a23ecb7dc88ed7997f3e9df147299&chksm=e82f69b0df58e0a638a3617ca3ad09b6791b5bb79368eb18760d6783a31725141955cacee70a&scene=126&&sessionid=0
QuarkDesign是一款由哈啰平台UED和增长&电商前端团队联合打造的跨框架UI组件库，基于WebComponents实现，可在多种前端框架中无缝运行。此组件库旨在提供统一的视觉和交互体验，并支持按需引用及定制主题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 
 
点击“开发者技术前线”，选择“星标”
 
 
让一部分开发者看到未来
 
 
0980647b6932bc28df2aa1cc711a9837.png
 
 
1
 
 
Quark Design是什么？
 
 
Quark（夸克）Design 是由哈啰平台 UED 和增长&电商前端团队联合打造的一套面向移动端的跨框架 UI 组件库。与业界第三方组件库不一样，Quark Design 底层基于 Web Components 实现，它能做到一套代码，同时运行在各类前端框架中。
 
 
Quark Design 历经一年多的开发时间，已在集团内部大量业务中得到验证，本着“共创、共建、共享”的开源精神，我们于即日起将 Quark 正式对外开源！
 
 
Github地址：https://github.com/hellof2e/quark-design (求star、求关注～😁)
 
 
122e2013fb42f6365915b7c293e9b889.png
 
 
注：文档表现/样式参考了HeadlessUI/nutui/vant等。
 
 
2
 
 
Quark 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 Dom）
 
 
Shadow DOM 为自定义的组件提供了包括 CSS、事件的有效隔离，不再担心不同的组件之间的样式、事件污染了。这相当于为自定义组件提供了一个天然有效的保护伞。
 
 
Shadow DOM 实际上是一个独立的子 DOM Tree，通过有限的接口和外部发生作用。我们都知道页面中的 DOM 节点数越多，运行时性能将会越差，这是因为 DOM 节点的相互作用会时常在触发重绘（Repaint）和重排（reflow）时会关联计算大量 Frame 关系。
 
 
1e21409e979043ea390459eccba6032a.png
 
 
而对 CSS 的隔离也将加快选择器的匹配速度，即便可能是微秒级的提升，但是在极端的性能情况下，依然是有效的手段。
 
 
3
 
 
Quark 能为你带来什么？
 
 
提效降本几乎是所有企业的主旋律，Quark 本身除了提供了通用组件之外，我们还为大家提供了开箱即用的 CLI，可以让大家在直接在日常开发中开发横跨多个技术栈/框架的业务组件。比如一个相同样式的营销弹窗，可以做到：
 
 
  • 同时运行在不同技术栈（Angular、Vue、React等）的前端工程中
  • 同时运行在不同版本的技术栈中，比如能同时运行在 Vue2.x、Vue3.x 中
 
 
CLI 内部Beta版本已完成，开源日期略晚于Quark Design。
 
 
可先关注组织地址：https://github.com/hellof2e，关注更新。
 
 
适合场景：公司/团队内部发布一个独立的npm包，让其他团队安装使用，从而达到提效降本的目的。
 
 
npm i -g @quarkd/quark-cli
npx create-quark
 
 
f8e23b1f57beea6be655f4fb7bacdac0.png
 
 
相关链接
 
 
  • 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
 
 
 
 
— 完 —
 
 
点这里👇关注我，记得标星呀～
 
 
前线推出学习交流一定要备注：
 
 
研究/工作方向+地点+学校/公司+昵称（如JAVA+上海+小白）
 
 
扫码加小编微信，进群和大佬们零距离
 
 
 
 
 
 
 
 
历史推荐
 
 
Oracle 推出 JDK 8 的直接替代品
 
 
谷歌推出开源操作系统KataOS
 
 
八大流行的微服务架构设计模式探究
 
 
好文点个在看吧
 


                

        

    

  



    

      

        

            

              
                
                  DevolperFront
                
              
            

            

                关注
              
            

        

        

          
      

      










                



	

		

			

				
					
Vue+HTML+CSS实战教程：实现单页面应用，快速上手！」 「从0到1搭建Vue项目：单页面应用设计与实现（附完整源码）」 「新手友好：用Vue实现高仿骑行App界面，快速上手前端开发」 「前端实

				
			

			

				

					南北极之间
				

				

					11-06
					
					330
					
				

			

		

		

			
				
在这篇教程中，我们将使用 Vue 2 结合 HTML 和 CSS 来创建一个简单的骑行应用界面。这篇教程将带你逐步实现一个包含导航栏、服务模块、促销卡片、规则区域等模块的单页面应用。我们将使用 Vue 的双向绑定和事件处理机制实现应用的界面布局和简单的交互逻辑。项目功能包括：在开始之前，请确保安装了以下工具：创建一个新的HTML文件，并添加以下基础结构：


添加Vue.js CDN链接，并定义一个基本的 Vue 实例。在  中添加头部标题和导航栏：


为标题和导航栏添加样式：


设计功能服务模块




			
		

	



                

            
              



	

		

			

				
					
前端技术栈---看完这篇就够了

				
			

			

				

					萌古大汗的专栏
				

				

					05-24
					
					9252
					
				

			

		

		

			
				
html5、css3、JavaScript、nodejs、TypeScript、前端构建（webpack、gulp、grunt）、chrome DevTools、前端适配、单元测试、自动化测试、http协议、前端通信、工程化（模块化、组件化、规范化、自动化）、浏览器（渲染机制、v8原理）、前端性能优化、前端安全、多端应用（微信公众号、小程序、ReactNative、Flutter、Electron）
Js高级：
1.数据类型和内存空间
2.执行上下文
3.变量对象
4.作用域和作用域链
5.闭包
6.thi

			
		

	



              


  
              

                


	

		

			

				
					
重磅！哈啰 Quark Design 正式开源，下一代跨技术栈前端组件库

				
			

			

				

					u012384510的博客
				

				

					10-31
					
					1966
					
				

			

		

		

			
				
大家好，我是若川。我持续组织了近一年的源码共读活动，感兴趣的可以点此扫码加我微信ruochuan12参与，每周大家一起学习200行左右的源码，共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》包含20余篇源码文章。历史面试系列。另外：目前建有江西|湖南|湖北籍前端群，可加我微信进群。1Quark Design 是什么？Quark（夸克） Design 是由哈啰平台 UED 和增长&a...

			
		

	





	

		

			

				
					
探索Quark UI：一款高效、灵活的前端组件库

				
			

			

				

					gitblog_00094的博客
				

				

					04-23
					
					519
					
				

			

		

		

			
				
探索Quark UI：一款高效、灵活的前端组件库
去发现同类优质开源项目:https://gitcode.com/
是一个基于Vue.js的高质量前端组件库，旨在帮助开发者快速构建现代化的Web应用。它提供了一套完整的UI解决方案，使得开发过程更高效，设计风格更统一。
项目简介
Quark UI的设计理念是简洁和实用，它的目标是降低开发者的学习曲线，并提高产品的开发速度。该项目提供了丰富的预置组件...

			
		

	



		

			
		



	

		

			

				
					
探秘下一代前端组件库：Quark Design

				
			

			

				

					gitblog_00040的博客
				

				

					05-12
					
					512
					
				

			

		

		

			
				
探秘下一代前端组件库：Quark Design

    
        
            quark-design
            Browser-native component library, framework-agnostic, base on web components.(面向未来的组件库，跨端、跨框架、浏览器原生，即插即用。底层基于 Quarkc！)
     ...

			
		

	





	

		

			

				
					
2021哈啰出⾏⽤户增长论坛PPT汇总.zip

				
			

			

				

					12-20
				

			

		

		

			
				
【标题】2021哈啰出行用户增长论坛PPT汇总.zip  【描述】这份压缩包文件包含了2021年哈啰出行用户增长论坛的四份重要PPT演讲资料，详细介绍了公司在用户增长策略上的深入实践和算法应用。这四份文档分别探讨了因果...

			
		

	





	

		

			

				
					
哈啰出行源码.rar

				
			

			

				

					10-28
				

			

		

		

			
				
【哈啰出行源码】是基于易语言编写的，提供了 OCR(光学字符识别)本地打码功能，旨在供开发者参考学习。源码包含了多个组件和配置文件，通过这些我们可以深入了解其内部工作原理和实现机制。  易语言是一种面向对象的...

			
		

	





	

		

			

				
					
PostgreSQL在哈啰的实践周飞.pdf

				
			

			

				

					08-23
				

			

		

		

			
				
PostgreSQL 的开放平台支持各种灵活功能扩展，使得哈啰单车能够快速开发和部署新的业务系统。同时，PostgreSQL 的开放平台也使得哈啰单车能够轻松地集成各种第三方系统和服务。  五、功能强大的 PostGIS  PostGIS 是...

			
		

	





	

		

			

				
					
3-5+AI在哈啰顺风车场景的应用实践.pdf

				
			

			

				

					03-18
				

			

		

		

			
				
【哈啰顺风车】是哈啰出行旗下的一个重要服务板块，致力于为用户提供便捷、经济的共享出行解决方案。在这个场景中，AI技术发挥着至关重要的作用，优化了乘客与司机的匹配效率，提升了交易的安全性和用户体验，同时...

			
		

	





	

		

			

				
					
前端最近新出来的技术栈

				
			

			

				

					weixin_45840598的博客
				

				

					01-16
					
					838
					
				

			

		

		

			
				
2、Vue 3：Vue 3 是 Vue.js 的最新版本，它引入了很多新的特性和改进。3、Next.js：Next.js 是一个基于 React 的 SSR（服务器端渲染）框架，它使得前端开发者可以更容易地构建高性能的网站和应用程序。4、TypeScript：TypeScript 是 JavaScript 的超集，它添加了静态类型检查和其他一些新特性。通过使用 TypeScript，开发者可以在开发过程中捕获潜在的错误，并提供更好的代码可读性和维护性。

			
		

	





	

		

			

				
					
前端最新技术栈前端开源框架（ps源码链接）

				
			

			

				

					luquinn的博客
				

				

					07-30
					
					484
					
				

			

		

		

			
				
Github：https://github.com/vbenjs/vue-vben-adminGithub：https://github.com/soybeanjs/soybean-adminGithub：https://github.com/arco-design/arco-design-pro-vueGithub：https://github.com/HalseySpicy/Geeker-AdminGithub：https://github.com/pure-admin/vue-pure-adminGi

			
		

	





	

		

			

				
					
2019前端技术栈梳理

				
			

			

				

					技术因分享而快乐！
				

				

					09-23
					
					1299
					
				

			

		

		

			
				
首先Mark住值得参考的资料

一个关于前端、后端和运维roadmap的网站
2016年前端技术观察


2019前端技术栈参考图

图中关于前端技术栈主要分为三个阶段:
1. 前端基本功HTML、CSS、JavaScript
2. 前端模块化、工具化
3. 前端的深入学习
比熊很赞同曹刘阳老师在2016年前端技术观察里提到的学好前端自己领域的知识，专一门，再去扩展其它领域知识。近几年前端技术更...

			
		

	





	

		

			

				
					
2020前端技术栈

				
			

			

				

					weixin_45289501的博客
				

				

					10-14
					
					927
					
				

			

		

		

			
				
序言
这是博主从其他网站找的2020技术栈，供学习参考用，如有侵权，联系删除。
阶段一

常用开发工具介绍


WebStorm
Dreamweaver
Hbuilder
Sublime
Vim
VsCode
…




HTML+CSS
1.属性
2.事件
3.标签
4.字符集
5…
CSS


项目


项目
谁的
|  |  |
|–|--|
|  |  |

项目





 计划任务


 完成任务



...

			
		

	





	

		

			

				
					
2021-11-05前端技术栈

				
			

			

				

					WeCheung
				

				

					11-05
					
					2275
					
				

			

		

		

			
				
前端技术栈一、Node.js二、Webpack三、Koa2五、MongoDB五、Vue 全家桶Vue：Vuex：Vue Router：Vue CLI：Vant：

目前前端主流技术栈

一、Node.js
服务器端的 JavaScript 运行环境，不管哪种前端开发，都必不可少的底层环境。
二、Webpack
语法转换工具，把 ES6/TypeScript/JSX 语法转成浏览器可以运行的代码。
三、Koa2
一个非常流行、简洁强大的 Node.js 后端的 Web 开发框架。
五、MongoDB
目前应用

			
		

	





	

		

			

				
					
如何系统地学习JavaScript

				
			

			

				

					weixin_33804990的博客
				

				

					06-12
					
					347
					
				

			

		

		

			
				
　　一、 要系统的学习JavaScript，需要首先掌握HTML和CSS，这是基础也是学习JavaScript的时候需要用到的知识。　　二、 刚开始入门不建议看《JavaScript权威指南》和《JavaScript高级程序设计》这些书籍。并非这些书籍不好，相反这些书籍是公认的好书!主要是因为这些书籍内容太多太厚了，很容易让你走上‘从入门到放弃’道路!对于初学者而言，多而全意味着主次难分，无法取舍...

			
		

	





	

		

			

				
					
2024年Web前端最新我第一份Web前端工作能找到12k的工作，就是掌握了这些技术栈，真香警告

				
			

			

				

					2401_84446548的博客
				

				

					05-06
					
					1496
					
				

			

		

		

			
				
中年危机是真实存在的，即便有技术傍身，还是难免对自己的生存能力产生质疑和焦虑，这些年职业发展，一直在寻求消除焦虑的依靠。技术要深入到什么程度？做久了技术总要转型管理？我能做什么，我想做什么？一技之长，就是深耕你的专业技能，你的专业技术。（重点）独立做事，当你的一技之长达到一定深度的时候，需要开始思考如何独立做事。（创业）拥有事业，选择一份使命，带领团队实现它。（创业）一技之长分五个层次栈内技术 - 是指你的前端专业领域技术栈外技术 - 是指栈内技术的上下游，领域外的相关专业知识。

			
		

	





	

		

			

				
					
vue技术栈--》从vue2

				
			

			

				

					2401_84419493的博客
				

				

					04-27
					
					158
					
				

			

		

		

			
				
【代码】vue技术栈--》从vue2。

			
		

	





	

		

			

				
					
哈啰 虚拟号码 技术原理

					
最新发布

				
			

			

				

					03-27
				

			

		

		

			
				
### 哈啰虚拟号码技术原理

哈啰虚拟号码的核心在于通过一种绑定模式来实现用户的隐私保护以及电话拨打功能。这种技术通常依赖于第三方云服务平台所提供的通信能力，例如华为云或阿里云的隐私保护通话（Private Number）。这些平台能够在不增加实体 SIM 卡的情况下，为用户提供额外的虚拟号码[^1]。

#### 技术架构概述
1. **虚拟号码分配**  
   当用户发起一次呼叫请求时，系统会动态分配一个临时的虚拟号码给该次通话使用。这个号码仅用于连接双方，并不会暴露任何一方的真实联系方式。
   
2. **双向路由机制**  
   虚拟号码作为中介，在实际拨打电话的过程中起到了桥梁作用。当 A 用户拨打 B 用户时，A 的真实号码会被替换为虚拟号码传递到运营商网络中；而接听方看到的是此虚拟号码而非 A 的原始手机号码。同理，B 返回的应答信号也会经过同样的处理流程再传回至 A 处。

3. **数据加密传输**  
   整个过程中涉及的所有敏感信息均需采用高强度加密算法加以保护，防止被非法截获或者篡改。这一步骤对于保障整个系统的安全性至关重要。

4. **生命周期管理**  
   每个生成出来的虚拟号码都有其特定的有效期，一旦超过设定时间范围即自动失效作废，从而进一步降低泄露风险。

```python
def generate_virtual_number(user_id, duration_minutes=60):
    import random
    
    virtual_num = f"+86{random.randint(1e9, 9e9)}"
    expiration_time = datetime.now() + timedelta(minutes=duration_minutes)

    db.insert({
        'user_id': user_id,
        'virtual_number': virtual_num,
        'expires_at': expiration_time
    })

    return virtual_num
```

上述代码片段展示了如何简单模拟创建并存储一个新的虚拟号码及其关联属性的过程。

---

### 隐私保护措施
为了更好地达到用户隐私的目的，除了利用虚拟号码外还可能采取其他辅助手段：

- 对话内容记录清除策略：每次通话结束后立即删除所有相关日志文件；
- 实施严格的访问控制权限制度以减少内部人员滥用可能性；
- 定期审计操作行为确保合规合法运行环境等等。

---

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值