【网站架构】前端原生模块化框架，拒绝复杂工具链，我要的是简单快捷地搞生产！降低人力成本、经验门槛，加快项目周期。

大家好，欢迎来到停止重构的频道。

在前面介绍前端架构的相关问题时，我们都偏向于网页原生开发， 而并不推荐vue-cli、react-cli等脚手架工具 ，也没有介绍npm、路由、状态管理等一系列工具。期间收到了过时、淘汰、原生开发更复杂等质疑，这些质疑源于违背了一部分人的基本认知。

但是我们的目的不在于否定这些工具，而在于提出我们认为更加简单有效的解决方案。

而这些简单有效的解决方案都已汇聚到我们的自研前端原生模块化框架（Trick）之中。

经过5年的研发调整和多个项目试验，这个框架能在前端开发人员数量较少、经验较低的情况下， 开发出质量较高的前端项目 。

我们做到了

1. 保持原生开发，1天就能上手 
2. 原生模块化开发，模块可以单独运行或调试，而无需引入页面后才可运行 
3. 只约束主要的开发规则，不做多余的事情，基础依赖、框架如vue.js、BootStrap等都是可以自由替换的 
4. 工程内无任何深度封装和不可见代码，团队甚至可以根据自身习惯调整框架

1、框架研发背景

在介绍这套框架之前 ，我们先来聊一下框架的研发背景 。

我们也使用过npm、脚手架、typescript、路由、状态管理等工具开发过几个中大型项目（项目中的前端团队基本都在5-20人左右），早在2016年我们就开始使用typescript、angular2， 当时这些工具只发布了几个月 。

之后几年间，我们也调整过基础技术，尝试vue、react全家桶等工具 ，但是每一个项目的结果都是差不多的。

一开始开发较快， 但一旦进入优化阶段、性能调优阶段，又或者需求变更、UI改版时就会出现各种问题，很多代码都需要重写，一些问题甚至花很长时间都解决不了，项目到最后都是乱糟的。

你可能会说团队素质、能力不行，只要团队的人都熟悉这些工具就不会出现这样的问题了， 一开始，我们也是这么认为的。我们相信团队做的项目越来越多，项目质量会越来越好。

但实际情况是，团队人员永远是动态的。技术好的人会升职，技术成长起来的人会想跳槽。

所以项目永远都不好做，都是乱糟的，你可能会说，那是公司不够大，项目不够好。那你可能是天真了，所有公司、项目都是资源有限的，最多，也就是问题的程度有所区别。

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

我们决定探原生模块化框架是因为一个工程师的一句话，他说：我顶多就是个搬砖的，本来完成功能就很赶了，还要按UI设计修改细节，加上bug修正、功能变更，天天事情这么多，哪来时间深入学习这些工具，给你搞出来不错了。

这虽然是抱怨的话 ，但是却提醒了我们一个道理， 生产就是生产，简单快捷地开发不好吗？

而且这些工具并不是所有人都能用好，原生网页开发不是不好，只是缺少了模块化的方式，以及较优的代码组织方式。

那么，做一套这样的原生模块化框架不就好了吗？之后，我们开始着手研发这套框架并已经在多个项目中缩减了项目成本，故事就先讲到这里。

下面介绍一下这套前端模块化框架 ，我们的官网有更详细的使用文档 ，后面我们将以概述、模块开发、页面开发、发布这四个方面介绍。

2、框架概述

我们先来大致介绍一下这套前端原生模块化框架，框架名叫Trick（戏法）。 Trick框架实际上只是一种规则，只做了两件事情。

1、规整化工程结构 

2、让页面和模块分离，实现模块化 

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

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

一个Trick工程包含三个部分

• 开发环境代码

• 生产环境代码

• 代码编辑器

开发环境代码是开发人员编写的代码 ，其中分离出工程通用部分、页面部分、模块部分和接口请求相关部分 ，用部分是存放主题、配置文件、图片资源、全局依赖等。

模块部分是一个个模块，模块拥有完整的HTML、Css、JavaScript空间，打开模块HTML文件即可单独运行 。

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

接口请求相关部分是存放了多种请求的JavaSript工具方法，如大文件分片上传、文件上传、普通请求等。

生产环境代码是发布到服务器的代码（直接拷贝到服务器即可）， 生产环境代码是通过代码编辑器自动生成的， 其实就是把开发环境的模块代码自动拼接到页面代码当中。

最终的生产环境代码与纯原生开发是一样的，开发人员可直接理解或修改，但一般不推荐这么做 ，如果搭建了Jenkins等自动发布服务，则开发人员无需关心生产环境代码。

代码编辑器是提供一些辅助的功能，如从模块库下载模块、编译生成生产环境代码等 。代码编辑器是ruby编写的，使用的话需要先安装ruby环境，Mac和linux是自带ruby环境的 。

