OpenTiny 2024 年年度榜单新鲜出炉，一起看看榜上有没有你吧！2025 年 OpenTiny 开源社区也欢迎朋友们一起参与共建~ 

携手共创，致敬不凡！2024年，OpenTiny持续在前端开源领域扎根，每一位开发者都是推动项目共同前行的宝贵力量。从bug修复，到技术探讨；从参与开源活动，到输出技术文章；从使用项目，到参与共建，每一步跨越，都凝聚了开发者的智慧与汗水。致敬所有在OpenTiny社区里默默付出、积极贡献、引领创新的杰出个人，我们正式启动"OpenTiny年度贡献者评选"活动！快为你喜爱的人气贡献者投票吧~人气贡献者评选名单公布：年度贡献者投票评选时间：2024年12月25日-2024年12月31日投票规则：每人每天可回答3次，每次最多可投2票，最终投票结果选取前5名投票入口：cid:link_2 关于OpenTiny欢迎加入 OpenTiny 开源社区。添加微信小助手：opentiny-official 一起参与交流前端技术～OpenTiny 官网：cid:link_4OpenTiny 代码仓库：cid:link_3TinyVue 源码：cid:link_1TinyEngine 源码： cid:link_0欢迎进入代码仓库 Star🌟TinyEngine、TinyVue、TinyNG、TinyCLI~ 如果你也想要共建，可以进入代码仓库，找到 good first issue标签，一起参与开源贡献~

携手共创，致敬不凡！2024年，OpenTiny持续在前端开源领域扎根，每一位开发者都是推动项目共同前行的宝贵力量。从bug修复，到技术探讨；从参与开源活动，到输出技术文章；从使用项目，到参与共建，每一步跨越，都凝聚了开发者的智慧与汗水。致敬所有在OpenTiny社区里默默付出、积极贡献、引领创新的杰出个人，我们正式启动“OpenTiny年度贡献者评选”活动！欢迎各位开发者踊跃报名~活动详情活动简介： 本次活动主要是通过社区评选+开发者投票形式开展，入选开发者后续可获得相应活动礼品。本次活动一共设置 4 类奖项。“人气共建者”、“人气创作者”、“社区活跃达人” 三类奖项通过投票评选获奖选手，本次投票共选出 5 名获奖选手。按照名次顺序依次给予相应奖励。“优秀共建者”则由社区自主根据实际情况评选 2-3 位，获得 FreeBuds6i 蓝牙耳机及荣誉证书活动奖品：活动时间：年度贡献者征集时间：2024年12月19日-2024年12月24日年度贡献者投票评选时间：2024年12月25日-2024年12月31日报名入口：cid:link_2 关于OpenTiny欢迎加入 OpenTiny 开源社区。添加微信小助手：opentiny-official 一起参与交流前端技术～OpenTiny 官网： cid:link_4OpenTiny 代码仓库： cid:link_3TinyVue 源码： cid:link_1TinyEngine 源码： cid:link_0欢迎进入代码仓库 Star🌟TinyEngine、TinyVue、TinyNG、TinyCLI~ 如果你也想要共建，可以进入代码仓库，找到 good first issue标签，一起参与开源贡献~

