自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(242)
  • 资源 (1)
  • 收藏
  • 关注

原创 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 42

原创 ES6 class类的深入理解

class类的特点1、类实际上是个“特殊的函数”,就像你能够定义的函数表达式和函数声明一样,类语法有两个组成部分:类表达式和类声明。2、函数声明和类声明之间的一个重要区别是函数声明会提升,类声明不会。3、类必须使用new调用,否则会报错。函数作为构造函数,进行new创建对象,此时的函数还可以不用new 作为函数使用。但是class类,不能作为函数使用,new class就是来创建对象实例的。4、类的变量申明和具名表达式两种方式,都可以使用类。但是类的匿名表达式,由于没有类名,内部使用不了类。

2020-11-09 15:32:08 374

原创 ES6 super

我理解的super:重点看例子中备注(1)constructor构造函数内容的两种写法(2)constructor内的this指代调用者,类调用,指向该类的实例,子类调用,指向子类的实例(3)父类的所有内容都被继承到子类对应的位置。父类中普通方法和属性,在父类的原型上,被子类原型继承。父类中的静态方法和静态属性,在父类上,被子类继承。(4)子类中constructor,在使用this前,必须先执行一下super()方法,执行父类的constructor函数,之后子类的constructor才

2020-07-02 14:11:51 83

原创 ES6 class类的继承

