前端项目模块化

ice-index

于 2022-04-22 23:41:35 发布

755

分类专栏：模块化文章标签： javascript 前端

本文链接：https://blog.csdn.net/m0_65169658/article/details/124357416

版权

模块化专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前端项目模块化设计思路

模块化的概念

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

程序模块化的目的

减少循环依赖
减少耦合
提高设计效率

程序模块化的实施

把耦合密集的归为一个模块
模块间通过固定的接口交互
模块内部实现自由发挥

程序模块化的具体样式

|--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                      项目的说明文件

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

如果现在有一个项目需要完成，程序员需要先新建一个这个项目的文件夹，我们给它文件夹的名称为：shop-serve
在shop-serve文件夹中有app文件夹（服务端所有代码）、public文件夹（部署前端代码,前端代码将来发布这个文件下）、uploads文件夹（管理上传的静态资源，静态资源包括文本，图片，音频，视频，Html,CSS,JavaScript 等不需要查数据库也不需要程序处理，直接就能够显示的页面）和app.js文件（程序的入口文件）。
app文件夹，即包含所有服务端代码的文件夹。包含了controls文件夹（接口处理函数）、DB文件夹（数据库连接目录）、middle文件夹（自定义中间件）、respositories文件夹（发送数据请求的目录）、route文件夹（路由目录）、verticafiction文件夹（接口中需要验证的参数目录）。

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';

微信图片_20220422220330.png

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

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

微信图片_20220422221159.png

上图为goods.js文件中的各个接口。

DB文件夹为数据库连接目录，包含了数据库连接文件index.js。
middle文件夹为自定义中间件。包含的token.js文件（中间件模块），获取私有密钥，来验证登录接口正在操作的用户，是否具有访问权限。

repositories文件夹，包含发送数据请求的目录。包含入口文件，数据库模块（也就是看该项目所连接的数据库中有多少个模块，比如此项目就有goods，shopCar，user三个模块），index.js为入口文件

import userSql from './module/user.js';
import goodSql from './module/goods.js'

export let userSQL = userSql;
export let goodSQL = goodSql;

route文件夹（路由文件）中有config.js路由配置文件，和index.js路由入口文件。

//config.js路由配置文件
import {  registerControl,loginControl,getDetalControl,getPageShopListControl,getSeachShopListControl,getTypeShopListControl,getTypeOneControl } from '../controls/index.js';
export default [
    {// 获取商品列表
        route:'/gooodlist', 
        method:'get',
        handle:getPageShopListControl// 导入接口处理函数
    },{
        route:'/gooodlistType', 
        method:'get',
        handle:getTypeShopListControl
    },{
        route:'/goodSearch', 
        method:'get',
        handle:getTypeShopListControl
    },{// 获取一级分类
        route:'/type_one',
        method:'get',
        handle:getSeachShopListControl
    },{// 注册
        route:'/register',
        method:'post',
        handle:registerControl
        // handle:()=>{
        //     console.log('handle run');
        // }
    },{
        route:'/login',
        method:'post',
        handle:loginControl
    },{ //????
        route:'/logout',
        method:'get',
        handle:()=>{}
    },{
        route:'/detail',
        method:'post',
        handle:getDetalControl
    },{// c端------购物车
        route:'/shopCarList',
        method:'get',
        handle:()=>{}
    },{
        route:'/updateShopCar',
        method:'get',
        handle:()=>{}
    },{
        route:'/addShopCar',
        method:'get',
        handle:()=>{}
    },{
        route:'/deletShopCar',
        method:'get',
        handle:()=>{}
    },{
        route:'/clearShopCar',
        method:'get',
        handle:()=>{}
    },{// 后台管理系统 --- 商品管理模块
        route:"/addShop",
        method:"post",
        handle:()=>{}
    },{
        route:"/updateShop",
        method:"post",
        handle:()=>{}
    },{
        route:"/deletShop",
        method:"post",
        handle:()=>{}
    },{
        route:"/uploads",
        method:"post",
        handle:()=>{}
    },{ // 后台管理-----用户管理模块
        route:"/userList",
        method:"post",
        handle:()=>{}
    },{
        route:"/addUer",
        method:"post",
        handle:()=>{}
    },{
        route:"/deletUser",
        method:"post",
        handle:()=>{}
    },{
        route:"/userInfo",
        method:"post",
        handle:()=>{}
    },{
        route:"/updateUserInfo",
        method:"post",
        handle:()=>{}
    },
]

verticafiction文件夹（接口中需要验证的参数目录），包含验证数据的配置文件，在此项目中有goods.js user.js，还有验证方法method文件夹，userTest.js验证用户名输入是否合法

export let verityfiMethod = (val)=>{
    return /\w{6,8}/.test(val)
}

app.js包含程序的入口文件。

import express from "express";
import formidable from 'express-formidable';
import path from 'path'
import route from './app/route/index.js'
import tokenMiddle from './app/middle/token.js'
// const path = require('path')

const app = express();

// 部署前端项目文件
app.use(express.static(path.resolve('./public')))
//app.use(express.static(path.resolve('./public')))设置静态文件目录
// bug:esmodule 没有__dirname 
// 处理资源目录静态  
app.use('/uploads',express.static(path.resolve('./uploads')))

app.use(formidable({
    keepExtensions:true, // 保留文件后缀
    uploadDir:path.resolve('./upload'), // 设置图片上传路径
    // bug1 语法错误 tgurue--> true
    multiples:true, // 支持多张图片上传
}))

app.use(tokenMiddle())
// app.use('/api',route(app))  // bug: api 无效
// app.use(route(app))// 挂载所有接口 

route(app)
app.listen(9527,()=>{
    console.log(9527);
})
多张图片上传
}))

app.use(tokenMiddle())
// app.use('/api',route(app))  // bug: api 无效
// app.use(route(app))// 挂载所有接口 

route(app)
app.listen(9527,()=>{
    console.log(9527);
})

ice-index

关注

0
点赞
踩
0

收藏
打赏
0
评论
前端项目模块化

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

扫一扫