1900's 88 keys-CSDN博客

原创文件的下载与图片的预览

前端的blob对象 --- 文件的下载 && 图片的预览

2022-06-26 17:08:15 301 1

原创记忆函数的性能优化

一般求阶乘的方法可以看到直接运行时间大概在0.3s左右可以发现第一次调用时0.9s 第二次调用就是0.01s将该过程进行抽象化成一个函数让其拥有通用性

2022-06-25 13:42:54 218

MVVM的简介MVVM 由 Model,View,ViewModel 三部分构成，Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是一个同步View 和 Model的对象。在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的，因此View 数据的变化会同步到Model中，

2022-03-19 19:23:59 328

原创条件渲染v-if和v-show

目录条件渲染：v-if:v-show条件渲染：v-if:写法：(1).v-if=“表达式”(2).v-else-if=“表达式”(3).v-else=“表达式”适用于：切换评率较低的场景特点：不展示的DOM元素直接被移除注意： v-if可以和： v-else、v-else一起使用，但要求结构不能被“打断” <div id="root">  <button @click="n++

2022-03-19 18:21:27 445 1

原创 class和构造函数的区别以及call、bind、apply重写

目录class和构造函数的区别new.targetcall、bind、apply重写class和构造函数的区别1.构造函数本身是函数，因此会有函数声明的提升class 声明不能提升2. class 只能通过new实例3. class 采用严格模式；4. class 中的原型上的属性不能遍历5. class 内部不能修改class的名称ES6 class的写法class Person { constructor(name, age) { this.name = n

2022-03-17 20:07:08 888

原创 new的重写

new的重写Function.prototype.new = function () { const fn = this; const obj = Object.create(fn.prototype); const res = fn.apply(obj, arguments); return res instanceof Object ?res : obj;};// 测试function Person(name, sex, age) { this.name

2022-03-16 20:32:13 320

原创前端常见设计者模式

单例模式单例模式，只是实例化一次，之后每次实例化的对象为同一对象class Singleton { static instance constructor(name) { this.name = name; } static getInstance(name) { if (this.instance) { return this.instance; } this.instance

2022-03-16 20:06:04 298

原创 Promise的常见方法和源码

目录Promise的常见方法和源码Promise常见方法Promise.reject(reason)Promise.resolve(value)Promise.race(iterable)Promise.all(iterable)Promise.allSettled()Promise.any()手写Promise源码Promise的常见方法和源码Promise常见方法Promise.reject(reason)Promise.reject()方法返回一个带有拒绝原因的Promise对象。Pro

2022-03-14 19:19:40 879

原创 Web开发的安全之旅之防御篇

目录Web开发的安全之旅之防御篇XSS 防御**用户需求**必须动态生成DOM下XSS攻击情形Content Security Policy(CSP)CSRF的防御限制请求来源tokeniframe攻击避免用户信息被携带:SameSite Cookie浏览器依赖Cookie的第三方服务怎么办？SameSite Cookie VS CORS防御CSRF的正确姿势Injection 防御DOS 防御Regex DOS防御DDoS 防御传输层————防御中间人HTTPS 的一些特性Web开发的安全之旅之防御篇

2022-03-10 22:20:22 260

原创 Web开发的安全之旅之攻击篇

目录Web开发的安全之旅之攻击篇Cross-Site Scripting(XSS)XXS的分类Cross-site request forgery(CSRF)Injection(注入)Denial of Service(DoS)Distributed Dos (DDoS)中间人攻击Web开发的安全之旅之攻击篇Cross-Site Scripting(XSS)Cross-Site Scripting(XSS) 跨站脚本攻击是最常见的一种攻击方式攻击者会在我们开发维护页面中，通过一种方式把其恶意脚本

2022-03-10 17:34:04 4075

原创 HTTP实用指南

目录HTTPHTTP 简介协议发展HTTP/0.9 单行协议HTTP/1.0 构建可扩展性HTTP/1.1 标准化协议HTTP/2 更优异的表现HTTP/3 草案中协议分析--报文Method状态码常见请求头常见响应头缓存cookieHTTP/2概述：更快、更稳定、更简单HTTPS概述登录常见的方案Session + cookieJWT(JSON WEB TAKEN)SSO: 单点登录（Single Sign On）跨域解决方案用户体验优化WebSocketHTTPHTTP 简介Hyper Te

2022-03-08 23:11:54 438

原创 React之diff算法

React之diff算法一、diff算法的作用计算出Virtual DOM中真正变化的部分，并只针对该部分进行原生DOM操作，而非重新渲染整个页面。二、传统diff算法通过循环递归对节点进行依次对比，算法时间复杂度达到 O(n3) ，n是树的节点数，这个有多可怕呢？——如果要展示1000个节点，得执行上亿次比较。即便是CPU快能执行30亿条命令，也很难在一秒内计算出差异。三、React的diff算法什么是调和？将Virtual DOM树转换成Actual DOM树的最少操作的过程称为调和。#

2022-03-02 19:34:23 214

原创 React组件实例的三大核心属性

React组件实例的三大核心属性statestate 是组件对象最重要的属性，值是对象（可以包含多个key-value的组合）组件被称为“状态机”,通过更新组件的state来更新对应的页面显示（重新渲染组件）即：组件—>状态—>驱动—>页面1.创建一个有状态的组件<body> <div id="test"></div> <script type="text/babel"> // 1.创建组件

2022-02-18 23:14:28 638 2

原创 ES6-Promise简介、ES7 新特性及ES8新特性-async和await

目录ES6-PromisePromise简介Promise.prototype.then方法Promise.prototype.catch方法ES7 新特性Array.prototype.includes指数操作符ES8新特性-async和awaitasync 和 awaitasync函数await表达式async和await结合读取文件async和await结合发送AJAX请求ES6-PromisePromise简介Promise 是ES6引入异步编程的新解决方案。语法上Promise是一个构造函

2022-02-14 22:31:16 1071

原创 NPM包管理和模块化

包简介（package）CommonJS的包规范允许我们将一组相关的模块组合到一起，形成一组完整的工具CommonJS的包规范有包结构和包描述文件两个部分构成包结构：用于组织包中的各种文件包描述文件（package.json ）：描述包的相关信息，以供外部读取分析包结构包结构实际上就是一个压缩文件，解压后为目录。符合规范的目录，应该包含如下文件：package.json 描述文件 (必须）bin 可执行而精致文件doc 文档test 单元测试最重要的是要有p

2022-02-12 20:42:59 646

原创 Node.js简介

目录Node.jsNode.js简介Node.js的引用场景1.前端工程化2.Web服务端应用3.Electron 跨端桌面应用Node.js 运行时结构Node.js特点1.异步I/O2.单线程3.跨平台Node.jsNode.js简介Node.js是一个能够在服务器端运行JavaScript的开源代码、跨平台JavaScript运行环境。Node是Ryan Dahl为了帮助客户解决Web服务器的高并发性能问题而写出来的。Node采用Google开发的V8引擎运行js代码，使用事件驱动、非阻

2022-02-10 22:51:07 1147

原创 Webpack的基础入门

目录为什么要学习Webpack什么是WebpackWebpack打包核心流程核心流程——极度简化版Get StartDependencies LookupTransformCombine Assets模块化+一致性使用Webpack使用Webpack---处理CSS使用Webpack---接入Babel（处理JS）使用Webpack---生成HTML使用Webpack---工具线使用Webpack---HMR使用Webpack---Tree-Shaking其他常用的工具为什么要学习Webpack理解

2022-02-08 23:45:45 834

原创写好JS的原则之过程抽象

目录过程抽象操作次数限制高阶函数其他常用高阶函数Once节流函数(Throttle)防抖函数(Debounce)Consumer/2批量操作元素(Iterative)编程范式例子Toggle--命令式Toggle--声明式Toggle--三态结论过程抽象过程抽象用来处理局部细节控制过程抽象是函数思想的基础在想象过程抽象中，可以抽象成有一个房间，房间里面的门，窗，然后房间空间本身都是数据，但是开门或者开窗的开这个动作、行为就是过程，也就说我们不仅可以将门，窗，空间抽象成数据，开这个过程也是可以

2022-01-23 13:31:31 1051

原创写好JS的原则之组件封装

目录写好JS的原理组件封装例子结构设计：HTML展现效果：CSS行为设计：API行为设计：控制流重构：插件化重构：模板化重构：组件框架总结：写好JS的原理想要成为一名前端工程师，JavaScript这门编程语言是极其重要的，在我们学习JS中，也会遇到很多的问题，很多人也会拿各类语言和JavaScript语言进行比较优劣，但是总体是编程语言只是一门工具，决定代码的好坏是工程师本身。那么怎么样的代码才算是一段好的JavaScript代码呢？应当遵循以下的三个原则：各司其职：–>点击链接组件封装

2022-01-22 16:36:46 2648

原创写好JS的原则之各司其职

目录写好JS的原理（一）各司其职例子：深夜食堂深夜食堂：版本一深夜食堂：版本二深夜食堂：版本三深夜食堂：结论写好JS的原理想要成为一名前端工程师，JavaScript这门编程语言是极其重要的，在我们学习JS中，也会遇到很多的问题，很多人也会拿各类语言和JavaScript语言进行比较优劣，但是总体是编程语言只是一门工具，决定代码的好坏是工程师本身。那么怎么样的代码才算是一段好的JavaScript代码呢？应当遵循以下的三个原则：各司其职组件封装过程抽象（一）各司其职在web体系中分为了三

2022-01-21 20:58:01 892

原创跨域请求及解决跨域的方法

跨域同源策略同源策略（Same-Origin Policy）最早是由Netscape公司提出，是浏览器的一种安全策略何为同源？协议、域名、端口号必须完全相同违背同源策略就是跨域如何解决跨域JSONPJSONP(JSON with Padding),是一个非官方的跨域解决方案，有程序员的聪明才智开发出来的，只支持GET请求。JSONP原理：在网页中有一些标签天生具有跨域能力，比如：img、link、iframe、scriptJSONP就是利用script标签能力来发送请求的

2022-01-17 21:09:32 1719 2

原创 jQuery和Axios发送AJAX请求

目录jQuery中AJAX方法GET请求POST请求通用请求Axios发送AJAX请求GET请求POST请求axios函数通用请求方法jQuery中AJAX方法web服务器代码，优先写在前面后面通过jQuery方法直接访问// 1.引入express模块const express = require("express");const app = express();app.get('/get', (req, res) => { // 设置响应头设置允许跨域 res.se

2022-01-14 23:13:50 1145 2

原创一些常见的AJAX请求操作处理

目录服务端响应和处理JSON数据网络超时和网络异常处理取消重复请求服务端响应和处理JSON数据服务端代码：// 1.引入express模块const { json } = require("body-parser");const express = require("express");const app = express();app.post('/json-server', (req, res) =>{ // 设置响应头设置允许跨域 res.setHeader('

2022-01-14 17:06:55 441

原创 AJAX介绍和基本跨域使用

目录原生AJAXAJAX简介XML简介AJAX的优点AJAX的缺点express框架express的基本使用Express的中间件(Middleware)案例需求原生AJAXAJAX简介AJAX全称是Asynchronous JavaScript And XML,简之就是异步的JS和XML通过AJAX可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。通过XMLHttpRequest()来创建AJAX对象XML简介XML是指可扩展标签语言XML 被设计用来传输和存储数据X

2022-01-13 23:15:20 424

原创 HTTP客户端请求方法

目录HTTP方法概述GETPOSTGET 和 POST的区别PUTHEADDELETEOPTIONSTRACECONNECTHTTP方法概述HTTP1.0定义了三种请求方法：GET、POST和HEAD方法。HTTP1.1新增了六种请求方法：OPTIONS、PUT、PATCH、DELETE、TRACE和CONNECT方法简述描述支持HTTP协议版本GET获取资源请求指定的页面信息，并返回实体主体1.0、1.1POST传输实体主体向指定资源提交数据进行处理请求（例

2022-01-11 21:57:18 305

原创 HTTP请求报文和响应报文

目录HTTP报文请求报文响应报文HTTP状态码HTTP状态码分类使用Chrome网络控制台查看通信报文HTTP报文HTTP报文是HTTP协议交互时所规定请求和响应的规则。请求端（客户端）向响应端（服务器端）请求的发送的信息叫做请求报文，响应端（服务器端）反馈请求端（客户端）的叫做响应报文。请求报文请求报文的格式由请求行+请求头+空行+请求体构成。请求行: 请求方法 + 请求URL+ Http协议版本请求方法：常见的HTTP请求方法有GET和POST方法，还有DELETE、HEAD、OPTIO

2022-01-10 22:25:33 5031

原创 jQuery实现仿京东商品详情动画

目录jQuery实现商品详情动画1. 鼠标移入显示,移出隐藏2. 鼠标移动切换二级导航菜单的切换显示和隐藏3. 输入搜索关键字, 列表显示匹配的结果4. 点击显示或者隐藏更多的分享图标5. 鼠标移入移出切换地址的显示隐藏6. 点击切换地址tab7. 鼠标移入移出切换显示迷你购物车8. 点击切换产品选项 (商品详情等显示出来)9. 点击向右/左, 移动当前展示商品的小图片10. 当鼠标悬停在某个小图上,在上方显示对应的中图11. 当鼠标在中图上移动时, 显示对应大图的附近部分区域完整html+css+jQue

2022-01-08 22:23:14 947 2

原创 jQuery实现动画效果和导航栏动态显示

效果淡入淡出fadeOut([speed],[easing],[fn])通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数修改style中的opacity的值由display:block ~ 0 ~ 1参数：speed:预定字符串(“slow”,“normal”, or “fast”)或者指定数值easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"fn:回调函数// 点击按钮div慢慢淡出 $('#b

2022-01-04 20:14:14 1472 3

原创 jQuery 核心函数和事件处理

事件页面载入ready(fn)当DOM载入就绪可以查询及操纵时绑定一个要执行的函数$(document).ready(function(){ // 在这里写你的代码...});// 下面是简写$(function($) { // 你可以在这里继续使用$作为别名...});事件处理on(events,fn)在选择元素上绑定一个或多个事件的事件处理函数// 给p标签添加点击事件监听$("p").on("click", function(){ alert( $(this)

2022-01-03 19:59:26 570 1

原创 jQuery 核心函数和动态更新员工表

元素的尺寸HTML<body> <div> </div></body>CSS div{ width: 100px; height: 100px; border: 3px solid black; padding: 10px; margin: 20px; }内容尺寸内容尺寸，盒子模型中content的尺寸height([val])取

2021-12-31 20:28:35 650

原创 jQuery 核心函数css和平滑滚动顶部

目录css位置常见效果之平滑滚动到顶部csscss(name|pro)访问匹配元素的样式属性。// 取得第一个段落的color样式属性的值$("p").css("color");// 将所有段落的字体颜色设为红色并且背景为蓝色$("p").css({ "color": "#ff0011", "background": "blue" });// 将所有段落字体设为红色$("p").css("color","red");位置 <style> *{

2021-12-28 23:31:04 412

原创 jQuery 核心函数

jQuery 核心函数jQuery 选择器选择器本身只是一个特定语法的规则的字符串它基本语法规则使用的就是CSS的选择器语法，并且对其进行了扩展用法：调用$("selector"),将选择器作为参数传入才能起作用作用：根据选择器规则在整个文档中查找所有匹配的标签的数组，并封装成一个jQuery对象返回jQuery 基本选择器#id：id选择器// 选择id为div1的元素$("#div1")element：元素选择器// 选择所有的div元素$("div")

2021-12-27 17:17:56 495 2

原创 jQuery的基础使用

jQueryjQuery的不同版本1.x兼容老版本IE文件更大2.x部分IE8及以下不支持文件小，执行效率更高3.x完全不在支持IE8及以下版本提供了一些新的API提供不不包含ajax/动画API的版本jQuery本地引入该方法需要提前下载好jQuery本地文件，jQuery的官网：https://jquery.com/<script type="text/javascript" src="./jquery-3.6.0.js"></script&

2021-12-24 16:39:53 1135

原创 ES6 数值扩展和模块化

目录数值扩展Number.EPSILONNumber.isFiniteNumber.isNaNNumber.parseInt 和Number.parseFloatNumber.isIntegerMath.truncMath.sign模块化模块化的好处模块化语法三种模块暴露数据语法方式引入模块数据语法数值扩展Number.EPSILONNumber.EPSILON是JavaScript表示的最小精度EPSILON属性的值接近与 2.220446049250313080472633361816E-16

2021-12-20 23:04:24 255

原创 ES6中Set(集合)、Map以及class类

目录Set(集合)常用的属性和方法sizeadd()delete()has()clear()for...of遍历Set 实践数组去重交集A ∩ B并集A U B差集A - BMapMap常用属性和方法sizeset()get()delete()has()clear()for...of遍历class类class申明类static 定义静态方法和属性extends继承父类getter和setterSet(集合)ES6提供了新的数据结构Set(集合)。类似于数组，但是成员的值都是唯一的集合实现了iter

2021-12-18 19:05:16 538

路由器玩法的工具.zip

集成各类设计，开发办公小工具的插件平台.zip

空空如也