- 博客(247)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 async await 和Promise的结合使用，Promise链解决循环异步请求，循环依次执行异步代码
需求分析当我们想依次执行多个异步请求时，或者实现setTimeout为setInterval时，可以使用Promise对象和async await关键字来实现该功能。尤其是，我们在使用node做网络爬虫时，需要进行大量的依次进行的异步请求。波及到的知识点如下：1、数组的reduce方法reduce()方法对数组中的每个元素执行一次处理函数，将其结果汇总为单个返回值。reduce详情：https://developer.mozilla.org/zh-CN/docs/Web/JavaS.
2021-04-25 19:58:42
1201
2
原创 ES6 class类的深入理解
class类的特点1、类实际上是个“特殊的函数”，就像你能够定义的函数表达式和函数声明一样，类语法有两个组成部分：类表达式和类声明。2、函数声明和类声明之间的一个重要区别是函数声明会提升，类声明不会。3、类必须使用new调用，否则会报错。函数作为构造函数，进行new创建对象，此时的函数还可以不用new 作为函数使用。但是class类，不能作为函数使用，new class就是来创建对象实例的。4、类的变量申明和具名表达式两种方式，都可以使用类。但是类的匿名表达式，由于没有类名，内部使用不了类。
2020-11-09 15:32:08
634
原创 ES6 super
我理解的super：重点看例子中备注（1）constructor构造函数内容的两种写法（2）constructor内的this指代调用者，类调用，指向该类的实例，子类调用，指向子类的实例（3）父类的所有内容都被继承到子类对应的位置。父类中普通方法和属性，在父类的原型上，被子类原型继承。父类中的静态方法和静态属性，在父类上，被子类继承。（4）子类中constructor，在使用this前，必须先执行一下super()方法，执行父类的constructor函数，之后子类的constructor才
2020-07-02 14:11:51
156
原创 ES6 class类的继承
类的继承：extends关键字用于类声明或者类表达式中，以创建一个类，该类是另一个类的子类。extends关键字用来创建一个普通类或者内建对象的子类。继承一个类： class Foo { constructor(){ this.a = 1; } func1(){ console.log("func1"); } } class Bar extends Foo{
2020-07-01 15:04:39
182
1
转载 css3弹性盒子display：flex
css3的flexbox详细介绍：https://css-tricks.com/snippets/css/a-guide-to-flexbox/原文链接：https://css-tricks.com/snippets/css/a-guide-to-flexbox/浏览器的支持情况：Chrome Safari Firefox Opera IE Edge ...
2018-10-02 17:55:19
13922
转载 web端攻击类型
本文介绍了各种类型的安全攻击和缓解它们的技术。点击劫持点击劫持是一种欺骗用户点击链接、按钮等的做法，这与用户认为的不同。例如，这可以用来窃取登录凭据或让用户在不知情的情况下安装恶意软件。（点击劫持有时被称为“用户界面纠正”，尽管这是对“纠正”一词的误用。）跨站脚本 (XSS)跨站点脚本 (XSS) 是一种安全漏洞，允许攻击者将恶意客户端代码注入网站。此代码由受害者执行，让攻击者绕过访问控制并冒充用户。根据开放 Web 应用程序安全项目，XSS 是2017 年第七大最常见的 Web 应用程序漏
2022-04-12 00:03:53
405
原创 你真的了解Cookie吗？
Cookie 主要用于以下三个方面：会话状态管理（如用户登录状态、购物车、游戏分数或其它需要记录的信息）个性化设置（如用户自定义设置、主题等）浏览器行为跟踪（如跟踪分析用户行为等）
2022-04-04 16:54:15
839
原创 audio语音播放组件
该功能将使用vue3 + TS来实现语音播放组件，使用什么技术不重要，重要的是看懂了核心逻辑后，通过原生js、react、vue2等都可以轻松实现所涉及到重要点有以下几个：（1）进度条的实现：拖拽进度条、点击进度条（2）操作audio语音播放：通过js操作audio媒体（3）播放进度与进度条紧密关联：播放的进度改变时，进度条也随之改变；进度条改变时，播放的进度也随之改变效果图：开始我们的设计吧！第一步：点击拖拽进度条进度条的css样式如下：父元素设置灰色背景..
2022-03-24 23:40:48
4907
原创 Array数组ES6方法Array.isArray、Array.of、Array.from；find、findIndex方法
Array构造函数上的三个方法Array.isArrayArray.isArray()用于确定传递的值是否是一个数组。如果是数组，则返回true，否则为false。// 鲜为人知的事实：其实 Array.prototype 也是一个数组。Array.isArray(Array.prototype);为什么数组原型是一个数组，还可以有属性方法呢？ 通过Object.defineProperty实现在数组上添加方法和属性。就像数组的length属性一样。 var ar.
2021-04-27 10:30:48
1214
2
原创 数组reduce和reduceRight方法
Array.prototype.reduce()reduce()方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。reducer函数接收4个参数:Accumulator (acc) (累计器) Current Value (cur) (当前值) Current Index (idx) (当前索引) Source Array (src) (源数组)您的reducer函数的返回值分配给累计器，该返回值在数组的每个迭代中被记住，并最后成为...
2021-04-26 19:14:32
402
原创 数组forEach方法详解，拓展map、filter、some、every，以及ES6的find和findIndex方法
Array.prototype.forEach()forEach()方法对数组的每个元素执行一次给定的函数。函数返回值为undefined语法：arr.forEach(callback(currentValue [, index [, array]]) [, thisArg])（1）forEach() 方法有效值按升序为数组中含有效值的每一项执行一次 callback 函数，那些已删除或者未初始化的项将被跳过（例如在稀疏数组上，new Array(7) 得到 [empty ×..
2021-04-26 14:50:31
562
原创 爬取项目中的中文
前沿爬取项目中的中文核心思想在于通过脚本对项目文件进行遍历，通过文件名对文件进行筛选，读取筛选出的文件内容，查看文件内容中是否有符合的片段。其实重点在于正则表达式的使用，如何巧妙的使用正则表达式来获取文件中复杂的中文内容。Node请安装node，下载项目后，执行node install安装相关依赖项目源码地址：https://github.com/zhuyuzhu/getHanzi执行命令爬取内容并生成Excel文件：node 脚本查找HTML中的文字：var fs = r
2021-02-24 11:21:14
507
原创 jquery.i18n.properties国际化实例
前沿先来理解jquery.i18n实现中英文版本切换的原理，再来看具体实现的实例。首先将中文汉字以变量的形式存入以zh_CN.properties结尾的文件中。将同样变量名值为英文的数据存入到en_GB.properties结尾的文件中。也可以是en_US.properties文件，总之是properties文件，文件名字与语言对应，已达到语义化的目的。语言资源文件：strings_zh_CN.properties文件内容string_prop=今天是{0}，我们可以出去{1}st
2021-02-24 10:11:01
1203
原创 深入理解js自定义事件以及事件的监听触发移除等操作
EventTargetEventTarget是一个由对象实现的DOM接口，这些对象可以接收事件，并可能有针对事件的监听器。Element、Document、Window是最常见的事件目标，但是其他对象也可以是事件目标。例如XMLHttpRequest、AudioNode、AudioContext等许多事件目标(包括Element、Document和Window)也支持通过onevent属性和属性设置事件处理程序。EventTarget.addEventListener()兼容性：兼.
2021-02-03 16:47:06
2179
原创 Invalid or unexpected token “\u200b“
今天遇到了一个问题，运行程序的时候，Chrome浏览器报了这样的一个错误控制台：未捕获的异常，无效或意外的标记 ！Uncaught SyntaxError: Invalid or unexpected token报错的位置：实际上此处有一个意外的标记"\u200b"，我们在代码中是看不到的，需要手动删除该符号。产生这个符号的原因：我在CSDN上复制代码的时候，使用的是代码片段 右上角的那个“复制”按钮，结果就产生了这个符号。...
2021-01-06 09:42:13
1106
原创 JSON、JSON.stringify()、JSON.parse()
JSONJSON 是一种语法（JavaScript Object Notation），用来序列化对象、数组、数值、字符串、布尔值和null。JSON = null or true or false or JSONNumber or JSONString or JSONObject or JSONArray它基于 JavaScript 语法，但与之不同：JavaScript不是JSON，JSON也不是JavaScript。一、JSON传值分类：1、nullNaN 、In
2021-01-05 11:09:10
376
原创 a标签的使用、特性
HTML<a>元素 (或锚元素)创建一个到其他网页，文件，同一页面内的位置，电子邮件地址或任何其他URL的超链接。一、使用——href属性1、超链接：<a href="http://www.mozilla.com/">External Link</a>（1）关于超链接的路径参考这篇文章：url网址、决定路径、相对路径（2）target属性：规定在何处打开目标 URL。仅在 href 属性存在时使用。_blank：新窗口打开。...
2020-12-28 16:42:41
2198
原创 数组forEach方法对闭包的思考
经典闭包：let arr = ['a','b','c'];for(var i = 0; i < arr.length; i ++){ setTimeout(() => { console.log(i); //闭包！i == 3 }, 2000);}forEach没有形成闭包：let arr = ['a','b','c'];// 没有形成闭包arr.forEach((item, index) => { setTimeout(()
2020-12-25 18:42:09
1394
原创 绝对路径、相对路径、根路径
今天探讨一下浏览器和服务器中的绝对路径、相对路径和根路径浏览器中对于浏览器而言，是无法知道服务器中，文件目录路径的。因为浏览器获取的文件资源，很可能跟服务器中文件资源目录不对应。而服务器是知道每个文件和资源在具体的哪个位置存放。浏览器中的相对路径：下面代码中的reset.css header.css index.css是相对路径。你以为是相对当前的html文件index.html吗？不是！而是相对于当前浏览器的url路径。<!-- index.html -->&..
2020-12-21 20:22:02
6715
原创 node对form表单的post请求处理
form表单以实例来讲解地址：http://localhost/views/form.html地址对应的html <form action="/getform" method="GET" accept-charset="UTF-8" enctype="application/x-www-form-urlencoded" target="_self" name="form1" autocomplete="on" > First nam...
2020-12-13 17:44:51
990
原创 URLSearchParams和url-search-params-polyfill
URLSearchParams对象URLSearchParams接口定义了与URL的查询字符串一起使用的实用程序方法。处理url的查询字符串的。兼容性：Edge17，Chrome49，Firefox29，Safari10.1构造函数：URLSearchParams() 返回一个URLSearchParams对象实例。使用：URLSearchParams构造函数接收一个url的查询字符串部分，返回一个URLSearchParams对象。可以通过URLSearchParams对象上的方法，对查.
2020-12-05 15:05:13
2060
原创 Fetch的理解和使用
Abstract摘要：1、Fetch的官方规范文档：https://fetch.spec.whatwg.org/2、Fetch API提供了一个 JavaScript 接口，优化了http请求和响应的操作方式。这种功能以前是使用XMLHttpRequest（ajax）实现的。它还提供了一个全局fetch()方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。3、fetch最大的特点是与Promise对象的结合，Fetch API大多都返回一个Promise对象，使我们的编程风格...
2020-12-03 16:15:11
5150
原创 你不知道的copy、cut、paste事件——实现页面内容禁止复制，实现复制内容添加额外字段，比如复制请注明出处
聊聊copy复制、cut剪切、paste粘贴事件。首先这三个事件都属于ClipboardEvent事件（剪切板事件）。复制、剪切、粘贴事件是浏览器对事件的监听，可以监听处理。但是默认情况下浏览器操作系统是可以复制、剪切、粘贴页面上的内容，将数据处理到操作系统的剪切板上。比如：window系统的 Win+V快捷键可以展示剪切板。。。浏览器页面内容的复制、剪切、粘贴，正是浏览器操作系统的低层实现。我们也可以通过监听浏览器的copy、cut、paste事件，从而阻止默认的复制内容行为。比如有的网站，不
2020-11-30 19:58:05
3212
原创 Request Headers 和Response Headers——请求头和响应头
前沿作为一个前端开发工程师看不懂每条请求的请求头和响应头，实在是一件很难受的事情。最近花了一些时间整理了一篇文档，一起来看看前后端交互时每个资源的信息。谷歌浏览器调试工具——查看请求资源的信息数据通过谷歌浏览器的调试工具，我们可以看到请求资源的以下信息：下面来具体聊聊每个信息代表了什么，有什么作用。根据上面的那条请求，分析里面一些重要的属性。我访问的是思否上的文章：比如：https://segmentfault.com/a/1190000017787636一、General 综合
2020-11-25 17:22:19
17536
原创 深入理解Ajax
一、了解Ajax1、背景：在 2005 年，Google 通过其 Google Suggest 使 AJAX 变得流行起来。Google Suggest 使用 AJAX 创造出动态性极强的 web 界面：当您在谷歌的搜索框输入关键字时，JavaScript 会把这些字符发送到服务器，然后服务器会返回一个搜索建议的列表。2、介绍：AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。AJAX = Asynchronous JavaScript and XML（异步的
2020-11-19 16:10:37
974
原创 深入理解call、apply、bind
Function原型上有四个方法，其中一个是toString方法，其他三个分别是call、apply和bind1、我们知道toString方法是对象的方法，但是每个类型的数据，都重写了该方法。函数类型也重写了该方法。Function.prototype.toString() 可以得到函数的字符串形式。2、先从call聊起：Function.prototype.call 改变this指向func.call(thisArg,arg1,arg2,...)call方法让this指向th...
2020-11-13 17:38:44
222
原创 Proxy对象深入理解
Proxy对象用于定义基本操作的自定义行为（如属性查找、赋值、枚举、函数调用等）——代理对象。 let handler = { get: function (target, property, receiver) {}, set: function (target, property, value, receiver) {}, has: function (target, prop) {}, deleteProperty: function (t.
2020-11-10 16:33:35
1732
原创 node.js搭建阿里云服务器contos系统
一、购买服务器选择centos系统，版本选新的；选择离你近的地区。二、服务器安装node1、设置云服务器在云服务器ECS ——》网络和安全——》安全组找到你的服务器，配置规则里，快速添加。开启对应的端口权限。尤其是80端口要开启。2、通过Xshell连接云服务器阿里云设置ssh密码：重置密码点击云服务器进入重置root密码3、安装指定版本的node4、解压node安装包tar -xvf node-v10.9.0-linux-x64..
2020-11-08 17:41:12
236
原创 AMD规范、CMD规范、CommonJS
一、AMD规范AMD规范，全称是Asynchronous Module Definition，即异步模块加载机制。完整描述了模块的定义，依赖关系，引用关系以及加载机制。AMD的核心是预加载，先对依赖的全部文件进行加载，加载完了再进行处理。实际上AMD 是 RequireJS 在推广过程中对模块定义的规范化的产出优点：适合在浏览器环境中异步加载模块。可以并行加载多个模块。缺点：提高了开发成本，并且不能按需加载，而是必须提前加载所有的依赖。RequireJS主要解决了两...
2020-11-05 19:23:46
2273
2
原创 ES6模块化——import和export
一、import1、静态import导入的js文件，在严格模式下运行静态的import语句用于导入由另一个模块导出的绑定。无论是否声明了strict mode，导入的模块都运行在严格模式下。2、type=“module”的默认加载方式为defer在浏览器中，import语句只能在声明了type="module"的script的标签中使用。type=“module”的加载方式默认使用 defer的加载方式。关于defer 和 async ：defer和async 都是异步加...
2020-11-05 11:32:22
935
3
原创 ES6拓展String
1、新增Unicode表示法ES6 加强了对 Unicode 的支持，允许采用\uxxxx形式表示一个字符，其中xxxx表示字符的 Unicode 码点。但是，这种表示法只限于码点在\u0000~\uFFFF之间的字符。超出这个范围的字符，必须用两个双字节的形式表示。基本汉字有20902字，范围：4E00-9FA5 var hanzi1 = "\u4E00" //一var hanzi2 = "\u9FA5" //龥console.log(hanzi1, hanzi2)参考：汉.
2020-10-26 17:31:11
122
原创 let与const的使用
一、let语句1、新增概念：块级作用域（全局作用域、函数作用域--局部作用域）let允许你声明一个作用域被限制在块级中的变量、语句或者表达式。与var关键字不同的是，var声明的变量只能是全局或者整个函数块的。var和let的不同之处在于后者是在编译时才初始化，没有预编译，var申明变量提升。比如 ：if块中let a = 1;if(a){ var c = 3; let b = 2;}console.log(b);//b is not defined...
2020-10-26 15:39:18
288
原创 离开页面时触发的事件
beforeunload事件当浏览器窗口关闭或者刷新时，会触发beforeunload事件。当前页面不会直接关闭，可以点击确定按钮关闭或刷新，也可以取消关闭或刷新。HTML规范指出作者应该使用Event.preventDefault()而非Event.returnValue，然而，不是所有浏览器都支持这么做。 window.onbeforeunload = function (e) { e = e || window.event; ...
2020-10-23 17:27:47
3403
原创 页面加载的事件
Document.readyState属性描述了document的加载状态。语法：var string = document.readyState;一个文档的readyState可以是以下之一：loading（正在加载）：document仍在加载。interactive（可交互）：文档已被解析，"正在加载"状态结束，但是诸如图像，样式表和框架之类的子资源仍在加载。complete（完成）：文档和所有子资源已完成加载。表示load状态的事件即将被触发。ready...
2020-10-23 16:28:05
1363
原创 遍历对象：一文搞懂for in、for of、Object.keys()、Object.getOwnPropertyNames()、Object.getOwnPropertySymbols()的区别
一、对象属性理解比如：数组中的length属性，描述符对象enumerable值为false，隐式属性。看下正常的数组和对象的属性： var arr = ["a", true, 3] var obj = { name: "zhu", age: 24 } console.log(arr) console.log(obj)二、关于遍历1、for...in循环
2020-10-21 17:03:33
705
转载 console.log 打印的值不准确
console.log 不服预期有些时候在使用·console.log() 打印对象的时候，打印出来的值不符合预期。这是为什么呢？有一种说法是：console.log() 是一个异步的方法，浏览器在处理的时候对于这种读取 i/o 的操作一般会放到比较靠后的位置去处理。所以有些时候打印出来的值不符合预期。还有一种说法是，当在打印一个对象的时候，由于对象中的值是引用的内存中的值，所以就会存在当打印对象的时候，当引用到对象中的值的时候，对象中的值已经发生变化了。所以才会存在打印结果与预期不一致的情况。
2020-10-15 20:18:24
1286
原创 art-template分别在前端和node中的使用
script标签内包裹jsp模板，有id作为该模板的唯一标示，type="template"，区分script的类型。template模板中可以使用if语句：{if mt.portrait} <img src="{mt.portrait}" />{/if}实例：<script id="historyMixTmpl" type="template"> <li class="mix-li set-list-li no-num mt_type{mt.mt..
2020-09-28 09:49:54
367
原创 gulp：删除文件或文件夹——del
官方文档：https://github.com/sindresorhus/del使用全局列表删除文件和目录。与rimraf类似，但具有承诺的API，并支持多个文件和全局匹配。它还可以防止您删除当前工作目录和以上目录。安装：$ npm install del使用：const del = require('del');(async () => { const deletedFilePaths = await del(['temp/*.js', '!temp/unicorn..
2020-09-01 19:57:02
1730
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人