xt_123456-CSDN博客

原创 react弹窗从屏幕左侧滑进滑出效果的实现

react弹窗从屏幕左侧滑进滑出效果的实现

2022-03-31 11:20:20 1934

题目描述：36进制由0-9，a-z，共36个字符表示，最小为’0’‘0’'9’对应十进制的09，‘a’'z’对应十进制的1035例如：‘1b’ 换算成10进制等于 1 * 36^1 + 11 * 36^0 = 36 + 11 = 47要求按照加法规则计算出任意两个36进制正整数的和如：按照加法规则，计算’1b’ + ‘2x’ = ‘48’（要求：不允许把36进制数字整体转为10进制数字，计算出10进制数字的相加结果再转回为36进制）js代码：<script type="text/j

2020-12-05 15:48:43 943 1

原创前端笔试——js字符串最长公共前缀

题目描述：编写一个函数来查找字符串数组中的最长公共前缀。如果不存在公共前缀，返回空字符串 “”。写法1:var longestCommonPrefix = function(strs){ let res = ""; if(strs.length == 0){ res = ""; return res; } //i代表第一个字符串中每一个元素的下标 //下面将把其余每一个字符串中的第i个元素与第一个字符串中的第i个元素进行比较 for(let i = 0;i < strs[0].

2020-09-14 16:28:56 995

原创前端面试——H5的web本地存储

一.什么是H5的web存储？H5web存储可以在本地存储用户的浏览数据。web存储相对于cookie更加的安全与快速。它的数据不会保存在服务器上。它也可以存储大量的数据，而且不会影响网站的性能。二.客户端存储——localstoragelocalstorage用于长久的保存网站的数据，没有过期时间，除非手动删除，否则永久有效。常用的API如下：1.保存数据：localstorage.setItem(key,value)2.读取数据:localstorage.getItem(key)3.删除单个

2020-09-05 20:02:39 246

原创前端面试——HTML5和HTML的区别

面试中经常会被问到HTML5和HTML的区别，那两者的区别究竟体现在哪些方面呢？1.文档类型声明不同HTML的文档类型声明很长，一般都是自动生成的，不好记忆：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">HTML5的文档类型声明很短，好记：<!DOCTYPE html>2.

2020-09-05 12:38:06 300 2

原创 ES6学习——解构赋值

一.什么是解构赋值？解构赋值可以理解为赋值操作的语法糖，它是针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。代码书写上言简意赅，语义明确，也方便了对象数据的读取操作。可以减少我们写赋值操作时的代码量。ES6中只要有某种数据有iterator接口（也就是可以循环迭代），都可以进行数据的解构赋值。二.使用1.数组解构{ let a,b; [a,b] = [1,2]; console.log(a,b)//输出1，2}如果有一个元素定义了，没有赋值： let a,b,c; [a,b

2020-08-20 22:18:40 234

原创 ES6学习——使用babel工具搭建ES6项目环境

一.什么是Babel ？Babel 是一个 JavaScript 编译器（转码器），它可以将高版本的Javascript代码转化为低版本的JavaScript代码，以便让一些浏览器兼容。比如：ie就不兼容ES6代码，使用babel就可以使ie浏览器来兼容ES6的代码，这样，我们在写代码时就不用考虑兼容性了。二.步骤1.下载nodehttp://nodejs.cn/download/2.打开项目文件夹，打开终端，输入npm init -y初始化项目，生成package.json文件。3.局部安

2020-08-20 11:10:13 368

原创前端面试——走楼梯问题

问题描述：一个人爬楼梯，只可以一步走一层或一步走两层，共多少种走法？输入：楼梯总层数输出：有几种走法解：这个问题，是一个递归问题。1.楼梯总层数为1，有一种走法，一步走一层。2.楼梯总层数为2，有两种走法：1）一步走一层，走两步2）一步走两层，走一步3.楼梯总层数为n的走法有多少种呢？走到n层只有两种可能：1）在第n-1层往上走1步（一步一层）到第n层2）在第n-2层往上走1步（一步两层）到第n层所以：楼梯总层数为n的走法=楼梯总层数为n-1的走法+楼梯总层数为n-2的走法类似

2020-08-14 11:38:18 552

原创前端面试——KMP算法实例

问题：已知主串S=“ababcabcacbab”，模式T=“abcac”。利用KMP算法进行匹配时，需要进行几次才可以匹配成功？首先计算部分匹配值：abcac中：a的前缀为0，后缀为0，前缀和后缀重合的部分为0ab的前缀为a，后缀为b，前缀和后缀重合的部分为0abc的前缀为[a,ab]，后缀为[bc,b],前缀和后缀重合的部分为0abca的前缀为[a,ab,abc]，后缀为[bca,ca,a],前缀和后缀重合的部分为1abcac的前缀为[a,ab,abc,abca]，后缀为[bcac,cac,

2020-08-06 19:20:24 770

原创 js--选择排序实例+代码

选择排序的思想：从头至尾扫描序列，找出最小的一个关键字，和第一个关键字交换，接着从剩下的关键字中继续这种选择和交换，最终使序列有序。是否稳定？不稳定算法的时间复杂度：O(n2)O(n^2)O(n2)实例：原始序列：8个元素49 38 65 97 76 13 27 49js代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>&lt

2020-08-05 09:38:16 205

原创 node学习笔记——如何解决接口跨域问题

1.什么是跨域？首先我们需要了解一下什么是浏览器同源策略？如果协议、域名和端口号三者都相同就是同源。例如：网址1网址2是否同源原因http://www.baidu.com/a.jshttp://www.baidu.com/b.js同源协议、域名相同，都没有端口号http://www.baidu.com/a.jshttps://www.baidu.com/a.js不同源协议不同http://www.baidu.com：8080/a.jshttps://

2020-07-06 23:12:02 415

原创 node学习笔记——初始化路由及接口开发

如何开发一个接口以及路由的编写新建一个server.js文件，首先，需要引入http模块和url模块；通过http.createServer()来创建服务；通过pathname判断请求的地址：const http = require('http');const url = require('url');const server = http.createServer((req,res) => { res.writeHead(200,{'content-type':'applicati

2020-07-04 17:13:48 151

原创 node学习笔记——nodemon自动重启工具安装配置

1.nodemon的作用我们在编写调试Node.js项目时，每次修改代码后都需要手动终止进程，然后再重新启动，非常麻烦。使用nodemon工具，可以监听代码文件的变动，当代码改变之后，自动重启。2.如何安装nodemon推荐全局安装：npm install -g nodemon网速慢的话可以使用淘宝镜像进行安装.在控制台输入以下命令：$ npm install -g cnpm --registry=https://registry.npm.taobao.org之后就可以使用cnpm的命令来安

2020-07-04 14:54:14 156

原创前端面试题——javascript中的prototype属性

最近参加面试，发现面试官总会问到：”你了解javascript中的prototype属性吗？“所以整理一下javascript中的prototype属性的用法。1、prototype的定义javascript中的每个对象都有prototype属性，Javascript中对象的prototype属性的解释是：返回对象类型原型的引用。prototype 属性使您有能力向对象添加属性和方法。那么我们需要了解一下：什么是javascript对象呢？先看一下菜鸟教程里的解释：javascript对象 | 菜鸟

2020-06-29 19:17:03 704

原创什么是javascript对象（实例讲解对象的创建及使用）

1.什么是javascript对象？先看一下菜鸟教程里的解释：javascript对象 | 菜鸟教程JavaScript 中的所有事物都是对象：字符串、数值、数组、函数…此外，JavaScript 允许自定义对象。JavaScript 提供多个内建对象，比如 String、Date、Array 等等。对象只是带有属性和方法的特殊数据类型。布尔型可以是一个对象。数字型可以是一个对象。字符串也可以是一个对象日期是一个对象数学和正则表达式也是对象数组是一个对象甚至函数也可以是对象所以我

2020-06-29 15:34:30 514

原创 MacOS下如何删除APP以及启动台中残留的无效图标

1.在MacOS下如何删除APP呢？首先，我们打开启动台，用鼠标按着一个APP图标不动，直到出现下图情况：其中，图标上出现小叉叉的就可以点击小叉叉进行删除；没有出现小叉叉的APP，就要打开访达，再打开应用程序，找到你要删除的APP图标，拖到废纸篓里，然后再清倒废纸篓，这样APP就被删除啦。可是你会发现，这样删除以后，打开启动台会发现，被删除的APP还残留了图标在启动台，那么，如何清理启动台中残留的无效图标呢？2.如何清理启动台中残留的无效图标？首先我们需要找到com.apple.dock.lau

2020-06-27 10:13:52 8027 1

原创 nodejs学习笔记——处理客户端get/post请求

如何处理从页面传来的参数？1.url.parse(urlString[, parseQueryString[, slashesDenoteHost]])urlString URL 字符串parseQueryString 是否解析slashesDenoteHost 默认为false，//foo/bar形式的字符串将被解析成{pathname: ‘//foo/bar’}如果设置成true，//foo/bar形式的字符串将被解析成{host: ‘foo’, pathname: ‘/bar’}

2020-06-25 12:57:04 360

原创 node学习笔记——nodejs简易爬虫实例

1.nodejs简易爬虫实例：例如，想爬一下百度首页的代码：const https = require('https');https.get('https://www.baidu.com/index.php?tn=monline_3_dg',(res) => { res.setEncoding('utf8'); let html = ''; res.on('data',chunk => { html += chunk; }) res

2020-06-24 21:47:45 233

原创 node学习笔记——http讲解及搭建服务器实例

一.什么是http？例如：http://www.xxxx.comhttp协议（Hypertext transfer protocol，超文本传输协议）：是一种应用广泛的网络传输协议。http是基于TCP/IP通讯协议来传输数据的（HTML文件、图片文件、查询数据等）。二.http工作原理http协议工作在客户端-服务端之间。主流的三个web服务器：Apache、 Nginx、 IIS（Web服务器专门处理HTTP请求的）。http默认端口为80。http协议通信流程：注：web Bro

2020-06-24 19:42:08 214

原创 node学习笔记——核心模块util常用工具

util模块里的常用工具1.util.callbackify(original)将 async 异步函数（或者一个返回值为 Promise 的函数）转换成遵循异常优先的回调风格的函数，例如将 (err, value) => … 回调作为最后一个参数。在回调函数中，第一个参数为拒绝的原因（如果 Promise 解决，则为 null），第二个参数则是解决的值。例如：const util = require('util');async function hello(){ return

2020-06-20 16:00:29 409

原创 node学习笔记——node.js事件触发器

events（事件触发器）事件触发器events的使用方法：大多数 Node.js 核心 API 构建于惯用的异步事件驱动架构，其中某些类型的对象（又称触发器，Emitter）会触发命名事件来调用函数（又称监听器，Listener）。所有能触发事件的对象都是 EventEmitter 类的实例。这些对象有一个 eventEmitter.on() 函数，用于将一个或多个函数绑定到命名事件上。事件的命名通常是驼峰式的字符串，但也可以使用任何有效的 JavaScript 属性键。当 EventEmit

2020-06-18 22:10:40 281

原创 node学习笔记——基础模块path常用api

基础模块path常用api1.path.basename(path[, ext])path.basename() 方法会返回 path 的最后一部分。例如：const path = require('path');console.log(path.basename('/nodeJS学习/2-6/index.js'));运行结果：2.path.dirname(path)path.dirname() 方法会返回 path 的目录名。...

2020-06-18 18:25:42 216

原创 node学习笔记——文件流

1.nodejs中的流类型：nodejs中有4种基本的流类型：1） Writable - 可写入数据的流（例如 fs.createWriteStream()）。2） Readable - 可读取数据的流（例如 fs.createReadStream()）。3） Duplex - 可读又可写的流（例如 net.Socket）。4）Transform - 在读写过程中可以修改或转换数据的 Duplex 流（例如 zlib.createDeflate()）。2.如何创建读取文件流？创建读取文件流：

2020-06-15 22:02:19 190

原创 node学习笔记——nodejs文件系统模块常用api操作

nodejs文件系统模块常用api操作一、文件常用的api操作：首先，需要引入文件系统模块：const fs = require('fs');1.fs.readFile(path[, options], callback)作用：异步地读取文件的全部内容。用法：注：1）回调会传入两个参数 (err, data)，其中 data 是文件的内容。2）如果没有指定字符编码，则返回原始的 buffer。3)如果 options 是字符串，则它指定字符编码：fs.readFile('/etc

2020-06-14 13:09:25 565

原创 node学习笔记——Buffer缓冲器常用api

Buffer简介在 Node.js 中， Buffer 对象用来处理二进制数据，在v8堆外分配物理内存， Buffer 类的实例类似于从 0 到 255 之间的整数数组，显示的数据为十六进制，大小是固定的，在创建时已经确定，无法修改。Buffer 类在全局作用域中，因此无需使用 require(‘buffer’).Buffer。创建buffer1.Buffer.alloc(size[, fill[, encoding]])分配一个大小为10字节的新 Buffer。如果 fill 为 undefi

2020-06-04 22:40:09 217

原创 node学习笔记——commonjs模块规范

commonjs模块规范每一个文件相当于一个模块，有自己的作用域，其模块内的变量、函数以及类都是私有的，对外不可见的。如果想在一个js文件里使用另一个js文件的内容，就得使用module.exports模块进行导出，再使用require模块引入。例如：我想在index.js文件里使用calculate.js文件里的函数，我就要在calculate.js文件里使用module.exports模块进行导出，在index.js文件里使用require模块引入calculate.js，代码如下：calcul

2020-06-03 21:37:26 129

原创 node学习笔记——简单的nodejs应用及调试方法

创建简单应用1.新建一个文件夹，打开VScode，在此文件夹下新建一个index.js文件let name = 'xutian';function sayHello(){ console.log('Hello ' + name);}sayHello();2.在VScode中新建一个终端，cd进入到index.js所在的文件夹下，输入命令：node index.js运行结果：调试鼠标悬停在代码的行数上，代码行的左边会出现小红点，点击这个小红点就可以给代码行打断点：然后

2020-06-03 11:25:07 140

原创 node学习笔记——mac下NodeJs环境安装配置

Nodejs是什么？NodeJs是一个基于Chrome的V8引擎的Javascript运行环境。Nodejs安装步骤：1.打开浏览器搜索nodejs找到官网2.点击下载，选择对应系统版本的安装包3.下载后一直点击继续然后安装即可4.打开终端，输入node -v和npm -v可查版本信息，说明安装成功nvm管理工具nvm是一款node版本管理工具，使用这款工具可以很方便的下载、删除所需版本的node文件以及npm。nvm安装步骤：参见：https://github.com/nvm-s

2020-05-28 11:00:15 584

原创 js--快速排序实例+代码

快速排序的思想：快速排序是交换类排序，以升序为例，其执行的大体思路为：每一趟排序都选择当前所有子序列中的一个关键字（通常选择第一个）作为枢轴元素，将子序列中比枢轴小的元素移到枢轴的前面，比枢轴大的元素移到枢轴的后面，当本趟排序中所有子序列都被枢轴以上述规则划分完毕后，就会得到新的一组更短的子序列，它们将成为下一趟划分的初始序列集。是否稳定？稳定算法的时间复杂度：O(nlog2n)O(nlog _2 n)O(nlog2n)最好的情况：待排序序列越接近无序，本算法效率越高，此时时间复杂度为 O(n

2020-05-27 12:21:07 347

原创 webpack中路径表示方法

在我们写代码里的路径时：.代表当前目录..代表当前目录的上一级目录./代表当前目录下的某个文件或文件夹，如：./index.js代表当前目录下的index.js文件../代表当前目录上一级目录的文件或文件夹，如：../index.js代表当前目录的上一级目录下的index.js文件具体例子：目录结构如上图所示：path文件夹下有两个文件夹inner1和inner2以及一个文件file1.jsinner1文件夹下有两个文件：file2.js和file3.js假设现在在文件file2.js中，

2020-05-26 20:15:31 318

原创 js--冒泡排序实例+代码

冒泡排序的思想：假设有n个元素，从第一个元素开始，两两进行比较，把大的元素放大后面（第1个元素和第2个元素比，如果第1个元素大于第2个元素，就把第1个元素和第2个元素交换位置；如果第2个元素大于第1个元素，就不交换，再比较第2个元素和第3个元素…以此类推），直到排到最后一个元素，这时第一趟排序已经完成。第一趟排序完成后，最后一个元素就是最终排序结果中最大的那个元素，该元素位置已经确定，所以冒泡排序每一趟都会确定一个元素的位置。需要注意的是，因为每一趟排序都能确定一个元素的最终位置，在经过n-1趟排序之后，

2020-05-25 18:11:30 532

原创 4-5 webpack-打包优化技巧

1.减少文件搜索范围1）优化resolve.extensions配置在导入文件的语句里，没有带文件后缀的时候，webpack会自动带上后缀去尝试询问文件是否存在。所以，在配置resolve.extensions的时候，要遵循以下几点，以做到尽可能的优化构建性能。后缀尝试列表要尽可能小，不要把项目中不存在的后缀类型写到后缀尝试列表中。频率出现最高的文件的后缀要优先放在最前面，以做到尽快的退出寻找过程。在源码中写导入语句时,要尽可能的带上后缀,从而可以避免上述寻找过程。例如在你确定的情况下把re

2020-05-22 13:15:32 184

原创 4-4 webpack-区分开发环境和生产环境

webpack-区分开发环境和生产环境开发环境和生产环境的构建目标差异很大。在开发环境中，我们需要具有强大的、具有实时重新加载或热模块替换能力和localhost server（本地服务器）。而在生产环境中，我们的目标则转向于关注更小的 bundle，以及资源的优化，以改善加载时间。所以我们通常建议为每个环境编写彼此独立的 webpack 配置。具体步骤1.安装打开终端，进入项目文件夹的路径，输入安装命令为：cnpm install --save-dev webpack-merge2.配置(1)

2020-05-20 12:36:39 521

原创 4-3 webpack-开发调试必备功能之模块热替换HMR

1.什么是模块热替换模块热替换(HMR - Hot Module Replacement)功能会在应用程序运行过程中替换、添加或删除模块，而无需重新加载整个页面。主要是通过以下几种方式，来显著加快开发速度：1）保留在完全重新加载页面时丢失的应用程序状态。2）只更新变更内容，以节省宝贵的开发时间。3）调整样式更加快速 - 几乎相当于在浏览器调试器中更改样式。2.具体步骤1）配置webpack.config.js文件在module.exports = {}里的devServer中写：hot:tr

2020-05-19 13:03:50 180

原创 4-2 webpack使用mapsource调试

一.什么是SourcemapSourcemap是为了解决在实际运行代码（打包后的）出现问题时，无法定位到开发环境中的源代码的问题。为了让资源更小，加载速度更快，在js项目部署之前都会将代码混淆压缩，将less、sass 、typeScript 等其他语言编译成 css 或 JS ，这样就可以使浏览器识别。但是这样也带来了影响，当代码中出现问题时，只能定位到压缩之后的代码，出错以后只会告诉我们第几行有错误。而压缩之后的代码一般就只有一两行，每一行上万字符，对排除检查几乎没有帮助。而sourceMap的存在就

2020-05-18 20:56:55 422

原创 4-1 webpack处理HTML内嵌图片（以及错误解决）

在html中引入图片时，比如： <body> <img src="Show.jpg"> </body>如果不使用loader，就会出现路径错误，图片不显示的情况：经过loader处理后，图片就可以正常显示了。具体步骤1.安装html-loader打开终端，进入到项目文件夹路径，输入命令cnpm install --save-dev html-loader2.配置webpack.config.js文件在module.exports = {}里的mo

2020-05-18 11:57:35 566

原创 js--直接插入排序实例+代码

直接插入排序的思想：将待排序的元素插入到已有序的数组中（在初始时不知道是否存在有序的数据，因此将第一个元素看成是有序的），将待排序元素与已经有序的数组依次进行比较（从后往前），如果待排序元素比数组中的元素大，就直接插入到这个有序数组后面；如果待排序元素比数组中的元素小，就将数组中的元素向后移动一位，将待排序元素接着与数组的元素进行比较，直到找到合适的插入位置。算法步骤：1）从第一个元素开始，因为只有一个元素，所以该元素可以认为已经有序2）取出下一个元素作为待排序元素，在已经排好序的元素序列中从后向前扫

2020-05-17 22:54:21 292

空空如也

空空如也