自研框架trick

清风听安

于 2024-10-09 20:23:54 发布

阅读量380

点赞数 13

文章标签：前端框架

本文链接：https://blog.csdn.net/qq_70898754/article/details/142795065

版权

1. 前端原生模块化框架，拒绝复杂工具链，要的是快速简单搞开发

我们偏向于网页原生态开发，而并不推荐vue-cli、react-cli等脚手架工具，也没有介绍npm、路由、状态管理等一系列工具。（受到过时、淘汰、原生开发更加复杂的质疑，这些质疑源于违背了一部分人的基本认知，我们的问题不在于否定这些工具，而在于更加简单有效的解决方案。而这些简单的解决方案都汇集到自研前端原生模块化框架trick中）

2. 框架研发背景

我们也使用过npm、脚手架、typescript、路由、状态管理等工具。

早在2016年我们就开始使用typescript、angular2,当时这些工具只发布了几个月。之后几年间我们也调整过基础技术，尝试vue、react等全家桶。但是每个项目的结果都差不多，一开始开发较快，但一但进入优化阶段、性能调优阶段又或者需求变更阶段、ui改版时就会出现各种各样问题。很多代码都需要重写，一些问题甚至花很长时间都解决不了。

一系列脚手架工具给前端带来更好的代码组织、开发方式的同时，也提升了学习难度。存在一大片代码盲区。而这些都会对项目造成影响，项目延期、成本超支。

我们决定探索原生模块化框架是因为一个工程师的一句话，他说我本来就是一个搬砖的，本来完成功能就已经很赶了，还要按ui设计修改细节，加上Bug修正、功能变更。天天事情那么多，哪来时间深入学习这些工具，给你搞出来就不错了。（这提醒我们，生产就是生产，原生网页开发不是不好，只是缺少模块化的方式以及较优的代码组织方式。那么做一套这样的原生模块化框架不就好了吗）

3. Trick框架核心

3.1. 规整化工程结构

3.2. 让页面和模块分离，实现模块化

3.3. 其他事情

比如组件工具箱，基础框架等工具都是可以自由修改替换的。我们默认采用了vue.js、Bootstrap.

Trick工程无需复杂的环境安装。只需按照Nginx或者Apache服务即可（和普通前端原生开发一样）工程内无任何封装和不可见代码，所有的html都可打开运行。

一个Trick工程包含三个部分。

3.3.1. 开发环境代码

开发环境代码是开发人员编写的代码。

其中分离了工程通用部分、页面部分、模块部分和接口请求相关部分。

通用部分:存放主题、配置文件、图片资源、全局依赖等。

模块部分是一个模块，模块拥有完整的html、css、Javascript空间。

打开模块html文件即可单独运行。

页面部分是一个个页面。页面只有三个职责，摆放模块、协调调用各个模块、以及与后端通信。

接口请求部分是存放了多种请求相关的javascript工具方法

3.3.2. 生成环境代码

生产环境代码是发不到服务器的代码（直接拷贝到服务器即可），生产环境是通过代码编辑器自动生成的，其实就是把开发环境的模块代码，自动拼接到页面代码中。最终的生成环境代码和纯原生开发是一样的，开发人员可直接理解或修改但一般不推荐这么做。如果搭建了Jenkins等自动发布服务，则开发人员无需关心生成环境代码。

代码编辑器是提供一些服务的功能，如从模块库下载模块，编辑生成生产环境代码等。代码编辑器是ruby编写的，使用的话需要先按照ruby环境。Mac和linux是自带ruby环境的。当然只是修改代码的话，ruby环境是不必要的。