2024华为云开源开发者论坛重磅来袭！大会以“开放创新，释放云上生产力”为主题，融合AI、Serverless、前端、时序数据库、边缘计算、批量调度等多个维度，协助生态合作伙伴、企业、个人和高校开发者通过开源力量打造多场景多领域，提升技术活力及产业生产力。本次前端技术论坛汇聚7位行业专家，精心准备7个专题分享。议题内容深入业务，聚焦实践，希望与开发者共同探讨在业务选型/业务开发过程中所遇到的问题及解决方案。与开发者一同打开新思路，碰撞思想火花，共绘前端未来。活动亮点：1、行业大牛齐聚一堂：本次前端技术分论坛汇聚组件库、低代码、图表库等多个行业专家，同时包含开源项目企业合作伙伴、技术总监等，帮助开发者带来前沿开源前端技术分享，揭秘项目中的开发故事，与大家进行深入地互动交流2、实战案例重点分析：除了理论探讨，实践经验也是必不可少，本次前端分论坛设计了丰富地实战案例分享环节。来自一线开发团队的专家们将分享他们在项目中遇到的挑战及解决方案，帮助大家更好地将前端开源技术应用到实际工作中。3、开源项目发版解读本次技术论坛，TinyEngine重磅发布2.0版本，TinyCharts也将带来复杂图表库引擎的解读。在这里工程师们将展示项目的最新进展，帮助还在做技术选型或者遇到项目开发难题的开发者们拓展新思路。提供更多可能性~4、全天参会，午宴交流：本次论坛活动全天参与，即可与行业大牛深入沟通，一起参与午间聚餐，结识开源小伙伴~活动议程

致开发者：    华为云开源开发者论坛将于12月7日（周六）9点30分在上海静安香格里拉酒店正式召开，我们诚挚邀请你报名参与本次线下开发者论坛。报名成功，现场即可领取活动伴手礼，同时中午包含大会午餐。本次活动议题融入AI、Serverless、前端、时序数据库、边缘计算、批量调度等多个维度，大前端技术论坛也将从业务的实际案例出发，与大家共同探讨前端开源技术。因此希望与各位开发者齐聚上海，共赴开源盛典，共筑前端未来。活动报名链接：cid:link_0（欢迎大家扫码或点击链接参与报名~）议程内容如下：

低代码引擎使能开发者定制低代码平台。它是低代码平台的底座，提供可视化搭建页面等基础能力，既可以通过线上搭配组合，也可以通过 cli 创建个人工程进行二次开发，实时定制出自己的低代码平台。适用于多场景的低代码平台开发，如：资源编排、服务端渲染、模型驱动、移动端、大屏端、页面编排等。  11 月 21 日 17 点，华为云前端工程师，云计算用户体验部体验技术团队 TinyEngine 项目成员姚赟老师，将为大家带来 #茶思一小时 #TinyEngine 低代码引擎揭秘系列第 6 讲。本期主题为：构建多元共生的生态空间，TinyEngine 生态的融合之道。姚赟老师将带大家了解 TinyEngine 低代码引擎的生态构成、技术架构、生态发展趋势等方向的内容，并通过与大家分享 TinyEngine 的生态协同方式，帮助开发者探索更多低代码发展可能性。直播详情直播主题构建多元共生的生态空间：TinyEngine 生态的融合之道直播亮点直播亮点TinyEngine 生态构成1）TInyEngine 生态概览2）生态中心的技术枢纽3）生态工具链的技术优化4）生态伙伴的技术协同5）生态社区的技术交流TinyEngine 生态技术架构1）schema 协议2）物料资产包协议3）注册表4）原子化TinyEngine 生态发展趋势与未来展望1）生态市场2）AI 辅助开发3）OpenTiny next直播讲师姚赟，华为云前端开发工程师直播时间2024 年 11 月 21 日 17 点——18 点 30 分直播地址线上：http://live.bilibili.com/31174756线下：深圳华为坂田基地 A9 咖啡厅关于 OpenTiny欢迎加入 OpenTiny 开源社区。添加微信小助手：opentiny-official 一起参与交流前端技术～OpenTiny 官网：https://opentiny.design/OpenTiny 代码仓库：https://github.com/opentiny/TinyVue 源码：https://github.com/opentiny/tiny-vueTinyEngine 源码： https://github.com/opentiny/tiny-engine欢迎进入代码仓库 Star🌟TinyEngine、TinyVue、TinyNG、TinyCLI~如果你也想要共建，可以进入代码仓库，找到 good first issue 标签，一起参与开源贡献~

用的是ArkTs，要求这三个模式不能同时打开，要怎么做

谈谈 Vite 与 Webpack 在设计思路上的差异，以及你觉得哪种更好

