在数字时代，我们的浏览器收藏夹，就如同一个宝库，里面藏着我们曾经因兴趣、工作或学习而保留的无数网站链接。小舒同学，一个浏览器新标签页扩展，帮助您高效地管理这些珍贵的在线资源。通过整洁、直观的界面和强大的功能，通过小舒同学这款强大的浏览器扩展，让您的收藏夹焕发新生。

一键展示管理收藏夹

不需要反复整理和搜索您的主页，小舒同学提供了一种轻松的方法来展示和管理您的收藏夹。通过在新标签页中，将书签以清晰的图形方式呈现，帮助您聚焦真正重要的事情。无论是微软的 Edge、Google 的 Chrome，还是 Mozilla 的 Firefox，都可以实现一步直观整洁地展示管理您的网络财富。

随时随地的同步空间

小舒同学的同步空间可以让您轻松同步收藏夹，通过同步空间功能，不管您是在工作场合的电脑还是在家里的设备，都可以轻松连接，访问您全部的收藏内容。您的内容将被安全地存储与同步，确保您可以在任何时间访问。网络世界的一切都将由您连接统一，不仅能启动哔哩哔哩，更能直接访问您关注的具体内容。

直观且舒适的重组织

小舒同学以流畅和直观的用户体验，帮您重新组织您的在线生活。我们专注于舒适的交互设计，将您的收藏夹以一种对您有意义的方式进行组织。

小舒同学提供各式各样的卡片形式和布局，让您可以完全按照自己的喜好进行自定义。您可以创建个性化的卡片组合，以满足您的独特需求。

严格隐私保护

小舒同学重视用户的隐私保护，拒绝记录和上传用户数据。在不使用同步空间的情况下，您的收藏夹数据也只在浏览器本地数据中，确保隐私数据的私密性。依托于 Manifest V3，小舒同学严格控制所需权限，保证只加载本地代码，保护用户的安全与私密。

定制个性化新标签页

小舒同学的自由度极高，可以按照用户的喜好进行多种个性化设置。您可以更换壁纸、主题、主题色，甚至可以用自定义 CSS 美化您的标签页。拥有如此高度自定义的新标签页，您的浏览器将成为真正属于您的个性空间。

小舒同学不仅仅是一个简单的收藏夹工具，它改变了我们与网络信息的互动方式，提供了一个更高效、更有组织性的网络生活体验。减少了无谓的折腾，让每一次收藏都变得值得，让每一次浏览都充满发现的喜悦。现在，尝试小舒同学，让您的收藏夹变成您的独特网络资产，发挥它们真正的潜力吧。

Promise 与 RxJS Observables 的区别

Promise

• Promise 是 JavaScript 中内置的，不需要任何额外的库。
• Promise 表示可能现在或将来可用的单个值。
• Promise 是急切的，也就是说一旦 Promise 被解析，.then()回调会立即执行。
• Promise 只能发出单个值。
• Promise 非常适合处理产生单个结果的简单异步操作。

RxJS Observables

• Observables 是 RxJS 库的一部分，需要额外安装依赖。
• Observable 表示可以随时间发出的值流。
• Observable 是惰性的，也就是说在订阅之前不会执行任何操作。
• Observable 可以发出多个值，包括零个或多个值。
• 可以使用各种 RxJS 操作符对 Observable 进行转换和组合，以创建新的定制流。
• Observable 非常适合处理复杂的异步操作，例如实时数据流或事件驱动编程。

参考

1. JavaScript Theory: Promise vs Observable - Medium
2. angular - What is the difference between Promises and Observables? - Stack Overflow
3. JavaScript Promises vs. RxJS Observables

模版语法的简单实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

