07 2021 档案
摘要：一般表单页面都需要填写手机号，校验用户输入的手机号码是否正确，就要用到正则表达式，用正则表达式来匹配手机号段，如在运营商号段内，则号码正确。因此，需要知道运营商最新的号段，如下所示： 各大运营商手机号码段（新） 中国电信号段 133、153、173、177、180、181、189、190、191、1
阅读全文
摘要：常见的错误类型 RangeError： 标记一个错误，当设置的数值超出相应的范围触发。比如，new Array(-20)。ReferenceError： 引用类型错误，当一个不存在的变量被引用时发生的错误。比如：console.log(a)。SyntaxError：语法错误。比如 if(true)
阅读全文
摘要：切入点从场景描述出发，即先定义好我们要实现的功能 执行器函数 构造函数入参 executor 自执行函数。会在在 new 的时候同步执行，传入 resolve 和 reject 状态扭转函数。自执行函数内部根据异步任务执行结果（成功或失败）调用状态扭转函数，把状态传递给后续的 then。 状态转化
阅读全文
摘要：1.三元运算符 新手 let hungry = true; let eat; if (hungry == true) { eat = 'yes'; } else { eat = 'no'; } 老手 let hungry = true; let eat = hungry == true ? 'yes
阅读全文
摘要：浮点数的存储 首先要搞清楚 JavaScript 如何存储小数。和其它语言如 Java 和 Python 不同，JavaScript 中所有数字包括整数和小数都只有一种类型 — Number。它的实现遵循 IEEE 754 标准，使用 64 位固定长度来表示，也就是标准的 double 双精度浮点数
阅读全文
摘要：JavaScript中有多种循环Array的方式，你是否常常分不清他们的细微差别，和适用场景。本文将详细梳理各间的优缺点，整理成表以便对比。 循环可访问element可访问index可迭代property支持中断支持await支持任意位置开始 for √ √ × √ √ √ for in √ × √
阅读全文
摘要：1. 转字符串 const input = 123; console.log(input + ''); // '123' console.log(String(input)); // '123' console.log(input.toString()); // '123' 2. 转数字 const
阅读全文
摘要：前言 首先，我们看一下微信开放文档中的一张图： 上面的一幅图中清楚地介绍了微信登录整个过程，下面对图上所示进行总结： 一、二维码的获得 用户打开登录网页后，登录网页后台根据微信OAuth2.0协议向微信开发平台请求授权登录，并传递事先在微信开发平台中审核通过的AppID和AppSecrect等参数;
阅读全文
摘要：本文主要讲解 JavaScript 在异步流程控制中的一些实践、容错以及复杂异步环境下我们该如何去处理。 发展历史 简要的提及一下，异步流程控制的发展历史大概是 callback hell => Promise => Generator => async/await ES6 中 Promise 是通
阅读全文
摘要：水平扩展 Node.js 应用程序 水平扩展是复制应用程序实例以管理大量传入连接。 此操作可以在单个多内核机器上执行，也可以在不同机器上执行。垂直扩展是提高单机性能，它不涉及代码方面的特定工作。在同一台机器上的多进程提高应用程序吞吐量的一种常用方法是为机器的每个内核生成一个进程。 通过这种方式，No
阅读全文
摘要：当你的用户需要一些额外的上下文来放置图标，或者当他们需要一些保证来点击按钮，或者可能是一个复活节彩蛋的标题来搭配一个图片时，工具提示是一个很好的方法来增强用户界面。现在让我们来制作一些动画工具提示，只使用html和css。 演示 以下是我们的工作目标: 主要目标是拥有一种添加工具提示的简单方法，因此
阅读全文
摘要：在css中有很多好看的样式都可以实现，css设置出来的样式让整个网页看起来也会非常美观，今天的这篇文章就给大家来介绍一下在css中怎么设置文字的透明度，让你的文字在网页中看起来是透明的。 CSS设置透明度可用如下两类方法实现： 1、使用rgba2、使用opacity 使用rgba设置文字不透明度的方
阅读全文
摘要：因项目需要，需要在元素上实现动画效果，并且需要有动画间隔。坑爹的是animation-delay只有在第一次动画开始的时候才起效。 在网上找了很多方法，最终的方法基本都是改动画规则，比如 @keyframes move{ /* 此处从75%开始 */ 75%{ transform: translat
阅读全文
摘要：了解浏览器背后的运行机制 了解浏览器背后的运行机制就是了解浏览器的内核，现在市面上主流浏览器的内核名称分别如下： chrome: blink内核 Opera: blink内核 Safari: webkit内核 FireFox: Gecko内核 IE: Trident内核 ** 注：blink内核其实
阅读全文
摘要：开发人员分离 以前的 JavaWeb 项目大多都是 Java程序员又当爹又当妈，又搞前端，又搞后端随着时代的发展，渐渐的许多大中小公司开始把前后端的界限分的越来越明确，前端工程师只管前端的事情，后端工程师只管后端的事情。正所谓术业有专攻，一个人如果什么都会，那么他什么都不精。大公司需要专业人才，小公
阅读全文
摘要：编写基本的css和html是我们作为Web开发人员学习的首要事情之一。然而，我遇到的很多应用程序显然没有人花时间真正考虑前端开发的长久性和可维护性。 我认为这主要是因为许多开发人员对组织css / html和JavaScript的策略缺乏深刻的理解。 在我和我们团队的观念中，编写可维护的前端代码非常
阅读全文
摘要：了解如何通过使用前端开发服务器中的代理配置来避免CORS。 在过去的十年中，单页应用程序已成为构建Web应用程序的标准技术。如今，诸如Angular，vue之类的框架以及诸如react之类的库主导着前端开发，为这些应用程序提供了基础平台。好消息是，它可以从一个域中为前台和后台API提供服务。但在某些
阅读全文
摘要：css可以使用user-select属性来设置不可复制，此属性可以设置或检索是否允许用户选中文本，将此属性的属性值设置为none可以使文本不可选中。 通过user-select属性设置不可复制的css代码： -moz-user-select:none; /* Firefox私有属性 */ -webk
阅读全文
摘要：选择文件 一般来说上传常见的操作就三种，单击、拖拽、粘贴。下面我们分别来说一下。 input 选择文件 我们无法获取用户本地的内容，需要通过 <input> 标签，让用户自己选取。 <input type="file" name="input" id="input" @change="inputHa
阅读全文
摘要：目前大多数网络摄像头都是通过 RTSP 协议传输视频流的，但是 html 并不标准支持 RTSP 流。除了 Firefox 浏览器可以直接播放 RTSP 流之外，几乎没有其他浏览器可以直接播放 RTSP 流。Electron 应用是基于 Chromium 内核的，因此也不能直接播放 RTSP 流。
阅读全文
摘要：css3的3d起步 要玩转css3的3d，就必须了解几个词汇，便是透视(perspective)、旋转(rotate)和移动(translate)。透视即是以现实的视角来看屏幕上的2D事物，从而展现3D的效果。旋转则不再是2D平面上的旋转，而是三维坐标系的旋转，就包括X轴，Y轴，Z轴旋转。平移同理。
阅读全文
摘要：1、服务器出口带宽不够用 本身服务器购买的出口带宽比较小。一旦并发量大的话，就会造成分给每个用户的出口带宽就小，访问速度自然就会慢。 跨运营商网络导致带宽缩减。例如，公司网站放在电信的网络上，那么客户这边对接是长城宽带或联通，这也可能导致带宽的缩减。 2、服务器负载过大，导致响应不过来 可以从两个方
阅读全文
摘要：前端开发 众所周知，做前端开发所依赖的核心技术就是 html、css 和 js，就像好基友一样形影不离，我们将它们仨亲切地并称为「三剑客」。 经过这二十多年，尤其是在 V8 引擎及 Node.js 出现之后，以「三剑客」为基础的衍生技术如雨后春笋般大量出现，前端及其关联社区与前端工程师这个职业得到了
阅读全文
摘要：使用过css3属性的同学都知道，css3属性都需要带各浏览器的前缀，甚至到现在，依然还有很多属性需要带前缀。这是为什么呢？ CSS3的前缀是一个浏览器生产商经常使用的一种方式。它暗示该CSS属性或规则尚未成为W3C标准的一部分。 浏览器厂商以前就一直在实施CSS3，但它还未成为真正的标准。 前缀浏览
阅读全文
摘要：服务端渲染 谈起服务端渲染，对于动态服务而言，这个世界上跑的大多数页面都经历过服务端的数据渲染，接口->前端赋值->模版渲染 。这一切都在服务器完成，我们查看源码时候，可以看到完整的html代码，包括每个数据值。 常用的php模版有，Smarty,Blade,Mustache,如果你们团队使用Sma
阅读全文
摘要：一、强制转换 1、其他的数据类型转换为String 方式一：toString()方法 调用被转换数据类型的toString()方法,该方法不会影响到原变量，它会将转换的结果返回，但是注意：null和undefined这两个值没有toString，如果调用他们的方法，会报错。 var a = 123
阅读全文
摘要：1. 获取一个随机布尔值 (true/false) 这个函数使用 Math.random() 方法返回一个布尔值（true 或 false）。Math.random 将在 0 和 1 之间创建一个随机数，之后我们检查它是否高于或低于 0.5。这意味着得到真或假的几率是 50%/50%。 const
阅读全文
摘要：一、前言 在开发过程中，有时会遇到需要控制任务并发执行数量的需求。 例如一个爬虫程序，可以通过限制其并发任务数量来降低请求频率，从而避免由于请求过于频繁被封禁问题的发生。 接下来，本文介绍如何实现一个并发控制器。 二、示例 const task = timeout => new Promise((r
阅读全文
摘要：1. 使用元素位置判断元素是否在当前视区 这种方法实现起来比较简单， 我们一步一步来。 首先：编写一个 util 函数 isVisible，它将仅接收一个参数，即 element。 export const isVisible = (el) => { }; 使用 getBoundingClientR
阅读全文
摘要：1.关于JavaScript JavaScript是一门单线程语言，在最新的html5中提出了Web-Worker，但javascript是单线程这一核心仍未改变。所以一切javascript版的"多线程"都是用单线程模拟出来的，一切javascript多线程都是纸老虎！ 2.javascript事
阅读全文
摘要：装饰器存在的意义 会偷懒的程序员，才是优秀的程序员。 举个例子：我拿着员工卡进入公司总部大楼。因为每个员工所属的部门、级别不同，并不能进入大楼的任何房间。每个房间都有一扇门；那么，公司需要安排每个办公室里至少一个人关于验证来访者的工作： 先登记来访者 验证是否有权限进入，如果没有则要求其离开 记录其
阅读全文
摘要：推入任务队列后的时间不准确 定时器代码： setInterval(fn(), N); 上面这句代码的意思其实是fn()将会在 N 秒之后被推入任务队列。 所以，在 setInterval 被推入任务队列时，如果在它前面有很多任务或者某个任务等待时间较长比如网络请求等，那么这个定时器的执行时间和我们预
阅读全文
摘要：1. 文件转 Base64 在大规模使用 FileSystem接口之前，前端读取文件主要靠 input[type='file'] 元素。开发者通常会随手创建一个 FileReader 实例来读取文件，用完之后随即抛弃之，不得不说真是无情。实际上这个实例是可以复用起来的： /** * @method
阅读全文
摘要：拖拽属于前端常见的功能，很多效果都会用到js的拖拽功能。滑动条的核心功能也就是使用js拖拽滑块来修改位置。一个完整的滑动条包括 滑动条、滑动痕迹、滑块、文本 等元素，先把html代码写出来，如下所示： <div class="bar_wrap" id="wrap"><!--外包裹元素--> <div
阅读全文
摘要：实参和形参 在解释默认函数参数之前，重要的是要知道参数的默认值是什么。所以我们先回顾函数中实参和形参之间的区别。 在下面的代码中，我们创建一个函数，该函数返回一个给定数的立方： function cube(x) { return x * x * x } 此示例中的x变量是一个参数-传递给函数的命名变
阅读全文
摘要：优秀的网站要对用户的互动做出反应。做到这一点的一个很好的方法就是对有人向下滚动你的页面做出反应。 除了视差组件和滚动事件外，添加响应式触摸的一种好方法是使元素在滚动视图时淡入。 在本技巧中，将介绍如何使用滚动事件和css转换在vue3中实现此功能。 这是我们将学习如何在本教程中进行构建的屏幕截图。
阅读全文
摘要：1.使用最新特性不是优先事项 在一个新项目的初期阶段，它用到的可能只是几条CSS规则，但随着项目的持续更新和迭代，项目中使用到的规则就会变得越来越复杂，CSS也会越来越复杂尺寸也会随之不断膨胀。因此，作为项目优化的第一要务，作为资源的CSS需要尽可能的精简和减少复杂度，第一是为了便于更好地理解和维护
阅读全文
摘要：本节我们学习 Less 中的嵌套，嵌套应该很容易理解，html 语言中就支持标签的嵌套。我们在使用 css 时，如果想要为多层嵌套的元素设置样式，要么给元素加上一个类选择器或ID选择器，要么使用后代选择器。例如： .xkd{ font-size: 14px; } .xkd p{ line-heigh
阅读全文
摘要：元素添加初始参数 以上图中的动画为例，添加俩个左右容器，将内容放置在容器内部。 添加初始数据，默认透明度0、左右分别移动100px。 //左侧容器 .item-leftContainer { opacity: 0; transform: translateX(-100px); } //右侧容器 .i
阅读全文
摘要：使用 :is() 减少重复 你可以使用 :is() 伪类来删除选择器列表中的重复项。 /* BEFORE */ .embed .save-button:hover, .attachment .save-button:hover { opacity: 1; } /* AFTER */ :is(.emb
阅读全文
摘要：一 . 安装 在命令行中执行： 使用npm或者cnpm安装 npm install animate.css --save 或 cnpm install animate.css --save 使用yarn安装 yarn add animate.css 二. 引入 在main.js全局引入 import
阅读全文
摘要：诞生史 在 2007 年，苹果公司发布首款 iPhone 之前，由于当时的网站普遍为大屏幕设备所设计，为了应对 iPhone 这种小屏幕设备浏览桌面网站的问题，由此，苹果引入了多项变革，其中就包含了“双击缩放准确定位正文主体，并将其缩放至适合的比例展现”的功能，即双击缩放功能。然而，由于这种双击缩放
阅读全文
摘要：趋势一：更加移动优先 响应式设计显然是目前Web前端开发领域的主要趋势之一，并且这一趋势在未来还将持续一段时间。虽然现在的响应式设计大部分还是以PC版优先，然而如果有一天我们把PC版放到比移动版次要的位置上，也没有什么好奇怪的。因为，目前许多Web前端开发者已经开始转向以移动优先方案来做他们的响应式
阅读全文
摘要：项目管理是如何进行的？ 这个问题的答案可能改变你工作的思考方式。没有一个良好的项目管理流程会导致一片混乱。确保对方解释清楚了任务是如何确定的，谁负责处理任务，以及其他你能想到的事项。 如果对方身处一个任务管理很糟糕的环境，他们对任务管理流程的描述会非常含糊。具备良好的项目管理流程的公司应该能够简要地
阅读全文
摘要：width height 百分比 当元素的height、width设置为百分比时，分别基于包含它的块级对象的高度、宽度。这个是常规百分比的含义。 <div> <div>注意这里</div> <div>我是分割线</div> </div> .container{ width: 500px; heigh
阅读全文
摘要：权重的五个等级及其权重 种类权重 !important 10000 行内样式 1000 id选择器 100 class、属性选择器、伪类选择器 10 标签选择器、伪元素选择器 1 规则总结 行内样式总会覆盖外部样式表的任何样式(除了!important) 单独使用一个选择器的时候，不能跨等级使css
阅读全文
摘要：1、变量 $ 使用 我们可以通过变量来复用属性值，比如颜色、边框大小、图片路径等，这样可以做到更改一处，从而进行全局更改，从而实现“换肤”的功能。 实例1：我们的组件库，利用变量配置，进行统一更改组件的颜色、字体大小等（换肤）： $color-primary: #3ecacb; $color-suc
阅读全文
摘要：1.培养编程思想 高级前端需要掌握的不只是前端知识的一亩三分地，前端开发也是程序员的一种，软件编程是一个系统化的、工程化的项目，前端亦然。 一名高级开发者， 一**定要掌握一定的编程思想 。他不应该是随随便便写写代码实现了功能就敷衍了事的。 比如说，前端的JavaScript是一门面向对象的动态类型
阅读全文
摘要：前言 会写出这篇是因为我一个朋友在Front-End Developers Taiwan里面问了这个问题，完整原文如下： 诚心请问：前端工程师的价值在哪？我是很想走前端、视觉、美感的人。但是一边在路上，一边却不自主的质疑着这些东西的价值在哪？ 比方说前端就是一些画面、表单，boostrap套一下或是
阅读全文
摘要：安装Certbot客户端 Certbot是一个EPEL安装包，如果没有配置EPEL库，需要提前将库配置好。 运行以下命令安装Certbot: $ sudo yum install certbot-nginx 2.使用Certbot生成证书 $ sudo certbot --authenticator
阅读全文
摘要：概述 jsON(JavaScript Object Notation) 是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，是理想的数据交换格式。同时，jsON是 JavaScript 原生格式，这意味着在 JavaScript 中处理 JSON数据不须要任何特殊的 API 或工具包。 在JS
阅读全文
摘要：一、什么是定时器 js提供了一些原生方法来实现延时去执行某一段代码，下面来简单介绍一下 setTimeout: 设置一个定时器，在定时器到期后执行一次函数或代码段 var timeoutId = window.setTimeout(func[, delay, param1, param2, ...]
阅读全文
摘要：1、call函数封装实现 // 手写call函数 function call(Fn,obj,...arg){ // 如果obj为null或者undefined，则指向window if(obj undefined || obj null){ // globalThis是ES11的新特性，指向全局 o
阅读全文
摘要：在项目开发的过程中，基于有限的时间内保质保量的完成开发任务无疑是一场挑战。在这场挑战中我们不但要快速处理自己的问题，还需要与别人协同合作，以避免两者之间的冲突。 针对于大型项目的开发，css 如何组织和管理才能让我们用更少的时间写出更强大的功能。这篇文章来表述一些我对 css 组织和管理的理解。当然
阅读全文
摘要：一、概念 1、什么是 UUID UUID 的全称是 Universally Unique Identifier，中文为通用唯一识别码。 构成：由一组32位数的16进制数字所构成。 格式：以连字号分为五段，表现形式为8-4-4-4-12的32个字符，如下所示： xxxxxxxx-xxxx-Mxxx-N
阅读全文
摘要：微前端开发常见问题汇总，前端应用可以独立运行、独立开发、独立部署。微前端不是单纯的前端框架或者工具而是一套架构体系。其在开发中会有各种问题，今天小编整理了一下分享给大家! 1、微前端只是Web端 为什么只是Web?到目前为止我们接触到的主要是Web，但其概念和想法可以应用于任何类型的应用程序(移动应
阅读全文
摘要：md文件是markdown的一种标记语言，和html比较起来，更简单快捷，主要体现在：标记符的数量和书写上。 标记符的数量：html文档需要用到数量繁多的标记符，再辅以css来控制样式和排版，而markdown文档只需要四个基本的标记符号就能完成同样的事。标记符的书写：HTML文档内容需要同时标记开
阅读全文
摘要：一、项目背景 SVG 表示可伸缩矢量图形，这是一门用于描述 2D 图形的语言，图形应用使用 XML 编写，然后 XML 由 SVG 阅读器程序呈现。支持三种类型的图形对象：矢量图形形状（例如，由直线和曲线组成的路径），图像和文本。图形对象可以进行分组，样式设置，转换和合成。功能集包括嵌套转换，剪切路
阅读全文
