分享

Posted 2023-04-06 好程序员IT教育

之前文章都分享的Java相关，今天就分享一篇前端技术文章，一起来看看今日前端技术文章吧~希望能够帮助到你！

 

模块化是一种软件开发的设计模式，它将一个大型的软件系统划分成多个独立的模块，每个模块都有自己的功能和接口，并且能够与其他模块独立地工作。

一、先来一段八股文

模块化开发可以带来以下好处：

● 提高代码的复用性：模块化可以将代码划分成可重用的部分，降低代码的冗余和重复，提高代码的复用性。

● 简化代码的维护和调试：当一个软件系统变得越来越复杂时，进行模块化开发可以使得每个模块都相对独立，这样就可以方便地维护和调试每个模块，而不必考虑整个系统的复杂性。

● 提高代码的可读性：模块化可以使得代码更加结构化，清晰明了，从而提高代码的可读性和可维护性。

● 提高开发效率：模块化开发可以使得团队成员在不同模块上并行开发，从而提高开发效率。

● 降低项目的风险：模块化开发可以使得开发人员更加关注模块之间的接口和依赖关系，从而降低项目的风险。

● 总之，模块化开发是一种有效的软件开发模式，可以提高软件开发的质量、效率和可维护性，特别是在大型软件系统的开发中，模块化更是必不可少的。

二、实际工作中如何使用

场景一：在前后端交互的ajax请求中，对不同的请求进行分类，每一个种类的业务放到一个模块中，有用户相关的、商品列表相关的、订单相关的各种，为了使业务逻辑更加清晰，更改相关代码的时候，只需要找到对应的文件，用户相关的就去user.js修改，商品相关的就去goods.js修改等等，是不是清楚多了，这是不是好用多了？

来看看示例user.js

import axios from '../utils/request'
import md5 from 'md5'

// 登录
export const login = async (params)=>
  let data = await axios.post('users/login',params)
  if(data.success)
    // 在浏览器缓存中存储token
    sessionStorage.setItem('token',data.token)
  
  return data

// 修改密码
export const resetPwd = async (params)=>
  // 要对密码加密
  let data = await axios.post('users/resetPwd',params)
  return data

//...other business

示例，goods.js

export const getDetail = async (id)=> 
  let data =  axios.get(`/goods/detail/$id`);
  return data


export const getCategory = async () =>
  let data =  axios.get('/categories');
  return data


export const search = (params) =>
  let data =  axios.get('/search',  params );
  return data

每个js（模块）都有自己的相关的代码，代码之间互不影响

如下代码所示，所有的请求都放到一个文件中，不分模块

import axios from '../utils/request'
import md5 from 'md5'

// 登录
export const login = async (params)=>
  let data = await axios.post('users/login',params)
  if(data.success)
    // 在浏览器缓存中存储token
    sessionStorage.setItem('token',data.token)
  
  return data

//查询商品
export const search = (params) =>
  let data =  axios.get('/search',  params );
  return data


// 修改密码
export const resetPwd = async (params)=>
  // 要对密码加密
  let data = await axios.post('users/resetPwd',params)
  return data

//商品详情
export const getDetail = async (id)=> 
  let data =  axios.get(`/goods/detail/$id`);
  return data

//获取商品分类
export const getCategory = async () =>
  let data =  axios.get('/categories');
  return data


//...other business

是不是很乱，这只是一点点业务，如果大一点业务系统，里面有百十个接口，如果不能按照模块划分，代码就会是一座屎山，多人协作会出问题、代码维护无从下手

场景二：大家都知道单页面应用程序，他的最大优势就是不用切换页面，对用户体验极好。例如vue常见的页面是头、尾、菜单不动，只有内容区域动，在dom中扣去一块旧的，换一块新的，这样看来，每一块都应该是独立存在的，也就是咱们常见的.vue文件，使用webpack将.vue文件转为.js文件，这个js就是一个模块化的文件，通过路由把页面和名字进行关联，扣掉和换上新的都需要操作路由来完成

总结一下，模块化其实就是分门别类

三、附加几种模块化语法

不管哪种语法，只是一种固定的写法，重点了解两个概念，一个导出（暴露当前模块），一个导入(用那个模块)

1. CommonJS：CommonJS 是一种用于服务器端 javascript 的模块化规范，使用 require 和 module.exports 导出和引入模块。例如：

// math.js
const add = (a, b) => a + b;
const subtract = (a, b) => a - b;
const hello = () => '千锋，你好';

module.exports = 
  add,
  subtract,
  hello
;

// app.js
const math = require('./math');

console.log(math.add(2, 3)); // 输出 5
console.log(math.subtract(3, 2)); // 输出 1
console.log(math.hello); // 输出千锋，你好

2. AMD：AMD（Asynchronous Module Definition，异步模块定义）是用于浏览器端 JavaScript 的模块化规范，使用 define 定义模块，通过 require 异步加载模块。例如：

// math.js
//define第一个参数表示当前模块所依赖的模块，可以是一个字符串数组，也可以是一个函数
// 定义一个名为 "math" 的模块，依赖于 "jquery" 和 "underscore" 两个模块
define(['jquery', 'underscore'], function($, _) 
  // 定义模块的功能
  const add = function(a, b) 
    return a + b;
  ;
  const multiply = function(a, b) 
    return a * b;
  ;
  const test = ()=>
    var arr = ['foo', 'bar', 'qfedu'];
    var arrUpper = _.map(arr, function(str) 
      return str.toUpperCase();
    );
    return  arrUpper;
  
  
  // 导出模块的功能
  return 
    add: add,
    multiply: multiply,
    test:test
  ;
);

// app.js
require(['./math'], function(math) 
  console.log(math.add(2, 3)); // 输出 5
  console.log(math.subtract(3, 2)); // 输出 1
  console.log(math.test())//输出 ["FOO", "BAR", "QFEDU"]
);

3. ES6 模块：ES6 模块是 JavaScript 的官方模块化规范，使用 import 和 export 导入和导出模块。例如：

// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

// app.js
import  add, subtract  from './math';

console.log(add(2, 3)); // 输出 5
console.log(subtract(3, 2)); // 输出 1

4. UMD：UMD（Universal Module Definition，通用模块定义）是一种支持多种模块化规范的通用模块化方案，它既支持 CommonJS，又支持 AMD 和全局变量。例如：

(function (root, factory) 
  if (typeof define === 'function' && define.amd) 
    define(['exports'], factory);
   else if (typeof module === 'object' && module.exports) 
    factory(module.exports);
   else 
    factory((root.myModule = ));
  
(typeof self !== 'undefined' ? self : this, function (exports) 
  const add = (a, b) => a + b;
  const subtract = (a, b) => a - b;

  exports.add = add;
  exports.subtract = subtract;
));

好啦，今日的前端学习文章就分享到这儿，还有不懂的可以评论留言探讨~，关注小源，后台dd领取"前端项目教程"！

apiCloud 三方分享，微信好友分享，微信朋友圈分享，QQ分享，微博分享

首先查看我的这篇有关三方登录的博客，地址是http://www.cnblogs.com/gqx-html/p/8303567.html，配置完三方数据后可以从上一篇文章中的链接跳转到各个登录查看api，也可以看下面

微信好友分享：https://docs.apicloud.com/Client-API/Open-SDK/wx

微信朋友圈分享：https://docs.apicloud.com/Client-API/Open-SDK/wx

QQ分享：https://docs.apicloud.com/Client-API/Open-SDK/qq

微博分享：https://docs.apicloud.com/Client-API/Open-SDK/weibo