Vue.js 框架概述与基本概念理论：介绍 Vue.js 的框架特点、MVVM 模式、核心功能（数据绑定、指令等）。实践：搭建一个简单的 Vue 项目，展示基本的绑定和指令操作。参考1. 理论1.1 Vue 是什么？Vue 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。如：<script setup> import { ref } from 'vue' const count = ref(0) </script> <template> <button @click="count++">Count is: {{ count }}</button> </template> <style scoped> button { font-weight: bold; } </style>1.1.1 声明式渲染Vue 基于标准 HTML 拓展了一套模板语法，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。1.1.2 响应性Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM。1.2 Vue 的接口Vue 的组件可以按两种不同的风格书写：选项式 API 和组合式 API。1.2.1 选项式 API (Options API)使用选项式 API，我们可以用包含多个选项的对象来描述组件的逻辑，例如 data、methods 和 mounted。选项所定义的属性都会暴露在函数内部的 this 上，它会指向当前的组件实例。<script> export default { data() { return { count: 0 } }, methods: { increment() { this.count++ } }, } </script> <template> <button @click="increment">Count is: {{ count }}</button> </template>1.2.2 组合式 API (Composition API)通过组合式 API，我们可以使用导入的 API 函数来描述组件逻辑。在单文件组件中，组合式 API 通常会与 <script setup> 搭配使用。这个 setup attribute 是一个标识，告诉 Vue 需要在编译时进行一些处理，让我们可以更简洁地使用组合式 API。比如，<script setup> 中的导入和顶层变量/函数都能够在模板中直接使用。<script setup> import { ref, onMounted } from 'vue' const count = ref(0) function increment() { count.value++ } onMounted(() => { console.log(`The initial count is ${count.value}.`) }) </script> <template> <button @click="increment">Count is: {{ count }}</button> </template>2. 实践2.1 环境准备下载并安装 VSCode下载并安装 Git，安装时同步安装 Git Bash。NVM 安装Windows NVMmacOS NVM2.2 配置并安装 Node.js# 配置加速镜像，安装 Node.js $ export NVM_NODEJS_ORG_MIRROR=https://npmmirror.com/mirrors/node/ $ nvm install 20.17.0 $ nvm use 20.17.0 $ nvm alias default 20.17.0 # 安装并配置 nrm（Node.js Registry Manager） $ npm install -g nrm $ nrm ls npm ---------- https://registry.npmjs.org/ yarn --------- https://registry.yarnpkg.com/ * tencent ------ https://mirrors.cloud.tencent.com/npm/ cnpm --------- https://r.cnpmjs.org/ taobao ------- https://registry.npmmirror.com/ # 选择合适的 npm 镜像 $ nrm use tencent2.3 创建一个 Vue 项目$ npm create vue@latest在提示时，根据需求选择配置项。选择默认配置，或者根据项目需要选择其他选项。完成后，运行以下命令启动项目：cd vue-demo npm install npm run dev访问浏览器中的 http://localhost:5173/ 查看项目运行情况。2.4 修改并演示项目修改 AboutView.vue 文件，添加 count 变量，并与页面中的 h1 元素绑定。点击按钮时，count 的值会增加，并在页面上实时更新。<script setup> import { ref } from 'vue'; const count = ref(0) function clickMe() { count.value++ } </script> <template> <div class="about"> <h1>count = {{ count }}</h1> <button @click="clickMe">点击我</button> </div> </template> <style> @media (min-width: 1024px) { .about { min-height: 100vh; display: flex; align-items: center; } } </style>3. 参考Node.js 官方网站Vue.js 官方网站Vue.js 中文文档NVM 安装Windows NVMmacOS NVM本文地址

