07 2021 档案
摘要：1. 使用元素位置判断元素是否在当前视区 这种方法实现起来比较简单， 我们一步一步来。 首先：编写一个 util 函数 isVisible，它将仅接收一个参数，即 element。 export const isVisible = (el) => { }; 使用 getBoundingClientR
阅读全文
摘要：1.关于JavaScript JavaScript是一门单线程语言，在最新的html5中提出了Web-Worker，但javascript是单线程这一核心仍未改变。所以一切javascript版的"多线程"都是用单线程模拟出来的，一切javascript多线程都是纸老虎！ 2.javascript事
阅读全文
摘要：1.返回值（最常用） //1.返回值 最常用的 function fn(){ var name="hello"; return function(){ return name; } } var fnc = fn(); console.log(fnc())//hello 这个很好理解就是以闭包的形式将
阅读全文
摘要：JavaScript是一门动态语言，所谓的动态语言可以暂时理解为在语言中的一切内容都是不确定的。比如一个变量，这一时刻是个整型，下一时刻可能会变成字符串了。虽然变量的数据类型是不确定的，但是各种运算符对数据类型是有要求的。如果运算符发现，运算子的类型与预期不符，就会自动转换类型。 本文主要介绍数据类
阅读全文
摘要：1. 获取一个随机布尔值 (true/false) 这个函数使用 Math.random() 方法返回一个布尔值（true 或 false）。Math.random 将在 0 和 1 之间创建一个随机数，之后我们检查它是否高于或低于 0.5。这意味着得到真或假的几率是 50%/50%。 const
阅读全文
摘要：在开发网页的时候少不了图片，展示图片时自然会遇到缩放问题。一般情况下只要我们的图片宽高比例差不多时，缩放是没有问题的，展示不太影响美观。但是有一些网页对这个要求比较高，要求图片不能变形，缩放一定按比较展示，还不能影响网页整个布局。网上给到一些 css方法都试过，均不能实现目的，所以特地使用js来实现
阅读全文
摘要：一、前言 在开发过程中，有时会遇到需要控制任务并发执行数量的需求。 例如一个爬虫程序，可以通过限制其并发任务数量来降低请求频率，从而避免由于请求过于频繁被封禁问题的发生。 接下来，本文介绍如何实现一个并发控制器。 二、示例 const task = timeout => new Promise((r
阅读全文
摘要：一、什么是 aja? 是一种异步请求数据的web开发技术，它可以在不提交整个页面的情况下，向服务器发送请求，实现页面的局部刷新 目的：可以带来更好的用户体验，按需获取数据，节约带宽资源 二、ajax的原理? 首先举个例子：假如领导想让小王汇报一下工作，就委托秘书去叫小王，自己接着做其他事情，直到秘书
阅读全文
摘要：方括号语法的局限性 通常按索引访问数组元素的方法是使用方括号语法 array[index]： const fruits = ['orange', 'apple', 'banana', 'grape']; const item = fruits[1]; item; // => 'apple' 表达式
阅读全文
摘要：装饰器存在的意义 会偷懒的程序员，才是优秀的程序员。 举个例子：我拿着员工卡进入公司总部大楼。因为每个员工所属的部门、级别不同，并不能进入大楼的任何房间。每个房间都有一扇门；那么，公司需要安排每个办公室里至少一个人关于验证来访者的工作： 先登记来访者 验证是否有权限进入，如果没有则要求其离开 记录其
阅读全文
摘要：canvas 和 webGL 这两项图形技术结合 css3 可以说能完成绝大部分的动画和需求。但 canvas 和 webGL 毕竟是偏向底层的绘制引擎，某些场景使用起来还是过于繁琐的，不分场合一律使用锤子解决的行为不值得提倡。svg 在解决排版，图标，相关动画还是非常高效的，而且 svg 还是矢量
阅读全文
摘要：新手Web设计师和开发人员往往以有缺陷的创作而告终，却不知道真正的故障出自于哪里。虽说有这么多的设计书籍，但即使都读了，也不会对最后的设计有任何意义。在第一个原型中创建一个无缝的设计真的是一个挑战——事实上，只是做好单个部分就是一个难点。 有时候设计是如此糟糕，以致于完全不值得挽救。因为有这么多的毛
阅读全文
摘要：深色模式时代已经来临 现在有一种新的趋势 - 把东西变黑。过去，你必须决定你的网站的风格(亮或暗)或者必须保存用户自己定义的主题风格。 Safari 12.1 ( macOS 10.14.4自带) 增加了对检测系统颜色主题的支持. 它可以传递此信息，并且可以呈现网站的特定版本。当你的系统使用深色模式
阅读全文
摘要：设置项目 首先，创建一个新的 index.html 文件，并编写如下代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-wid
阅读全文
摘要：Input 标签来获取图片 通过设置 input 标签的 type 属性为 file，来让用户可以选择文件，设置 accept 限制选择的文件类型，绑定 onchange 事件，来获取确认选择后的文件 <input type="file" accept="image/*" onchange="loa
阅读全文
摘要：从事该行业足够长的时间的人们经常会忘记这些指标对于新人来说听起来很荒诞，所以您必须原谅他们。 要学习网络分析并了解它如何使您受益，最好先了解周围常见的术语，这是一个好主意。 在本文中，我们将介绍基本的网络分析指标以及一些有关如何利用这些指标来推动洞察力的花絮。 1. Unique Visitors
阅读全文
摘要：一、Chrome浏览器双指触摸的模拟 结果是模拟不了。 页面整体缩放行为是可以通过按住Shift键+页面左键模拟的，但是，实际上，还是一个触摸点，因此无法模拟双指缩放行为。 除非是有触摸板，或者屏幕就是触摸屏。 否则，只能连手机进行调试了。 二、触摸屏与event.touches 在触屏设备下，要判
阅读全文
摘要：css设置边框可以用border简写属性，它可以在一个声明设置所有的边框属性，按照border-width、border-style、border-color顺序设置；也可以单独使用这几个属性来设置边框样式。 边框属性介绍： border属性： 一个简写属性，在一个声明中所有的边框属性。 可以设置的
阅读全文
摘要：如何动态修改css样式 一、使用obj.className来修改样式表的类名 function changeStyle1() { var obj = document.getElementById("btnB"); obj.style.backgroundColor= "black"; } 缺点：会
阅读全文
摘要：1、概念 什么是单页应用呢？单页应用的全称是 single-page application，简称 SPA，它是一种网站应用的模型，它可以动态重写当前的页面来与用户交互，而不需要重新加载整个页面。单页应用的流畅性让 Web 应用更像桌面端或 Native 应用了。相对于传统的 Web 应用，单页应用
阅读全文
摘要：在过去的几年中，web服务或API的普及和使用有所增加。 web服务或API是程序或软件组件的集合，可以帮助应用程序进行交互或通过形成其他应用程序或服务器之间的连接执行一些进程/事务处理。基本上有两种类型的web服务——基于互联网协议，REST和SOAP推动数据和信息的通讯。 由于这些web服务暴露
阅读全文
摘要：今天我们来谈谈Web和前端开发过程中需要学习什么？前端开发需要使用什么开发工具？也简单介绍前端开发前景和薪水。 前端工程师的主要职责： 前端工程师在不同的公司有不同的功能，但性质相似。 1、网站设计与网页界面开发 2、做网站界面开发 3、Web界面开发，前端数据绑定，前台逻辑 4、设计、开发、数据
阅读全文
摘要：1.背景与介绍： 平时开发的项目中可能会出现下面这些情况： 由于用户误操作，多次点击表单提交按钮。 由于网速等原因造成页面卡顿，用户重复刷新提交页面。 黑客或恶意用户使用postman等工具重复恶意提交表单（攻击网站）。 这些情况都会导致表单重复提交，造成数据重复，增加服务器负载，严重甚至会造成服务
阅读全文
摘要：在web前端开发过程中，UI设计师经常会设计一些带渐变文字的设计图，在以前我们只能用png的图片来代替文字，今天可以实现使用纯css实现渐变文字了。下面就介绍3中实现方式供大家参考！ 基础样式： .gradient-text{ text-align: left; text-indent:30px;
阅读全文
摘要：01、谨慎使用外边距属性 与其它的属性不同，垂直方向上的外边距相遇时将会发生折叠。这意味着如果一个元素的下边距遇到了另一个元素的上边距，那么二者中较大的一个将被留下。下面是一个简单的例子。 <div class="square red"></div> <div class="square blue"
阅读全文
摘要：声明常量 好吧~ 大叔不吐槽了，还是说正事儿吧。其实，在 ES5 里面也不是不能声明常量，就是有那么一捏捏的别扭。你知道 Object 有个叫做 defineProperty() 的方法吧？它是用来给某个对象定义属性的。在 ES5 里面就可以通过这个方法间接地来声明常量。 比方说，你现在想在全局作用
阅读全文
摘要：1.实验 我们来做个实验。哪个执行得更快:立即解决的 Promise 还是立即setTimeout(也就是0毫秒的setTimeout)? Promise.resolve(1).then(function resolve() { console.log('Resolved!'); }); setTi
阅读全文
摘要：slice 工作原理 在深入研究一些更高级的用法之前，让我们看一下 slice 方法的基础知识。如MDN文档， slice 是数组上的一个方法，它最多有两个参数: arr.slice([begin[, end]]) begin 从该索引处开始提取原数组中的元素,如果该参数为负数，则表示从原数组中的倒
阅读全文
摘要：先来一道常见的面试题： console.log('start') setTimeout(() => { console.log('setTimeout') }, 0) new Promise((resolve) => { console.log('promise') resolve() }) .th
阅读全文
摘要：本文比较并总结遍历数组的四种方式： for 循环： for (let index=0; index < someArray.length; index++) { const elem = someArray[index]; // ··· } for-in 循环： for (const key in
阅读全文
摘要：执行环境 执行环境：定义变量或函数有权访问的其他数据。 每个执行环境对应与之关联的变量对象。 变量对象：保存环境中定义的所有变量和函数。 全局执行环境：最外围的执行环境，在web浏览器中，全局执行环境为window对象。 全局变量对象：保存所有window对象下的属性和方法。 执行环境的销毁 某个执
阅读全文
摘要：JavaScript 中方法链 你一定曾经用过 jQuery 之类的库，可能看到过类似的东西。在进行级联时主要有两种方法：一种是一个接一个的执行方法，另一种是在同一行上。在纯 JavaScript 中这种做法也很普遍。你可以在数组、字符串和 promise 看到它。 在这些情况下所有的过程都是相同的
阅读全文
摘要：1. 数值分割符 _ ES2021 引入了数值分割符 _，在数值组之间提供分隔，使一个长数值读起来更容易。Chrome 已经提供了对数值分割符的支持，可以在浏览器里试起来。 let number = 100_0000_0000_0000 // 0太多了不用数值分割符眼睛看花了 console.log
阅读全文
摘要：复制数组 我们可以使用展开操作符复制数组，不过要注意的是这是一个浅拷贝。 const arr1 = [1,2,3]; const arr2 = [...arr1]; console.log(arr2); // [ 1, 2, 3 ] 这样我们就可以复制一个基本的数组，注意，它不适用于多级数组或带有日
阅读全文
摘要：删除数组指定的某个元素 首先可以给js的数组对象定义一个函数，用于查找指定的元素在数组中的位置，即索引，代码为： Array.prototype.indexOf = function(val) { for (var i = 0; i < this.length; i++) { if (this[i]
阅读全文
摘要：概述 jsON(JavaScript Object Notation) 是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，是理想的数据交换格式。同时，jsON是 JavaScript 原生格式，这意味着在 JavaScript 中处理 JSON数据不须要任何特殊的 API 或工具包。 在JS
阅读全文
摘要：一、<script> 标签特性 <script> 标签主要用于从服务器端加载一段JavaScript脚本并在当前页面中执行。因为其需要从服务器端中加载，所以会在一定程度上影响到web的性能。在性能优化中，<script>标签的优化至关重要。 ① <script>标签默认是同步加载的。当html页面在
阅读全文
摘要：拖放事件 拖放是由拖动与释放两部分组成，拖放事件也分为被拖动元素的相关事件，和容器的相关事件。 被拖动元素的相关事件如下所示： 事件描述 ondragstart 用户开始拖动元素时触发 ondrag 元素正在拖动时触发 ondragend 用户完成元素拖动后触发 容器相关事件如下所示： 事件描述 o
阅读全文
摘要：理解css-loader css-loader是我们在现代前端开发中必须掌握的一个东西，它给我们提供了css在前端开发中的一种工作模式，并且我们很多关于css的东西都基于此。 它功能主要是解释样式（css）中的import和url，并且把它们认作一个资源模块，用webpack的模块化方式requir
阅读全文
摘要：基础用法 在前端的领域中，标准的实现总是比社区的约定要慢的多，前端框架最喜欢的 $ 被 Sass 变量用掉了。而最常用的 @ 也被 Less 用掉了。官方为了让 CSS 变量也能够在 Sass 及 Less 中使用，无奈只能妥协的使用 --。 <style> /* 在 body 选择器中声明了两个变
阅读全文
摘要：1.XML介绍 XML 指可扩展标记语言（EXtensible Markup Language） XML 是一种标记语言，很类似 html XML 的设计宗旨是传输数据，而非显示数据 XML 标签没有被预定义。您需要自行定义标签。 XML 被设计为具有自我描述性。 XML 是 W3C 的推荐标准 2
阅读全文
摘要：技术至上？ 三年前我毕业进入第一家公司，个人很水的技术能力让我经常在实际的开发工作中捉襟见肘，于是就想着一定要尽快提升自己的技术水平，每天都在公司待到很晚，除了做需求就是自我学习，在这种情况下，我几乎所有能坐在电脑前的时间都用在了技术上，这就造成了一种后果，那就是我只关心技术方面的东西，其他的我一概
阅读全文
摘要：-webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果. auto: 使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。touch: 使用具有回弹效果的滚动,当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的
阅读全文
摘要：1. 使用文本压缩 使用文本压缩，可以最大程度地减少通过网络传输的字节数。有几种压缩算法。 gzip 是最受欢迎的，但 Brotli 是一种更新甚至更好的压缩算法。如果要检查服务器是否支持Brotli，则可以使用 Brotli.pro 工具。 如果你的服务器不支持Brotli，则可以按照以下简单指南
阅读全文
摘要：nginx可以使用变量简化配置与提高配置的灵活性，所有的变量值都可以通过这种方式引用： $变量名 而nginx中的变量分为两种，自定义变量与内置预定义变量 内置变量 声明 可以在sever,http,location等标签中使用set命令（非唯一）声明变量，语法如下 set $变量名 变量值 注意n
阅读全文
摘要：问：如何用 js 一次获取 html 表单的所有字段 ？ 考虑一个简单的 html 表单，用于将任务保存在待办事项列表中： <form> <label for="name">用户名</label> <input type="text" id="name" name="name" required>
阅读全文
摘要：1、元素位移translate(左边,顶边) div{ transform: translate(50px,100px); -ms-transform: translate(50px,100px); /* IE 9 */ -webkit-transform: translate(50px,100px
阅读全文
摘要：前言 近期在学习 vue 框架，在学习过程中，发现了一个和 mockjs 类似的第三方库: json-server。它不仅可以模拟出完美的接口数据，还可以修改请求的类型来修改本地的数据，是一个非常不错的库，所以分享记录一下使用心得。 快速上手 一.新建存储数据的文件 在电脑上创建一个专属于 json
阅读全文
摘要：Sass Vs Scss Sass 有两种语法。 第一个被称为 SCSS（Sassy CSS），在本参考文献中一直使用，它是 CSS 语法的扩展。这意味着每个有效的 CSS 样式表，都是具有相同含义的有效 SCSS 文件，两者完全兼容。下文描述的 Sass 功能增强了此语法。使用此语法的文件扩展名为
阅读全文
摘要：1px问题 京东商城解决方案：伪元素 + scale .div::after { content: ""; width: 200%; height: 200%; position: absolute; top: 0; left: 0; border: 1px solid #bfbfbf; borde
阅读全文
摘要：一、 不定宽高元素水平垂直居中 1、transform: translate() <div class="wrapper"> <p class="center">水平垂直居中</p> </div> .wrapper{ color: rgb(92, 99, 112); font-style: ital
阅读全文
摘要：1，获取内网ip function getIP(callback) { let recode = {}; let RTCPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitR
阅读全文
摘要：foreach 语法： [ ].forEach(function(value,index,array){ //code something}); forEach()方法对数组的每个元素执行一次提供的函数。 var array = ['a', 'b', 'c'];array.forEach(funct
阅读全文
摘要：promise的功能 构造函数的实现 首先写一段promise的代码来分析一下构造函数的实现： let pro = new Promise((resolve, reject) => { if (true) { resolve('the value') } else { reject('the rea
阅读全文
摘要：事件循环与消息队列 首先大家都知道js是一门单线程的语言，所有的任务都是在一个线程上完成的。而我们知道，有一些像I/O，网络请求等等的操作可能会特别耗时，如果程序使用"同步模式"等到任务返回再继续执行，就会使得整个任务的执行特别缓慢，运行过程大部分事件都在等待耗时操作的完成，效率特别低。 为了解决这
阅读全文
摘要：代码展示 首先构建一个用来构造LRU对象模块的文件： 'use strict'; let Lru = function(cacheSize,callbackBackingStoreLoad,elementLifeTimeMs=1000){ let me = this; let maxWait = e
阅读全文
摘要：前端的设计模式是什么 设计模式一个比较宏观的概念，通俗来讲，它是软件开发人员在软件开发过程中面临的一些具有代表性问题的解决方案。当然，在实际开发中不用设计模式同样也是可以实现需求的，只是在业务逻辑比较复杂的情况下，代码可读性及可维护性变差。所以随着业务逻辑的扩展，了解常用设计模式解决问题是非常有必要
阅读全文
摘要：1. 可选链运算符 之前当我们想要使用某个结构比较深的属性，同时又无法确定所有的父级一定存在时，我们需要进行一连串的判断，例如一个数据结构： const student = { score: { math: 98, }, }; 我们想要获取最内层的 math 属性的值时： if (student &
阅读全文
摘要：原始值 我们假设一个变量 name 具有一个与之关联的原始值（number，string，boolean，undefined 和null）。 如果我们将此变量 name 复制到另一个变量name2 ，则原始变量的任何修改都不会影响到第二个变量，因为它们是原始值。 let name="fly63";
阅读全文
摘要：exports ES6模块只支持静态导出，只可以在模块的最外层作用域使用export，不可在条件语句与函数作用域中使用。 Named exports (命名导出) 这种方式主要用于导出多个函数或者变量, 明确知道导出的变量名称。使用：只需要在变量或函数前面加 export 关键字即可。使用场景：比如
阅读全文
摘要：1.块作用域声明(Block Scoped Declarations) 自从该语言问世以来，JavaScript开发人员一直使用var来声明变量。不过，正如下面代码段所展示的那样，由关键字var所创建的变量，在其作用域上会出现问题。 var x = 10 if (true) { var x = 15
阅读全文
摘要：方式一：window.innerWidth / window.innerHeight 这种方式只支持IE9以及以上版本的浏览器 网页高度，打开F12控制台当然高度会不同 方式二：document.documentElement.clientWidth console.log(document.doc
阅读全文
摘要：1、delete delete是删除对象的属性没有任何剩菜，剩下的唯一真正的方法，但它的工作比其“替代”设置慢100倍 object[key] = undefined var myObject = { "ircEvent": "PRIVMSG", "method": "newURI", "regex
阅读全文
摘要：一、浏览器支持 表中的数字指定完全支持该属性的第一个浏览器版本。（来源于百度） 数字后面的 -webkit- 或者 -moz- 使用时需要指定前缀。 属性ChromeFirefoxSafariOperaIE linear-gradient 26.0 10.0 -webkit- 10.0 16.0 3
阅读全文
摘要：身处当前数字化社会，打造个人品牌，越发显得重要（自我推销）。对于从事技相关的人群，欲要树立并长时间保持自己的个人品牌，最便捷的方法无疑是：坚持长时间高质量输出原创文章。就择取合适的博文平台，也是项技术活儿；本文主旨，就针对这承载文字的各类平台，结合其功能特点，探讨下其优劣所在，以便可为更多朋友，就如
阅读全文
摘要：准备工作 在下载 CSS 框架之前，先用 Vue CLI 创建一个新项目： npm install vue-cli vue init webpack project-name 安装并集成 Bootstrap 4 创建并初始化新的 Vue 项目后，用 npm 下载 Bootstrap 4。由于 Boo
阅读全文
摘要：一、SQL注入漏洞 SQL注入攻击（SQL Injection），简称注入攻击、SQL注入，被广泛用于非法获取网站控制权，是发生在应用程序的数据库层上的安全漏洞。在设计程序，忽略了对输入字符串中夹带的SQL指令的检查，被数据库误认为是正常的SQL指令而运行，从而使数据库受到攻击，可能导致数据被窃取、
阅读全文
摘要：CSRF概念： CSRF跨站点请求伪造(Cross—Site Request Forgery)，跟XSS攻击一样，存在巨大的危害性，你可以这样来理解： 攻击者盗用了你的身份，以你的名义发送恶意请求，对服务器来说这个请求是完全合法的，但是却完成了攻击者所期望的一个操作，比如以你的名义发送邮件、发消息，
阅读全文
摘要：第一步：先下载pdfjs，网址：PDF下载地址，再引入到项目中，我是标签直接引用的 <script src="pdfjs/build/pdf.js"></script><script src="pdfjs/build/pdf.worker.js"></script> 第二步：html代码添加两行代码
阅读全文
摘要：Hello World 对于每一个开发者来说都不陌生，因为在我们学习任何一个语言或框架的时候，都会有一个Hello World的案例来帮助我们快速入门。 如果我们使用JavaScript来输出Hello World的话，可以这样写： alert("Hello World"); 放入html： <ht
阅读全文
摘要：css ::marker这是一种实验技术，由于该技术的规格不稳定，请查看各种浏览器的兼容性表格以供使用。另外请注意，随着规范的变化，实验技术的语法和行为在未来版本的浏览器中可能会发生变化。 ::marker元素代表一个列表项的标记框（<li>）。标记通常是一个项目符号或数字。 使用： 在css中di
阅读全文
摘要：1、wangEditor 基于JavaScript和css开发的 Web富文本编辑器， 轻量、简洁、界面美观、易用、开源免费。 官网地址 2、TinyMCE TinyMCE是一个轻量级的基于浏览器的所见即所得编辑器，由JavaScript写成。它对IE6+和Firefox1.5+都有着非常良好的支持
阅读全文
摘要：css 中实现水平垂直居中的方式很多。别看到水平垂直居中就准备右上角 x 掉，本文的重点不是罗列有多少种方式实现水平垂直居中方式，而是探讨一下常见的几种水平垂直居中的方式的利弊。 嗯哼？也就是： 那么多种水平垂直居中的方式，如果真的在业务中需要使用了，你脑海里第一时间会想到哪个？ 不同的水平垂直居中
阅读全文
摘要：1px问题产生的原因 从移动端的角度说个具体的场景，以iphone6为例。 iphone6的屏幕宽度为375px，设计师做的视觉稿一般是750px，也就是2x，这个时候设计师在视觉稿上画了1px的边框，于是你就写了“border-width:1px”，so...1px边框问题产生了。 对设计师来说它
阅读全文
摘要：一、整体实现的思想 页面中实现录音需要使用浏览器提供的MediaRecorder API,所以要实现页面录音就需要浏览器支持MediaStream Recording相关的功能，即浏览器能够获取浏览器的录音权限。 页面内容，需要一个记录录音开始和结束的按钮，以及一个用于播放录音的标签<audio>
阅读全文