const name = 'Nexmoe';const message = 'My name is {{name}} and I\'m {{getAge(20)}} years old.';function getAge(age) {  return age;}const replacedMessage = message.replace(/\{\{(.*?)\}\}/g, (match, variableOrFunction) => {  const trimmedValue = variableOrFunction.trim();  if (trimmedValue.includes('(')) {  // 如果占位符包含括号，则表示为带参数的函数替换    const [functionName, ...args] = trimmedValue.split(/\(|\)/).filter(Boolean);    const func = eval(functionName);    return func(...args);  } else {  // 否则为变量替换    return eval(trimmedValue);  }});onsole.log(replacedMessage);

先检查占位符中是否包含括号，如果包含括号，则表示是一个带参数的函数调用。使用split方法和正则表达式来解析函数名和参数，并将其存储在functionName和args变量中。然后，使用eval函数将函数名转换为实际的函数对象，并使用扩展运算符 (...) 将参数作为参数列表传递给函数。函数执行后，将返回值作为替换后的字符串返回。

如果占位符不包含括号，则表示是一个变量。直接使用eval函数将变量名转换为实际的变量值，并返回其值作为替换后的字符串。

⚠️ 注意：使用eval函数执行代码具有一定的安全风险，因为它可以执行任意的 JavaScript 代码。有相当多的建议建议不使用eval。准备过段时间研究研究不用eval的方法。

MVVM 是什么

MVVM 代表 Model-View-ViewModel，在 MVVM 中，Model 表示应用程序的数据和业务逻辑，View 表示用户界面，ViewModel 充当 Model 和 View 之间的中介。

模型（Model）

• 模型代表应用程序中的数据和业务逻辑。
• 它可以是从服务器获取的数据、本地存储的数据或通过其他方式获取的数据。
• 模型通常实现了一些方法来操作、存储和管理数据。
• 对应的是组件中的 data、props 属性。

视图（View）

• 视图是用户界面的可见部分。
• 它负责展示数据给用户，并接收用户的交互操作。
• 在 Vue.js 中，视图通常由 Vue 组件表示，可以包含 HTML 模板和样式。

视图模型（ViewModel）

• 视图模型是连接模型和视图的中间层。
• 视图模型通常包含了与视图相关的数据、计算属性和方法，以及与模型交互的逻辑。
• 通过双向绑定（data-binding）将视图和模型连接起来。当模型中的数据发生变化时，视图会自动更新。通过 DOM 事件监听，当用户在视图中输入数据或进行其他交互操作时，视图模型会自动更新模型中的数据。

优势

• 分离关注点：将数据逻辑与视图逻辑分离，使代码更易于维护和测试。
• 提高开发效率：通过双向数据绑定和声明式编程风格，减少了手动操作 DOM 的代码量。
• 可重用性：通过组件化的方式，视图和视图模型可以在不同的应用程序中进行复用。
• 响应式更新：当模型中的数据发生变化时，视图自动更新，提供了更好的用户体验。

参考

1. 为什么尤雨溪尤大说 VUE 没有完全遵循 MVVM？ - 知乎
2. Vue 的 MVVM 思想（包含三个常见面试题） - 掘金
3. MVC，MVP 和 MVVM 的图示 - 阮一峰的网络日志
4. Getting Started - vue.js
5. Comparing Vue.js to new JavaScript frameworks - LogRocket Blog

MVC 是什么

MVC 这个概念已经存在很久了，用了这么多年，今天了解一下概念做个总结。

MVC（Model-View-Controller）设计模式将应用程序中的对象分为三个角色：模型（Model）、视图（View）和控制器（Controller）。该模式不仅定义了对象在应用程序中的角色，还定义了对象之间的通信方式。每种类型的对象都通过抽象边界与其他类型的对象分离，并在这些边界上与其他类型的对象进行通信。应用程序中某种 MVC 类型的对象的集合有时被称为层，例如模型层。

模型（Model）

• 封装应用程序特定的数据，并定义操作和处理数据的逻辑。
• 可以表示应用程序中的实体，如游戏中的角色或地址簿中的联系人。
• 可以与其他模型对象建立关联，形成对象图。
• 应该存储应用程序的持久状态数据。
• 不应与呈现数据和用户界面相关的视图对象直接连接。

视图（View）

• 用户可见的对象，负责显示数据和响应用户操作。
• 知道如何绘制自身，并可以与用户进行交互。
• 通常通过控制器对象从模型对象中获取数据进行展示和编辑。
• 在 MVC 应用程序中与模型对象解耦，提供一致性和重用性。

控制器（Controller）

• 充当视图对象和模型对象之间的中介。
• 负责处理用户操作，并将其传递给模型层进行数据处理和更新。
• 可以执行应用程序的设置和协调任务，管理其他对象的生命周期。
• 在模型对象发生变化时，将新的模型数据传递给视图对象进行显示。

优势

• 提供良好的应用程序设计，使对象更具可重用性和接口定义明确性。
• 支持应用程序的可扩展性，易于添加新功能和模块。
• 分离关注点，使代码更易于维护和测试。
• 应用程序的模型层、视图层和控制层之间保持了清晰的分离，实现了代码的结构化和职责的明确划分，从而提高了应用程序的可维护性和可扩展性。

参考

1. https://developer.apple.com/library/archive/documentation/General/Conceptual/DevPedia-CocoaCore/MVC.html

为什么 Bun 这么快

JavaScriptCore 引擎

Bun 使用 JavaScriptCore 引擎，这是 Safari 浏览器使用的引擎，而不是基于 Chromium 的浏览器和 Node.js 使用的 V8 引擎。JavaScriptCore 引擎经过了针对更快启动时间的优化，这有助于 Bun 的速度。

性能分析和优化

大量的性能优化。Bun 的初衷就是要快。[2]。

Zig 语言

Bun 利用 Zig 语言进行低级内存控制和消除隐藏控制流。Zig 的设计原则注重性能，通过利用 Zig，Bun 可以实现更好的内存管理和控制，从而提高速度 [2]。

参考

1. Bun 1.0 | Bun Blog
2. A first look at Bun: is it really 3x faster than Node.js and Deno? - DEV Community

大家好，我们是觅漫者战队，非常荣幸获得了首届 Microsoft Edge 浏览器开拓者大赛的第三名！我是我们战队的唯一一名成员，我的好朋友都叫我折影轻梦或 Nexmoe。我的口号是：“为热爱战斗着，努力学着变得勇敢”。

产品介绍

我们的产品名称为：Meteor New Tab，他的作用和他的口号一致——让你的收藏夹再次伟大。在后疫情时代，线上学习与线上办公的人越来越多。许多用户在网络检索学习，遇见各种各样的“干货”资源，喜欢将相关的网页收藏。但是日积月累，收藏的速度远远大于学习的速度，导致网页越来越难以打理，导致日后检索相关网页特别耗费精力，也让很多优秀的干货资源被压在箱底，再也没有被打开过。

我们开发这样一款产品，希望能够帮助用户将尘封已久的收藏夹拿出来。它可以基于你的收藏夹内容，帮你自动整理到标签页，让你的收藏夹在标签页上一目了然。

产品的灵魂

我们倾听用户的声音，产品的灵魂即来自创作者同样也来自用户。一位用户曾夸赞 Meteor New Tab 理念先进，他说：“与其在信息流中漂泊，不如反刍收藏过的高质量内容。” Meteor New Tab 是逆时代而行之的，我们不再让你筋疲力尽地在信息流中寻找一些新东西，而是让你反刍收藏过的高质量内容来产生新的思考、新的灵感。

还有一位用户曾说：“太棒了，我真的不想折腾拨号页花里胡哨的功能，我只想快速导入链接，然后生成一个简洁的图标。”有时候我们需要思考对我们来说真正重要的是什么。我们所关注的、所热爱的其实早就已经被我们放入在收藏夹中。Meteor New Tab 做的就是让我们重新关注自己。

还有许多用户的评论与反馈也一并帮助我们完善了产品，让 Meteor New Tab 越来越具有产品的灵魂，我们非常感谢他们的支持。

让你更好的使用你的收藏夹

让多个文件夹并行显示，收藏夹也能变看板；进度条功能，自动记录你哔哩哔哩和 Youtube 的播放进度，收藏夹也是你追剧的仪表盘。排序功能，最先看到最近添加的书签。搜索功能，快速找到你想要的书签。还有更多功能，等你来发现。

现代化设计，友好的用户体验

守护隐私，守卫安全：数据无需经过我们的服务器进行存储交互，做到真正强大的隐私安全。

自动跟随系统调整亮色与暗色模式，夜间不会因为突然从黑到白的界面切换导致你的健康问题。

新时代产品，新时代改进。我们倾听用户的声音，你可以参与到我们一起将 Meteor New Tab 变得更好。

让软件工程思维帮助我们构建更好的产品

我们采用增量模型作为产品的开发模型。适合我们这种一个人的小团队。我们会尽心尽力的关注到每个用户的反馈与需求，同时会对用户的反馈进行严格的管理与讨论。最后采取决策。我们会尽量地让 Meteor New Tab 越来越贴近完美。

同时我们也会不断地学习进步，采用最新的技术。我们参考 DevOps 的理念，将开发、测试、运维、部署等环节进行自动化，让我们的产品更加稳定并减少开发人员的工作量。让产品开发效率最大化。我们使用 Github 的最新特性，对产品进行版本控制；使用 Issue，Project 进行需求管理；使用 Github Action 自动测速编译发布。尽量减少人员的参与，让产品开发更加高效。

下载体验

https://xiaoshuapp.com/meteor/