乐趣区

关于前端:什么是模块化为什么要进行模块化开发

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

一、先来一段八股文
模块化开发能够带来以下益处:

● 进步代码的复用性:模块化能够将代码划分成可重用的局部,升高代码的冗余和反复,进步代码的复用性。

● 简化代码的保护和调试:当一个软件系统变得越来越简单时,进行模块化开发能够使得每个模块都绝对独立,这样就能够不便地保护和调试每个模块,而不用思考整个零碎的复杂性。

● 进步代码的可读性:模块化能够使得代码更加结构化,清晰明了,从而进步代码的可读性和可维护性。

● 进步开发效率:模块化开发能够使得团队成员在不同模块上并行开发,从而进步开发效率。

● 升高我的项目的危险:模块化开发能够使得开发人员更加关注模块之间的接口和依赖关系,从而升高我的项目的危险。

● 总之,模块化开发是一种无效的软件开发模式,能够进步软件开发的品质、效率和可维护性,特地是在大型软件系统的开发中,模块化更是必不可少的。

二、理论工作中如何应用
场景一:在前后端交互的 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); // 输入千锋,你好
  1. 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"]
});
  1. 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
  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;
}));
退出移动版