类的继承:extends关键字用于类声明或者类表达式中,以创建一个类,该类是另一个类的子类。extends关键字用来创建一个普通类或者内建对象的子类。继承一个类: class Foo { constructor(){ this.a = 1; } func1(){ console.log("func1"); } } class Bar extends Foo{

2020-07-01 15:04:39 79

转载 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 10828

原创 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 31 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 20

原创 数组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 30

原创 爬取项目中的中文

前沿爬取项目中的中文核心思想在于通过脚本对项目文件进行遍历,通过文件名对文件进行筛选,读取筛选出的文件内容,查看文件内容中是否有符合的片段。其实重点在于正则表达式的使用,如何巧妙的使用正则表达式来获取文件中复杂的中文内容。Node请安装node,下载项目后,执行node install安装相关依赖项目源码地址:https://github.com/zhuyuzhu/getHanzi执行命令爬取内容并生成Excel文件:node 脚本查找HTML中的文字:var fs = r

2021-02-24 11:21:14 52

原创 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 62

原创 深入理解js自定义事件以及事件的监听触发移除等操作

EventTargetEventTarget是一个由对象实现的DOM接口,这些对象可以接收事件,并可能有针对事件的监听器。Element、Document、Window是最常见的事件目标,但是其他对象也可以是事件目标。例如XMLHttpRequest、AudioNode、AudioContext等许多事件目标(包括Element、Document和Window)也支持通过onevent属性和属性设置事件处理程序。EventTarget.addEventListener()兼容性:兼.

2021-02-03 16:47:06 280

原创 Invalid or unexpected token “\u200b“

今天遇到了一个问题,运行程序的时候,Chrome浏览器报了这样的一个错误控制台:未捕获的异常,无效或意外的标记 !Uncaught SyntaxError: Invalid or unexpected token报错的位置:实际上此处有一个意外的标记"\u200b",我们在代码中是看不到的,需要手动删除该符号。产生这个符号的原因:我在CSDN上复制代码的时候,使用的是代码片段 右上角的那个“复制”按钮,结果就产生了这个符号。...

2021-01-06 09:42:13 43

原创 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 58

原创 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 92

原创 数组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 103

原创 绝对路径、相对路径、根路径

今天探讨一下浏览器和服务器中的绝对路径、相对路径和根路径浏览器中对于浏览器而言,是无法知道服务器中,文件目录路径的。因为浏览器获取的文件资源,很可能跟服务器中文件资源目录不对应。而服务器是知道每个文件和资源在具体的哪个位置存放。浏览器中的相对路径:下面代码中的reset.css header.css index.css是相对路径。你以为是相对当前的html文件index.html吗?不是!而是相对于当前浏览器的url路径。<!-- index.html -->&..

2020-12-21 20:22:02 134

原创 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 141

原创 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 185

原创 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 455

原创 你不知道的copy、cut、paste事件——实现页面内容禁止复制,实现复制内容添加额外字段,比如复制请注明出处

聊聊copy复制、cut剪切、paste粘贴事件。首先这三个事件都属于ClipboardEvent事件(剪切板事件)。复制、剪切、粘贴事件是浏览器对事件的监听,可以监听处理。但是默认情况下浏览器操作系统是可以复制、剪切、粘贴页面上的内容,将数据处理到操作系统的剪切板上。比如:window系统的 Win+V快捷键可以展示剪切板。。。浏览器页面内容的复制、剪切、粘贴,正是浏览器操作系统的低层实现。我们也可以通过监听浏览器的copy、cut、paste事件,从而阻止默认的复制内容行为。比如有的网站,不

2020-11-30 19:58:05 188

原创 Request Headers 和Response Headers——请求头和响应头

前沿作为一个前端开发工程师看不懂每条请求的请求头和响应头,实在是一件很难受的事情。最近花了一些时间整理了一篇文档,一起来看看前后端交互时每个资源的信息。谷歌浏览器调试工具——查看请求资源的信息数据通过谷歌浏览器的调试工具,我们可以看到请求资源的以下信息:下面来具体聊聊每个信息代表了什么,有什么作用。根据上面的那条请求,分析里面一些重要的属性。我访问的是思否上的文章:比如:https://segmentfault.com/a/1190000017787636一、General 综合

2020-11-25 17:22:19 178

原创 深入理解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 67

原创 深入理解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 56

原创 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 112

原创 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 71

原创 AMD规范、CMD规范、CommonJS

一、AMD规范AMD规范,全称是Asynchronous Module Definition,即异步模块加载机制。完整描述了模块的定义,依赖关系,引用关系以及加载机制。AMD的核心是预加载,先对依赖的全部文件进行加载,加载完了再进行处理。实际上AMD 是 RequireJS 在推广过程中对模块定义的规范化的产出优点:适合在浏览器环境中异步加载模块。可以并行加载多个模块。缺点:提高了开发成本,并且不能按需加载,而是必须提前加载所有的依赖。RequireJS主要解决了两...

2020-11-05 19:23:46 93 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 118 2

原创 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 27

原创 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 56

原创 离开页面时触发的事件

beforeunload事件当浏览器窗口关闭或者刷新时,会触发beforeunload事件。当前页面不会直接关闭,可以点击确定按钮关闭或刷新,也可以取消关闭或刷新。HTML规范指出作者应该使用Event.preventDefault()而非Event.returnValue,然而,不是所有浏览器都支持这么做。 window.onbeforeunload = function (e) { e = e || window.event; ...

2020-10-23 17:27:47 318

原创 页面加载的事件

Document.readyState属性描述了document的加载状态。语法:var string = document.readyState;一个文档的readyState可以是以下之一:loading(正在加载):document仍在加载。interactive(可交互):文档已被解析,"正在加载"状态结束,但是诸如图像,样式表和框架之类的子资源仍在加载。complete(完成):文档和所有子资源已完成加载。表示load状态的事件即将被触发。ready...

2020-10-23 16:28:05 58

原创 遍历对象:一文搞懂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 132

转载 console.log 打印的值不准确

console.log 不服预期有些时候在使用·console.log() 打印对象的时候,打印出来的值不符合预期。这是为什么呢?有一种说法是:console.log() 是一个异步的方法,浏览器在处理的时候对于这种读取 i/o 的操作一般会放到比较靠后的位置去处理。所以有些时候打印出来的值不符合预期。还有一种说法是,当在打印一个对象的时候,由于对象中的值是引用的内存中的值,所以就会存在当打印对象的时候,当引用到对象中的值的时候,对象中的值已经发生变化了。所以才会存在打印结果与预期不一致的情况。

2020-10-15 20:18:24 124

原创 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 129

原创 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 321

原创 gulp:流处理——stream-combiner2

这是流s3的流组合器的续篇。将管道转换为单个流,Combine返回一个流,该流 向第一个流进行写入,并从最后一个流进行读取。监听“error”将从管道内的所有流接收错误。使用:var combine = require('stream-combiner2')gulp.task("revCSS", () => { let combined = combiner.obj([ gulp.src(config.css.SRC), gulpif( .

2020-09-01 19:26:54 68

转载 运算符优先级

下面的表将所有运算符按照优先级的不同从高(20)到低(1)排列。优先级 运算类型 关联性 运算符 20 圆括号 n/a(不相关) ( … ) 19 成员访问 从左到右 … . … 需计算的成员访问 从左到右 … [ … ] new(带参数列表) n/a new … ( … ) 函数调用 从左到右 … (…) 可选链(Optional chaining) 从左到右 ?. ...

2020-09-01 16:53:04 108

原创 springmvc的web.xml和springmvc.xml配置

要有欢迎页面的配置配置前端控制器前端控制器的框架都是servlet,tomcat启动时,就要创建,然后监视客户端的请求,配置启动项,运行到启动标签时,对象已经被创建,所以在创建之前要配置好springmvc.xml的引入。set方法用于注入,上下文的配置路径, <!-- 前端控制器 --> <servlet> <servlet-name>springmvc</servlet-name> <servlet-class

2020-08-31 21:02:30 561

原创 gulp:条件语句插件——gulp-if

Condition条件判断使用例子:Only uglify the content if the condition is true, but send all the files to the dist folder(如果条件为真,只修改内容,但将所有文件发送到dist文件夹)var gulpif = require('gulp-if');var uglify = require('gulp-uglify'); var condition = true; // TODO: add

2020-08-31 17:41:39 50

原创 使用 JavaScript,HTML 和 CSS 构建跨平台的桌面应用程序——Electron

使用Electron可以开发js版的桌面应用,Electron的官网:http://www.electronjs.org/来到官网我们可以看到很多信息,但是作为前端开发的我,现在才知道,一直用的vscode编辑器竟然就是用js写的!使用vscode的都知道,功能想当强大,那我们我们用js、css、html等前端技术就可以开发自己的强大软件。环境配置:node、electron包下载electron包的时候,国外的源非常慢,最好还是用淘宝镜像吧//查看node安装是否成功$ .

2020-08-29 14:04:41 269

“去哪网”城市选择json文件

“去哪网”移动端的城市选择文件,国家—省—市,包括热门城市,首字母选择。

2018-12-05

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人 TA的粉丝

提示
确定要删除当前文章?
取消 删除