自学前端日记

曾几何时何必当

已于 2022-07-11 15:30:26 修改

阅读量85

点赞数

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

于 2022-06-20 15:13:47 首次发布

本文链接：https://blog.csdn.net/m0_66541899/article/details/125365808

版权

模块化专栏收录该内容

2 篇文章 0 订阅

订阅专栏

第四篇: 模块化开发

最早的实现方式

把不同功能的模块抽离出来写入单独的js文件，但是当项目更为复杂的时候，html可能会引入很多个js文件，而这个时候就会出现命名冲突，污染作用域等一系列问题，这个时候现代模块化的概念及实现方法应运而生

早期简单的自定义模块化实现(借用了闭包的实现)

function salary(){

    let salary = '';
    
    function setSalary(a){
        salary +=a;

        //改变salary的方法
    }

    function getSalary(){

        return salary;
        //获取salary的方法
    }

    return {

        setSalary:setSalary,
        getSalary:getSalary
        
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
<!-- 引入js代码-->
<script type="text/javascript" src="./salray.js"></script>

<script>

  let {getSalary,setSalary} = salary();
    
</script>

现代模块化开发规范

目的：降低复杂度，提高解耦性

避免命名冲突

更好的分离，按需加载代码

高复用性，高维护性

CommonJS规范

(主要用于node端) 也可以用于浏览器端(借助于browserify编译)能够被浏览器识别

全局安装browserify （拥有指令集的库）

npm i browserify -g

编译汇总模块文件 browserify ./app.js -o ./build.js

暴露语法：module.exports = value; exports.xxx = value; 本质是暴露 module.exports对象

const data =[1,2,3];

function fn1(){
    console.log(data[0]);
}


function fn2(){
    console.log(data[1]);
}

module.exports = {
    fn1,
    fn2
}

const obj = require('./01.js');//引入自定义模块

console.log(obj);

const {fn1,fn2} = obj;

fn1(); // 1
fn2(); // 2

引入语法: const xxx = require("./a.js"); a.ja 文件路径

ES6规范用于浏览器端（要借助Babel和Browserify依次编译代码才能在浏览器端运行）

npm install browserify babel-cli -g

cli "commond line interface" 命令行接口工具

局部安装 babel-preset-es2015

配置 .babelrc 文件

{
    "presets":["es2015"]
}

基本语法:

暴露模块

export 暴露内容 分别暴露

export {obj1,obj2...} 统一暴露

export default {暴露匿名内容} 默认暴露

module1.js 分别暴露

export let data1 = "哈哈"; // 分别暴露

module2.js 统一暴露

function sum(a,b){
    console.log(a+b);
}


function sub(a,b){
    console.log(a-b);
}


export {sum,sub};

module3.js 默认暴露

export default (a,b)=>{
    console.log(a+b);
}

app.js 引入模块

// 1. 通用的方式引入模块

    import * as obj1 from "./module1";//引入的是对象里面包含 暴露的属性

    import * as obj2 from "./module2";//引入的是对象里面包含 暴露的属性

    import * as obj3 from "./module3";//引入的是对象里面包含 暴露的属性

    //使用里面的属性
    let {data1} = obj1;
    let {sum,sub} = obj2;
    let user = obj3.default;


// 2. 使用解构赋值的形式引入模块    
    import { data1 } from "./module1";
    import { sum,sub } from "./module2";
    import {default as user} from "./module3"; 


    console.log(data1);

    console.log(sum(1,2));

    console.log(sub(28,2));

    console.log(user);

将ES6 => ES5

终端进入到ES6文件夹输入 babel ./ -d ../build （babel只认识.js文件）生成一个build文件夹

再将build文件下的app.js文件使用 browserify ./app.js -o ./lastApp.js 编译运行在浏览器端