10 2020 档案
摘要：JavaScript 函数式编程是一个存在了很久的话题，但似乎从 2016 年开始，它变得越来越火热。这可能是因为 ES6 语法对于函数式编程更为友好，也可能是因为诸如 Rxjs (reactiveX) 等函数式框架的流行。 看过许多关于函数式编程的讲解，但是其中大部分是停留在理论层面，还有一些是仅
阅读全文
摘要：前两天给个人网站添加了一个小功能，就是在文章编辑上传图片的时候自动给图片加上水印。给网页图片添加水印是个常见的功能，也是互联网内容作者保护自己版权的方法之一。本文简单记录一下借助canvas在前端实现图片添加水印的实现方法。canvas元素其实就是一个画布，我们可以很方便地绘制一些文字、线条、图形等
阅读全文
摘要：背景 使用过 mobx + mobx-react 的同学对于 ES 的新特性装饰器肯定不陌生。我在第一次使用装饰器的时候，我就对它爱不释手，书写起来简单优雅，太适合我这种爱装 X 且懒的同学了。今天我就带着大家深入浅出这个优雅的语法特性：装饰器。 预备知识 全球统一为 ECMAScript 新特性、
阅读全文
摘要：随着开发过程中自动 UI 测试的兴起，无头浏览器已变得非常流行。网站爬虫和基于 html 的内容分析也有无数的用例。 在 99％ 的场合下，你实际上不需要浏览器 GUI，因为它是完全自动化的。运行 GUI 比发布基于 Linux 的服务器或在微服务集群（例如 Kubernetes）上扩展简单的Doc
阅读全文
摘要：前言 春天到了，又到了交配，啊 ，不是。。又到了找工作的季节。相信很多朋友都会被问到过这样的一个js问题，如何实现call | apply | bind，很多朋友只会用但是不会写，或者是死记硬背写法，等到面试官提问的时候，支支吾吾讲不清楚，今天我将教会大家完全理解这个破题！ 1.首先讲讲this 这
阅读全文
摘要：Commonjs Node应用使用Commonjs模块规范，Node中每个文件就是一个模块，有自己的作用域，在模块中定义的变量、函数都是私有的。 模块中有四个重要的变量global、module、exports、require。 Node中的全局变量global，和浏览器的window对象类似，声明
阅读全文
摘要：基本类型 布尔值 TypeScript和JavaScript一样，这是最简单的数据类型为boolean，也就是true和false。 let isDone: boolean = false; 数字 TypeScript和JavaScript一样，TypeScript里的所有数字都是浮点数，类型为nu
阅读全文
摘要：Buffer 作为 nodejs 中重要的概念和功能，为开发者提供了操作二进制的能力。本文记录了几个问题，来加深对 Buffer 的理解和使用： 认识缓冲器 如何申请堆外内存 如何计算字节长度 如何计算字节长度 如何转换字符编码 理解共享内存与拷贝内存 认识 Buffer（缓冲器） Buffer 是
阅读全文
摘要：简而言之，只要一个组件中某个属性的值是函数，那么就可以说该组件使用了 Render Props 这种技术。听起来好像就那么回事儿，那到底 Render Props 有哪些应用场景呢，咱们还是从简单的例子讲起，假如咱们要实现一个展示个人信息的组件，一开始可能会这么实现： const PersonInf
阅读全文
摘要：在制作网页动态效果时，可能会遇到需要延时在执行的需求，这时就可以用到 js 中定时器来实现此类需求，本文将对setTimeout()做一个用法总结。 setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式(以毫秒为单位) setTimeout()只执行函数一次，如果需要多次调用可以使
阅读全文
摘要：匿名函数是没有函数名的，不能单独使用； 立即执行函数是基于匿名函数实现的，也没有函数名，会在定义后立即执行； 闭包是有权访问另一个函数作用域中的变量的函数。匿名函数、立即执行函数只要满足 有权访问另一个函数作用域中的变量 这一个条件，就成了闭包。 匿名函数 匿名函数：没有函数名的函数 匿名函数不能单
阅读全文
摘要：0. 如何仅保留满足异步条件的元素 在第一篇文章中，我们介绍了 async / await 如何帮助处理异步事件，但在异步处理集合时却无济于事。在本文中，我们将研究该filter函数，它可能是支持异步函数的最直观的方法。 1. Array.filter 该filter函数仅保留通过条件的元素。它得到
阅读全文
摘要：MQ全称为Message Queue, 消息队列（MQ）是一种应用程序对应用程序的通信方法。应用程序通过读写出入队列的消息（针对应用程序的数据）来通信，而无需专用连接来链接它们。 消息传递指的是程序之间通过在消息中发送数据进行通信，而不是通过直接调用彼此来通信，直接调用通常是用于诸如远程过程调用的技
阅读全文
摘要：在ES6之前，函数内部的this是由函数的调用方式决定的 函数调用 var age = 18; var p ={ age : 15, say : function(){ console.log(this.age) } } var f1 = p.say; f1(); 这时是函数调用(是由window调
阅读全文
摘要：动机 对于搜索字符串的需求，在最坏的情况下，二叉搜索树的时间复杂度可能为 O(n)，“n” 是二叉树中存储的字符串的总数量。所以为了在最佳时间内搜索字符串，需要一种性能更好的数据结构。 Trie 树（又名单词搜索树）可以避免在搜索字符串时遍历整个树。仅包含字母的字符串会把 trie 节点的子级数量限
阅读全文
摘要：一、闭包概念闭包：有权访问另一个函数作用域中的变量的函数，一般情况就是在一个函数中包含另一个函数。从官方定义我们知道闭包是一个函数，只不过这个函数有[超能力]，可以访问到另一个函数的作用域。为什么说这个叫做[超能力]呢？因为我们知道函数作用域是独立的、封闭的，外部的执行环境是访问不了的，但是闭包具有
阅读全文
摘要：为了保证的可读性，本文采用意译而非直译。 Infinity(无穷大)在 js 中是一个特殊的数字，它的特性是：它比任何有限的数字都大，如果不知道 Infinity， 我们在一些运算操作遇到时，就会觉得很有意思。 现在我们来看看 js 中的Infinity 属性，了解用例并解决一些常见的陷阱。 1.I
阅读全文
摘要：既生瑜，何生亮 Node.js 模块里，我们经常见着 module.exports 与 exports 。二者区别在哪？ 来新建一个 module.js 文件： console.log(exports module.exports); console.log(exports); 然后在命令行下运行
阅读全文
摘要：读了 os 模块的文档，研究了几个有意思的问题： 识别操作系统平台 理解和计算“平均负载” 理解和计算“cpu 使用率” 理解和计算“内存使用率” 查看运行时间 识别操作系统平台 nodejs 提供了os.platform()和os.type()，可以用来识别操作系统平台。推荐使用: os.plat
阅读全文
摘要：Web开发太有意思了！ 但是JavaScript则……令人望而生畏。 Web开发中其他一切对你而言都是小菜一碟，但当你深入探究JavaScript的时候，不免有一种“众人皆醒你独醉”的悲壮——好像其他人都知道你不知道的一些大的基础的知识内容，并且这些内容可以帮助你理解所有知识。 事实是，的确如此，你
阅读全文
摘要：一、关于php ini介绍 php.ini apache在启动时php.ini被读取。对于服务器模块版本的php，仅在web服务器启动时读取一次。对于CGI和CLI版本，每次调用都会被读取 Apache Web服务器在启动时会把目录转到根目录，这将使得PHP尝试在根目录下读取php.ini，如果·存
阅读全文
摘要：写在前面 移动应用开发与服务端开发有很大不同，服务端应用如果出现问题，可以通过发布新版本修复，或立即回滚到上一个版本，用户能够立刻感知到这一变化；而移动端应用则不同，即使立刻发布新版本修复了问题，也无法保证所有人都能更新到这个版本，如果用户不升级移动端应用，问题依然得不到修复。 此外，众所周知，iO
阅读全文
摘要：很多接触过程序员的人，都有一种体会：程序员=聊天终结者。经常用简短有力的几个字结束掉你苦心经营的聊天氛围，比如： “你现在忙不忙？” “忙。” 那我真的是打扰了，内心显露出微笑脸： “你跟我说说......” “不说。” 你牛逼啊，跟程序员深入聊天是不可能的，这辈子都不可能。 “你能不能......
阅读全文
摘要：前端发展了也有些年头了，曾记得很多年前，聊起前端，都觉得是很简单，那个时候都没有前端工程师这个职位。可现在，前端已经逆袭了，已经不是原来的样子了,各种技术层出不穷，显的越来越高深莫测了。前端真的变得那么难了吗？在我看来，前端还是原来的前端，虽然有些关变换，但不应该像现在一样复杂。 框架太多了,新技术
阅读全文
摘要：如果咱们决定要成为一名程序员，必须记住这意味着咱们就要不断地学习。不管是刚刚开始，还是有经验，都会有新的知识要掌握。当然，在我们的编程冒险之初，还有很多东西要学。 一开始，一切都非常令人兴奋。 在收集完所有资源，课程，书籍和所需的所有内容之后，一看似乎需要花很多时间研究才能完成所有工作并达到目标。
阅读全文
摘要：骚年，面对现实吧，谈恋爱虽然有趣，但是两个人也会有相看两厌的“疲惫期”； 编程虽然有趣，但每个月总有那么两天会让你精疲力竭、累觉不爱。 这很正常，但就怕晾着不管。 最终循环反复，周而复始，你会陷入这样尴尬的局面——短则几天，长则数周，忙着所有与编程无关的事。 如果编程只是你的业余爱好，那还好。 但如
阅读全文
摘要：最近在个人的多个项目部署中遇到这样一个问题，一个域名如何实现多个项目的访问。因为不想自己单独去申请域名证书和域名配置，便想到了这个方案，结合Nginx的location功能实现了自己的需求，便记录下来。示例中是以php的项目演示，其他的语言类似同样的方式进行部署。例如node的项目，可以在locat
阅读全文
摘要：学习web前端编程技术肯定是以就业拿到高薪工作为主要目的的，可是高薪不会那么轻易拿到，这是一个最简单的道理。没有付出就没有回报，在整个学习web前端编程技术的过程中，你需要付出时间、精力、金钱。废话不多说直接上干货。 在开始学习之前你需要做到以下5点： 第一：需要达到什么样的技术水平才能就业？ 既然
阅读全文
摘要：MySQL查漏补缺 目录 唯一索引比普通索引快吗, 为什么 MySQL由哪些部分组成, 分别用来做什么 MySQL查询缓存有什么弊端, 应该什么情况下使用, 8.0版本对查询缓存有什么变更. MyISAM和InnoDB的区别有哪些 MySQL怎么恢复半个月前的数据 MySQL事务的隔离级别, 分别有
阅读全文
摘要：软件开发是一个伟大的工作——和任何其他工作一样，它也有它的缺点。下面的10件事就是大多数程序员关于编程所无法苟同的。 对于非软件开发人员来说，开发人员的工作看起来一定很甜蜜：很多公司都需求这方面人才，得到的报酬真的很不错，公司给你各种有趣的福利，等等。但是真相却是，虽然，这一切是真的，但如同任何其他
阅读全文
摘要：最近在开发过程中遇到了这么一个问题： 现在有一个 Web 项目，前端是使用 vue.js 开发的，整个前端需要部署到 K8S 上，后端和前端分开，同样也需要部署到 K8S 上，因此二者需要打包为 Docker 镜像。 对前端来说，打包 Docker 就遇到了一个问题：跨域访问问题。 因此一个普遍的解
阅读全文
摘要：NetBeans Profiler NetBeans中可以找到NetBeans Profiler。 NetBeans分析器是NetBeans的扩展，用于为NetBeans IDE提供分析功能。NetBeans IDE是一个开源的集成开发环境。NetBeans IDE支持开发所有Java应用程序类型（
阅读全文
摘要：引言 最近组里大佬出差，面试的任务落在了我这个小喽啰身上。作为一位中级工程师，让我面试高级工程师，我也是压力山大，只得硬着头皮上。这几天面试了许许多多人，感慨良多，不吐不快 简历 简洁 统一用pdf,注意排版 不要花里胡哨 一两页即可，不要把5年前的经历都写上。 我基本只关注最近两年内的，毕竟2个月
阅读全文
摘要：你也许还未入行，或是刚入行或工作了几年的程序员，但有时候，你可能会希望别人认为你很强，是个天才，就像电影里那种一手抱妹子一手拿香槟，用脚写代码攻破军方网站的炫酷黑客。可能有些夸张，但 Sten Sootla 觉得你可以做到。Sten Sootla 是机器人初创公司 StarshipTechnolog
阅读全文
摘要：Apache调用解析器的三种方式 在普遍使用的LAMP架构中，Apache与php之间的交互，有三种常见的方式。 第一种是最通用最常见的Module方式，即在httpd.conf中使用LoadModule的方式，将php的dll或者so文件加载到apache当中。 还有两种是CGI方式和FastCG
阅读全文
摘要：PHP的错误级别 首先需要了解php有哪些错误。截至到php5.5，一共有16个错误级别 注意：尝试下面的代码的时候请确保打开error_log: error_reporting(E_ALL); ini_set('display_errors', 'On'); E_ERROR 这种错误是致命错误，会
阅读全文
摘要：改变操作系统对于任何人来说都是迈出的一大步，特别是当许多用户不确定操作系统究竟如何的时候，尤其如此。 但是，从Windows切换到Linux特别艰难。因为这两个操作系统有不同的假设和优先级，以及不同的做事方式。因此，新的Linux用户很容易混淆，因为他们使用Windows开发的期待结果不再适用。 例
阅读全文
摘要：这篇文章摘自于我即将推出的新书《The Complete Software Developer’s Career Guide》的其中一章。 好的，决定好想学什么编程语言了吗，现在就让我们开始学习吧。 所有你需要做的就是打开一本书，然后开始阅读，是这样的吗？ 不全是这样的。我的意思是，你可以用那种方式
阅读全文
摘要：开发团队是每一个产品经理和产品负责人的重要合作伙伴：是团队来设计和建造实际产品。但是，要高效地引导并与团队一起工作并不是一件容易的事情。这篇文章将分享8个使开发团队更高效合作的小技巧，从而提高创造成功产品的机会。 1.管理产品，而不是团队 作为产品经理或产品所有者，要专注于你的工作，要管理产品而不是
阅读全文
摘要：在这篇文章里，我将简要地介绍在设计微服务架构时需要注意的问题。如果实施得当，就会获得自治能力和灵活性，但同时也会带来通信延迟和部署及托管成本。这篇文章并不是一个高级指南，我只是希望能够在你们决定采用微服务架构时帮你们做出更好的判断。 1. 映射服务 在我看来，映射服务是一种很糟糕的想法。 如果你走到
阅读全文
摘要：TypeScript中的类型是什么？本文中描述了两种有助于理解它们的观点。 每个角度三个问题 以下三个问题对于理解类型如何工作非常重要，并且需要从两个角度分别回答。 myvariable 具有 MyType 类型是什么意思？ let myvariable: MyType = /*...*/; Sou
阅读全文
摘要：JavaScript数据类型 JavaScript有八种内置类型 空值（null) 未定义(undefined) 布尔值（boolean) 数字（number) 字符串（string) 对象 (object) 符号（symbol, ES6中新增) 大整数（BigInt, ES2020 引入） 除对象
阅读全文
摘要：Symbol是ES6中新引入的一种基本数据类型，在此之前JavaScript中已有几种基本数据类型： Numberg String Boolean Null Undefined Object 不同于其他基本类型的通俗易懂，Symbol 是什么和有什么用一直有些让人困惑。 什么是Symbol Java
阅读全文
摘要：JavaScript 的是没有操作文件的能力，但是 Node 是可以做到的，Node 提供了操作文件系统模块，是 Node 中使用非常重要和高频的模块，是绝对要掌握的一个模块系统。 fs 模块提供了非常多的接口，这里主要说一下一些常用的接口。 1.常用API快速复习 fs.stat 检测是文件还是目
阅读全文
摘要：函数式编程是一种如今比较流行的编程范式，它主张将函数作为参数进行传递，然后返回一个没有副作用的函数，说白了，就是希望一个函数只做一件事情。 像JavaScript，Haskell，Clojure等编程语言都支持函数式编程。 这种编程思想涵盖了三个重要的概念： 纯函数 柯里化 高阶函数 而这篇文章主要
阅读全文
摘要：0.前言 最近在看计算机组成原理的浮点数部分，突然想起之前看过的一道快手面试题 为什么js中0.1+0.2不等于0.3,应该如何解决？ 这里我们可以借这道题来说一下js的精度问题 1.JS数的储存 二进制和浮点数和定点数 首先计算机里面的数据肯定以二进制形式存储对于同一段二进制码，不同的解读方式肯定
阅读全文
摘要：题目： 请写出一个数组拍平函数。效果如下： var arr=['a', ['b', 'c'], 2, ['d', 'e', 'f'], 'g', 3, 4]; flat(arr) //a,b,c,2,d,e,f,g,3,4 方法一：使用toString方法先将arr转换为一个字符串， 再以split
阅读全文
摘要：背景 关于jsBridge的一些基础知识，在网络上有很多文章可以参考： 《H5与Native交互之JSBridge技术》《JSBridge的原理》 最近公司在做一个项目，通过把我们自己的Webview植入第三方APP，然后我们的业务全部通过H5实现。至于为什么不直接用第三方APP WebView,主
阅读全文
摘要：在日常的 js 编码过程中，可能很难看到相等运算符(=)是如何工作的。特别是当操作数具有不同类型时。这有时会在条件语句中产生一些难以识别的 bug。很容易理解为什么 0 == 8 是 flase 的或者 '' == false 是 true。但是为什么{} == true是 false 的就看不出来
阅读全文
摘要：面试的时候我们经常会问别人是理解什么是节流和防抖，严格的可能要求你写出节流和防抖函数，这里我们抛开loadsh工具库手写节流和防抖 节流函数throttle // 节流方案1，每delay的时间执行一次，通过开关控制 function throttle(fn, delay, ctx) { let i
阅读全文
摘要：1.识别手机平台是IOS还是安卓 /** * [isMobile 判断平台] * @param test: 0:iPhone 1:Android */ function ismobile(test) { var u = navigator.userAgent, app = navigator.app
阅读全文
摘要：1. JavaScripth函数不能够实现重载 重载，简单说，就是函数或者方法有相同的名称，但是参数列表不相同的情形，这样的同名不同参数的函数或者方法之间，互相称之为重载函数或者方法。参考JavaScript 高级程序设计(第三版)P66 ES函数不能够像传统意义上那样实现重载。而在其他语言中(如j
阅读全文
摘要：简单 for 循环 下面先来看看大家最常见的一种写法： const arr = [1, 2, 3]; for(let i = 0; i < arr.length; i++) { console.log(arr[i]); } 当数组长度在循环过程中不会改变时，我们应将数组长度用变量存储起来，这样会获得
阅读全文
摘要：下载图片的几种方式 通过浏览器自动下载。浏览器接收到二进制文件，自动转码下载。比如：window.open() 通过xhr下载。ajax请求得到的是二进制文件，只能手动转码下载。 第一种：浏览器自动下载型 这种需要后端配置响应参数 window.open 例子：本地起了一个node服务，端口3000
阅读全文
摘要：本文旨在分析理解 Iterators。 Iterators 是 js中的新方法，可以用来循环任意集合。 在ES6中登场的Iterators。因其可被广泛使用，并且已在多处场景派上用场，我们将从概念上理解迭代器是什么，以及在何处使用它们和示例。我们还将看到它在js 中的一些实现。 简介 假设有这样数组
阅读全文
摘要：1. 什么是 arguments arguments 是一个类数组对象。代表传给一个function的参数列表。 我们先用一个例子直观了解下 JavaScript 中的 arguments 长什么样子。 function printArgs() { console.log(arguments); }
阅读全文
摘要：小试身手 原型链例子(要点写在注释里,可以把代码复制到浏览器里测试,下同) function foo(){} //通过function foo(){}定义一个函数对象 foo.prototype.z = 3; //函数默认带个prototype对象属性 (typeof foo.prototype;/
阅读全文
摘要：一、概述 在JavaScript中，链式模式代码，太多太多，如下： if_else: if(...){ //TODO }else if(...){ //TODO }else{ //TODO } switch: switch(name){ case ...:{ //TODO break; } case
阅读全文
摘要：装饰器 装饰器(Decorator)是ES7的一个语法，是一种与类相关的语法，用来注释或修改类和类的方法。 装饰器是一种函数，写成 @ + 函数名。它可以放在类和类方法的定义前面 @frozen class Foo { @configurable(false) @enumerable(true) m
阅读全文
摘要：今天来说说es6的语法，最基础的也就是var，let，const 的用法与区别了，我们来看看他们之间的恩怨情仇。首先来说说var，这个只要是学过js的都知道，它是用来声明一个变量的，但是它在开发中也会遇到一些问题，比较难解决。先来看看下面的代码： var str="hello world"; f
阅读全文
摘要：最近由于工作的原因碰到一个问题，就是在一个弹窗宽度不定的情况下还能是该弹窗居中显示，思考许久未找到合适办法，于是在网上找到一些办法在此总结记录下来方便以后的学习。 方法一：兼容IE67，但是当元素宽度大于50%时，会出现滚动条。 <div class="father"> <div class="ch
阅读全文
摘要：box-shadow属性是一个css3属性，允许我们在几乎任何元素上来创建阴影效果，类似于在设计软件中的”drop shadow”。这些阴影效果允许我们在原本平面的、二维的页面上面创建出深度（第三维）的错觉。 定义和用法 box-sizing属性定义了如何计算元素的宽度和高度：它们是否包括填充和边框
阅读全文
摘要：viewport <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 这个是移动端页面开发必备的标签，用来调整布局视口同视觉视口一致，禁止
阅读全文
摘要：高度坍塌 成因 父元素 div 未设置高度 子元素全部设置浮动（float: left | right;），浮动元素 脱离文档流 且 不占页面空间 由于父元素为设置高度，高度靠内部子元素撑开，而今子元素全部脱离文档流，所以此时父元素的高度为 0，给父元素和子元素设置 边框（border: 1px s
阅读全文
摘要：1.温习JavaScript 这些日子，开发人员掌握JavaScript总不会错。JavaScript能力是目前为止被高层执行人员和招聘人员誉为最频繁的追捧技能。JavaScript已被证明是当今市场中高度可移植和宝贵的技能。 2.了解大数据 大数据项目相较于去年继续扩大，而且在这几年里也没有放缓的
阅读全文
摘要：你想成为一名Web开发人员，但现在你面前有这样一个问题，那就是你没有在高科技行业工作的经验。你上了一些课程，也花了时间在个人编码项目上，但是你的简历上关于“经验”的部分仍然不为企业承认。过渡到一个新的领域从来就不是一件简单的事。你不知道你是否准备好了，不知道是否有人会认真对你，也不知道你是否能得到工
阅读全文
摘要：说明 本文中所说的QQ登录功能，是采用官方的OAuth2.0来实现的，这样有更多的自主权。另一种较为简单的js-SDK开发方式，虽然非常简便，但自主性不够，所以没有采用。 下文中所构造的URL，均使用了JavaScript的ES6语法。 注册开发者 先登录QQ互联官网，登录时所用的QQ号会和相关信息
阅读全文
摘要：前言 浏览器缓存是浏览器端保存数据用于快速读取或避免重复资源请求的优化机制，有效的缓存使用可以避免重复的网络请求和浏览器快速地读取本地数据，整体上加速网页展示给用户。浏览器端缓存的机制种类较多，总体归纳为九种，这里详细分析下这九种缓存机制的原理和使用场景。打开浏览器的调试模式——Applicatio
阅读全文
摘要：背景 一般的项目需求都会要求统一的输出结构，特别是对于api应用而言。因此，如果有beforeResponse的功能，则可以在数据输出之前对response进行统一格式化处理。 假设这么一种场景，应用做api开发，使用抛异常的方式(自定义异常类ApiException)返回无效非法请求的情况。正常请
阅读全文
摘要：css中的background属性想必大家已经用了无数遍，但是对于css3属性background-clip你可能还不太了解，那么今天我们就专门来聊聊这个属性。 clip，英文意为 “裁切，修剪”，所以很显然，background-clip属性肯定与背景裁切有关，而事实也正是如此。 backgrou
阅读全文
摘要：在本文中，我将介绍常用的安全头信息设置，并给出一个示例。在本文的最后，我将介绍用于常见应用程序和web服务器的安全头信息示例设置。 Content-Security-Policy 内容安全策略（CSP）常用来通过指定允许加载哪些资源来防止跨站点脚本攻击。在接下来所介绍的所有安全头信息中，CSP 可能
阅读全文
摘要：什么是跨域访问 这里说的js跨域是指通过js在不同的域之间进行数据传输或通信，比如用ajax向一个不同的域请求数据，或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同，都被当作是不同的域。如果进行跨域访问，浏览器会报跨域访问异常 NO ‘Access Co
阅读全文
摘要：css中：focus伪类的使用，即给已获取焦点的元素设置样式 示例一 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>:focus</title> <style> *{ margin: 0; padding:
阅读全文
摘要：学习前端的几个个阶段： 一阶段：html标签、html5新增标签、css样式、css3样式、媒体查询等二阶段：JavaScript、jQuery、ajax、面向对象、http传输协议等三阶段：canvas、js高级应用、js-SDK、H5新增技术四阶段：node.js、vue.js 第一阶段——HT
阅读全文
摘要：一、服务端渲染 - 简介 所谓服务端渲染就是将代码的渲染交给服务器，服务器将渲染好的html字符串返回给客户端，再由客户端进行显示。 服务器端渲染的优点 有利于seo搜索引擎优化，因为服务端渲染是将渲染好的html字符串返回给了客户端，所以其可以被爬虫爬取到； 加快首屏渲染时间，不会出现白屏； 服务
阅读全文
摘要：写过挺多项目都需要改变滚动条的默认样式 并不想单独下载和引入插件 因此纯css修改默认滚动条的样式 这次算统一整理下方法，直接上代码。 &::-webkit-scrollbar { // 滚动条的背景 width: 16px; background: #191a37; height: 14px; }
阅读全文
摘要：现在找工作越来越难难，而且一年比一年就业压力大，为什么学习web前端却如此火爆呢？转行首选web前端呢？ IT技术的革命首先就是前端技术的革命 IT技术虽然经历了数次浪潮的迭代，从最早的大型机到PC机，PC机到浏览器，从浏览器再到当前的智能手机，但每一次IT技术革命首先是前端技术的革命，每一次前端技
阅读全文
摘要：服务端转换 服务端转换是什么意思呢？直接把内容和需要的字体传递给服务端，服务端提供一个文字转图片的接口，将字体转换成图片，然后在canvas中直接绘制图片，这样就能保证绘制网络字体不会有问题，不会有任何的兼容性问题，但是这样做也就意味着服务端的工作会变多，同时如果文字内容是可以被用户编辑修改的，那就
阅读全文
摘要：前言： 71%用户希望在手机上打开网页能跟电脑一样快； 5秒钟被认为是用户能忍受的最长响应时间，如果响应时间超过5秒，50%的移动用户会放弃； 33%失望的用户会使用竞品替代； 用户尝试三次出现同样性能问题，50%的人不会再使用该应用。 基于此，我们今天就一起来探讨一下Web性能测试测试点。（写的略
阅读全文
摘要：老生常谈之display: none 相信小伙伴们都被问过这样一个问题：让一个元素隐藏起来，有多少种方法呢？常规来讲，我们有三种方法display: none、opacity: 0和visibility: hidden ，基于display: none的副作用，已经是个被说烂的问题，主要是有以下缺点
阅读全文
摘要：相关API简介 在前面的章节中，已经对WebRTC相关的重要知识点进行了介绍，包括涉及的网络协议、会话描述协议、如何进行网络穿透等，剩下的就是WebRTC的API了。 WebRTC通信相关的API非常多，主要完成了如下功能： 信令交换 通信候选地址交换 音视频采集 音视频发送、接收 相关API太多，
阅读全文
摘要：1.文本对齐方式（水平方向） text-align 这个属性能控制标签内文本的对齐方式，还能控制子元素中行内元素和行内块级元素的对齐方式（水平方向） 它有三个值： left：左对齐（默认）center：居中对齐right：右对齐 <!DOCTYPE html> <html> <body> <div>
阅读全文
摘要：什么是浏览器内核？ 网页上所用到的语言有：html, css, JavaScript等，其中，前两者通常决定了该页面长什么样，它们是可以说都是约定的规范。不同的浏览器在获取到某页面的代码文件后，负责根据这套规范将代码渲染出来呈现给用户，浏览器内核所做的就是这个渲染工作。因此，浏览器内核，也被称为排版
阅读全文
摘要：如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。 实现方法： overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 效果如图： 但
阅读全文
摘要：什么是WEB前端呢？就是用户电脑的浏览器所做的一切事情。我们来看看用户访问网站，浏览器都做了哪些事情：输入网址 –> 解析域名 -> 请求页面 -> 解析页面并发送页面中的资源请求 -> 渲染资源 -> 输出页面 -> 监听用户操作 -> 重新渲染。 通过上面的路径可以看出浏览器分为请求、传输、渲染
阅读全文
摘要：了解html html（HyperText Marked Language）即超文本标记语言，是一种用来制作超文本文档的简单标记语言。我们在浏览网页时看到的一些丰富的影像、文字、图片等内容都是通过HTML表现出来的。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台，一直被用作W
阅读全文
摘要：任务 我们最近在SeatGeek更新了我们的“跟踪"图标，以匹配我们的新iPhone应用程序。 首席设计师在PSD中创建了具有不同状态的心脏图标，并在下面创建了动画： 什么是css3动画？ 在css中，动画是一种让元素逐渐改变样式的效果。 您可以使用@keyframes关键字创建动画，后跟动画的名称
阅读全文
摘要：<progress> 标签表示任务的进度（进程），例：可定义完成多少工作，还有多少工作可以下载等等。该标签可与JavaScript结合使用，来显示任务的进度，创建动态的进度条。 注释：<progress> 标签不适合用来表示度量衡（例如，磁盘空间使用情况或查询结果）。如需表示度量衡，请使用 <met
阅读全文
摘要：介绍 在css2当中，存在标准模式下的盒子模型和IE下的怪异盒子模型。这两种方案表示的是一种盒子模型的渲染模式。而在css3当中，新增加了弹性盒子模型，弹性盒子模型是一种新增加的强大的、灵活的布局方案。弹性盒子模型是css3中新提出的一种布局方案。是一种为了应对针对不同屏幕宽度不同设备的一整套新的布
阅读全文
摘要：什么是 BOM? BOM（Browser Object Model）即浏览器对象模型提供了独立于内容而与浏览器窗口进行交互的对象。由于 BOM 主要用于管理窗口与窗口之间的通讯，因此其核心对象是 window。 相关方法(属性) 弹出框 window.alert() URL 的属性 // 当前 ht
阅读全文
摘要：1. 问题描述 app内打开H5页面，页面包含input输入框，点击input调起软键盘，输入完成点击下方提交按钮弹出toast时，会出现t toast 跳动的现象，其中：toast采用 position: fixed 进行固定定位 2. 分析原因 关于 position: fixed 首先来看，M
阅读全文
摘要：文字带上渐变色，或者说让文字透出图片。这些效果 css 属性也可以完成。 方法一、利用css3属性mix-blend-mode:lighten;实现 使用 mix-blend-mode 能够轻易实现，我们只需要构造出黑色文字，白色底色的文字 div ，叠加上图片，再运用 mix-blend-mode
阅读全文
摘要：浮动的介绍 不知道大家是否和我有同样的一个感觉，每当拿起一篇杂志文章，总能发现左边或右边有图片，文字流畅地围着图片，这就是打印世界中看到的浮动： 在Web的世界中，css的 float 设计初衷也是用来处理文本围绕图片排版的，就像在杂志布局中一样。碍于当时Web布局可用方案的局限性，聪明的csser
阅读全文
摘要：css怎么设置边框阴影？很多人遇到这类问题都不知道怎么处理，其实利用css加阴影边框是很简单的。在CSS中可以使用box-shadow属性或filter属性的drop-shadow()来添加阴影边框。 方法1：使用box-shadow属性 box-shadow属性可以向框添加一个或多个阴影。 语法：
阅读全文
摘要：常见应用场景 现在的APP界面基本都是大同小异, 宫格布局现在基本成了每个APP必然的存在. 带边框, 常用在"功能导航"页面无边框, 常用在首页分类 设计目标 在scss环境下, 通过mixin实现n宫格, 并且可以支持"有无边框"和"每个格是否正方形": @include grid(3, 3,
阅读全文
摘要：权重这个概念，相信对许多进行过前端开发的小伙伴来说肯定并不陌生，有时候一个样式添加不上，我们就会一个 !important 怼上去，一切就好像迎刃而解了。但还有的时候，!important也并不能解决我们的问题，下面请跟随我来详细了解一下css的权重吧！ 探索权重 指某一因素或指标相对于某一事物的重
阅读全文
摘要：1.html5表单新特性之——新的input type <input type=" "> html5之前已有的input type: text、password、radio、checkbox、file、submit、reset、button、image、hidden HTML5新增的input ty
阅读全文
摘要：同一个标签可以同时设置背景颜色和背景图片，如果颜色和图片同时存在，那么图片会覆盖颜色。 1.在css中有一个叫做background-position：属性，就是专门用来控制背景图片的位置 2.格式：background-position:值1 值2； 值1的取值范围：left center rig
阅读全文
摘要：一、站在用户的角度看问题 一个用户，访问一个web页面的真实场景是怎样的呢？下面是某用户访问某站点的一个场景： 1. 小明打开了自己的电脑，访问了鑫空间-鑫生活； 2. 小明体内洪荒之力无法控制，疯狂拖动浏览器改变其宽度感受页面布局变化； 3. 卧槽，发现页面居然是响应式的，不由得感叹：实现的够骚气
阅读全文
摘要：1. Safari 3D变换会忽略z-index的层级 在Safari浏览器下(此Safari浏览器包括iOS的Safari，iPhone上的微信浏览器，以及Mac OS X系统的Safari浏览器)，当我们使用3D transform变换的时候，如果祖先元素没有overflow:hidden/sc
阅读全文
摘要：Web 模板就在那里 模板引擎负责组装数据，以另外一种形式或外观展现数据。浏览器中的页面是 Web 模板引擎最终的展现。 无论你是否直接使用模板引擎，Web 模板一直都在，不在前端就在后端，它的出现甚至可以追溯到超文本标记语言 html 标准正式确立之前。 服务器端的模板引擎 我所知道最早的 Web
阅读全文
摘要：Extjs其实 是一个Ajax 框架，是一个用JavaScript 写的。与EasyUI差不多的一个框架。学习并不难，先找好一定的学习资料与文档，然后再练习几个demo，这样大概就有所了解了。具体精通，那只有等你自己在项目中多实践。 一、获取元素（Getting Elements) 1. Ext.g
阅读全文
摘要：截至目前vue在GitHub上的Star数已经高达152601，还有绝大数像笔者一样不经常star别人的vue友们(可恨可气)。Vue因其友好程度让更多前端爱好者加入到其中，开源项目对程序员来说是很有用的。你可以通过读代码并且在现有项目的基础上构建一些东西来学习，因为如果想提高你的 Vue 开发技术
阅读全文
摘要：系统开发中按钮级权限控制也是非常重要的功能之一，可以严格控制不同角色用户所拥有的功能权限。 自定义v-permission指令 首先可以通过vue的自定义指令来控制按钮（div，link也阔以）等的显示与否以及是否禁用状态。具体可查看官方文档vue自定义指令。 /** * 定义vue permiss
阅读全文
摘要：目前Angular有7个版本，分别为：Angularjs、Angular2、Angular4、Angular5、Angular6、Angular7、Angular8。下面本篇文章就来给大家介绍一下，希望对大家有所帮助。 版本1 Angularjs是一款由Google维护的开源JavaScript库，
阅读全文
摘要：前言 本文分享 12 道 vue 高频原理面试题,覆盖了 vue 核心实现原理,其实一个框架的实现原理一篇文章是不可能说完的,希望通过这 12 道问题,让读者对自己的 Vue 掌握程度有一定的认识(B 数),从而弥补自己的不足,更好的掌握 Vue 1. Vue 响应式原理 核心实现类: Observ
阅读全文
摘要：我们不愿过着那种一眼看到头的人生，然而现实情况却似乎已经把未来摆在了我们的眼前。本期视频从初入社会、30 岁以及 40 岁这三个程序员的人生阶段，去全方位地描述程序员职业现状和关键挑战。 都说考上公务员后在机关事业单位，每天都做着差不多重复的工作，似乎从刚入职的那天起就能看到自己的退休时的样子。这样
阅读全文
摘要：前言 每个框架都不可避免会有自己的一些特点，从而会对使用者有一定的要求，这些要求就是主张，主张有强有弱，它的强势程度会影响在业务开发中的使用方式。 一、Angular，它两个版本都是强主张的，如果你用它，必须接受以下东西： 必须使用它的模块机制 必须使用它的依赖注入 必须使用它的特殊形式定义组件（这
阅读全文
摘要：Flutter动画中用到的基本概念 Flutter动画中有4个比较重要的角色：Animation、Controller、Curve、Tween，先来了解一下这四个角色 1.1 Animation Animation是Flutter动画库中的核心类，用于插入指导动画的值 Animation对象知道动画
阅读全文
摘要：1. 渲染项目列表时，“key” 属性的作用和重要性是什么？ 渲染项目列表时，key 属性允许 vue 跟踪每个 Vnode。key 值必须是唯一的。 如果没有使用 key 属性，并且列表的内容发生了改变（例如对列表进行排序），则虚拟 DOM 宁愿使用更新的数据来修补节点，来反映更改，而不是上下移动
阅读全文
摘要：性能和渲染（Render）正相关 react 基于虚拟 DOM 和高效 Diff 算法的完美配合，实现了对 DOM 最小粒度的更新。大多数情况下，react 对 DOM 的渲染效率足以我们的业务日常。但在个别复杂业务场景下，性能问题依然会困扰我们。此时需要采取一些措施来提升运行性能，其很重要的一个方
阅读全文
摘要：9月份开始，使用了react16.8的新特性react Hooks对项目进行了重构，果然，感觉没有被辜负，就像阮一峰老师所说的一样，这个 API 是 React 的未来。 Hooks React Hooks是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state
阅读全文
摘要：在 Thinkjs 的用户群里，经常有开发者提出需要对源码进行加密保护的需求。我们知道 JavaScript 是一门动态语言，不像其他静态语言可以编译成二进制包防止源码泄露。所以就出现了 pkg、nexe 之类的工具，支持将 js 代码连同 Node 一块打包成一个可执行文件，一来解决了环境依赖的问
阅读全文
摘要：众所周知， react 是通过管理状态来实现对组件的管理，而setState是用于改变状态的最基本的一个方法，虽然基础，但是其实并不容易掌握，本文将结合部分源码对这个方法做一个相对深入的解析。 基本用法 首先官方文档给出的，它的基本API: // 接受2个参数，updater 和 callback
阅读全文
摘要：一、安装xlsx和filesaver npm install --save xlsx file-saver 二、在表格组件中引入安装的2个文件 import FileSaver from "file-saver"; import XLSX from "xlsx"; 三、html结构 <el-tabl
阅读全文
摘要：基本代码 <template> <div> <div v-show="source"> <div ref="content1"> <img title="退出全屏" :src="fullScreenRecoverImg" alt="缩小" v-show="close" @click="exitFul
阅读全文
摘要：对于一个前端应用，或者说是一个 Node 应用，在 CICD pipeline 中，无论是构建，测试，部署，其中必不可少的环节就是依赖安装: npm i。 npm i 不仅是必不可少的环节，而且很可能也是耗时最长的一个环节。 打蛇打七寸，优化应该从瓶颈处开始，如果能从依赖安装下手，将能极大地缩短部署
阅读全文
摘要：代码 模板文件 <div nz-col [nzSpan]="3"> <!-- 设置为 display: none ,因为 input看上去太丑 --> <input type="file" style="display: none" (change)="fileInputChange(fileInp
阅读全文
摘要：一、npm 1.npm是随同Nodejs一起安装的包管理工具。2.安装 npm install npm -g npm -v 测试是否成功安装 3.使用淘宝镜像(cnpm命令) npm install -g cnpm --registry=https://registry.npm.taobao.org
阅读全文
摘要：本文面向对象是有一定vue.js编程经验的开发者。如果有人需要vue.js入门系列的文章可以在评论区告诉我，有空就给你们写。 对大部分人来说，掌握Vue.js基本的几个API后就已经能够正常地开发前端网站。但如果你想更加高效地使用Vue来开发，成为Vue.js大师，那下面我要传授的这五招你一定得认真
阅读全文
摘要：一个vue的小demo <template> <div>price: {{price}}</div> <div>total: {{price * quantity}}</div> <div>totalPriceWithSale: {{totalPriceWithSale}}</div> </temp
阅读全文
摘要：根据在项目的使用，发现有以下问题需要优化： withAxios导出的接口方法对象对编辑器来说是不透明的，所以代码提示功能缺失。 同一个方法调用多次，如何保证组件总是获取到最后一次的返回信息。 根据以上问题，采用了以下解决方案： 使用typescript的泛型解决。 调用同一个方法时，取消掉上次未完成
阅读全文
摘要：canvas <canvas> 标签是 html 5 中的新标签。 <canvas> 标签只是图形容器，您必须使用脚本来绘制图形。 canvas标签本身是没有绘图能力的，所有的绘制工作必须在 JavaScript 内部完成。 使用canvas绘图有几个必要的步骤： 获取canvas元素 通过canv
阅读全文
摘要：添加过渡效果的方法： 在 css 过渡和动画中自动应用 class 可以配合使用第三方 css 动画库，如 Animate.css 在过渡钩子函数中使用 JavaScript 直接操作 DOM 可以配合使用第三方 JavaScript 动画库，如 Velocity.js 1、单组件或子元素过渡，使用
阅读全文
摘要：1、直接从npm打开文档 如果我们可以直接使用npm跳转到软件包的文档怎么办？ npm home package-name # 例如： npm home react # 将在浏览器中打开reactjs.org 2、打开bug页面 为了以防万一，我们想在程序包上提交一个错误。 npm bugs pac
阅读全文
摘要：reselect是什么？ reselect是配合redux使用的一款轻量型的状态选择库，目的在于当store中的state重新改变之后，使得局部未改变的状态不会因为整体的state变化而全部重新渲染，功能有点类似于组件中的生命周期函数shouldComponentDidUpdate，但是它们并不是一
阅读全文
摘要：MVC（Model View Controller） Model：根据APP文档，model包括数据和操作数据的业务逻辑。View：view通常是UIKit控件的集合，不能直接引用model，并且视图本身没有任何业务逻辑。Controller：controller协调model和view之间的所有交
阅读全文
摘要：安装 更新 npm 至 >= @5.2.0 ，就会自动安装npx ；可以通过 which npx 来查看其绝对路径 ；如果由于某种原因它不可用，请按照以下说明安装或更新它即可： npm install -g npx 存在价值 多年来，npm 生态系统越来越倾向于将工具安装为项目本地 devDepen
阅读全文
摘要：1. jQuery 效果 - slideDown() 方法 定义和用法 slideDown() 方法通过使用滑动效果，显示隐藏的被选元素。（被选元素的高度发生变化） $(selector).slideDown(speed,callback) speed 可选。规定元素从隐藏到可见的速度（或者相反）。
阅读全文
摘要：常见的瀑布流实现大部分只适用于子块尺寸固定或内部有图片异步加载的情况。 而对于子块有图片这种可能引起尺寸变化的情况，通常的做法是写死图片高度，或检测内部的 img 元素从而在 onload 事件中进行重排。 由于我们业务中尺寸变化情况更为复杂，如子块本身异步初始化、内部数据异步获取，且这种尺寸变化时
阅读全文
摘要：插件下载地址及文档说明 1.引入必要的js和css核心文件 <link rel="stylesheet" href="../css/cropper.css"> <script src="../js/cropper.js"></script> <script src="https://cdn.stat
阅读全文
摘要：需求： 在小程序中使用canvas组件绘制地铁图，地铁图包括地铁线路、站点图标、线及站点名称文字，绘制元素为线、圆、图片、文字。 支持拖动平移和双指缩放。 问题： 小程序中的canvas性能有限，特别在交互的过程中不断触发重绘会引发严重卡顿。 基本实现 在不考虑优化的情况下，先说说如何实现绘制和交互
阅读全文
摘要：这几年vue.js成为前端框架中最火的一个。越来越多的网站前端开始采用vue.js开发。是开源世界华人的骄傲，其作者是我国尤雨溪。为了给个人开发提供更多的机遇打造出门槛低，成本低，跨设备和多平台的Vue.js. Vue.js是什么？ Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue
阅读全文
摘要：一：理解 babel之配置文件.babelrc 基本配置项 1. 什么是babel? 它是干什么用的？ ES6是2015年发布的下一代JavaScript语言标准，它引入了新的语法和API，使我们编写js代码更加得心应手，比如class，let,for...of promise等等这样的，但是可惜的
阅读全文
摘要：在使用vue开发项目的时候，经常会遇到的一个问题就是：图片加载不出来。下面是我总结的几种图片加载不出来的情况及解决办法。 一、项目打包完成后，打开整体空白 1、路径问题 原因 在vue+webpack的项目中，项目打包之后的css和js的引用路径是绝对路径，项目部署之后会将静态当成根目录，就造成了文
阅读全文
摘要：如果你已经是编写 Angular 应用的”老手“，可能会觉得这篇文章介绍的这些特性自己肯定都很熟悉。但事实未必如此，不信的话等你看完再说。 1. Title Title 标签是一个 html 元素，用于指定网页标题。Title 标签作为给定结果的可点击标题，显示在搜索引擎结果页面（SERP）上。它们
阅读全文
摘要：JavaScript在2017年被IBM评为最值得学习的编程语言之一，自然而然它的流行度快速上升，并一直持续。这也促使了一个活跃的生态系统的生成以及与之相关的技术和框架的发展。 如今诞生了非常多的框架和库，如果对每一个框架没有一个大致的了解，恐怕很难抉择。如果你正在尝试选择一个合适的JavaScri
阅读全文
摘要：MongoDB 安装 安装文件下载地址：[https://www.mongodb.com/download-center/community] Windows 平台安装 MongoDB：https://www.runoob.com/mongodb/mongodb-window-install.htm
阅读全文
摘要：用css实现一个rate评分 ❗ 核心代码也就三行 效果图 原理 梳理如下： 去找个好看的iconfont，[Iconfont-阿里巴巴矢量图标库]；借用5个radio单选框，把默认样式都去掉，显示默认的星星；用checked伪类监听用户选中✅，由默认的星星变成高亮的星星；然后配合~兄弟操作符把当前
阅读全文
摘要：在做项目时，有时我们需要让 input 聚焦，为了让用户更好的使用。 让 input 聚焦 所有的浏览器都有一个内置的方法，让 input 聚焦。首先，我们需要获取元素。 在原生 js 中，我们可以使用下面方式来获取元素： <form> <input id="email" /> </form> co
阅读全文
摘要：能够向组件添加动态类名是非常强大的功能。它使我们可以更轻松地编写自定义主题，根据组件的状态添加类，还可以编写依赖于样式的组件的不同变体。 添加动态类名与在组件中添加 prop :一样简单。无论classname的计算结果是什么，都将是添加到组件中的类名。 当然，对于vue中的动态类，我们可以做的还有
阅读全文
摘要：介绍 事件是用户或浏览器自身执行的某种行动（如click、mousemove等）。而处理对应事件的程序称为事件处理程序（或事件监听器）。 html事件处理程序 通过在html标签中设置与相应事件处理程序同名的属性来指定事件处理程序的方法被称之为 HTML事件处理程序。如下面这段代码： <!DOCTY
阅读全文
摘要：看一下以下几个单选题，正确的输出是什么呢？ (1) var p = new Promise((resolve, reject) => { reject(Error('The Fails!')); }); p.catch(error => console.log(error.message)); p.
阅读全文
摘要：Node.js 是什么 传统意义上的 JavaScript 运行在浏览器上，这是因为浏览器内核实际上分为两个部分:渲染引擎和 JavaScript 引擎。前者负责渲染 html + css，后者则负责运行 JavaScript。Chrome 使用的 JavaScript 引擎是 V8，它的速度非常快
阅读全文
摘要：No1.语法和类型 1.声明定义 变量类型：var，定义变量；let，定义块域(scope)本地变量；const，定义只读常量。变量格式：以字母、下划线“_”或者$符号开头，大小写敏感。变量赋值：声明但未赋值的变量在使用时值为undefined，未声明的变量直接使用会抛异常。未赋值变量作计算：结果为
阅读全文
摘要：正则表达式已经成为程序员的必备工具。几乎所有流行的编程语言都支持正则表达式，原因如下：正则表达式为开发人员提供了强有力的工具，使之能快速执行需要几十行代码才能完成的任务。 本文主要研究前端开发人员经常要面对的六大文本处理和操作任务，并进一步了解正则表达式如何简化这一过程。但也只是触及了正则表达式潜力
阅读全文
摘要：JavaScript 构造函数的继承 继承是 OO 语言中的一个最为人津津乐道的概念。许多 OO 语言都支持两种继承方式：接口继承和实现继承。接口继承只继承方法签名，而实现继承则继承实际的方法。如前所述，由于函数没有签名，在 ECMAScript 中无法实现接口继承。ECMAScript 只支持实现
阅读全文
摘要：开始看本文之前，我希望读者朋友们知道我在很大程度上是一位 TypeScript 粉丝。在我的前端 react 项目和各种后端 Node 工作里，所使用的主要编程语言都是 TypeScript。我是这条船上的人，但也确实有一些疑惑，想在这篇文章中讨论一下。到目前为止，我已经使用 TypeScript
阅读全文
摘要：XSS的中文名称叫跨站脚本，是WEB漏洞中比较常见的一种，特点就是可以将恶意html/JavaScript代码注入到受害用户浏览的网页上，从而达到劫持用户会话的目的。XSS根据恶意脚本的传递方式可以分为3种，分别为反射型、存储型、DOM型，前面两种恶意脚本都会经过服务器端然后返回给客户端，相对DOM
阅读全文
摘要：简介 WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。 现在，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询
阅读全文
摘要：很多人都喜欢 TypeScript。它“解决”了 js 的许多问题，是 js 的一个“超集”，它将使代码易于阅读。有很多使用 TypeScript 的理由，但是我将给您 7 个不使用 TypeScript 的理由。 TypeScript 有风险 TypeScript 添加类型定义并在编译时检查类型，
阅读全文
摘要：我喜欢在js中更改函数执行上下文的指向，也称为 this 指向。 例如，咱们可以在类数组对象上使用数组方法： const reduce = Array.prototype.reduce; function sumArgs() { return reduce.call(arguments, (sum,
阅读全文
摘要：这次主要记录有关前端截图和拼图等处理。 缘由：接了一个活动需求，要求页面打开之后，可以长按触发保存图片，并且图片下方需要带上图和二维码的内容，以方便图片分享到朋友圈后可以长按识别二维码打开页面。（有时候纯分享页面链接到朋友圈，好友未必会点进去，图片的分享方式比点链接高一些吧~） 接到需求后 技术预研
阅读全文
摘要：请教大家一个问题：什么特性让该编程语言更加优秀? 个人见解：当该特性可以组合多个其他语言特性时。 JavaScript 中的for...of语句就是这种情况，可从ES2015开始使用。 for...of可以迭代数组，类似数组的对象以及通常所有可迭代的对象（map，set，DOM集合）。 接下我们通过
阅读全文
摘要：ECMAScript 2020 是我们最喜欢的编程语言的第 11 版，其中包含一些新功能。有些是小特性，但有些将会有可能永远改变我们编写 JavaScript 的方式。 Dynamic import() ES2015 引入了 static import 语法。现在你可以从一个模块导出变量，然后将其导
阅读全文
摘要：Iterator Iterator 是 ES6 引入的一种新的遍历机制，迭代器有两个核心概念： 迭代器是一个统一的接口，它的作用是使各种数据结构可被便捷的访问，它是通过一个键为Symbol.iterator 的方法来实现。 迭代器是用于遍历数据结构元素的指针（如数据库中的游标）。 迭代过程 迭代的过
阅读全文
摘要：说起来css动画是一个很尬的事，一方面因为公司用css动画比较少，另一方面大部分开发者习惯了用JavaScript来做动画，所以就导致了许多程序员比较排斥来学习css动画（至少我是），但是一个不懂css动画的前端工程师不能称之为掌握css3，其实当你真正学习css动画之后，你会被它的魅力所吸引的，它
阅读全文
摘要：前言 自从前端三大框架react、vue、Angular面世以来，前端开发逐渐趋向规范化、统一化，大多数时候新建前端项目，首先想到使用的技术一定是三大框架之一，框架给前端开发带来了极大的便利和规范，但是由于这三大框架都是js驱动，在js没有解析加载完成之前页面无法展示，会处于长时间的白屏，带来了一定
阅读全文
摘要：在软件开发中，研发效率永远是开发人员不断追求的主题之一。于公司而言，在竞争激烈的互联网行业中，产出得快和慢也许就决定着公司的生死存亡；于个人而言，效率高了就可以少加班，多出时间去提升自己、发展爱好、陪伴家人，工作、生活两不误。 提升效率的途径，无外乎就是「方法」和「工具」。以一个开发者的思维来想，就
阅读全文
摘要：效果 效果图如下 实现思路 使用box-shadow属性写几个圆，将这些圆错落的组合在一起，形成云朵图案 after伪元素写下面的投影样式 before伪元素写黄色闪电的样式 dom结构 用两个嵌套的div容器就可以了，父容器来控制图标显示的位置，子容器用来写乌云的样式。而阴影和闪电的样式都用伪元素
阅读全文
摘要：一、什么是定位 改变元素在页面中的位置 二、定位的分类 1、普通流定位 2、浮动定位 3、相对定位 4、绝对定位 5、固定定位 三、普通流定位 页面中元素的默认定位方式，默认文档流，从上往下，从左往右 1、每个元素都在页面有自己的空间 2、每个元素都是从父元素的左上角开始显示 3、块级元素都是按照从
阅读全文
摘要：如果你看了很多篇文章，对 flexible 的解决方案一直还有一种不太了解的朦胧感觉，那么这篇文章会帮你从背景角度一步一步解析为何会有 flexible 这套解决方案，以及这套解决方案是如何作用的。 为什么不能直接用 px 进行布局 设计师基于 iphone6（375px 逻辑像素） 的页面尺寸给了
阅读全文
摘要：在互联网的时代中，网站建设其实是一个非常常见的事情了，几乎每一家企业都希望在互联网上，能够留下属于自己一个足迹，想要拥有一个可以展示自家产品的平台，但是在网站建设的过程中，真的有把每一个过程都做的很好嘛?是达到了自己想要的效果嘛?下面就为一些新手分享一下在网站建中比较常见的问题。 问题一：域名问题
阅读全文
摘要：Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。任何一个容器都可以指定为Flex布局。 #box{ display: flex; width: 500px; he
阅读全文
摘要：注意：这篇文章描述了一种我们仍需要测其试性能影响的实验技术。 它可能最终会成为一种有用的工具，也有可能成为不被推荐的做法。 无论哪种方式，它对我们来说很有吸引力！ 只要我一直工作在 Web 上，就需要一种简单的 html 驱动方式，将另一个文件的内容直接包含在页面中。 例如，我经常希望向页面添加额外
阅读全文
摘要：基于响应式开发网站，除了页面的布局是我们设计的重点，网站中显示的图片和文字也是我们不能轻视的内容。 1 响应式图片显示内容设计 真正具有响应性的Web设计是完全调整网站以满足访问者的设备。我们需要在响应式布局的页面上传送最佳的、前后联系的图片尺寸。如果是背景图片，我们可以准备多张不同尺寸的图片，然后
阅读全文
摘要：前言 文字是网页中最基本的元素，一般我们在网页上都是展示的静态文字，但是就效果来说，还是比较枯燥的。文字淡入淡出的动画效果在项目中非常实用，如果有某些关键的文字，可以通过这种动态的效果来提醒用户阅读。 动态效果图 这个 Demo 是不断重复地设置文字的大小和透明度，这些英文字母也是我自己利用 HT
阅读全文
摘要：1、绝对定位 position：absolute； 绝对定位指的是通过规定html元素在水平和垂直方向上的位置来固定元素，基于绝对定位的元素不会占据空间。绝对定位的位置声明是相对于已定位的并且包含关系最近的祖先元素。如果当前需要被定为的元素没有已定位的祖先元素作为参考值，则相对于整个网页。 <!DO
阅读全文
摘要：网站性能优化对于大型网站来说非常重要，一个网站的访问打开速度影响着用户体验度，网站访问速度慢会造成高跳出率，小网站很好解决，那对于大型网站由于栏目多，图片和图像都比较庞大，那该怎么进行整体性能优化呢？本文为你提供一份大型php网站性能和并发访问优化方案. 一、大型网站性能提高策略： 大型网站，比如门
阅读全文
摘要：在许多谈及网站或Web应用开发的场合，开发人员最为关心的莫过于跨浏览器的兼容性问题。如您所知，诸如：计划、设计、测试等大多数工作都可以在网站的开发阶段顺利完成。但是跨浏览器兼容性问题则会持续到网站上线之后。例如：也许您已经在Mozilla Firefox、Internet Explorer、以及Ch
阅读全文
摘要：老板说 , 页面打开速度过慢? 页面加载性能不达标? 下面我们来看下各个大厂和团队的秒开经典方案，有没有一款适合你去探索？本页面会列举和总结偏向与客户端结合的 hybrid 秒开方案，纯前端方案也会部分提及。 常用的加速方法 说起 H5 性能优化方案，是个老生常谈的话题，通常的 web 优化方法，基
阅读全文
摘要：css transitions 提供了一种在更改css属性时控制动画速度的方法。 其可以让属性变化成为一个持续一段时间的过程，而不是立即生效的。比如，将一个元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用 CSS transitions 后该元素的颜色将逐渐从白色变为黑色，按照一定的曲线速率
阅读全文
摘要：css 值的解析 css 中的声明，由 CSS 的特性和值，中间以 ":" 隔开组成。 我们可以使用 CSS 选择器，为选中的元素设置需要的样式。 在介绍 CSS 的特性和值的时候，特地的提到了浏览器应该怎样处理错误的值 -- 应该将包含错误值，不符合句法的值的声明直接忽略。然而有些浏览器却按照自己
阅读全文
摘要：瀑布流 又称瀑布流式布局，是比较流行的一种网站页面布局方式。即多行等宽元素排列，后面的元素依次添加到其后，等宽不等高，根据图片原比例缩放直至宽度达到我们的要求，依次按照规则放入指定位置。 为什么使用瀑布流 瀑布流布局在我们现在的前端页面中经常会用的到，它可以有效的降低页面的复杂度，节省很多的空间，对
阅读全文
摘要：很多人都知道要减少浏览器的重排和重绘，但对其中的具体原理以及如何具体操作并不是很了解，当突然提起这个话题的时候，还是会一脸懵逼。希望大家可以耐着性子阅读本文，仔细琢磨，彻底掌握这个知识点！ 网页生成过程： html被html解析器解析成DOM 树 css则被css解析器解析成CSSOM 树 结合DO
阅读全文
摘要：最近在做知识体系的复盘，在复盘的时候尽可能的查漏补缺。关于@import和link引入样式的区别网上有很多种说法。大致有如下几种，不过这其中会有我存疑的地方，我们可以一起来探讨一下。 区别 1.从属关系区别 @import是 css 提供的语法规则，只有导入样式表的作用；link是html提供的标签
阅读全文
摘要：Sass的系统需求 操作系统 - Sass是独立于平台的 浏览器支持 - Sass在Edge/IE（来自IE 8）、Frefox、Chrome、Safari、Opera中工作 编程语言 - Sass基于Ruby Sass官方网站：https://sass-lang.com/ 安装Sass 当我们在命
阅读全文
摘要：在css3中新增了width的属性值：max-content;min-content和fit-content、fill-availablea，用来实现以内容为主的尺寸计算方式。 分别介绍一下这三个属性的意义： 1.fill-available的意义——自动填满剩余的空间就是有个div没有任何样式的时
阅读全文
摘要：Less 提供了css @import css规则的几个扩展，以提供更多的灵活性来处理外部文件。 语法： @import (keyword) "filename"; 以下是导入指令的相关详情： reference，使用较少的文件但不输出。 inline，在输出中包含源文件，但不对其进行处理。 les
阅读全文
摘要：做渗透测试有一段时间了，发现登录方面的问题特别多，想做个比较全面点的总结，我尽量写的全面点又适合新人，这篇文章可能需要点想象力，因为问题比较多我不可能去海找各种例子举出来，不过好在会上网就遇到过各种登录框，所以大家都比较了解 web登录认证方面，从子功能上可以划分为登录框登录、忘记密码（密码重置）、
阅读全文
摘要：css3 animation模块，其中animation-timing-function 和 transition-timing-function两个属性来控制动画速度分别提供了ease，liner，ease-in，ease-out，ease-in-out几个预设速度，还可以同过cubic-bezi
阅读全文
摘要：前端部署其实也算前端工程化的一部分，这篇博客是我结合实际工作经验和业余探索，总结出的前端部署的一些尝试。一方面自己有所记录，另一方面也能给大家带来些启示。 部署到七牛云 部署到阿里云OSS，部署到腾讯云OSS 部署到腾讯云服务器并使用nginx做反向代理 总结与反思 前提条件： 通过npm run
阅读全文
摘要：我们将使用纯css打造一些切换开关并使其拥有类似于checkbox的用户体验。 很多时候我们都需要用户通过勾选/取消checkbox来表明他们对一些问题的答案。我们设置了一个标签，一个checkbox，并在提交表单后获取checkbox值，以查看用户是否已经选中或取消选中该checkbox。我们都知
阅读全文
摘要：这是一个纯粹利用css所做出来的效果，这个效果说穿了就是一个图像处理的原理，做法跟Photoshop里头的几乎一模一样，只是一个用图层和色版来制作，一个则是用css（把div当成图层思考就好了）。 从PhotoShop开始 一开始我们来玩Photoshop，会比直接写CSS来得容易理解（没有Phot
阅读全文
摘要：转换任意颜色为RGBA格式 前端编程过程中，经常会遇到要把各种颜色格式（比如 “red”、“#F00”、“#FF0000”等）转换成RGBA格式，搜索网络也可以发现一堆的解决方案： 此处介绍一种方法： 通过canvas的像素获取方法，来获取任意颜色的RGBA数值。大致步骤如下： 首先创建一个尺寸为1
阅读全文
摘要：嵌套规则 Sass 允许我们将以与html相同的方式嵌套css选择器，将一套 css 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器，比如： // .scss语法 #main { width: 97%; p, div { font-size: 2em; a { font-weight
阅读全文
摘要：背景 相信大家在平时的需求当中，都会遇到一些动画需求，那么大家又是如何抉择实现方式呢？这里我大概分为4种情况，gif图/animation/ae导出骨骼动画/ae导出canvas 1. gif图硬核解决 没错！最简单的就是让我们的设计师直接给我们gif图，那么在我们前端看来就是一张图片的问题，只需控
阅读全文
摘要：<input> type 类型为 file 时使得用户可以选择一个或多个元素以提交表单的方式上传到服务器上，或者通过 JavaScript 的 File API 对文件进行操作 . 常用input属性： accept：指示file类型，没有时表示不限制类型，填入格式后选择文件时只能看见被允许的文件
阅读全文
摘要：Node 项目在项目根目录中名为 package.json 的文件中跟踪依赖关系和元数据。这是你项目的核心。它包含名称、描述和版本之类的信息，以及运行、开发以及有选择地将项目发布到 npm 所需的信息。 在本教程中，我们将： 了解 package.json 与项目之间的关系 确定重要字段和元数据 了
阅读全文
摘要：浏览器的世界里本没有粘性定位事件。 然而，网页开发中，元素若使用了粘性定位 position:sticky ，常常还需要一个粘性定位事件，比如，外卖菜单。 粘性定位 元素的位置属性（position）设置为 sticky 时，即称为粘性定位。一个元素 <div> 应用了如下 css 声明，那么该元素
阅读全文
摘要：什么是html语义化 说html语义化就要先说说HTML到底负责的什么？下面摘自维基百科： 超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。HTML元素是构建网站的基石。HTML允许嵌入图像与对象，并且可以用于创建交互式表单
阅读全文
摘要：box-shaodw 在我们的工作中使用以及越来越多，伴随阴影的动画或多或少都有一点。假设，我们有下面这样一个盒子： div { width: 100px; height: 100px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } 希望 hover 的时候
阅读全文
摘要：Web前端就业前景怎么样？整体薪资待遇好不好？近几年IT业可谓是发展火热，而且新出了很多职业。在这众多的新生职业中，备受瞩目的当属Web前端工程师，Web前端在IT行业真正受到重视的时间不超五年，因此众人越来越关心Web前端的发展前景。毕竟学习的目的主要就是为了就业，前端开发工程师的薪资待遇是大家比
阅读全文
摘要：混合指令（Mixin）用于定义可以重复使用的样式，避免了使用无语意的 class。它可以包含所有的 css 规则，绝大部分 Sass 规则，甚至通过功能引入变量，输出多样化的样式。 混合指令的用法是在 @mixin 后添加名称与样式 。 混合也需要包含选择器和属性，甚至可以用 & 引用父选择器。 /
阅读全文
摘要：一、使用内容安全策略 完善的内容安全策略(CSP)是前端应用程序安全的基石。CSP是浏览器中引入的一种标准，用于检测和缓解某些类型的代码注入攻击，包括跨站点脚本（XSS）和点击劫持。 <meta http-equiv="Content-Security-Policy" content="defaul
阅读全文
摘要：为了消除各浏览器对css默认的设置，保持网页在各浏览器中的外观保持一致，初始化css就显得非常必要了！很多时候出现的样式不兼容问题，都可以通过css初始化代码来解决。 1.最耗资源的，最简单的 * { padding: 0; margin: 0; border: 0; } 2.选择性初始化举例（综合
阅读全文
摘要：前言 TCP/IP协议栈是Linux内核的重要组成部分和网络编程的基石，虽然Linux和BSD有很大的联系，但是对于某些Socket选项和内核操作仍然存在差异，因此文中适用场景均为仅Linux。 《UNIX网络编程》是已故UNIX网络专家W. Richard Stevens博士(1951-1999)
阅读全文
摘要：原则上API接口设计一般出现在开发的详细设计中，但是随着诸多公司建立开放平台，产品经理也逐渐需要能理解API接口，尤其是做平台性的产品，还要学会定义接口。本文就关于产品经理在设计接口中需要定义什么、需要注意什么来展开陈述。 看到人人都是产品经理社区已经有关于API接口的相关介绍，因此本文就不做过多的
阅读全文
摘要：近年来，Web 应用在整个软件与互联网行业承载的责任越来越重，软件复杂度和维护成本越来越高，Web 技术，尤其是 Web 客户端技术，迎来了爆发式的发展。 1.用Node做中间层的前端工程化方案2.webpack、Rollup 这样的打包工具；Babel、Postcss 这样的转译工具3.前端三架马
阅读全文
摘要：作为当下最热门的技术创新和研究方向之一，人工智能在备受关注的同时，也被炒作和误解，行业出现了很多泡沫。不少人质疑，人工智能凭借概念炒作和出色的营销吸引了资本市场的关注。热潮褪去之后，AI 落地、商业化还有多大的空间？ AI 从炒作变成现实 近日，Medium 的一篇 文章 中提到，到 2050 年，
阅读全文