当然，如果只是修改代码的话，ruby环境是不必要的 。

3、模块开发

接下来，我们介绍一下Trick框架的模块开发 ，这里的模块指的是往期介绍响应式布局中的模块层， 主要是一个页面某个区域的布局， 模块是独立的，可以单独运行它的HTML文件。

我们统一了模块的编写方式和调用方式（JavaScript支持语法）， 这样，有助于降低团队沟通成本， 使用别人开发的模块也不需要沟通或者深入看代码。

我们提供了官方的模块库，开发人员可以直接下载。我们提供的模块是用BootStrap和vue.js编写的， 当然，模块库其实就是一个git仓库， 团队也可快速搭建自己的模块库。

 默认情况下，我们约束单个模块在一个页面中只能被引用一次， 因为我们默认模块的颗粒度是较大的（无需把一个按钮封装成一个模块）， 如果实在存在这样的场景，可以复制一个模块目录 ，通过重命名和替换关键字即可快速构造一个相同的新模块。当然，也可以修改代码以达到多次引用的目的。

在很早的版本中，Trick存在自动生成ID的机制 ，一个页面是可以多次引入相同模块的。但是，这样会让框架变得臃肿的同时，代码也会变得不直观。

而且在实际项目当中，一个页面引入多次相同模块的场景只在少数 ，所以，为了让框架保持简单透明，我们去除了这样的机制。

4、页面开发

接下来，介绍一下Trick框架的页面开发 ，页面开发一般就做三件事情 

1、引入模块并做好布局

2、协调模块

3、接口调用

模块引入是这样的，只需要在页面HTML写好模块标记就行 ，页面运行时，会自动加载模块的HTML、CSS、JavaScript部分。

模块的调用及协调、接口请求全部都放在页面的JavaScript文件之中， 如A模块按钮点击后，需要请求接口，然后更新B模块的数据。 那么，就在A模块初始化时设置回调函数， 在回调函数中请求接口 ，并在数据返回后调用B模块的更新方法。

之前有很多开发人员都问过一个问题 ，这样做的话JavaScript文件的行数可能在几百行 这样不就很混乱吗？ 但是，实际上即使出现了几百行的JavaScript文件，也不会混乱， 因为逻辑流程是从模块的初始化开始的，我们搜索文件就知道模块初始化时的参数 ，从初始化参数就能知道按钮点击后会回调哪个函数 ，再到回调函数就能知道请求了什么接口 ，在接口返回的函数中就能知道更新了哪个模块。

在bug修正时，很简单就能定位问题在哪里， 如果是模块布局错位，肯定是模块本身有问题，可单独调试该模块， 如果是数据不对，那就可以直接在页面的JavaScript中快速追查，直接定位。

由于以上这些明确的规则， 让使用Trick框架的前端团队沟通成本是很低的， 即使某个开发人员临时请假 ，别的开发人员也可以立马顶上，且无需花太多的时间去理解代码 毕竟大家写代码的方式流程是一样的 。

发布

最后，我们介绍发布到服务器的生产环境代码 ，虽然开发环境的代码也可以直接发布到服务器 ，但是由于开发环境代码是运行页面时才会加载模块，所以运行效率不高 ，所以发布到服务器的代码最好经过编译， 而代码编辑器编译其过程实也不复杂，就是把模块的代码直接剪切到页面当中， 最终编译出来的代码与纯原生开发是一样的， 开发人员可直接理解或修改，但一般不推荐这么做 Trick框架是一套顶层架构，关心的是项目过程， 希望用更低的人力成本完成质量更高的前端项目。

总结

Trick框架本身只是一套规则，无任何深度封装和不可见代码 ，无需担心以后的人不可维护 ，因为即使弃用了Trick框架，其生产环境的代码也可以当成原生代码被直接维护 至于我们默认的vue.js、Bootstrap也可以根据团队习惯随意更换。

这套前端框架与脚手架本身没有可比性， 如果你或你的团队都熟悉脚手架等工具的话，可以继续使用 ，也无需非要辩论个孰优孰劣。

因为我们坚持，也确实在实际项目中奏效， 搞生产就是搞生产，简单快捷地展开生产是最好的， 搞些花里胡哨的一点用没有，接手的人还弄不明白。

如果你也苦恼于脚手架工具太复杂， 前端工程混乱不堪，前人写的代码无法维护等问题， 可以尝试一下我们的这套框架。

如果想尝试的话，可以登入我们的官网查看使用说明 ，也可以加入我们的技术支持QQ群：348467898 ，我们会回答相关的问题 ，我们也会根据反馈开直播详细回答问题。

最后，框架本身是完全商用免费的 ，但我们也希望使用这套框架的团队能贡献一些通用模块， 我们也会持续更新模块内容 ，共建更加丰富的模块库。