在前端技术日新月异的今天，如何高效、稳定地开发企业级Web应用成为了开发者们关注的重点。近期，华为在开发者大会上正式发布了OpenTiny框架，这是一套由华为云出品的企业级前端UI组件库，不仅支持Vue2/Vue3/Angular等多技术栈，还适配PC端和移动端，为前端开发带来了全新的选择。OpenTiny框架概述OpenTiny是华为云开源的Web应用前端开发套件，经过九年的持续打磨，已经服务于华为内外部上千个项目。它不仅仅是一个简单的UI组件库，而是一套完整的企业级设计体系统，旨在帮助开发者高效构建稳定、美观、功能丰富的Web应用。核心亮点跨端跨框架： OpenTiny采用Renderless无渲染组件设计架构，实现了一套代码同时支持Vue2/Vue3，以及PC/Mobile端。这意味着开发者可以在不同的平台和框架之间无缝切换，大大提高了开发效率。同时，OpenTiny还支持Angular，进一步增强了其通用性和灵活性。组件丰富： OpenTiny提供了150+企业级组件，包括80+PC端组件和30+移动端组件，涵盖了表格、树形控件、选择器等多种高频组件。此外，还内置了虚拟滚动等优化技术，确保在大数据场景下依然能够保持流畅的用户体验。特别值得一提的是，OpenTiny还提供了一些独有的特色组件，如split面板分割器、IP地址输入框、Calendar日历、图片裁切等，满足了多样化的开发需求。开箱即用的中后台模板： OpenTiny内置了TinyPro中后台admin模板，支持Vue框架，包含10多个实用功能和20多个典型页面场景。这些模板覆盖了中后台应用和云服务控制台应用等多种场景，为开发者提供了快速启动项目的便利。跨平台的前端工具化CLI工具： TinyCLI提供了一系列开发套件及工程插件，覆盖了前端开发的整个链路。这些工具不仅保证了团队开发过程的一致性和可复制性，还显著提升了前端开发效率。强大的主题配置系统： OpenTiny提供了一款旨在提高开发效率的主题配置系统Tiny SEAM，让开发者可以轻松应对Web应用的多变风格需求。通过简单的配置即可实现样式的快速切换和定制。支持国际化： OpenTiny支持国际化功能，使得开发的应用能够轻松适应不同语言和地区的用户需求。这一特性对于构建全球化应用尤为重要。实际应用场景OpenTiny框架适用于各种企业级前端应用场景，如企业门户、后台管理系统、CRM系统、ERP系统等。其丰富的组件和强大的功能能够帮助开发者快速构建高效、美观、稳定的前端应用，提升用户体验和业务效率。上手难度与社区支持OpenTiny的官方文档详尽且易于理解，提供了丰富的代码示例和上手教程。此外，华为云社区也提供了大量的技术文章和实战分享，帮助开发者更好地掌握OpenTiny的使用技巧。同时，OpenTiny作为华为云开源项目之一，得到了广泛的社区支持和关注。开发者可以在社区中分享经验、提出问题、获取帮助，共同推动OpenTiny的发展。总结OpenTiny作为华为云出品的企业级前端UI组件库，凭借其跨端跨框架、组件丰富、支持配置式组件和周边生态齐全等核心特点，成为了企业级前端开发的新选择。无论是初创公司还是个人开发者，都可以通过OpenTiny快速构建出稳定、美观、功能丰富的Web应用。随着前端技术的不断发展和应用场景的不断拓展，OpenTiny将继续发挥其在前端开发领域的优势，为开发者提供更加高效、稳定、可靠的前端开发工具。我正在参加【有奖征文 第31期】体验OpenTiny带来的前端开发创新模式 链接：cid:link_0

