- 博客(135)
- 收藏
- 关注
RSS订阅原创 webpack5
为什么有webpack？web1.0阶段，还没有明确前端岗位，主要职责是编写静态页面，用Js来进行表单验证或动画效果。为了在页面上动态填充数据，后面也出现了php、jsp这种开发模式。web2.0阶段，伴随ajax的诞生，不止负责展示界面，还能管理数据、和用户进行交互，这就诞生了jquery这样的前端库。web3.0阶段，大前端开发/现代前端开发，前端工作变得多样化和复杂化，不止pc端、移动端、小程序这样的开发。事情多，流程复杂，就会出现问题。比如当前用模块开发，但是不同浏览器对模块化的支持不一
2022-03-23 20:27:05
2433
原创 TypeScript学习（上）
TypeScript的介绍1.ts是由微软开发的开源变成语言（vscode和ts都是微软提供的，vs里面很多ts的适配，里面有很多ts的插件，让写法更佳舒适）2.ts是js的超集（超集的理解：ts在js之上，包含js所有最新的语法特性，包含es6、es7所对应的写法）3.ts是开发大型应用的基石(为什么要学ts？很多大型项目都是基于ts来开发的，比如vscode，vue 3.0，react;越来越多的特性都偏向ts，大型应用基本都用ts语法做支持）4.ts提供了更丰富的语法提示5.ts在
2022-01-13 20:00:42
3310
原创 Object.assign()
将所有可枚举属性的值从一个或多个源对象分配到目标对象。它将返回目标对象。参数（target,...source)：target是目标对象；source是源对象注意：1.第一个参数不能出现undefined和null2.后面的参数如果出现undefined、null会忽略它们3.参数为数组或字符串的话，是以对象的方式来处理，number类型、布尔类型会忽略（它们的键名拿不到）,同名会替换4.继承属性和不可枚举属性是不能拷贝的const target = { a: 1, b: 2
2021-11-25 19:45:56
255
原创 函数柯里化与反柯里化
比如想要个函数计算一个月一共花了多少钱：let sumMoney=0;function cost(money){ sumMoney+=money;}cost(100);cost(50);cost(200);// 剩下的调用函数此处省略console.log(sumMoney);但实际上，我们并不希望这个cost函数执行31次，而是只在月底的时候执行1次。改进：（假设 参数为空就是到月底了）let cost = (function () { let ar.
2021-11-25 11:15:33
620
原创 转树形结构
有一个这样的数组，希望你将其转成树形结构：(我们默认没有parentId节点的就是根节点）let arr = [ { id: 3, name: 'aaa', parentId: 1 }, { id: 2, name: 'bbb', parentId: 2 }, { id: 4, name: 'ccc', parentId
2021-11-24 17:13:47
612
原创 数组的各种方法及应用
稀疏数组比如var arr=[1,2,3,4,5];delete arr[1];console.log(arr);或者[1,,3,4,5]类数组1.arguments对象function fun(){ console.log(arguments);}fun(1,2,3);2.DOMLIST3.字符串（无法更改它的length）console.log(Array.prototype.toString.call([1,[2,3], [3, [4], 5]
2021-11-05 17:48:38
1494
原创 Ajax学习
对Ajax的理解？HTML:Hyper Text Markup LanguageXML:Extensible Markup Language（在html之上能够拓展的语言）比如：不局限于Html：<parent> <son></son> <son></son></parent>Ajax：asynchronous javascript and XML，异步的js和xml实现局部刷新技术，利用js单独
2021-11-01 14:10:01
77
原创 用HOOK写倒计时组件
import React,{useState ,useEffect} from 'react';function App({endTime}){ const[time,setTime]=useState({ day:0, hour:0, minute:0, second:0 }); useEffect(()=>{ let times=(endTime-new Date().getTime())/1000; console.log(.
2021-02-02 14:05:03
582
1
原创 Promise练习题由易到难
1. Promise.resolve().then(()=>{ return new Error('error!') }).then((res)=>{ console.log('then: ',res) }).catch((err)=>{ console.log('catch：',err) })输出：then:Error:error!return了一个Error对.
2021-01-29 11:15:31
798
1
原创 Promise的学习
1.JS是单线程，但是为什么是单线程呢？因为我们需要能够通过操作DOM方式，为了防止DOM冲突【假设JS是多线程，那么它可以同时执行多个任务，如果这多个任务都是操作DOM，也就是说可能存在多种不同的DOM操作，而且这些操作同时执行】，所以必须把JS设置成单线程。异步任务在单线程中是事件轮询通过回调的方式来实现的。2.事件轮询是什么？浏览器通过JS脚本执行，JS脚本中执行任何任务有个叫调用栈（call Stack）的东西，所有任务都放Call Stack中，异步任务直接在Call ..
2021-01-28 11:22:56
181
1
原创 学习笔记——Git
Git简介git是分布式版本控制系统。集中式版本控制就是所有版本集中在一个仓库中心A，其他人B,C从A中拿出版本但只能拿到一个版本。分布式版本控制就是版本v1 v2 v3不仅在A，在B，C都有。就算A挂了也没事，B，C有，可以把版本推到A。如果A写完了一个版本v4，它先保存在自己本地，然后再同步推到A。为什么要做版本控制？在开发过程中，随公司业务量增大，功能越来越多。防止线上代码出问题，可以做回滚。版本控制——git管理文件夹①进入要管理的文件夹②初始化git..
2021-01-15 17:39:20
147
原创 less学习笔记
以//开头的注释不会编译到css文件中，但是/*开头的注释会被编译到css文件中less中的变量都是在块作用域下的。变量less中用@声明一个变量，eg：@pink。1.作为普通值来使用：@pink2.作为选择器和属性名：（但是用的很少）比如：@m:margin;@selector:#wrap;*{ @{m}:0;//这是属性名 padding:0;}@{selector}{//这是选择器}3.作为url：@{url}4.变量的...
2021-01-11 13:47:50
197
2
原创 Dvajs实战——做一个简易TODOList
1.index.jsimport dva from 'dva';const app=dva();app.model(require('./models/todos').default);app.router(require('./router').default)app.start('#root');2.Models/todos.jsexport default{ namespace:'todos', state:[ {id:1,text..
2021-01-07 18:20:03
325
原创 Dvajs 官网实战：写一个列表，包含删除按钮，点删除按钮后延迟 1 秒执行删除。
1.index.jsimport dva from 'dva';// 1. Initializeconst app = dva();// 2. Plugins// app.use({});// 3. Modelapp.model(require('./models/products').default);app.router(require('./router').default)// 5. Startapp.start('#root');2.router.jsx
2021-01-07 11:33:21
330
原创 react写简易版的todoList
1.首先我们得有个渲染出来的页面这个页面第一行是一个标题todoListfunction App(){ return( <div> <h1>todoList</h1> </div> )}export default App;效果图：然后下面几行是事先记录好的list，我们可以把list当成状态然后遍历这些状态可以用map，JS代码要用{}括起来。import React,{useState
2021-01-05 15:54:54
272
1
原创 学习笔记——immutable
Immutable数据就是一旦创建，就不能更改的数据。每当对Immutable对象进行修改的时候，就会返回一个新的Immutable对象，以此来保证数据的不可变。方法上所有的参数声明了它能接受和返回何种类型数据：sum(first: number, second: number): number泛型也能被定义在类及其变量上：class Box<T> { constructor(value: T) getValue(): T}this这个类型表明返回值类型将参照类的
2020-12-31 14:47:23
462
原创 学习笔记2——redux
创建项目步骤：1.使用npm install create-react-app -g全局安装脚手架2.create-react-app 项目名，创建一个项目3.打开项目文件，在src目录下的index.js文件，除了index.js的所有文件都能删掉。可以改成这样的初始样子：4.在静态资源目录public里，保留index.html，剩下的都可以删掉，删成这样5.进入你前面创建的项目名那，然后输入npm start，启动项目6.【如果此时没有安装redux，需要安装一
2020-12-31 11:23:20
81
原创 学习笔记——DvaJS
预备步骤：1.安装dva-cli：npm install dva-cli -g2.查看是否安装成功：dva -v3.用dva创建一个新项目：dva new 文件夹名4.cd 文件夹名，进入目录，并启动服务器npm start5.安装andtdnpm install antd babel-plugin-import --saveDva概念数据流向通过dispatch发起一个 action，如果是同步行为会直接通过Reducers改变State，如果...
2020-12-29 16:44:08
1684
原创 学习笔记1——Redux
介绍Redux 是 JavaScript 状态容器，提供可预测化的状态管理。redux的 npm 包里dist目录包含了预编译好的生产环境和开发环境下的UMD文件。可以直接使用，而且支持大部分流行的 JavaScript 包加载器和环境。比如，你可以直接在页面上的<script>标签 中引入 UMD 文件，也可以让Bower来安装。UMD 文件可以让你使用window.Redux全局变量来访问 Redux。安装稳定版：npm install --...
2020-12-28 13:59:08
200
3
原创 React API
组件React.ComponentReact.Component是使用ES6 classes方式定义 React 组件的基类：class Greeting extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; }}React.PureComponentReact.PureComponent与React.Component...
2020-12-24 15:41:06
103
原创 安装npm遇到的错误
1.报错rollbackFailedOptional原因是设置的代理错误，删除即可 ‘npm config rm proxy’‘npm config rm https-proxy’2.长时间停留在fetchMetadata: sill（更换一下npm源就行）更换成淘宝的源npm config set registryhttps://registry.npm.taobao.org– 配置后可通过下面方式来验证是否成功npm config get registry–...
2020-11-22 01:48:52
293
原创 JS深入学习
判断数据类型1.typeof关键字,返回的是数据类型的字符串表达var a;console.log(typeof a);//输出'undefined'注意：null、array、object返回object，function返回function2.istanceof,判断对象（引用）的具体类型，Object、Function、Arraya instanceof b，a是实例，b是构造函数3.===console.log(a===undefined); //truec.
2020-10-07 16:42:42
788
原创 JavaScript基础与API（上）
浏览器执行浏览器分成两个部分：渲染引擎和JS引擎。渲染引擎：用来解析html、css，俗称内核，比如chorme的blink，老版本的webkitJS引擎：称为JS解析器，读取网页中的JS代码，对它处理后运行JS是高级编程语言，浏览器读到scrip时，JS引擎将JS代码转为二进制机器语言。机器语言能识别就能执行这个代码。JS引擎执行代码时会逐行解释每一句源码，转为机器语言，然后交给计算机执行，所以JS归为脚本语言，会逐行解释执行。编译型语言和解释型语言：编程语言 -> 解释..
2020-10-06 00:11:50
630
1
原创 两栏布局
左侧固定，右侧自适应思路：让左右都在同一行，再让右边自适应。双inline-block<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>两栏布局</title>
2020-10-05 21:45:31
155
原创 CSS水平垂直居中
水平居中行内元素看父元素是否是块元素，是的话，直接给父元素加个text-align:center 不是的话，把父元素转换成块元素，添加text-align:center；块元素方法一：是否有宽度？是的话：margin:auto; 没有的话：默认子元素宽度和父元素一样，然后将子元素转成行内或行内块元素display:inline/inline-block;然后父元素设置text-align:center；方法二：...
2020-10-05 18:44:42
160
1
原创 三栏布局
圣杯布局：左、右栏固定。中间自适应，而且中间需要优先加载。确定的架构：<body> <header>头部</header> <div class="center">主区域</div> <div class="left">左区域</div> <div class="right">右区域</div> <footer>底部</...
2020-10-05 16:06:29
195
原创 Vue学习
Vue文档：https://cn.vuejs.orgVue简介vue是一套用于构建用户界面的渐进式框架，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。Vue的引入1.开发环境版本（适合学习阶段的编码使用）<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js
2020-10-03 21:49:24
1382
原创 Ajax学习
传统网站中存在的问题：1.网速慢的情况下，页面加载时间长，用户只能等待2.用户提交表单后，由于页面发生跳转，如果表单中有一项内容不符合要求，页面就会被重新跳转回表单填写页面，此时用户刚刚填写的内容由于页面跳转，没了。所以用户需要再重新填写所有表单的内容。3.页面跳转过程中，需要重新加载整个页面，但是一般网站中每个页面的头部、底部、侧边栏都是一样的，重新向服务器发起请求，浏览器响应内容并渲染页面，增加了用户等待的时间。=======> Ajax技术解决Ajax概述A...
2020-10-02 17:32:09
363
原创 ES6
ES全程ECMAScript，是一项脚本语言的标准化规范1.ES6新增了用于声明变量的关键字let（1）let声明的变量只在所处的块级有效（2）let声明的变量不存在变量提升，只能先声明再使用（3）暂时性死区特性，在块级作用域使用let声明的变量，这个变量会和块级区整体绑定，块级区内let变量和块级区外面的变量没有任何关系。作用：防止循环变量变成全局变量比如:if(true){ let a=10; if(true){ let b=10; }...
2020-10-01 22:10:53
275
原创 JavaScript基础（下）
面向对象的编程介绍面向过程：分析出解决问题的步骤，然后利用函数把这个步骤一步一步实现，使用的时候一个一个依次调用。举例：得到大象-> 打开冰箱 ->大象放进去 ->冰箱关上面向对象：把事务分解成一个个对象，由对象之间分工合作。举例：一个大象的对象，有个方法叫进去。 一个冰箱的对象，有2个方法叫：打开和关闭。 然后使用大象和冰箱的功能。ES6中的类和对象用class来创建对象。语法：class name{}...
2020-09-30 11:36:27
179
原创 HTML5和CSS3新特性
html5新特性div和span对搜索引擎来说是没有语义的。1.新增语义化标签<head>：头部标签 <nav>：导航标签<article>：内容标签<section>：块级标签<aside>：侧边栏标签<footer>：尾部标签比如：<style> header,nav{ width:100%; height:120px; ...
2020-09-24 13:10:39
632
原创 CSS
CSS样式表1.行内式（内联式）<div style="color:pink;font-size:12px;"> </div>缺点：只能控制一个标签。没有实现样式和结构的分离。使用的比较少优点：写法简单，权重高2.内部样式表（内嵌样式表）：将css代码集中在html的head头部标签中，并用style标签定义<head> <meta charset="UTF-8"> <title>??<...
2020-09-23 09:42:12
544
1
原创 Html
（浏览器内核不同，所以相同的代码显示出的页面或排版就有差异）Web标准三层构成（1）结构：对网页元素进行整理和分类，主要HTML（人的身体）（2）表现：表现网页元素的版式、颜色、大小等外观样式，CSS（人的着装）（3）行为：网页模型定义及交互的编写，js（人的行为）<html> <head> <title></title> </head> <body> </bo
2020-09-23 09:41:40
139
原创 复习——Linux
grep在文件中搜索一个单词，命令会返回一个包含word的文本行 eg:grep "whilte" test.sh test1.sh
2020-08-02 16:19:41
161
原创 Shell学习
（注意：linux中要写shell脚本，必须是.sh的文件，eg: touch tesh.sh ;vim test.sh ; sh test.sh）入门篇定义变量 eg: name="zhangsan"注：变量名和等号之间不能有空格。同时，变量名命名要遵循以下规则： 1.命名只能用英文字母、数字、下划线，首字符不能以数字开头 2.变量名之间不能有空格（有空格的话linux会把它当成一个命令），可以有_ 3....
2020-08-02 09:44:37
385
原创 Charles学习笔记
Charles的简单介绍：一款基于http协议的代理服务器，通过成为电脑或浏览器的代理，然后截取请求和请求结果达到分析抓包的目的。特点：跨平台、半免费Charles的工作原理：运行了charles的电脑就算是代理服务器，客户端可以是手机、电脑，服务器就是客户端想要访问的服务器。1.首先由客户端发送请求，访问服务器2.Charles接收后再发给服务端3.服务端将请求结果返回给Charles4.Charles转发给客户端Charles和fidd..
2020-07-25 21:28:02
298
原创 fiddler学习笔记
1.备注功能备注功能作用：可以在请求上添加备注，然后把它导出来给开发看。file-save-All sessions2.重放功能它的快捷键：R指定重放次数：shift+R(也叫重放攻击，对服务器做点压力测试）3.删除请求会话删除请求键快捷键：右上角的Delete键多个删除快捷键：shift+Delete删除所有会话：ctrl+X4.断点设置断点→Go5.解码这是对所有会话解码6.选择监听的程序移...
2020-07-10 05:04:05
223
原创 回炉重塑SQL
一.共有四个表学生表：Student(s_id,s_name,s_birth,s_sex)-学号，学生姓名，出生年月，性别成绩表：Score(s_id,c_id,s_score)-学号，课程编号，分数课程表：Course(c_id,c_name,t_id)-课程编号，课程名称，教师号教师表：Teacher(t_id,t_name)-教师号，教师姓名二.建表...
2020-05-19 15:31:51
530
原创 二分查找的种种
1.从一组有序数组里找出值为target的数对应的下标：private int binarySearch(int[] nums,int target) { int left=0,right=nums.length-1; while(right>=left) { int mid=left+(right-left)>>1; if(nums[mid]==target) return mid; if(n
2020-05-10 19:25:46
152
原创 Java学习之ArrayList
ArrayList集合介绍：List接口的可调整大小的数组实现。一.ArrayList底层数据结构——数组：数组：一旦初始化长度就不可以发生改变。add：数组的增加元素怎么做？eg：已知数组长度为4，分别是9，5，2，7，如何追加一个元素？答：创建一个新数组，把原来4个长度的数组元素 一 一 拷贝进来，然后在新数组后面添加一个元素。delete:eg：已知数组...
2020-05-02 19:54:41
363
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人