webpack的学习笔记(2)

_Gerry_

已于 2024-05-22 19:00:44 修改

阅读量1k

点赞数 16

文章标签： webpack 学习笔记

于 2024-05-22 19:00:16 首次发布

本文链接：https://blog.csdn.net/weixin_42770320/article/details/139127292

版权

今天来分享一个用webpack搭建的一个小的工程demo，酷炫的数字特效
在这里插入图片描述

效果如上图所示

项目初始化

我们首先新建一个工程，通过npm init去初始化package.json文件，初始化完成之后，使用npm命令安装webpack，当然这里也可以用其他的工具，比如yarn，pnpm，cnpm，可以根据个人喜好使用

在这里插入图片描述

package.json里面我们在scripts里面把webpack的开发环境和生产环境都加入到scripts脚本里

在这里插入图片描述

然后我们创建dist目录和src目录，新增dist/index.html和src/index.js文件

在这里插入图片描述

index.html的代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html {
            min-height: 100%;
            background: #172f38;
            color: #d7dbdd;
            margin: 0;
            padding: 20px;
            cursor: pointer;
            box-sizing: border-box;
        }

        body {
            margin: 0;
        }

        .container span {
            float: left;
            min-width: 2em;
            margin-right: 10px;
        }

        .center {
            position: fixed;
            left: 50%;
            top: 50%;
            font-size: 8em;
            color: rgba(255, 255, 255, .7);
            transform: translate(-50%, -50%);
            /* 针对opactiy，变化函数使用ease-in，延迟0.3s变化，变化时在0.7s完成
               针对其他css属性，变化函数使用ease-in，变化总时间1s
             */
            transition: all 1s ease-in, opacity 0.7s ease-in 0.3s;
        }
    </style>
</head>

<body>
    <div id="divContainer" class="container">
    </div>
    <div id="divCenter" class="center">
    </div>

    <script src="main.js"></script>
</body>

</html>

效果分析

1.上面的容器会根据定时器一直生成数字

2.中间的容器的数字是最新生成的那个数字

3.素数的位置有高亮的颜色，并且颜色随机

4.点击屏幕数字开始生成，再次点击屏幕就停止

工具类编写

根据上面的效果，我们需要编写一些函数，比如生成随机数，判断数字是否是素数，定时器生成数字

我们新建一个目录util，然后util下创建一个工具类文件util/util.js，代码如下

// 判断一个数字是否是素数，只能被自身或者1整除
export function isPrime(n) {
    if (n < 2) {
        return false;
    }
    for (let i = 2; i <= n - 1; i++) {
        if (n % i === 0) {
            return false;
        }
    }
    return true;
}

// 获取随机数（xx-xx）
export function getRandom(min, max) {
    return Math.floor(Math.random() * (max - min) + min);
}

// 获取随机的颜色
export function getRandomColor() {
    const colors = ["#f26395", "#62efab", "#ef7658", "#ffe868", "#80e3f7", "#d781f9"];
    var index = getRandom(0, colors.length);
    return colors[index];
}

// 数字生成的类
export class NumberGenarete{
    constructor(duration = 500) {
        this.duration = duration;
        this.number = 1; //当前的数字
        this.numberCreatedCallback = null; 
        this.timer = null;
    }

    // 启动数字生成
    start() {
        if(this.timer){
            return;
        }
        this.timer = setInterval(() => {
            // 存在回调进行调用，为了保证程序的一个通用性，使用回调函数的方式
            this.numberCreatedCallback && this.numberCreatedCallback(this.number, isPrime(this.number));
            this.number++;
        }, this.duration);
    }

    stop() {
        clearInterval(this.timer);
        this.timer = null;
    }
}

界面逻辑代码编写

编写完工具类之后，我们再来考虑页面上需要哪些功能，页面需要根据数字生成的类动态去生成div，并且加入到容器里面，我们创建一个文件夹名字叫做page，里面创建一个Index.js，表示页面相关的功能逻辑会放在这里

这里为了操作dom方便使用了jquery，我们需要再使用npm i jquery去安装依赖

npm i jquery

具体代码如下

import { getRandomColor, getRandom,NumberGenarete } from "../util/util";
import $ from "jquery";

const divContainer = $("#divContainer");
const divCenter = $("#divCenter");

export function appendNumber(n, isPrime) {
    const span = $("<span>").text(n);
    if (isPrime) {
        const color = getRandomColor();
        span.css("color", color);
        createCenterPrimeNumber(n, color);
    }
    divContainer.append(span);
    // 产生中间的数字
    createCenterNumber(n, isPrime);
}

/* ==================辅助函数================= */
function createCenterNumber(n) {
    divCenter.text(n);
}


function createCenterPrimeNumber(n, color) {
    const div = $("<div>").addClass("center").css("color", color).text(n);
    $("body").append(div);

    // 加入了div后，强行让页面重新渲染
    div[0].clientWidth; //让浏览器重新渲染，reflow
    div.css('transform', `translate(${getRandom(-150, 150)}px,${getRandom(-150, 150)}px)`).css('opacity', 0);


}
const n = new NumberGenarete(100);
n.numberCreatedCallback = function (n, isPrime) {
    appendNumber(n, isPrime);
}


let isStart = false; //默认没有开始

window.onclick = function(){
    if(isStart){
        n.stop();
        isStart = false;
    }else{
        n.start();
        isStart = true;
    }
}

上面的代码也很简单，就是通过调用工具类的函数，通过回调函数的方式动态创建dom元素。主要还是在于功能函数是如何拆分的

主入口引入

在src/index.js里面引入页面代码

import "./page/index"

整体目录

在这里插入图片描述

结语

这个练习也是让我对webpack以及工程化有了更深入的一个认识，对于开发的一个大致的方向也是有所调整，webpack工程化不仅可以让代码更加的简洁便于维护，也可以学到它的一种思想，把复杂的问题模块化，复杂的东西抽分成一个一个小的任务去完成，每个任务是一个独立的功能，只要维护好了，就可以把它们串起来一起使用。

_Gerry_

关注

16
点赞
踩
19

收藏

觉得还不错? 一键收藏
2
评论
webpack的学习笔记(2)

这个练习也是让我对webpack以及工程化有了更深入的一个认识，对于开发的一个大致的方向也是有所调整，webpack工程化不仅可以让代码更加的简洁便于维护，也可以学到它的一种思想，把复杂的问题模块化，复杂的东西抽分成一个一个小的任务去完成，每个任务是一个独立的功能，只要维护好了，就可以把它们串起来一起使用。
复制链接

扫一扫