破防了！家人们！参与这个活动到底有多简单？加入OpenTiny开源社区 ，到底是种什么样的体验？原来，使用项目不仅有社群技术答疑，还能送紧箍咒等天命人好礼！班味太浓，是时候该去去班味了~这个活动，就等你来参加啦~活动说明：有奖问卷调研！！！填写你对于 OpenTiny 项目的真实使用情况，我们会根据问卷内容，针对填写优质问卷的小伙伴赠送相应礼物~友好用户（<=10位）赠送OpenTiny定制棒球帽或紧箍咒；积极用户（<=10位）赠送OpenTiny 定制胶囊充电宝或紧箍咒；优质用户（<=5位）赠送OpenTiny定制双肩包或紧箍咒；问卷链接：cid:link_3 活动结束后，工作人员将对问卷进行人工审核，审核通过后，将会联系您获得奖品收货地址~礼品详情： 关于 OpenTiny OpenTiny官网：cid:link_5TinyVue 源码：cid:link_2（欢迎 Star ⭐）TinyEngine 源码：cid:link_1（欢迎 Star ⭐）B站：cid:link_4欢迎加入 OpenTiny 开源社区。添加微信小助手 opentiny-official 一起参与交流前端技术～（温馨提示：OpenTiny CCF开源创新大赛也在持续报名中，欢迎大家一起报名参赛，赢取10W奖金：cid:link_0）

一、引言在Web开发领域，Cookie和Token是两种常见的用于处理用户认证和会话管理的技术。它们各自具有不同的特点和应用场景，并且在现代Web应用中发挥着重要作用。本文将详细介绍Cookie和Token之间的区别，以及它们在现代Web应用中的使用情况，最后探讨为什么Cookie至今仍未被废弃。二、Cookie与Token的区别定义与存储方式Cookie：是在客户端存储的小型文本文件，由服务器在HTTP响应头中设置并发送到客户端，客户端收到后自动存储在本地。Token：是一段经过加密处理的字符串，通常存储在客户端的浏览器缓存、localStorage或sessionStorage中，也可以存储在服务器的数据库中。安全性Cookie：存储在客户端，容易被窃取或篡改，因此需要对内容进行加密或签名保护。Token：采用加密算法进行加密和签名，确保传输过程中的安全性，并防止信息被篡改。可扩展性Cookie：只能存储有限的信息，如用户ID、过期时间、域名等。Token：可以存储更多的信息，如用户角色、权限、访问时间等，更加灵活，适合大规模的应用程序。跨域支持Cookie：只能存储在设置Cookie的域名下，不能跨域使用。Token：可以跨域使用，适用于分布式系统或跨域API请求。服务器压力Cookie：每次请求都需要将Cookie发送给服务器，服务器需要验证并响应请求，如果Cookie过多，服务器的压力会非常大。Token：服务器只需验证Token的有效性即可，可以大大减轻服务器的压力。时效性Cookie：通常需要设置过期时间，过期后需要重新获取。Token：可以设置长时间的有效期，减少频繁获取的次数，提高应用程序的性能。三、Cookie与Token的应用场景Cookie的应用场景用户登录状态保持：在用户计算机中存储一个包含用户身份验证信息的Cookie，以便在用户下一次访问时自动识别用户并保持其登录状态。购物车管理：在电子商务网站中，使用Cookie来管理用户的购物车信息。个性化推荐：跟踪用户的浏览行为并提供个性化的推荐内容。Token的应用场景用户授权：在用户输入密码和帐号后，系统验证后生成一个Token，后续服务使用者只需携带该Token即可访问相关服务。敏感接口调用：在调用关键接口或敏感接口时，使用Token进行身份验证和授权。开放平台授权：在开放平台中，对外部站点提供授权服务，发放Token以便外部站点访问服务。四、为什么Cookie未被废弃尽管Cookie存在一些潜在的安全风险，但由于其是HTTP协议支持的，几乎所有浏览器在开发时就完成了数据存储与传输过程中所需功能的提前封装。这使得Cookie在Web开发中具有天然的优势。另外，尽管有一些替代方案被提出，如HTML5中的localStorage特性，但这些方案需要开发者额外部署代码，操作更加繁琐，并且可能带来更多的风险。因此，尽管Cookie在某些方面已经不太合时宜，但在现有的Web技术下，它仍然是实现客户端状态或数据存储的最优解，短时间内不太可能被完全替代。

