细数百度开源的前端项目及实践

古城微笑少年丶 2022-11-15 11:20 205阅读 0赞

> ### 感谢[Baidu][]提供如此丰富的前端开源项目 ###

### 1. Mapv  ###

[官方GitHub地址][GitHub]

[中文文档][Link 1]

a library of geography visualization-地理信息可视化库

### 2. SAN ###

[官方GitHub地址][GitHub 1]

[中文文档][Link 2]

[san-router][]

[san-store][]

[san-website][]

[san-factory][]

[san-update][]

一个快速、轻量、灵活的 JavaScript 组件框架。

San，是一个 MVVM 的组件框架。它体积小巧（< 17K），兼容性好（IE6），性能卓越，是一个可靠、可依赖的实现响应式用户界面的解决方案。

San 通过声明式的类 HTML 视图模板，在支持所有原生 HTML 的语法特性外，还支持了数据到视图的绑定指令、业务开发中最常使用的分支、循环指令等，在保持良好的易用性基础上，由框架完成基于字符串的模板解析，并构建出视图层的 [节点关系树][Link 3]，通过高性能的视图引擎快速生成 UI 视图。San 中定义的数据会被封装，使得当数据发生有效变更时通知 San 组件，San 组件依赖模板编译阶段生成的[节点关系树][Link 3]，确定需要变更的最小视图，进而完成视图的异步更新，保证了视图更新的高效性。

组件是 San 的基本单位，是独立的数据、逻辑、视图的封装单元。从页面角度看，组件是 HTML 元素的扩展；从功能模式角度看，组件是一个 ViewModel。San 组件提供了完整的生命周期，与 WebComponent 的生命周期相符合，组件间是可嵌套的树形关系，完整的支持了组件层级、组件间的通信，方便组件间的数据流转。San 的组件机制，可以有效支撑业务开发上的组件化需求。

San 支持[组件反解][Link 4]，以此提供[服务端渲染][Link 5]能力，可以解决纯前端渲染导致的响应用户交互时延长、SEO 问题。除此之外，San 还提供了一些周边开源产品，与 San 配合使用，可以帮助开发者快速搭建可维护的大型 SPA 应用。

### 3. wx2 ###

[官方GitHub地址][GitHub 2]

微信小程序转换工具

基于已有的原生微信小程序项目，提供零成本平移转换的能力，对小程序间差异进行抹平，提供简单快捷的 API，助力开发者快速互转已有小程序项目。

*  工具会帮你将已有的原生微信小程序转换为目标小程序，目前支持度最好的为百度小程序，其他小程序的能力正在补充中。
 *  工具虽然不能完成100%的转换，但可以帮你节省大量的重复开发成本，随着迭代优化，未来转换率会越来越高
 *  目前只支持转`百度小程序`，后续支持QQ、支付宝、头条等小程序

### 4. NoahV ###

[官方GitHub地址][GitHub 3]

[中文文档][Link 6]

NoahV是一个基于vue开发的前端开发框架，主要适用于监控运维、数据分析等场景，同时也适用于常见的后台管理系统。主要包括如下特性：

*  组件丰富，提供常用的各类组件，快速开始前端开发
 *  导航栏、页面布局JSON配置，无需代码逻辑开发
 *  API数据模拟和API数据代理，让前后端不再耦合，联调更简单，效率更高
 *  数据仪表盘功能，满足常见的数据可视化需求，助力数据分析场景
 *  实用的脚手架功能，项目初始化、模板复用、模拟数据创建、调试server启动、框架升级一行命令通通搞定

未完待续！

[Baidu]: https://github.com/baidu
[GitHub]: https://github.com/baidu/mapv
[Link 1]: https://mapv.baidu.com/
[GitHub 1]: https://github.com/baidu/san#
[Link 2]: https://baidu.github.io/san/
[san-router]: https://github.com/baidu/san-router#
[san-store]: https://github.com/baidu/san-store
[san-website]: https://github.com/baidu/san-website
[san-factory]: https://github.com/baidu/san-factory
[san-update]: https://github.com/baidu/san-update
[Link 3]: https://github.com/baidu/san/blob/master/doc/anode.md
[Link 4]: https://baidu.github.io/san/tutorial/reverse/
[Link 5]: https://baidu.github.io/san/tutorial/ssr/
[GitHub 2]: https://github.com/baidu/wx2
[GitHub 3]: https://github.com/baidu/NoahV#
[Link 6]: https://noahv.gitee.io/#/guide/about