前端项目结构 2021-08-21¶
统计信息：字数 3566 阅读8分钟
一个项目越来越大，代码和功能维护比较混乱，这样不利于代码维护。
如何学习一个项目的结构？看懂经典项目的结构，自己才能选择合适的框架搭建！
整体¶
基本原则：高内聚、低耦合；代码可读性、可维护性、可扩展性
结构：应该明确各种资源所放的位置——架构固定就不要频繁修改
初始化：每个项目应该都有一些初始化的东西，比如css、js等，避免后续初始化问题
封装请求：每一个项目，都会用到请求和后端交互（所有请求单独封装）
组件：公共的组件封装，对于代码量减少很大，对于维护和修改提高也很大（选择器组件）
规范：ESLint，便于团队协作
测试：单元测试，测试覆盖率
1、react 项目¶
目前的结构推荐使用 react-redux 的项目结构，使用 create-react-app 搭建框架
create-react-app自动生成的 webpack 中集成了：eslint（代码检测）、url-loader（图片BASE64 [小于10000kb的图片]）、babel-loader（ES6和JSX语法解析）、style-loader、css-loader（CSS代码解析）、HtmlWebpackPlugin（产出HTML插件）等内容
自定义第三方库
history
redux（react-redux）进行状态管理
sass/less、style-component
fetch、webpack-dev-server
外部有公用的样式表和工具函数，统一接口；子页面使用不同的文件目录（按照功能分类，而不是按照文件夹分类）
不同界面可以使用不同的子域名，然后使用 react-router
- index.html
- css
- index.css
- common.css
- js
- index.js
- utils
- date-utils
- utils
- storage-utils
- models
- user
- comment
- comment（评论模块）
index.js
comment.js
comment-input.js
comment-list.js
comment.header.js
comment.css(less)
- history (操作记录模块)
- setting（用户设置模块）
知识点：列表渲染，分片渲染，懒加载等
2、Vue 项目¶
vue + typescript + redux
- assets 静态资源
- locales 国际化和语言
- router 页面路由
- adaper 适配器（用于请求处理，参数规范）
- component（公共组件）
- select
- dropdown
- modal
- mobile-view
- button
- icon
- page（业务页面）
- page1
- page2
- redux 状态管理
- actions 动作
- middlewares 中间件
- reducers 执行 state 的更新
- types 动作类型
- store.ts 存储
全局的公共状态，可以使用 redux 管理。
组件内部的状态，最好维护在组件内部，避免全局重新渲染造成的性能问题。
3、mkdocs 博客¶
个人博客，主页单独定义，然后内部不同子博客使用不同 mkdocs 维护。更新文档时，对应更新整体的项目。
技术：主页的图片动态显示；
内部按照 mkdocs 的配置进行搭建
- docs
- sub_docs1
- dub_docs2
- css
- js
- site
- index.html
- mcdocs.yml
4、个人实践¶
未来：自己练习搭建聊天室，主要熟悉 web socket 技术，后端使用 express 实现
模块管理器：主要是 webpack gulp babel 具体的配置看官方文档和其他笔记
5、todo¶
技术选型、快速启动项目两部分详见（https://juejin.cn/post/6844903847874265101）这个文章不错
参考链接¶
https://blog.csdn.net/zhengming0929/article/details/85256046
https://blog.csdn.net/Cinderella___/article/details/81603129
https://www.ruanyifeng.com/blog/2014/09/package-management.html
https://www.cnblogs.com/xiaofish/p/12636762.html