Et2nity-CSDN博客

原创模块化开发与webpack

1. 核心概念webpack把一切静态资源视为模块，所以又叫做静态模块打包器。通过入口文件递归构建依赖图，借助不同的loader处理相应的文件源码，最终输出标环境可执行的代码。通常我们使用其构建项目时，维护的是一份配置文件，如果把整个webpack功能视为一个复杂的函数，那么这份配置就是函数的参数，我们通过修改参数来控制输出的结果。在开发环境中，为了提升开发效率和体验，我们希望源码的修改能实时且无刷新地反馈在浏览器中，这种技术就是HRM(Hot Module Replacement)。借助于load

2021-12-14 18:24:42 1345

转载 React知识盲区（Context /Hooks）

1. react 中的setStatesetState更新状态的2种写法 (1). setState(stateChange, [callback])------对象式的setState 1.stateChange为状态改变对象(该对象可以体现出状态的更改) 2.callback是可选的回调函数, 它在状态更新完毕、界面也更新后(render调用后)才被调用 (2). setState(updater, [callback])------函数

2021-11-28 21:50:10 282 1

原创一篇文章看懂redux

1. redux 是什么？React 只是 DOM 的一个抽象层，并不是 Web 应用的完整解决方案。react只是一个轻量级的视图层框架，如果要做大型应用就要搭配视图层框架redux一起使用。主要引用于多交互、多数据源的场景，并不是必须使用，但是必须要会。2.redux的原理redux的原理，首先用一张图来说明，很容易理解首先，用户发出 Action。store.dispatch(action);然后，Store 自动调用 Reducer，并且传入两个参数：当前 State 和收到的 A.

2021-11-28 20:48:03 854 1

原创 react router v6版本路由对比修改

react-router-dom v6 版本的路由如何写如有不全的地方，多多指教//App.jsimport React, { Component } from "react";import Home from "./view/home.js";import Welcome from "./view/welcome";import { Link, Route, Routes } from "react-router-dom";import "./App.css";class App ex

2021-11-26 00:45:56 1034

原创 react 基础

