什么是模块化?为什么要进行模块化开发?

什么是模块化?为什么要进行模块化开发?


Warning: usort() expects parameter 2 to be a valid callback, function 'tag_sort' not found or invalid function name in /www/wwwroot/www.blogyc.cn/wp-content/themes/zbfox/core/functions/zbfox-hook.php on line 1668

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

步入正文

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就是一个模块化的文件,通过路由把页面和名字进行关联,扣掉和换上新的都需要操作路由来完成

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

附加几种模块化语法

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

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); // 输出洋葱,你好

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"]
});

 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

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;
}));

温馨提示: 本文最后更新于2023/05/10 13:23:48。若文章内容或图片失效,请 留言联系站长反馈!
------本页内容已结束,喜欢请分享------

感谢您的来访,获取更多精彩文章请收藏本站。

© 版权声明
THE END
喜欢就支持一下吧
点赞13 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容