前端项目模块化

前端项目模块化设计思路

模块化的概念

模块化就是为了减少循环依赖，减少耦合，提高设计的效率。为了做到这一点，我们需要有一个设计规则，所有的模块都在这个规则下进行设计。良好的设计规则，会把耦合密集的设计参数进行归类作为一个模块，并以此划分工作任务。而模块之间彼此通过一个固定的接口（所谓的可见参数）进行交互，除此之外的内部实现（所谓的隐参数）则由模块的开发团队进行自由发挥。

程序模块化的目的

1. 减少循环依赖

2. 减少耦合

3. 提高设计效率

程序模块化的实施

1. 把耦合密集的归为一个模块

2. 模块间通过固定的接口交互

3. 模块内部实现自由发挥

程序模块化的具体样式

|--app                           服务端所有代码  
   |--controls                   接口处理函数
      |--index.js                入口文件,将所有的接口处理函数模块 导入到入口中
      |--module                  接口处理函数模块,处理各种业务
         |--*.js                 业务模块
   |--DB                         数据库连接目录
      |--index.js                数据库连接文件
   |--repositories               发送数据请求的目录
      |--index.js                入口文件
      |--module                  数据库模块
         |-- *.js                处理表明
   |--route                      路由目录
      |--index.js                路由入口文件
      |--config.js               路由配置文件
   |--verticafiction             接口中需要验证的参数目录
      |--method                  验证数据方法模块集合
         |-- *.js                验证数据方法模块
      |--*.js                    验证数据的配置文件
   |--middle                     自定义的中间件
      |-- *.js                   中间件模块
      
|--public                        部署前端代码,前端代码将来发布这个文件下
|--uploads                       管理上传的静态资源
|--app.js                        程序的入口文件
|--package.json                  npm工程的配置文件（npm初始化以及需要配置的各种环境）
|--REAME.md                      项目的说明文件

从上边给出的项目文件结构搭建我们可以总结以下信息：

1. 如果现在有一个项目需要完成，程序员需要先新建一个这个项目的文件夹，我们给它文件夹的名称为：shop-serve

2. 在shop-serve文件夹中有app文件夹（服务端所有代码）、public文件夹（部署前端代码,前端代码将来发布这个文件下）、uploads文件夹（管理上传的静态资源，静态资源包括 文本，图片，音频，视频，Html,CSS,JavaScript 等 不需要查数据库也不需要程序处理，直接就能够显示的页面 ）和app.js文件（程序的入口文件）。

3. app文件夹，即包含所有服务端代码的文件夹。包含了controls文件夹（接口处理函数）、DB文件夹（数据库连接目录）、middle文件夹（自定义中间件）、respositories文件夹（发送数据请求的目录）、route文件夹（路由目录）、verticafiction文件夹（接口中需要验证的参数目录）。

4. controls文件夹为接口处理函数文件夹，包含了index.js文件（文件中包含了所有的项目需要的入口文件），module文件夹（包含所有的业务模块，比如此项目中需要的goods模块，user模块，即商品模块和用户模块）。

   //controls文件夹下的index.js文件内容示例
   import {
        register,login} from './module/user.js'//导入用户文件，register,login为用户模块需要编写的两个功能，分别为注册和登录
   import {
         getDetal,getPageShopList,getTypeOne,getTypeShopList,getSeachShopList } from './module/goods'//导入商品文件，包括详情，每一页的数据，type_one标题，商品分类，商品搜索
   
   export let registerControl = register;//注册
   export let loginControl = login;//登录
   export let getDetalControl = getDetal//详情页
   export let getPageShopListControl = getPageShopList//分页数据
   export let getTypeOneControl = getTypeOne//根据type_one分类
   export let getTypeShopListControl = getTypeShopList//分类数据
   export let getSeachShopListControl = getSeachShopList//搜索数据
   

   module文件夹包含了所有的业务模块，包括goods.js和user.js

   //module文件夹下的user.js内容示例
   import vertifyUser from '../../verticafiction/user.js';//从verticafiction/user.js文件导入vertifyUser
   import {
        
       userSQL
   } from '../../respositories/index.js';
   
   

   

上图为user.js文件中的两个接口，为注册接口和登录接口

//下面为goods.js内容示例
import {
   
    goodSQL
} from '../../respositories/index.js';
import vertifyGood from '../../verticafiction/goods';