jsx 基础知识介绍我们可以直接引⼊ react.js 和 react-dom.js 两个库，使⽤react 时，我们可以使⽤ jsx 语法来书写我们的模版<div className="foo">bar</div>这是⼀种⾮常类似 DOM 的 xml 结构的语法，唯⼀有区别的是，我们可以在 jsx 中使⽤ {} 来使⽤ js 表达式<div className="foo">{something ? "something istrue" : "someth

2021-11-17 10:57:02 1371

原创 VUE3 项目踩坑

export default { setup () { const state = reactive({ message: '', msgList: [] }) const router = useRouter() let username = '' onMounted(() => { username = localStorage.getItem('username') if (!username) {

2021-11-11 17:02:14 1234

原创 vue3 原理和更新梳理

更新方向1. 框架核心Vue2 是响应式原理基于 Object.defineProperty 方法重定义对象的 getter与 setter，vue3 则基于 Proxy 代理对象，拦截对象属性的访问与赋值过程。差异在于，前者并不能对诸如数组长度变化、增删元素操作、对象新增属性进行感知，在 vue 层面不得不重写一些数组方法（push、pop、unshift、shift 等），动态添加响应式属性，也要使用 $set方法等。而 Proxy 则完美地从根上解决了这些问题，不过对于不支持 Proxy 对象

2021-11-11 00:33:55 1008

原创 VUE3 实时监听页面滚动高度，改变nav/title的透明度

VUE3 实时监听页面滚动高度，改变nav/title的透明度（分享写法，记录）datadata() { return { scroll: "", percent: "", }; },mountedmounted() { window.addEventListener("scroll", this.menu); },computedcomputed: { changeColor() { let percent=

2021-10-31 15:12:28 2172 1

原创利用nodejs搭建简单容易上手的爬虫

一、初始化项目npm init二、安装需要的npm包yarn add superagent cheeriosuperagent 模拟浏览器端发请求, 比如登录 https://www.npmjs.com/package/superagentcheerio 解析静态html https://www.npmjs.com/package/cheerio三、修改package.json scriptpackage.json"scripts": { "start": "node

2021-09-21 20:18:46 393

原创 node服务器部署

网络TCP/IP网络协议聊TCP/IP协议之前, 咱们先看一下OSI七层模型.第 7 层：应用层为操作系统或网络应用程序提供访问网络服务的接口。应用层协议的代表包括： HTTP，HTTPS，FTP，TELNET，SSH，SMTP，POP3等。第 6 层：表示层把数据转换为接受者能够兼容并且适合传输的内容，比如数据加密，压缩，格式转换等。第 5 层：会话层负责数据传输中设置和维持网络设备之间的通信连接。管理主机之间的会话进程，还可以利用在数据中插入校验点来实现数据的同步。第 4 层：传输层

2021-08-11 15:24:39 2297

原创 node.js 事件循环模型

什么是事件循环事件循环使 Node.js 可以通过将操作转移到系统内核中来执行非阻塞 I/O 操作（尽管 JavaScript 是单线程的）。由于大多数现代内核都是多线程的，因此它们可以处理在后台执行的多个操作。当这些操作之一完成时，内核会告诉 Node.js，以便可以将适当的回调添加到轮询队列中以最终执行。Node.js 启动时，它将初始化事件循环，处理提供的输入脚本，这些脚本可能会进行异步 API 调用，调度计时器或调用 process.nextTick，然后开始处理事件循环。 ┌───

2021-08-11 14:46:05 258

原创全局对象解析

全局对象解析JavaScript 中有一个特殊的对象，称为全局对象（Global Object），它及其所有属性都可以在程序的任何地方访问，即全局变量。在浏览器 JavaScript 中，通常 window 是全局对象，而 Node.js 中的全局对象是 global，所有全局变量（除了 global 本身以外）都是 global 对象的属性。在 Node.js 我们可以直接访问到 global 的属性，而不需要在应用中包含它。全局对象和全局变量global 最根本的作用是作为全局变量的宿主。按

2021-08-11 14:43:39 447

原创 vue js数字转换成汉字展示

transToChinese(str) { str = str + ''; var len = str.length - 1; var idxs = ['', '十', '百', '千', '万', '十', '百', '千', '亿', '十', '百', '千', '万', '十', '百', '千', '亿']; var num = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九']; return str.re

2021-08-06 16:34:17 337

原创一读就懂的Ts 基础泛型概念

基础类型: number string boolean array object1. enum: 枚举2. type, interface3. 联合类型 | (联合类型一次只能一种类型；而交叉类型每次都是多个类型的合并类型。)4. 交叉类型 & (联合类型一次只能一种类型；而交叉类型每次都是多个类型的合并类型。)两者之间的区别：（1）在同一时刻，结构体的每个成员都有值，但是联合体在同一时刻只有一个成员有值（或理解为结构体的sizeof是所有成员的和，而联合体的sizeof等于其最长的成员

2021-07-15 12:22:49 475

原创原生Ajax的封装和TS中Ajax的封装

1. 原生 Ajax 的封装封装思路：请求方式，请求地址，请求数据，回调函数将请求的数据格式化成拼接的数据 /** * jsonData 的格式： * { * url: 请求地址 * method: 请求类型 * data：请求数据 * isAsync 是否异步 * success 成功的回调函数

2021-07-13 01:05:59 482 1

原创如何深入理解promise

1. 什么是 promise从语义上可以看出，它是一个承诺，承诺一段时间后给你反馈一个结果。从语法上，它是一个有then方法的对象，使用new来创建。它会有三种状态，等待pending、成功resolve、失败rejecte，且一旦状态确定，就无法更改，此时它成了不变值,所以，一个Promise，不能有两种状态赋予。 Promise创建的任务是微任务。2. promiseA+ 规范是什么1，不管进行什么操作，都返回一个Promise对象，类似于jquery的链式操作；2，一个 Pr

2021-07-09 16:57:01 284

原创 vue 新手提高和面试讲解

Vue经典面试题一、你了解Vue的响应式原理吗?首先要了解Vue中的三个核心类：Observer: 给对象的属性添加 getter 和 setter，用于依赖收集和派发更新Dep: 用于收集当前响应式对象的依赖关系,每个响应式对象包括子对象都拥有一个 Dep 实例, dep.subs是watcher实例的数组. 当数据有变更时,会通过 dep.notify()通知各个 watcher。Watcher: 观察者对象, 实例分为render watcher(渲染),computed watcher

2021-06-25 16:31:25 197

原创 Vue2.0 响应式数据的原理

Vue2.0 响应式数据的原理整体思路是数据劫持+观察者模式对象内部通过 defineReactive 方法，使用 Object.defineProperty 将属性进行劫持（只会劫持已经存在的属性），数组则是通过重写数组方法来实现。当页面使用对应属性时，每个属性都拥有自己的 dep 属性，存放他所依赖的 watcher（依赖收集），当属性变化后会通知自己对应的 watcher 去更新(派发更新)。相关代码如下class Observer { // 观测值 constructor(

2021-05-24 14:17:36 818

原创 echarts 饼图属性栏自定义写法

echarts 饼图属性栏自定义写法制作图：导入代码：getEchartData() { const chart = this.$refs.chart; const self = this; if (chart) { const myChart = this.$echarts.init(chart); const option = { color: ["#36CBCB", "#F2637B","#4DCB73

2021-04-21 18:37:00 512

原创 vue 制作上传图片框

制作效果：上传图片之前（初始效果）：上传图片之后（使用效果）：制作代码：// html ： <form class="photoUpload"> <div class="uplloadFlex"> <div v-for="(item,index) in picList" :key="index" class="imgView"> <img :src="'data:image/j

2021-04-06 10:37:31 445

原创初学入门jQuery 知识点以及基础题目总结（一）

一、 jQuery简介 jQuery由美国人John Resig于2006年创建 jQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装设计思想 write less,do more

2020-10-28 18:27:38 144

原创 js补充部分知识

一、函数的原型（1）. 概念1.每个函数都有一个prototype（原型）属性，它是个对象，这个对象的用途是包含所有的实例共享的属性和方法2.每个prototype对象都有一个constructor属性，这个属性指向构造函数3.每个实例对象都有一个__proto__属性，它指向protptype（2）. 真实应用函数构造函数继承：preson.apply(this,arguments)在子构造函数里面使用call或apply方法调用父调用函数，把子构造...

2020-10-28 14:07:33 143

原创 JS部分面试题和重要知识点汇总（更新中……）（三）

一.CSS给文字设置阴影的属性和属性值text-shadow: -6px 9px 2px red;一共四个属性：x轴偏移 y轴偏移模糊度颜色二.CSS给盒子设置阴影的属性和属性值 box-shadow: 3px 4px 3px 6px #ccc ;共5个属性：x轴偏移 y轴偏移模糊度扩散尺寸颜色三.对盒子模型的理解margin+padding+border+自身的宽...

2020-10-15 17:06:46 143

原创 JavaScript练手题原生制作论坛发帖工具

直接上源代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * {...

2020-10-14 14:37:36 973

原创 JavaScript的时间对象总结

一、 Date对象的构造函数创建一个日期对象：new Date()二、实例化 Date对象创建一个新Date对象的唯一方法是通过new 操作符：<script> let now = new Date();</script>三、语法和使用规则1.没有参数new Date()如果没有输入任何参数，则Date的构造器会依据系统设置的当前时间（也就是执行JavaScript的客户端电脑所设置的时间）来创建一个Date对...

2020-10-11 17:26:48 380 2

原创 JS部分面试题和重要知识点汇总（更新中……）（二）

1.事件类型有哪些？鼠标事件：mouseover mouseout mouseenter mouseleave click dblclickmousedown mouseup mousemove ...

2020-10-08 15:29:21 190

原创 JS部分面试题和重要知识点汇总（更新中……）（一）

1. 10个常用的数组方法 push() 接受参数 pop() 移除最后项 shift()删除第一项 unshift() 返回数组的长度 reverse() 反转顺序 slice() 指定下标数 splice() 删除、插入和替换 indexOf() 查找下标...

2020-10-08 14:53:10 274

原创初学入门 JS/JavaScript的有用知识点简单总结（四）

JS/JavaScript中常用的读时，补零和分页方法一.补零方法补零方法是用来在很多函数计算之后，能够得到一个个位数字的时候，在个位数字的前面补上0，如：1,2,3经过检测为个位数字之后，经过补零函数变成01,02,03。functionrepairZero(num){returnnum,10?('0'+num):num}document.write('<br>' + r...

2020-09-25 09:48:40 132

原创 JS初学者___窗口宠物游戏

这个是在学习过js初级知识之后，对Javascript 知识的各级应用，让大家可以更加熟悉JavaScript中的一些细小的知识的应用。在小程序中用到了：1. 循环2. 函数3. 对象4. 封装函数5. 节流6. 正则表达式等，这几个最基本最常用的JavaScript知识，初步应用到实践中去。下面直接贴已经写完并可以正常运行的窗口程序，并在程序之后作出分步讲解：一. 程序源代码<!DOCTYPE html><...

2020-09-25 09:47:00 427

原创 JavaScript练手——仿京东商品导览放大镜

一 . 实际效果图放大镜二 . 贴源代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> &lt...

2020-09-21 15:31:37 241 2

原创初学入门 JS/JavaScript的有用知识点简单总结（三）

JavaScript中的数组介绍以及数组方法函数一、js中的数组JavaScript中创建数组有两种方式（一）使用 Array构造函数：let arr1 = new Array(); //创建一个空数组let arr2 = new Array(10); // 创建一个包含10项的数组let arr3 = new Array("孙悟空","猪八戒","沙和尚"); // 创建一个包含3个字符串的数组（二）使用定义方法构...

2020-09-07 12:11:46 150

原创初学入门 html/css 的有用知识点简单总结（五）

详细介绍css中的选择器CSS的魅力就是让我们前端工程师像设计师一样进行网页的设计，我们能轻而易举的改变颜色、布局、制作出漂亮的影音效果等等，css中的选择器用于选择你想要的元素的样式的模式。我给大家归纳了常用的30个CSS选择器，希望你能够喜欢我的总结。1、*{} ：通用选择器针对初学者来说，我们还是从简单的开始学起，首先我们来认识下通用选择器，通用选择器，可以匹配页面所有的元素。让页面中所有的元素都具...

2020-09-06 15:05:53 246

原创初学入门 html/css 的有用知识点简单总结（四）

flex 布局和选择器扩充一. flex布局我们之前已经学过一些布局模型，比如说浮动，绝对定位等等，但是浮动布局作为一个老式的页面布局，无法处理布局图形的高度和间距，使用较为麻烦，每次要设置很多相关的属性，利用内外边距和定位等等环节去处理页面的布局。在修改时也会被繁琐的工序搞得难以处理（在使用flex布局的时候是无法使用）flex的优点：1、不用考虑兼容性，flex会编译成flash swf文件，任何操作系统和浏览器，它都同样下载为像素。2、Flex 2中的Action...

2020-09-01 19:26:49 154

原创初学入门 JS/JavaScript的有用知识点简单总结（二）

js方面的跳转链接初学入门 JS/JavaScript的有用知识点简单总结（一）—————————————————————————————————————————————————————————第三部分 JS的语句 1. IF.....ELSE 语句通常在写代码时，总是需要为不同的决定来执行不同的动作。则可以在代码中使用条件语句来完成该任务。 ...

2020-08-30 14:32:47 331

原创前端学习常用的词汇中英文对照表

中文英文容器 container 分页 pager/pagenation 内容 content 主要的 main 左 left 右 right 上 top 下 bottom 父级 parent 兄弟姐妹 siblings 子级 children 删除 remove/delete 添加 append 选项卡 tab 日历 calendar...

2020-08-29 17:17:04 572

原创初学入门 JS/JavaScript的有用知识点简单总结（一）

**往期链接，前情回顾**1. [初学入门 html/css 的有用知识点简单总结（一）](https://blog.csdn.net/Eternity_matt/article/details/108122343)2. [初学入门 html/css 的有用知识点简单总结（二）](https://blog.csdn.net/Eternity_matt/article/details/108125783)3. [初...

2020-08-29 17:11:49 234

原创初学入门 html/css 的有用知识点简单总结（三）（css部分补充内容）

学习目标：补充几个css常用到的语句段，代码段。往期链接初学入门 html/css 的有用知识点简单总结（一）初学入门 html/css 的有用知识点简单总结（二）学习内容：1.变形2.动画3.响应式布局4.背景不动的页面滑动5.学习时间：学习时间大概每周5天到6天，早上八点钟开始到晚上10点左右，学习成果不错学习内容：一. 变形 1.各个变形效果...

2020-08-24 10:19:33 201

原创 QQ音乐页面效果模仿制作

初学模仿QQ音乐界面大概功能效果实现，css/html 部分代码集合,图片是本地图片需要的话可以在后置文件中提取 <head> <style> body {} header { width: 100%; height: 80px; background: rgba(0, 0, 0, .3); position: absolute

2020-08-21 09:04:40 3749 65

原创初学入门 html/css 的有用知识点简单总结（二）

往期链接初学入门 html/css 的有用知识点简单总结（一） css部分样式一. 全局样式设计外部样式引入 <link rel="stylesheet" href="../外部样式.css"> 全局通用样式 * { paddi...

2020-08-20 19:32:23 325 3

原创初学入门 html/css 的有用知识点简单总结（一）

html的标签一，html的标签分类1. 行内标签（无法设置宽、高，且不换行！）常见：<a>、<span>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>2.块级标签 (标签独占一行，可指定宽、高)常见：<div>、<p>、<h1>...<h6>...

2020-08-20 15:56:49 337

模仿京东放大镜以及巡航栏（商品移动观察效果）

空空如也