07 2021 档案
摘要：前言 JavaScript从使用开初就一直基于事件循环的单线程运行模型，即使是成功进军后端开发的Nodejs也没有改变这一模型。那么对于计算密集型的应用，我们必须创建新进程来执行运算，然后执行进程间通信实现传参和获取运算结果。否则会造成UI界面卡顿，甚至导致浏览器无响应。从功能实现来看，我们可以通过
阅读全文
posted @ 2021-07-28 17:19
陌路y
摘要：最近在使用d3 zoom得时候 遇到一个小坑 直接对元素添加 zoom事件 会有很大得抖动，查文档 看代码之后发现是 由于元素在不断变化， 所以计算基础值也不不断变化，所以会导致计算出来得值 忽大忽小 从而造成抖动 解决办法 :在他父元素上添加事件 然后在子元素上添加style 方法 具体代码 _a
阅读全文
posted @ 2021-07-28 17:16
陌路y
摘要：animejs 是现如今非常不错的一个 js 动画库。我们将其与 react Hooks 融合，使它更方便的在 react 中使用。 最终效果： const Animate: React.FC = () => { const { animateTargetRef, animationRef } =
阅读全文
posted @ 2021-07-28 17:15
陌路y
摘要：1.回调函数 我们编写一个问候的函数，首先创建一个函数greet(name)，该函数返回欢迎消息： function greet(name) { return `Hello, ${name}!`; } greet('fly63'); // => 'Hello, fly63!' 如果要向一些人问候怎么
阅读全文
posted @ 2021-07-28 17:14
陌路y
摘要：模块化编程 在 JavaScript 引入模块化概念之前，当开发人员想要将代码封装时，需要创建多个文件并将这些文件链接为单独的脚本。作者为了说明这一点，创建了一个示例：index.html 文件和两个 JavaScript 文件，functions.js 和script.js。 index.html
阅读全文
posted @ 2021-07-28 17:11
陌路y
摘要：初识运动 1.停不下来 给定时器添加timer 来判断是否需要停止 2.到目的地，还能点击移动，把移动的代码放入else中 3.重复点击按钮会加速运动 是因为点一次就会启动一次定时器，多次就会启动多次 保证只有一个定时器在启动，启动一次就关闭上一次启动定时器 运动框架: ? 1 启动就关闭定时器?
阅读全文
posted @ 2021-07-28 17:10
陌路y
摘要：babel 本质上是个编译器，所以它所做的基本上就是编译器要做的事，为了避免对编译器的某些东西讲的太细，我们重点只要知道 babel 的工作流程就行了。 转换成AST 第一步可以说是是编译器的基本功能，通过解析器将原始代码转换成抽象语法树（AST），顾名思义就是描述语法的数据结构，一般在这一步编译器
阅读全文
posted @ 2021-07-28 17:09
陌路y
摘要：js 是种弱类型语言，对变量的类型没有限制。例如，如果我们使用字符串类型创建了一个变量，后面又可以为同一变量分配一个数字： let message = 'Hello'; // 分配一个字符串 message = 14; // 分配一个数字 这种动态性为我们提供了灵活性并简化了变量声明。 不好方面，我
阅读全文
posted @ 2021-07-28 17:01
陌路y
摘要：什么是 GPU.js？ GPU.js 是一个针对 Web 和 Node.js 构建的 JavaScript 加速库，用于在图形处理单元（GPGPU）上进行通用编程，它使你可以将复杂且耗时的计算移交给 GPU 而不是 CPU，以实现更快的计算和操作。还有一个备用选项：在系统上没有 GPU 的情况下，这
阅读全文
posted @ 2021-07-28 17:00
陌路y
摘要：js字符串转换数字方方式主要有三类：转换函数、强制类型转换、弱类型隐式类型转换，利用这三类转换的方式可以有5种转换的方法。 parseInt() parseInt()和Number.parseInt()是最常用的转换字符串为整数数值的方法，其中Number.parseInt()是ES6之后为了减少全
阅读全文
posted @ 2021-07-28 16:59
陌路y
摘要：使用css让元素不可见的方法有很多种，裁剪、定位到屏幕外边、透明度变换等都是可以的。但是最常用两种方式就是设置元素样式为display: none或者visibility: hidden。很多公司的面试官也常常会问面试者这两者之间的区别。 display与元素的隐藏如果给一个元素设置了display
阅读全文
posted @ 2021-07-27 15:45
陌路y
摘要：完整css代码如下 filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(10
阅读全文
posted @ 2021-07-27 15:44
陌路y
摘要：一、js设置样式的方法 1. 直接设置style的属性 某些情况用这个设置 !important值无效 element.style.height = '50px'; 2. 直接设置属性（只能用于某些属性，相关样式会自动识别） element.setAttribute('height',50); el
阅读全文
posted @ 2021-07-27 15:43
陌路y
摘要：preload 可以指明哪些资源在页面加载的生命周期的早期阶段就开始获取，在浏览器的主渲染机制介入前就进行预加载。这一机制使得资源可以更早的得到加载并可用，且更不易阻塞页面的初步渲染，进而提升性能。 preload 提供的好处主要是： 将加载和执行分离，可不阻塞渲染和 document 的 onlo
阅读全文
posted @ 2021-07-27 15:42
陌路y
摘要：1.如何将背景图像完美地适合视口 body { background-image: url('https://images.unsplash.com/photo-1573480813647-552e9b7b5394?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&a
阅读全文
posted @ 2021-07-27 15:40
陌路y
摘要：到底什么是Web开发项目管理? 如今，随着各类Web开发项目变得越来越复杂，它们经常被要求包括可以在不同的平台上运行的跨平台应用程序。同时，这些应用程序也连接着各种数据源，以提取相关的信息，进而予以后期处理。 业界通常认为：大约有56%的项目可以通过适当的人才和出色的管理实践，以轻松地获得成功。因此
阅读全文
posted @ 2021-07-27 15:39
陌路y
摘要：1响应式开发原理 1.1 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。 设备的划分情况： 小于768的为超小屏幕（手机） 768~992之间的为小屏设备（平板） 992~1200的中等屏幕（桌面显示器） 大于1200的宽屏设备（大桌面显示器） 1.
阅读全文
posted @ 2021-07-27 15:37
陌路y
摘要：开宗明义，无论是对于一篇文章、一场会议或一部专题片，还是对于一个网站来说，都是必不可少的。那么能为一个网站开宗明义的地方(标签)就是 Title(标题)和Description(描述、副标题)，而能够为Title和Description提供进一步诠释的就是网站的首页。 展示哪些信息 页面的重要性是建
阅读全文
posted @ 2021-07-27 15:21
陌路y
摘要：为什么写这个题目呢？ 因为之前写的一个 Node 程序有点小问题，使用的 axios 通过代理请求数据，代理服务器（阿布云）时不时抽风（407、413、503）。 因为第一次写的时候当做一个 DEMO 去实现的，写的挺简陋，只能说大体功能对，但是没有容错机制。 这里我们先算一笔帐啊，一次请求等于 1
阅读全文
posted @ 2021-07-27 15:20
陌路y
摘要：1.纯CSS Tooltip 许多网站还是在使用JavaScript来创建Tooltip效果，但实际上通过CSS能更简单的实现。最简单的方法是在你的html代码中添加一个带有提示文本的属性，比如。然后你就可以在你的CSS文件中添加以下的代码通过attr()函数来显示提示文字： .tooltip::a
阅读全文
posted @ 2021-07-27 15:19
陌路y
摘要：1px 边框问题的由来 苹果 iPhone4 首次提出了 Retina Display（视网膜屏幕）的概念，在 iPhone4 使用的视网膜屏幕中，把 2x2 个像素当 1 个物理像素使用，即使用 2x2 个像素显示原来 1 个物理像素显示的内容，从而让 UI 显示更精致清晰，这 2x2 个像素叫做
阅读全文
posted @ 2021-07-27 15:17
陌路y
摘要：预备知识 几种常见的模式： SSR: Server-Side Rendering - rendering a client-side or universal app to html on the server. CSR: Client-Side Rendering - rendering an a
阅读全文
posted @ 2021-07-27 15:16
陌路y
摘要：方法一 html { -webkit-filter: grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(graysale=1);} <!-- 可以是整个网站变成灰色的 --> 方法二 html { filter:p
阅读全文
posted @ 2021-07-27 15:14
陌路y
摘要：前言 XSS大部分前端coder都不会陌生，全称：跨站脚本漏洞（Cross Site Scripting，简写作XSS）是Web应用程序在将数据输出或者展示到网页的时候存在问题，导致攻击者可以将对网站的正常功能造成影响甚至窃取或篡改用户个人信息，其诱发的主要原因是没有针对用户输入来源的数据以及不可信
阅读全文
posted @ 2021-07-27 15:12
陌路y
摘要：在付出了许多头发的代价之后，终于完成了图片排列，并封装成组件，最终效果如下 一、设计思路 为了使结构清晰，我将图片列表处理成了二维数组，第一维为行，第二维为列 render() { const { className } = this.props; // imgs 为处理后的图片数据，二维数组 co
阅读全文
posted @ 2021-07-27 15:11
陌路y
摘要：手写Promise实现过程 1、实现Promise的核心功能 2、判断下当执行器里面时异步代码时的回调函数调用情况 3、then方法多次调用的情况 4、then方法的链式调用，以及如何把then方法的返回值传递到下一个then方法中,再判断返回值是普通值还是peomise对象进而进一步处理 5、判断
阅读全文
posted @ 2021-07-14 20:51
陌路y
摘要：前言 在浏览一些图片网站的时候，经常会看到很多的漂亮的星空图，比如，下面的图片。其实这种星星图片的效果，也可以通过html+css样式和js的方式来实现。今天教大家如何实现星星图的效果。 实现的目标 每次刷新产生随机的星星个数。显示画布上。 http://www.ssnd.com.cn 化妆品OEM
阅读全文
posted @ 2021-07-14 20:49
陌路y
摘要：一、构造函数 构造函数模式的目的就是为了创建一个自定义类，并且创建这个类的实例。构造函数模式中拥有了类和实例的概念，并且实例和实例之间是相互独立的，即实例识别。 构造函数就是一个普通的函数，创建方式和普通函数没有区别，不同的是构造函数习惯上首字母大写。另外就是调用方式的不同，普通函数是直接调用，而构
阅读全文
posted @ 2021-07-14 20:48
陌路y
摘要：关于nvm 我们可在同时进行多个项目时，可能会出现不同项目所使用的node版本是不一样的情况，或者需要使用其他版本node进行测试。在面临这种情况时，我们就可以使用nvm解决管理多个node版本的问题，它可以方便的在同一台设备上进行多个node版本之间切换，注意：如果您之前单独安装了node，建议先
阅读全文
posted @ 2021-07-14 20:47
陌路y
摘要：开始引入类型 花了 10 个小时使用 console.log 排查问题后，你终于修复了 Cannot read property 'x' of undefined 问题，出现这个问题的原因是调用了可能为 undefined 的某个方法，给了你一个「惊喜」！你暗暗发誓，一定要把整个项目迁移到 Type
阅读全文
posted @ 2021-07-14 20:46
陌路y
摘要：由于字符串、对象和数组没有固定大小，所有当他们的大小已知时，才能对他们进行动态的存储分配。JavaScript程序每次创建字符串、数组或对象时，解释器都必须分配内存来存储那个实体。只要像这样动态地分配了内存，最终都要释放这些内存以便他们能够被再用，否则，JavaScript的解释器将会消耗完系统中所
阅读全文
posted @ 2021-07-14 20:44
陌路y
摘要：打字机效果的 N 种实现 实现一：setTimeout() setTimeout版本的实现很简单，只需把要展示的文本进行切割，使用定时器不断向DOM元素里追加文字即可，同时，使用::after伪元素在DOM元素后面产生光标闪烁的效果。代码和效果图如下： <!-- 样式 --> <style type
阅读全文
posted @ 2021-07-14 20:43
陌路y
摘要：1.出现问题的场景 首先，我们发现在ie浏览器与其他的主流浏览器中，由于二进制下浮点数的存储问题，toFixed()的行为是不一样的，也说明了各浏览器厂家的做法不一致。 在ie11中： 0.015.toFixed(2)// 打印结果："0.02" 在chrome中： 0.015.toFixed(2)
阅读全文
posted @ 2021-07-14 20:41
陌路y
摘要：对象的创建模式 Object构造函数模式 var obj = {}; obj.name = ‘Tom‘ obj.setName = function(name){this.name=name} 对象字面量模式 var obj = { name : ‘Tom‘, setName : function(
阅读全文
posted @ 2021-07-14 20:38
陌路y
摘要：1. 数值分割符 _ ES2021 引入了数值分割符 _，在数值组之间提供分隔，使一个长数值读起来更容易。Chrome 已经提供了对数值分割符的支持，可以在浏览器里试起来。 let number = 100_0000_0000_0000 // 0太多了不用数值分割符眼睛看花了 console.log
阅读全文
posted @ 2021-07-14 20:36
陌路y
摘要：创建画布 <canvas> 是一个双标签，我们可以通过标签中的 width 和 height 属性来定义画布的大小，这样就会在页面中创建一个隐藏的画布，如果要实际看到这个画布，可任意通过 style 属性为画布添加边框。 示例： 例如定义一个宽高都为 200px ，边框为 2px、实线、黑色的画布：
阅读全文
posted @ 2021-07-12 23:33
陌路y
摘要：通过查询各种资料，找到了一种解决方法（肯定还有其他方式……），就是：首先获取已经选择的选项下标，下标通常是从0开始，这里就不多赘述了，学过变成的小伙伴肯定都知道，获取下标后还没有完成，我们需要根据下标获取该下标对应选项中的value值，正如以下代码所示： <!DOCTYPE html><html>
阅读全文
posted @ 2021-07-12 23:31
陌路y
摘要：网站设计与架设基本面 在基本面中，将讨论网站架设目旳、目标以及受众等三个相互呼应的思考要点，并透过小黑的故事作为案例说明。 要点一：网站目的对于网站设计与架设而言，应该要厘清主要目的及次要目的，而要厘清目的，就需要先厘清网站在整个商业模式中的定位。一般来说，网站是企业在数位世界的名片，也是与目标受众
阅读全文
posted @ 2021-07-12 23:29
陌路y
摘要：一个元素的尺寸和位置经常受其包含块(containing block)的影响。大多数情况下，包含块就是这个元素最近的祖先块元素的内容区，但也不是总是这样。在本文中，我们来过一遍确定包含块的所有因素。 当一个客户端代理（比如说浏览器）展示一个文档的时候，对于每一个元素，它都产生了一个盒子。每一个盒子都
阅读全文
posted @ 2021-07-12 23:27
陌路y
摘要：最近因为写一个js函数，需要用到$(window).height(); 由于手写demo的时候，过于自信，其实对前端方面的认识也不够体系，用文本文件直接敲出来的html代码，第一行没有加上<!DOCTYPE html> 导致了$(window).height();的结果直接是整个document的高
阅读全文
posted @ 2021-07-12 23:26
陌路y
摘要：什么是Page Speed Page Speed是将内容完全加载到网页上所花费的时间。 对于任何给定的用户来说，页面缓慢的原因可能有很多，你的用户可能正在火车上，通过信号弱的隧道，或者他们的互联网速度很慢。 通过遵循最佳实践，我们至少可以通过确保我们已经做了最好的工作来缓解问题。 现在你知道它是什么
阅读全文
posted @ 2021-07-12 23:25
陌路y
摘要：一、UI实现 <div className={less.detection}> <input className={less.input} placeholder="请输入图片URL" onChange={(e) => this.inputOnChange(e)} /> <button type="
阅读全文
posted @ 2021-07-12 23:23
陌路y
摘要：一、SQL注入 所谓SQL注入，就是通过把SQL命令插入到Web表单提交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的SQL命令。具体来说，它是利用现有应用程序，将（恶意）的SQL命令注入到后台数据库引擎执行的能力，它可以通过在Web表单中输入（恶意）SQL语句得到一个存在安全漏洞的
阅读全文
posted @ 2021-07-12 23:21
陌路y
摘要：第一条：打字越少越好 如果我们键入的东西越少，那么就有越多的时间去思考代码逻辑等问题。如下所示，「Good」表示遵循该规则的示例，Bad 表示没遵循该规则的示例。 第二条：变量/函数混合命名风格 我们需要混合命名方法与变量，这样才能体现命名的多样性。 第三条：不要写注释 反正代码都看得懂，为什么要写
阅读全文
posted @ 2021-07-12 23:20
陌路y
摘要：对具有多个返回值的函数使用数组解构 假设我们有一个返回多个值的函数。一种可能的实现是使用数组解构，如下所示： const func = () => { const a = 1; const b = 2; const c = 3; const d = 4; return [a,b,c,d]; } co
阅读全文
posted @ 2021-07-12 23:18
陌路y
摘要：这是我最近在 CodePen 上制作的 WebGL 演示案例。它可以捕获网络摄像头的数据（或在无法访问网络摄像头时，从 placekitten 获取备用图像），并将其实时转换为 ASCII 图像艺术。 为了获得更多的复古性，我使用了 90 年代 DOS PC 中常见的 8x8 像素光栅字体（您可能会
阅读全文
posted @ 2021-07-12 23:16
陌路y
摘要：阶段一、单机构建网站 网站的初期，我们经常会在单机上跑我们所有的程序和软件。此时我们使用一个容器，如tomcat、jetty、jboos，然后直接使用jsP/servlet技术，或者使用一些开源的框架如maven+spring+struct+hibernate、maven+spring+spring
阅读全文
posted @ 2021-07-12 23:14
陌路y
摘要：阶段一、单机构建网站 网站的初期，我们经常会在单机上跑我们所有的程序和软件。此时我们使用一个容器，如tomcat、jetty、jboos，然后直接使用jsP/servlet技术，或者使用一些开源的框架如maven+spring+struct+hibernate、maven+spring+spring
阅读全文
posted @ 2021-07-12 20:45
陌路y
摘要：1. 转义字符的写法。 在html标签中使用。 可以写多个，每有一个则会渲染出一个空格，不会像按多个空格键一样，最终只显示一个。 <div>1 2</div> // 1 2<div>1 2</div> // 1 2 注意：&和结尾的;都不能少 2.  ASCII编码的写法。 在h
阅读全文
posted @ 2021-07-12 20:43
陌路y
摘要：黑夜模式的实现方式 目前很多app，网页都支持黑夜模式，让网站看上去比较暗，亮度较低，这样对视力有一定的保护，更方便晚上阅读使用。这里就简单说下本网站的实现方式：网页右侧添加切换按钮，每次切换后都会存储cookie（需要注意切换时页面的闪烁），这样页面刷新，或者用户下次进来都会显示对应的模式。目前没
阅读全文
posted @ 2021-07-12 20:42
陌路y
摘要：基本概念 Context是 react中为了避免在不同层级组件中逐层传递props的产物，在没有Context的时候父组件向子组件传递props属性只能在组件树上自上而下进行传递，但是有些属性并不是组件树的每层节点都有相同的需求，这样我们再这样逐层传递props就显得代码很繁琐笨重。 使用React
阅读全文
posted @ 2021-07-07 19:08
陌路y
摘要：首先本人通过一个案例来展示jQuery的链式编程风格。先写一个页面，展示一个列表，代码如下： <body> <div> <ul class="menu"> <li class="level1"> <a href="#">水果</a> <ul class="level2"> <li><a href="
阅读全文
posted @ 2021-07-07 19:07
陌路y
摘要：Promise API改变了JavaScript的游戏。我们从滥用settimeout和解决同步操作到尽一切可能利用这个新的异步API。让我们来看看一些令人敬畏的Promise API技巧! 取消获取请求 我们立即抱怨的一个问题是无法取消承诺。一个简单的promiseInstance.cancel(
阅读全文
posted @ 2021-07-07 19:05
陌路y
摘要：let/const ES6最基本的功能：let和const。 let与var类似，但使用let声明的变量的作用域是在声明它们的块中。（Block指条件块，for循环块等） 例如，在条件块中使用let将在块内作用域变量，在块外不可用。 if (true) { let foo = "word"; } c
阅读全文
posted @ 2021-07-07 19:04
陌路y
摘要：1：变量与属性 以下代码输出什么： const object = { message: 'Hello, World!', getMessage() { const message = 'Hello, Earth!'; return this.message; }};console.log(objec
阅读全文
posted @ 2021-07-07 19:03
陌路y
摘要：前言 二叉树(Binary Tree)是一种树形结构，它的特点是每个节点最多只有两个分支节点，一棵二叉树通常由根节点、分支节点、叶子节点组成，如下图所示。每个分支节点也常常被称作为一棵子树，而二叉堆是一种特殊的树，它属于完全二叉树。 二叉树与二叉堆的关系 在日常工作中会遇到很多数组的操作，比如排序等
阅读全文
posted @ 2021-07-07 19:02
陌路y
摘要：1. 图形平移 首先我们来看如何实现图形的平移操作。 平移的操作就是将图形的原始坐标加上对应的移动距离。首先来看下平移的实现 const vertexShaderSource = "" + "attribute vec4 apos;" + // 定义一个坐标 "uniform float x;" +
阅读全文
posted @ 2021-07-07 19:01
陌路y
摘要：防抖和节流函数是我们经常用到的函数，在实际的开发过程中，如 scroll、resize、click、键盘等事件很容易被多次触发，频繁的触发回调会导致页面卡顿和抖动，为了避免这种情况，需要使用节流和防抖的方法来减少无用的操作和网络请求，也是面试中经常遇到的问题，需要牢牢掌握。 防抖和节流的本质 都是闭
阅读全文
posted @ 2021-07-07 18:59
陌路y
摘要：简单无缝滚动轮播图存在很多漏洞，就是后期增加图片时会很不方便，需要改动的地方也很多，耦合性也很强，只适用于一部分程序，所以我们可以通过改动图片结构和计算折算点的方式，升级代码。 原简单的滚动轮播代码 <html> <head> <meta charset="UTF-8"> <meta http-eq
阅读全文
posted @ 2021-07-07 18:58
陌路y
摘要：1. 要调试什么 我们主要要知道调试什么，最终回去到什么样子的结果： 调试接口，传入接口地址，即可获取对应的结果；并且可以同时调试多个设备；调试 jsapi，输入对应的方法，则即可在新闻客户端中展示出效果。 在调试接口方面，其实我们有一种方法可以方便地进行调试，但有两个限制条件：Android系统和
阅读全文
posted @ 2021-07-07 18:57
陌路y
摘要：计算机科学中最常用和讨论最多的数据结构之一是二叉搜索树。这通常是引入的第一个具有非线性插入算法的数据结构。二叉搜索树类似于双链表，每个节点包含一些数据，以及两个指向其他节点的指针；它们在这些节点彼此相关联的方式上有所不同。二叉搜索树节点的指针通常被称为“左”和“右”，用来指示与当前值相关的子树。这种
阅读全文
posted @ 2021-07-07 18:56
陌路y
摘要：背景 Nodejs 事件循环是支撑Nodejs 非阻塞IO以及异步执行的基础，因此理解事件循环的执行也就可以写出正确的代码或者说我们就能更快的找出为什么不按我写的代码顺序执行的原因所在。 说起Nodejs事件循环，不得不提一个图，介绍的是Nodejs的事件循环示意图，其中将事件循环分为：timers
阅读全文
posted @ 2021-07-07 18:54
陌路y
摘要：如何在JavaScript中使用toString方法 要使用该toString()方法，您只需要在一个number值上调用该方法。下面的示例演示如何将数字值24转换为其字符串表示形式。请注意，str变量的值如何用双引号引起来： var num = 24; var str = num.toString
阅读全文
posted @ 2021-07-07 18:53
陌路y
摘要：1. 类（class） ES6引入了Class（类）这个概念,作为对象的模板,通过class关键字,可以定义类。基本上,ES6的class可以看作只是一个语法糖,它的绝大部分功能,ES5都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。上面的代码用ES6的“类”
阅读全文
posted @ 2021-07-07 18:51
陌路y
摘要：箭头函数的注意事项 （1）函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。（2）不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。（3）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。（4）不可以使用yiel
阅读全文
posted @ 2021-07-07 18:49
陌路y
摘要：ES8新特性（2017） 与 ES6 相比，ES8 是 JavaScript 的一个小版本，但它仍然引入了非常有用的功能： async/awaitObject.values()Object.entries()String padding: padStart()和padEnd()，填充字符串达到当前长
阅读全文
posted @ 2021-07-07 18:12
陌路y
摘要：ES9新特性（2018） 异步迭代 Promise.finally() Rest/Spread 属性 正则表达式命名捕获组（Regular Expression Named Capture Groups） 正则表达式反向断言（lookbehind） 正则表达式dotAll模式 正则表达式 Unico
阅读全文
posted @ 2021-07-07 18:11
陌路y
摘要：假设你在一段陌生的代码中看到这样一个函数： function toLocalDate(date) { return date.replace(/(\d{2})-(\d{2})-(\d{4})/, "$2-$1-$3") } 单看这个函数你能知道它是想把“日-月-年”替换成“月-日-年”，还是反过来？
阅读全文
posted @ 2021-07-07 18:09
陌路y
摘要：ES10新特性（2019） 行分隔符（U + 2028）和段分隔符（U + 2029）符号现在允许在字符串文字中，与jsON匹配更加友好的 JSON.stringify新增了Array的flat()方法和flatMap()方法新增了String的trimStart()方法和trimEnd()方法Ob
阅读全文
posted @ 2021-07-07 18:08
陌路y
摘要：1. replaceAll 返回一个全新的字符串，所有符合匹配规则的字符都将被替换掉 const str = 'hello world';str.replaceAll('l', ''); // "heo word" 2. Promise.any Promise.any() 接收一个Promise可迭
阅读全文
posted @ 2021-07-07 18:06
陌路y
摘要：引言 解构赋值是ES6中引入的一种能快速方便的进行变量赋值的方法，其主要也就是分为解构和赋值两部分内容。解构者，也就是匹配结构，然后分解结构进行赋值。 数组的解构赋值 使用 const arr = [1,3,5] const [a,b,c] = arr; console.log(a) // 1 co
阅读全文
posted @ 2021-07-07 18:04
陌路y
摘要：1.理解基本类型和对象 JavaScript提供了2种数据类型：基本类型和对象。 基本类型有 number, boolean, string, symbol,null,undefined。 // 基本类型 const number = 10; const bool = false; const st
阅读全文
posted @ 2021-07-07 18:03
陌路y
摘要：隐式丢失 由于模拟实现中有运用到隐式丢失, 所以在这还是先介绍一下。 隐式丢失是一种常见的this绑定问题, 是指: 被隐式绑定的函数会丢失掉绑定的对象, 而最终应用到默认绑定。说人话就是: 本来属于隐式绑定(obj.xxx this指向obj)的情况最终却应用默认绑定(this指向全局对象)。 常
阅读全文
posted @ 2021-07-07 18:01
陌路y
摘要：接口 vs 类型别名 相同点 1. 都可以用来描述对象或函数 interface Point { x: number y: number } interface SetPoint { (x: number, y: number): void; } type Point = { x: number;
阅读全文
posted @ 2021-07-07 17:58
陌路y
摘要：1.event.stopPropagation()方法 event.stopPropagation() 方法阻止事件冒泡到父元素，阻止任何父事件处理程序被执行。不让事件向documen上蔓延，但是默认事件任然会执行，当你掉用这个方法的时候，如果点击一个连接，这个连接仍然会被打开。 提示：请使用 ev
阅读全文
posted @ 2021-07-07 17:54
陌路y
摘要：一、常规的js页面跳转代码 1、在原来的窗体中直接跳转用 <script type="text/JavaScript"> window.location.href="你所要跳转的页面";</script> 2、在新窗体中打开页面用： <script type="text/JavaScript"> w
阅读全文
posted @ 2021-07-07 17:52
陌路y
摘要：一、传统的图片异常处理 <img> 如果因为网络或者跨域限制等原因无法正常加载，在默认情况下会显示浏览器默认的“裂开”的图片效果，如果设置了 alt 属性值，则 alt 属性对应的内容也会一并显示。例如： <img src="//www.zhangxinxu.com/zxx.ico" alt="鑫空
阅读全文
posted @ 2021-07-05 19:36
陌路y
摘要：在web网站开发中，有时候我们给html元素设置的margin-top或margin-bottom属性，但是无效，并没有取到任何作用,这是什么原因呢?常出现两种情况: 一、兄弟元素之间margin-top失效 先看下面代码： <div> <div class="box1"> float: left
阅读全文
posted @ 2021-07-05 19:35
陌路y
摘要：SQL 注入 在众多安全性漏洞中，SQL 注入绝对是最严重但也是最好处理的一种安全漏洞。在数据库执行查询句时，如果将恶意用户给出的参数直接拼接在查询句上，就有可能发生。 举个例子，假设原本某网站登录验证的查询句长这样： strSQL = "SELECT * FROM users WHERE (nam
阅读全文
posted @ 2021-07-05 19:34
陌路y
摘要：典型的布局示例 如上图所示的布局，方格中间有一定的间隙，间隙是固定的。应该如何布局会更加完美呢，比如要保证在布局完成的情况下，可以快速的添加一个元素依然保持这样的布局。以及当出现第二行的时候，这样的布局依然能够不受影响。又不用修改太多的内容。 设置宽为100%和块元素的默认宽度 现在在这里说一个问题
阅读全文
posted @ 2021-07-05 19:33
陌路y
摘要：这个功能还比较常见，用来获取文本的长宽（避免了计算不准的问题），主要用于实现 textarea 自动变长。 可以看到在我们使用 textarea 的时候，有时候需要感知内容的高度，然后动态撑开。（elementUI 的 textarea 就提供了 autosize 的功能。） 那我们也想实现这样的功
阅读全文
posted @ 2021-07-05 19:31
陌路y
摘要：我们将使用CSS3动画过渡来创建简单但引人入胜的链接悬停效果，将鼠标悬停在链接上时，会弹出一个小弹出框。我们还将看一下CSS3 Cubic-Bezier（贝塞尔）曲线，它是CSS过渡，为弹出框提供了更加流畅的运动，而不是僵化的机械运动。 这是我们最后的效果： 让我们开始吧！ html部分 这是我们链
阅读全文
posted @ 2021-07-05 19:29
陌路y
摘要：今天介绍一个通过svg来实现移动端1px效果的小技巧 svg的描边方式 通常我们在使用一些设计软件时，描边会有三种选择，分别是内描边、居中描边和外描边，比如 photoshop 那么，svg 中的描边是哪种方式呢？ 答案是居中描边，并且无法更改，如下 <svg height="100px" view
阅读全文
posted @ 2021-07-05 19:27
陌路y
摘要：轮播图是前端最基本、最常见的功能，不论web端还是移动端，大平台还是小网站，大多在首页都会放一个轮播图效果。本教程讲解怎么实现一个简单的轮播图效果。学习本教程之前，读者需要具备html和css技能，同时需要有简单的JavaScript基础。 本实例效果如下图所示： 根据实例效果，需要的元素有图片、中
阅读全文
posted @ 2021-07-05 19:26
陌路y
浙公网安备 33010602011771号