Lodash官网为：cid:link_0Lodash库在JavaScript中是一个广泛使用的实用工具库，它提供了大量的函数来简化JavaScript编程的复杂性。以下是Lodash库的主要用途和特点：简化编程任务：Lodash提供了丰富的函数集，用于处理数组、对象、字符串、数字等常见的数据类型。这些函数涵盖了映射、过滤、归约、合并、防抖、节流等多种操作，可以大大简化日常开发中的编码工作。高性能：Lodash专注于提供高性能的函数，这些函数经过优化以在各种JavaScript运行环境中提供最佳性能。这意味着使用Lodash可以加快代码的执行速度，提高应用程序的性能。模块化：Lodash采用了模块化的架构，允许开发者按需导入需要的函数。这种模块化设计可以减小项目的体积，提高代码的复用性和可维护性。跨浏览器兼容性：Lodash在各种现代浏览器和Node.js等JavaScript运行环境中都能正常工作，并提供了对ES6+特性的良好支持。这使得Lodash成为了一个跨平台的解决方案，可以在不同的环境中使用。易于学习和使用：Lodash的API设计简洁清晰，易于学习和记忆。开发者可以快速掌握Lodash的使用方法，并将其应用到实际项目中。具体来说，Lodash中的一些常用函数包括：_.get(object, path, [defaultValue])：获取对象指定路径上的值，如果路径不存在则返回默认值。_.set(object, path, value)：设置对象指定路径上的值。_.cloneDeep(value)：深拷贝一个对象或数组。_.isEmpty(value)：判断一个值是否为空，包括空对象、空数组、空字符串以及undefined和null。_.isEqual(value, other)：比较两个值是否相等，支持比较对象和数组。_.debounce(func, wait, [options])：创建一个函数，该函数在调用时最多只会执行一次（或者在wait时间内只会执行一次），可以用来处理频繁触发的事件。_.throttle(func, wait, [options])：创建一个函数，该函数在一段时间内最多只会执行一次，可以用来限制函数的执行频率。这些函数只是Lodash提供的一部分功能，实际上Lodash还包含了许多其他实用的函数和方法，可以帮助开发者更高效地编写JavaScript代码。总的来说，Lodash是一个功能强大、易于使用的JavaScript工具库，值得开发者在项目中使用。

avaScript 的异步编程已经从回调 (Callback) 演进到 Promise，再到如今广泛使用的 async/await 语法。后者不仅让异步代码更加简洁，而且更贴近同步代码的逻辑与结构，＊＊＊增强了代码的可读性与可维护性。在掌握了基础用法之后，下面将介绍一些高级用法，以便充分利用 async/await 实现更复杂的异步流程控制。1. async/await 与高阶函数当需要对数组中的元素执行异步操作时，可结合 async/await 与数组的高阶函数（如 map、filter 等）。2. 使用 async/await 优化递归递归函数是编程中的一种常用技术，async/await 可以很容易地使递归函数进行异步操作。3. 在 async 函数中使用 await 链式调用使用 await 可以直观地按顺序执行链式调用中的异步操作。4、使用 async/await 简化错误处理错误处理是异步编程中的重要部分。通过 async/await，可以将错误处理的逻辑更自然地集成到同步代码中。5、异步初始化类实例在 JavaScript 中，类的构造器（constructor）不能是异步的。但可以通过工厂函数模式来实现类实例的异步初始化。6、结合 async/await 和事件循环使用 async/await 可以更好地控制事件循环，像处理 DOM 事件或定时器等场合。通过以上 6 个 async/await 的高级用法，开发者可以在 JavaScript 中以更加声明式和直观的方式处理复杂的异步逻辑，同时保持代码整洁和可维护性。在实践中不断应用和掌握这些用法，能够有效地提升编程效率和项目的质量～

请问有什么好一点的 js 的计算线段的库，比如：计算线的长度，从线的起点偏移 变量，能在线段上找到点的坐标等？