最近结束了手机页面的改版，分别在百度小程序、微信小程序、手机浏览器这三个地方做了代码的修改，非常锻炼心态，很好的一次练习，对组织代码方面有一点特别的感受。

现在的代码写得七零八落的，等有时间了要把代码好好重构一下，以便未来方便修改。

一、合理的文件分类

框架类（使用微信小程序、uni-app、React 框架的项目）

  • 有一个 app.js 文件（application）
    • 执行一段 js
    • 全局 data
    • 全局方法
  • 有一个 libs/utils 文件夹（library、utility）
    • 放置一些通用的、无状态的、封装好的方法文件，可以简单分为 base.js、common.js
      • 其中 base.js 放置任何项目都可以通用的方法
      • 其中 common.js 放置针对项目本身封装的方法，方便项目中的其他页面可以引用
  • 有一个 views/pages 文件夹
    • 放置展示的页面
  • 有一个 components 文件夹
    • 放置编写的组件
  • 有一个 assets 文件夹（fonts、images、icons）
    • 放置一些静态资源，可以往下细分 fonts、images、icons 文件夹
  • （可选）有一个 stores 文件夹
    • 如果单独做了数据管理，可以把数据放在这里
  • （可选）有一个 CSS 文件夹
    • 如果想把 CSS 单独管理，可以分出一个文件夹专门管理

image.png

原生类（不通过编译转换直接写的项目）

  • 有一个 index.html 文件
    • 该页面作为默认页面
  • 有一个 libs/utils 文件夹（library、utility）
    • 放置一些通用的、无状态的、封装好的方法文件，可以简单分为 base.js、common.js
      • 其中 base.js 放置任何项目都可以通用的方法
      • 其中 common.js 放置针对项目本身封装的方法，方便项目中的其他页面可以引用
  • 有一个 views/pages 文件夹
    • 放置展示的页面
  • 有一个 js 文件夹
    • 放置 js 文件
  • 有一个 css 文件夹
    • 放置 css 样式文件
  • （可选）有一个 components 文件夹
    • 写一些编写的组件，有需要用的地方直接拿来用
    • 比如：倒计时组件、轮播组件、自己写的一些方便使用的库等

我现在觉得在项目刚开始的时候不用过早地就把文件分类给做好，文件分类是在文件越来越多时开始做的

二、提升编写效率

我想到两个方面：

  1. 将常用的功能做成组件：方便直接使用，并可以出一个文档作为使用说明
  2. 使用 SCSS 做预编译处理：这样少想、少写了很多 class 名，编写速度提高了
    • 后来发现这样也不好，因为别人拿到这些代码看不懂你的工作模式，他们一般会去改生成的 CSS 文件
    • 写 SCSS 的话必须让所有改代码的人都使用 SCSS，这个环境配置大家都得配置，实际有些繁琐
    • 所以 SCSS 适合自己写个人项目，少想 class 名字

以后我想从零开始搭建一个博客项目，慢慢照着这个文件分类的思路做，到时候会在这里写一写遇到的文件分类的问题。

「@浪里淘沙的小法师」