原生开发探索

项目简介

目前甄别系统使用vue2技术栈开发，包括vue2、vue-router、vuex以及ant-design-vue，使用到的与vue相关的插件包括vuedraggable、vuex-persist。

发现问题

去除框架相关，采用原生进行开发需要处理以下问题：

• 目前前端方案采用的是CSR+SPA的方案，如果摒弃vue框架，那么可以采用SSR的方案进行页面的渲染；
• 采用web components Web 官方工程化解决组件化的问题；
• 使用Object.defineProperty手动实现组件内部视图与数据的通信问题；
• 手动处理DOM元素事件绑定的问题；
• 处理组件与组件之间通信的问题，实现发布订阅模式，监听组件事件；
• 处理全局状态管理的问题，并实现持久化存储；
• 根据HTML5的 History规范，手动实现路由跳转的功能。

灵感来源：web-component[1]

解决问题

• 组件化使用开源框架shoelace[2] ，不依赖任何框架，采用web components ；
• 手动实现视图与数据的通信，也就是双向绑定；
• 采用jQuery来操作DOM，进行事件绑定；
• 组件之间通信使用mitt[3]进行实现；
• 全局状态管理使用redux[4]进行实现；
• 手动实现路由跳转功能，代码可以参考route[5]。

总结

框架的诞生大大提高了前端开发的效率，但是我们也要具备摒弃框架也可以开发项目的能力。可以深入了解框架底层的原理，要做到知其然并知其所以然。

Reference

[1]

web-component: https://github.com/yalishizhude/web-component

[2]

shoelace: https://shoelace.style/

[3]

mitt: https://github.com/developit/mitt

[4]

redux: https://github.com/reduxjs/redux

[5]

route: https://github.com/biaochenxuying/route