10 2020 档案
摘要：在软件开发中，任务运行器的好处是不言而喻的。它们可以帮助自动运行常见的冗长的任务，让你可以专注于更重要的事情中，比如敲出很棒的代码。说的严肃点，自动运行一些比如图片压缩、代码压缩、单元测试以及更多的任务的技能，简直就是节省时间的利器。 对于很多前端开发者而言，时下使用最多的任务管理器就是Grunt了
阅读全文
摘要：我们知道一个字节可表示的范围是 0 ～ 255（十六进制：0x00 ～ 0xFF）， 其中 ASCII 值的范围为 0 ～ 127（十六进制：0x00 ～ 0x7F）；而超过 ASCII 范围的 128～255（十六进制：0x80 ～ 0xFF）之间的值是不可见字符。 ASCII（American
阅读全文
摘要：变量提升 var声明的变量会提升到函数或全局作用域顶部 简单例子 // 全局作用域变量提升例子 console.log(b) // undefined var b = 4 // 提升之后是这样 var b; console.log(b) // 所以 b 没有值 b = 4 // 函数作用域中变量提升
阅读全文
摘要：方法一：使用Array.isArray()方法和array.length属性 可以通过array.isarray()方法检查该数组是否确实是一个数组。如果作为参数传递的对象是数组，则此方法返回true。它还检查数组是否为“undefined”或为“null”。 使用array.length属性检查数
阅读全文
摘要：前言 我们写程序的时候会经常遇到显示进度的需求，如加载进度、上传进度等。最常见的实现方式是通过记录 已完成数量(loadedCount) 和 总数量(totalCount)，然后算一下就能得到进度了。这种方式简单粗暴，容易实现，但不好扩展，必须有个地方维护所有 loadedCount 和 total
阅读全文
摘要：JavaScript 私有类字段和隐私需求 在过去，JavaScript 没有保护变量不受访问的原生机制，当然除非是典型闭包。 闭包是 JavaScript 中许多类似于私有模式（如流行的模块模式）的基础。但是，近年来 ECMAScript 2015 类被使用后，开发人员感到需要对类成员的隐私进行更
阅读全文
摘要：这次记录的是昨晚一个想法：把excel内容复制到剪切板并转成自己想要的json格式，核心是要把excel内容转json，这部分主要看excel的格式和json如何业务的映射，不展开。倒是通过实践，收获了剪切板的一些知识点。 注：因为只是为了自己的小工具实现，不考虑兼容，在chrome下实践 整个步骤
阅读全文
摘要：首先我们要了解什么是正则表达式？ 正则表达式是构成搜索模式（search pattern）的字符序列。当您搜索文本中的数据时，您可使用搜索模式来描述您搜索的内容。正则表达式可以是单字符，或者更复杂的模式。正则表达式可用于执行所有类型的文本搜索和文本替换操作。 创建一个正则 1、通过new创建正则 v
阅读全文
摘要：在一些网站的公告栏有这样的一个效果，如果有多条公告就会出现上下滚动效果【也叫做跑马灯效果】，这是如何实现的呢？下面通过基于jquery的扩展,实现模拟Marquee无缝滚动效果,并能控制滚动的速度。 html: <style> .scroll{ height: 40px; line-height:
阅读全文
摘要：$(document).ready() 和 window.onload 在表面上看都是页面加载时我们就去执行一个函数或动作，但是在具体的细节上$(document) ready()和window onload还是有区别的。 最基本的区别 window.onload$(document).ready(
阅读全文
摘要：如果想要将一个字符串中的数字给提取出来，这要怎么做？ 在JavaScript中可以使用match()方法将字符串中的数字提取到数字数组中。此方法将正则表达式作为参数，并从字符串中提取数字。 使用match()方法提取数字分两种情况： 1、不考虑小数 此时可以使用正则表达式（/\d+/g）来从字符串中
阅读全文
摘要：什么是 Express 中间件？ 中间件在字面上的意思是你在软件的一层和另一层中间放置的任何东西。 Express 中间件是在对 Express 服务器请求的生命周期内所执行的函数。 每个中间件都可以访问其被附加到的所有路由的 HTTP 请求和响应。 另外，中间件可以终止 HTTP 请求，也可以用
阅读全文
摘要：jsBridge 的起源 近些年，移动端普及化越来越高，开发过程中选用 Native 还是 H5 一直是热门话题。Native 和 H5 都有着各自的优缺点，为了满足业务的需要，公司实际项目的开发过程中往往会融合两者进行 Hybrid 开发。Native 和 H5 分处两地，看起来无法联系，那么如何
阅读全文
摘要：循环遍历是写程序很频繁的操作，JavaScript 提供了很多方法来实现。这篇文章将分别总结数组和对象的遍历方法，新手可以通过本文串联起学过的知识。 数组遍历 方法一：for 循环 for 循环是使用最多，也是性能优化最好的一种遍历方式。 var arr = ["a", "b", "c"]; for
阅读全文
摘要：起因. 网上找了很多mockjs(是mockjs不是其他的mock插件)环境的配置, 基本全是错的. 生产环境不需要mock, 开发环境有时需要mock有时不需要mock. 可能这个功能点太小了, 导致大家都不在乎. 但是越小的点越有趣味. 一. 要达到的效果 不可以手动注释掉import './m
阅读全文
摘要：前言 new 大家肯定都不陌生，单身没有对象的时候就 new 一个，很方便。那么它在创建实例的时候，具体做了哪些操作呢？今天我们就来一起分析一下。 构造函数 在介绍 new 之前，必须要知道什么是构造函数。 构造函数和普通函数在写法上没有任何区别，当一个函数通过 new Fun() 调用时，就叫做构
阅读全文
摘要：导读 本文主要为三方面的内容： 装饰者模式的概念和使用 Typescript装饰器的使用、执行顺序 编译后的源码分析 学习的目的是对装饰者模式模式有进一步的理解，并运用在自己的项目中；对TypeScript装饰器的理解，更好的使用装饰器，例如在 nodejs web 框架中、 vue-propert
阅读全文
摘要：前言 格林威治时间、世界时、祖鲁时间、GMT、UTC、跨时区、夏令时，这些眼花缭乱的时间术语，我们可能都不陌生，但是真正遇到问题，可能又不那么确定，不得不再去查一查，处理完可能过段时间又忘记。今天，我们彻底来梳理一下它们。 一、GMT 什么是GMT GMT（Greenwich Mean Time），
阅读全文
摘要：Cookie 为 Web 应用程序保存用户相关信息提供了一种有用的方法。例如，当用户访问咱们的站点时，可以利用 Cookie 保存用户首选项或其他信息，这样，当用户下次再访问咱们的站点时，应用程序就可以检索以前保存的信息。 Cookie 是什么鬼 Cookie 是一小段文本信息，伴随着用户请求和页面
阅读全文
摘要：canvas 画布是html5中新增的标签，可以通过js操作 canvas 绘图 API在网页中绘制图像。 百度开发了一个开源的可视化图表库ECharts，功能非常强大，可以实现折线图、柱状图、散点图、饼图、K线图、地图等多种图表。很多项目都有使用过ECharts开发过图表功能。 本实例教程使用原生
阅读全文
摘要：集群：一致性哈希 memcached 本身并不支持集群，为了使用集群，我们可以自己在客户端实现路由分发，将相同的 key 路由到同一台 memcached 上去即可。路由算法有很多，这里我们使用一致性哈希算法。 一致性哈希算法的原理： 一致性哈希算法已经有开源库 hashring 实现，基本用法：
阅读全文
摘要：方法 1：使用 fping 命令检测一个网站是否宕机 fping 命令 是一个类似 ping 的程序，使用互联网控制消息协议（ICMP）的 回应请求报文echo request 来判断目标主机是否能回应。 fping 与 ping 的不同之处在于它可以并行地 ping 任意数量的主机，也可以从一个文
阅读全文
摘要：你了解爬虫是什么吗？你知道爬虫的爬取流程吗？你知道怎么处理爬取中出现的问题吗？如果你回答不出来，或许你真的要好好看看这篇文章了！ 爬虫简介 网络爬虫（Web crawler），是一种按照一定的规则，自动地抓取万维网信息的程序或者脚本，它们被广泛用于互联网搜索引擎或其他类似网站，可以自动采集所有其能够
阅读全文
摘要：我们都有不好的习惯，地球上没有一个人是完美的。作为开发人员，不良习惯会严重影响您的效率，也会影响您周围的人。 Jack Canfield说：“习惯将决定您的未来”。想要成长为一名开发人员，就必须改掉不良习惯。如果您可以做到，效率将大大提高。 让我们看看您应该尽快改掉的坏习惯。 永远说“是” 首先声明
阅读全文
摘要：直播软件的开发，虽然现在很多技术都已经趋向成熟，但是有些东西不是仅仅技术就可以实现的，在考虑到时间、成本、风险、功能稳定性等多种因素的情况下，大部分直播平台开发时都会预留第三方服务的接口来节约开发的成本。 一、第三方服务器 1.CDN 在玩游戏或看电影时经常会出现画面撕裂、卡顿等现象，为了解决网络延
阅读全文
摘要：前言 今天给大家讲讲面试过程当中最长遇到的窘境，也是最能体现一个候选人临场应变能力的地方，那就是当我们在面试的过程当中，遇到的问题回答不上来的时候，该怎么办。 误区 在开始讲解之前，先纠正一个误区，那就是对于一场面试而言，最后的结果好坏并不完全取决于面试当中的问题是否都回答了上来。 能不能录取和是否
阅读全文
摘要：Java 创建于 1995 年，目前有 134861 个网站使用 Java，如 ESPN、SnapDeal、阿里巴巴等。在其 24 年的发展历程中，Java 已经证明了自己是用于自定义软件开发的顶级通用编程语言。Java 广泛应用于科学教育、金融、法律和政府等行业。在下面的饼图中，您可以看到 Jav
阅读全文
摘要：在整个数字货币领域，很多人都知道挖矿，然而，有些人认为挖矿很赚钱，也有人认为挖矿就是个坑。但是对于挖矿而言，其本质是一种加密的计算。 什么是挖矿？ 简单说，挖矿其实就是数字货币发行的一个过程，通过区块链技术对链上数据进行记录，然后进行广播从而获得奖励，那么这个奖励就是新发行的数字货币。 目前，数字货
阅读全文
摘要：Apache网页优化概述 在企业中，部署Apache后只采用默认的配置参数，会引发网站很多问题，换言之默认配置是针对以前较低的服务器配置的，以前的配置已经不适用当今互联网时代为了适应企业需求，就需要考虑如何提升Apache的性能与稳定性，这就是Apache优化的内容 gzip介绍 配置Apache的
阅读全文
摘要：基本配置 # 开启gzip gzip on; # 启用gzip压缩的最小文件，小于设置值的文件将不会压缩 gzip_min_length 1k; # gzip 压缩级别，1-9，数字越大压缩的越好，也越占用CPU时间，后面会有详细说明 gzip_comp_level 1; # 进行压缩的文件类型。J
阅读全文
摘要：编程是一个很有趣、容易的事情，但是编写好的程序可能是一项艰巨的任务。在大多数情况下，我们发现自己绞尽脑汁，试图了解我们撰写的意大利面条代码，或者是因为新添加的次要功能而进行了大量更改，导致产生了很多糟糕的代码。这样的情况或许会降低我们的信心，但事实上，我们可以通过适当的发展实践来解决。这里有7个值得
阅读全文
摘要：何为DAG DAG是Directed Acyclic Graph的缩写，是一种运用拓扑排序的直接图像数据结构。这种数据结构能够在数据压缩中找到最优解，因此在实际中被广泛地运用于数据处理等领域。总体而言，DAG结构中的每个节点通过一个具有特定方向的edge连接在一起，以此来排除任何回路的可能性。因此，
阅读全文
摘要：都知道吃别人嚼过的东西不香，那也得吃，总比饿着强。谁让自己的牙没长全（英语，计算机基础）。七拼八凑组合一下，加上自己的理解。重点还是要多看多学，哪怕一篇文章只吸取了那么一丁点的知识，也要自己加工，形成自己的知识体系。不要当吃瓜群众，囫囵吞枣的看一下，没过几天就忘了，文章是没少看，最后一无所获，回头来
阅读全文
摘要：什么是冷热页？ 在Linux Kernel的物理内存管理的Buddy System中，引入了冷热页的概念。冷页表示该空闲页已经不再高速缓存中了(一般是指L2 Cache)，热页表示该空闲页仍然在高速缓存中。冷热页是针对于每CPU的，每个zone中，都会针对于所有的CPU初始化一个冷热页的per-cp
阅读全文
摘要：很多产品经理在撰写后台的需求文档时会一脸懵，很多时候不知道怎么开始，这篇文章主要根据自己工作中对后台的理解和需求文档撰写经验进行分享。 人员较小的公司，会要求产品经理后台管理和前台界面一起进行撰写。那么，我们在撰写后台需求文档时，需要对于后台有一定的了解。当然，要是技术转型做产品经理，对于这一块可以
阅读全文
摘要：怎么做一名高薪前端工程师？必备哪些技术工具？想要成为一个高薪高职的Web前端工程师并不容易，你不仅需要掌握专业的技能点，还要具备较多的项目经验。为了能够快速的加入到这高薪行列，很多人选择参加培训班，不过你知道优秀的Web前端工程师需要掌握哪些技术工具吗？接下来就给大家一一介绍。 1、JavaScri
阅读全文
摘要：一、web服务器（www服务器） （1）概念 Web服务器是一台使用HTTP协议与客户机浏览器进行信息交流（因此又称为HTTP服务器）、为互联网客户提供服务（信息浏览，下载资源等）的主机。发展趋势：从html到XML、从有线到无线、从无声到有声 1.Linux是架设安全高效Web服务器的操作系统 架
阅读全文
摘要：前言 对代码库而言，架构通常是最重要的方面之一。架构对代码库质量、可维护性和可靠性都有着重要的影响。这也是软件工程中最有争议的一个话题，往往会激起项目贡献者之间的激烈争论，这些争论似乎没有任何潜在的逻辑解决方案，比如“对我们当前项目来说，什么才是好的架构？”这样的问题，很多时候似乎并没有一个明确的答
阅读全文
摘要：网络自动化这个概念自网络问世以来就存在了;就在不久前，由于许多原因(包括网络工程师的抵制)，其采用速度一直很慢。但现在，众多因素共同上演了一场完美风暴，推动企业需要网络自动化工具。 一个因素是，越来越多的网络团队开始感受到在快节奏的数字世界中工作的痛苦，而在数字世界，旧方法根本行不通。通过命令行接口
阅读全文
摘要：1. 添加属性 复制对象的同时，为其添加新的属性。 例子中复制了user对象到userWithPass，并添加了 password 属性。 const user = { id: 110, name: 'Kayson Li'} const userWithPass = { ...user, passw
阅读全文
摘要：转Boolean类型 这个较为常用。 !!'a'//true 通过两个取反，可以强制转换为Boolean类型。 转Number类型 String转化为Number；日期输出时间戳。 +'45'//45 +new Date//13位时间戳 会自动转化为Number类型的。日期取时间戳不用new Dat
阅读全文
摘要：1.异步编程样例 样例： // 等待执行函数 function sleep(timeout) { return new Promise((resolve) => { setTimeout(resolve, timeout) }) } // 异步函数 async function test() { c
阅读全文
摘要：node中间件就是封装在程序中处理http请求的功能。node中间件是在管道中执行。中间件位于客户机/ 服务器的操作系统之上，管理计算机资源和网络通讯。 中间件为主要的逻辑业务所服务，可分为：应用级中间件、路由级中间件、内置中间件、第三方中间件、错误级中间件。 1、应用级中间件 每一个中间件就是调用
阅读全文
摘要：1. Map 接受任何类型的键 如前所述，如果对象的键不是 string 或 symbol，JS 将隐式地将其转换为字符串。 幸运的是，map 的键类型没有问题 const numbersMap = new Map(); numbersMap.set(1, 'one'); numbersMap.se
阅读全文
摘要：一、模块化概念将一个复杂的程序依据一定的规则(规范)封装成几个块(文件), 并进行组合在一起；块的内部数据与实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信。 二、模块化作用为什么要用模块化的JavaScript？因为在实际的开发过程中，经常会遇到变量、函数、对象等名字的冲突，这样就
阅读全文
摘要：一、执行上下文是什么代码运行是在一定的环境之中运行的，这个运行环境我们就成为执行环境，也就是执行上下文，按照执行环境不同，我们可以分为三类：全局执行环境：代码首次执行时候的默认环境函数执行环境：每当执行流程进入到一个函数体内部的时候Eval执行环境：当eval函数内部的文本执行的时候 二、执行上下文
阅读全文
摘要：概述 <canvas>元素用于生成图像。它本身就像一个画布，JavaScript 通过操作它的 API，在上面生成图像。它的底层是一个个像素，基本上<canvas>是一个可以用 JavaScript 操作的位图（bitmap）。 它与 SVG 图像的区别在于，<canvas>是脚本调用各种方法生成图
阅读全文
摘要：最初使用回调函数 由于最初j s官方没有明确的规范，各种第三方库中封装的异步函数中传的回调函数中的参数没有明确的规范， 没有明确各个参数的意义， 不便于使用。 但是node中有明确的规范 node中的的回调模式： 1. 所有回调函数必须有两个参数，第一个参数表示错误，第二个参数表示结果2
阅读全文
摘要：es6新增了一种从数组或者对象中获取指定元素的方式，这种方式就是我们今天要说的解构。 先来说说数组的解构： 在有解构之前呢，我们获取数组中的指定元素通常是根据索引去做的： const arr = [1, 2, 3]; const a = arr[1]; 有了解构之后呢，我们便可以使用如下方式快速的去
阅读全文
摘要：介绍 JavaScript 是一个强大的面向对象编程语言，但是，并不像传统的编程语言，它采用一个以原型为基础的OOP模型，致使它的语法让大多数开发人员看不懂。另外，JavaScript 也把函数作为首要的对象，这可能会给不够熟悉这门语言的开发人员造成更大的困惑。那就是我们决定放在前面作为一个简短前言
阅读全文
摘要：在 TypeScript 中使用联合类型时，往往会碰到这种尴尬的情况： interface Bird { // 独有方法 fly(); // 共有方法 layEggs(); } interface Fish { // 独有方法 swim(); // 共有方法 layEggs(); } functio
阅读全文
摘要：从浏览器控制台到运行 Node.js 的终端，我们到处都会看到错误。本文的重点是概述我们在 js 开发过程中可能遇到的错误类型。 提示：良好的错误提示会导致快速而无痛的发展经历与缓慢而痛苦的发展经历之间的区别。在编写可重用的代码时，请确保自己在编写清晰易懂的错误处理代码。 1. RangeError
阅读全文
摘要：表单校验 Web项目中，登录，注册等等功能都需要表单提交，当把用户的数据提交给后台之前，前端一般要做一些力所能及的校验，比如是否填写，填写的长度，密码是否符合规范等等，前端校验可以避免提交不合规范的表单。 假如我们有一个表单，校验逻辑如下： 用户名不为空 密码长度不低于6位 手机号符合格式 未使用策
阅读全文
摘要：Node可以在不新增额外线程的情况下，依然可以对任务进行并发处理 —— Node.js是单线程的。它通过事件循环（event loop）来实现并发操作，对此，我们应该要充分利用这一点 —— 尽可能的避免阻塞操作，取而代之，多使用非阻塞操作。 node单线程实现高并发原理 众所周知nodejs是单线程
阅读全文
摘要：全局对象 在浏览器JS中，通常window是全局对象，而nodejs中的全局对象是global,所有全局变量都是global对象的属性。 在nodejs中能够直接访问到的对象通常都是global的属性，如console、 process等 全局对象与全局变量 global最根本的作用是作为全局变量的
阅读全文
摘要：查找编程代码中的错误被称为代码调试。调试并不简单。但幸运地是，所有现代浏览器都有内置的调试器。内置的调试器可打开或关闭，强制将错误报告给用户。 通过调试器，您也可以设置断点（代码执行被中断的位置），并在代码执行时检查变量。通常通过 F12 键启动浏览器中的调试器，然后在调试器菜单中选择“控制台”。
阅读全文
摘要：事件循环 三个概念 调用栈，先进后出 宏任务队列（存放宏任务的，队列先进先出） 微任务队列 异步任务又分为宏任务和微任务 宏任务，macrotask，也叫tasks setTimeout setInterval setImmediate (Node独有) requestAnimationFrame
阅读全文
摘要：一、浅拷贝 1、Object.assign(target,source,source...) a、可支持多个对象复制 b、如果source和target属性相同 source会复制target的属性 c、target只能为Object对象 var obj = {a:1,b:2} undefined
阅读全文
摘要：带有if的代码简化 function validation(customer) { if (!customer.email) { return error('email is require') } else if (!customer.login) { return error('login is
阅读全文
摘要：一、先来说说XPATH 1、XPATH 概念 XPath 是一门在 XML 文档中查找信息的语言，可用来在 XML 文档中对元素和属性进行遍历。XPath 是 W3C XSLT 标准的主要元素，并且 XQuery 和 XPointer 同时被构建于 XPath 表达之上。因此，对 XPath 的理解
阅读全文
摘要：css是一门功能强大、具备完整生态的复杂语言。它拥有很多的技巧， 但是生活工作中我们可能不怎么会接触到，这包括一些实际上挺实用的技巧。在此，特地列举一些css里比较容被忽略的小知识，希望能对你有所帮助。 1. 椭圆的实现 跟圆形的实现一样，这里也是用到border-radius属性，但是你可能不知道
阅读全文
摘要：对于前端基础需要学习哪些内容，之前文章已经有写过不少了，本篇重在谈论： 作为一名前端想要晋升，需要什么条件？现在在用 react，要不要也学学 vue？有必要学习 Node.js/Flutter/ 函数式吗？ 这几个问题看似毫无关联，但是其实它们本质上都是同一个问题，这个问题就是“一个前端工程师到底
阅读全文
摘要：1、个性化排版设计 最近看到越来越多的网络设计尝试个性化的风格，其中比较突出的一点是个性化字体的增多：用自己独特设计的字体代替标准印刷体，让设计更加独特。让字体在体现个性的同时保留专业印刷风格。 2、扁平化设计 “借壳”设计(skeuomorphism)指模仿现实事物尽可能把手机元素(如图表、背壳等
阅读全文
摘要：时间进入2019年，我们在网页设计中看到旧有风格的重生，也见证了新的设计趋势的诞生。Web 技术的快速发展，不仅让设计和产品足以满足更多更细致深入的需求，也让设计师能够进行更细腻更独特的表达。现今的网页设计趋势，已经不再仅仅局限于单一的技法，而更多是一种复合的、暗含意图的综合的设计方法。从色彩的选取
阅读全文
摘要：代码审查的重要性,对码农来说自是不言而喻, 这里记录一次 Code Review的简单纪要，主要以代码审查优化内容为主。 一、Import引入路径 路径尽量使用别名的方式，有效避免相对路径的书写麻烦，以及项目的移植和扩展等。 建议 使用别名，代替使用相对路径。 扩展vue.config.js，比如：
阅读全文
摘要：html提供了5种空格实体（space entity），它们拥有不同的宽度，非断行空格（ ）是常规空格的宽度，可运行于所有主流浏览器。其他几种空格（       ‌‍）在不同浏览器中宽度各异。 它叫不换行空格，全称No-Br
阅读全文
摘要：利用伪元素before、after，只创建一个div <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*先清掉默认的样式*/ body { margin: 0;
阅读全文
摘要：我的思路： 1首先，用div元素画6个正方形摞在一起放在画布中间。为了区分，分别给每个div选择了不同的颜色，并且设置为半透明方便透视。2将6个div元素分为三组（上下一组、左右一组、前后一组），想象以画布中心为圆点，使三组分别沿x/y/z轴旋转90度。3上下一组，一张向上推50%正方形边长，一张向
阅读全文
摘要：小图标icon是一个优秀Web中不可缺少的一部分，起到画龙点睛的效果。在Bootstrap框架中也为大家提供了250多个不同的icon图片。本文将详细介绍Bootstrap图标 原理分析 Bootstrap框架中的图标都是字体图标，其实现原理就是通过@font-face属性加载了字体 @font-f
阅读全文
摘要：在日常工作中，用户需要访问大量的信息资源，例如，用户首先要登录到操作系统中，然后进入各个应用系统。进入每一个系统都需要对用户的身份进行识别与验证，这样，用户需要提供多个用户帐号与口令，为了便于记忆，用户很可能把各种帐号与口令信息记录在笔记本上，甚至写在便条上并贴在办公桌或屏幕边，这就使口令信息很容易
阅读全文
摘要：第一种方式：使用H5的API dataTransfer 实现思路： 1.为将要拖拽的元素设置允许拖拽，并赋予dragstart事件将其id转换成数据保存； 2.为容器添加dragover属性添加事件阻止浏览器默认事件,允许元素放置，并赋予drop事件进行元素的放置。 代码如下： <html> <he
阅读全文
摘要：现在很多网站都会使用瀑布流的一个效果，什么是瀑布流呢，用在哪些地方呢？ 大概就是这样的一个效果，一般用于无法保证图片大小的网站。 先看下布局+css .cont{margin: 0 auto;position: relative;} .box{float: left;padding: 6px} .i
阅读全文
摘要：在最近开发移动端页面，遇到这么一个情况：当页面宽度 100% 时，高度为宽度一半，并随手机宽度变化依然是一半。 于是我们就需要实现一个宽度自适应，高度为宽度一半的容器。 这里先以高度为宽度一半为例，也可以是其他任意比例。 一、思考如何实现 这个问题类似于：我们在移动端页面，上面有一张宽度 100%
阅读全文
摘要：这篇文章描述了我们对哈萨克斯坦政府实施的电信级HTTPS劫持的分析。 哈萨克斯坦政府最近开始使用一个假的根证书颁发机构，对包括Facebook，Twitter和Google等网站在内的HTTPS连接进行中间人（MitM）攻击，在此文中，我们给出了还在进行中的研究的初步结果，以及哈萨克劫持系统中新的技
阅读全文
摘要：一、居中布局 <div class="parent" style="width:300px;height:300px;"> <div class="child">居中布局</div> </div> 水平居中（宽度自适应） 1.inline-block + text-align .child{ dis
阅读全文
摘要：盒子模型（Box Modle）可以用来对元素进行布局，包括内边距，边框，外边距，和实际内容这几个部分。 盒子模型分为两种 第一种是W3c标准的盒子模型（标准盒模型） 、第二种IE标准的盒子模型（怪异盒模型） 当前大部分的浏览器支持的是W3c的标准盒模型，也保留了对怪异盒模型的支持，当然IE浏览器沿用
阅读全文
摘要：何为动画 我们眼前所看到图像正在以每秒60次的频率刷新，由于刷新频率很高，因此你感觉不到它在刷新。而动画本质就是要让人眼看到图像被刷新而引起变化的视觉效果，这个变化要以连贯的、平滑的方式进行过渡。 css Transitions transition: property duration timin
阅读全文
摘要：需要实时桌面推送的功能，就像平时QQ，微信消息推送那种，这个时候我们就可以用到html5 Web Notification 这个API了。 Notification 弹出一个通知在桌面右下角： if(!("Notification" in window)) { //alert("This brows
阅读全文
摘要：题目 10w 条记录的数组，一次性渲染到页面上，如何处理可以不冻结UI？ 具体化 页面上有个空的无序列表节点 ul ，其 id 为 list-with-big-data ，现需要往列表插入 10w 个 li ，每个列表项的文本内容可自行定义，且要求当每个 li 被单击时，通过 alert 显示列表项
阅读全文
摘要：实现效果 X轴Y轴在一个矩形内移动 做斜线运动 .ball { position: absolute; animation: animX 2s linear infinite alternate, animY 2s linear infinite alternate } @keyframes ani
阅读全文
摘要：前端到底是个啥 前端其实是个很大的范畴。我这里只针对 web 开发的前端而言（下文统称前端）。简单点说，针对浏览器的开发，浏览器呈现出来的页面就是前端。它的实质是前端代码在浏览器端被编译、运行、渲染。前端代码主要由三个部分构成：html（超文本标记语言）、css（级联样式表）、JavaScript。
阅读全文
摘要：玻璃窗 今天我们要实现的是雨滴效果，不过实现雨滴前，我们先把毛玻璃的效果弄出来，没有玻璃窗，雨都进屋了，还有啥好敲打的。 <div class='window'></div> .window { position: absolute; width: 100vw; height: 100vh; bac
阅读全文
摘要：本次分享大纲 电商案例的原因 电商网站需求 网站初级架构 系统容量估算 网站架构分析 网站架构优化 架构总结 电商网站案例，一共有三篇本篇主要说明网站的需求，网站初始架构，系统容量估算方法。 一、电商案例的原因 分布式大型网站，目前看主要有几类1.大型门户，比如网易，新浪等；2.SNS网站，比如校内
阅读全文
摘要：垂直居中，在 css 中是一个老生常谈的问题，面试的时候也会时常被提及。所以，今天我们就来聊聊 9 种不同的居中方法。 有常见的 flex、transform、absolute 等等。也有 css3 的网格布局。还有伪元素的方法，是的，你没有看错，::after 和 ::before 也可以实现居中
阅读全文
摘要：一：鼠标尺寸类样式 都要事件对象的配合 Tip:注意与浏览器及元素尺寸分开，鼠标类尺寸样式都是X,Y，浏览器及元素的各项尺寸时Height,Width 1：检测相对于浏览器的位置:event.clientX/event.clientY client:整个浏览器的可视区域,当点击鼠标的时候，鼠标事件发
阅读全文
摘要：web性能优化，主要分为前端和后台两个部分性能优化，后台性能优化决定了web能不能用，前端优化决定了其好不好用，也就是牵涉到前端用户体验和web易用性等情况，所以前端性能与用户体验是有着极大的关联的。 首先，前端优化之前，我们需要知道其整体性能情况，然后对整体情况进行细分与分析，了解其每一步所损耗的
阅读全文
摘要：前端 css 库，可以帮助用户分担样式设计，从而显著提高原型制作速度；用户则可以凭借前端框架，更加轻松地构建起直观的可用应用程序。目前市场上存在大量前端框架可供选择，本篇文章的主要内容就是关于那些目前最为流行且常用的框架。 为什么要使用 css 库，而不选择自定义 CSS？简而言之，时间是一种宝贵的
阅读全文
摘要：所周知，要保护一个页面，最基础的就是要屏蔽右键。而现在网页上用得最多的是function click()，即下面这段代码： 〈script〉 function click(){ if(event.button==2){ alert( ‘本网页欢迎您 !!‘); } } document.onmous
阅读全文
摘要：一份来自 Akamai 的研究报告显示，在对 1048 名网购户进行采访后发现： 约 47% 的用户期望他们的页面在两秒之内加载完成。 如果页面加载时间超过 3s，约 40% 的用户会选择离开或关闭页面。 一直以来，为了提升用户在页面加载时的体验，无论是 Web 还是 iOS、Android 的应用
阅读全文
摘要：web前端开发技术人才越来越吃香，而且web前端领域划分越来越细，对技术的需求越来越高，想学习web前端的人也是越来越多。那么，如何学习web前端知识？从哪开始？转型成为web前端工程师需要学些什么？小白到高手需要多久？ 1、转型web前端需要学什么 第一阶段：你要从最基础的html/css开始，简
阅读全文
摘要：SVG：可伸缩的矢量图形 SVG本身是基于 XML 的一种独立的数据格式，用于声明式的 2D 矢量图形。但是，它也可以嵌入到 html 文档中，这是所有主流浏览器都支持的。 让我们考虑一个例子，如何使用 SVG 绘制一个可调整大小的圆： <html style="height: 100%; widt
阅读全文
摘要：前端需要性能优化么？ 性能优化一直以来都是前端工程领域中的一个重要部分。很多资料表明，网站应用的性能优化对于提高用户留存、转化率等都有积极影响。可以理解为，提升你的网站性能，就是提升你的业务数据（甚至是业务收入）。 性能优化广义上包含前端优化和后端优化。后端优化的关注点更多的时候是在增加资源利用率、
阅读全文
摘要：一.h1~h6标签：有默认margin（top,bottom且相同）值，没有默认padding值。 在chrome中：16,15,14,16,17,19; 在firefox中：16,15,14,16,17,20; 在safari中：16,15,14,16,17,19; 在opera中：16,15,1
阅读全文
摘要：滚动穿透在移动端开发中是一个很常见的问题，产生诡异的交互行为，影响用户体验，同时也让我们的产品看起来不那么“专业”。虽然不少产品选择容忍了这样的行为，但是作为追求极致的工程师，应该去了解为什么会产生以及如何去解决。 什么是滚动穿透 移动端开发中避免不了会在页面上进行弹窗、加浮层等这种操作。一个最常见
阅读全文
摘要：表单简介 Form表单主要用于用户与Web应用程序进行数据的交互，它允许用户将数据发给web应用程序，网页也可以拦截数据的发送以便自己使用。form通常由一到多个表单元素组成，这些表单元素是单行/多行文本框，下拉菜单，按钮，复选框，单选按钮，时间表单元素时 一般要配合label标签，用于描述其目的。
阅读全文
摘要：什么是图形验证码 图形验证码是验证码的一种。验证码（CAPTCHA）是“Completely Automated Public Turing test to tell Computers and Humans Apart”（全自动区分计算机和人类的图灵测试）的缩写，是一种区分用户是计算机还是人的公共
阅读全文
摘要：约定 本文介绍的三种方法适用于识别canvas内形状不规则而且位置无规律的图形点击事件，对于形状规则或者位置有规律的场景，肯定有更简便的实现，这里不做讨论。 像素法 像素检测法的思路是，将canvas中的多个图形（如果有多个的话）分别离屏绘制，并用getImageData()方法分别获取到像素数据保
阅读全文
摘要：前言 页面为了适应各种设备（PC端、移动端的不同设备）的不同显示情况，增加了媒体查询的功能，通过特定的要求达到不同的样式显示。 媒体查询 @media 媒体类型 and|not|only (媒体特性)｛ /*css样式*/ ｝ 或者 <link rel="stylesheet" media="med
阅读全文
摘要：css中的::after和::before已经被大量地使用在我们日常开发中了，使用他们可以使我们的文档结构更加简洁。但是很多人对::after和::before仍不是特别了解，究竟他们是做什么的？如何使用他们？什么时候应该使用他们？笔者总结了一些对伪元素的理解和使用经验。 一、概念： 1.定义 Th
阅读全文
摘要：啥是应用程序状态，为什么咱们需要它？ 状态管理通常在较小的项目并不需要，但是当涉及到更大的范围时，如企业级的应用大部分需要它了。简单的说，状态是一个包含应用程序使用的最新值的对象。但是，如果咱们从结构的、更抽象的角度来看待它，就会清楚地看到，状态是复杂应该中重要一块，它使能够构建干净的体系结构，并将
阅读全文
摘要：vue.js 具有简单的 API 和几个选项，可用于在我们的组件中定义html模板。 我们可以使用<template>标签选项，在根组件实例上定义template属性，或者使用单文件组件。 上面的选项很棒并且可以完美地工作，但是，在您的应用程序的生命周期中，有时会感到笨拙，设计过度或非常不灵活。 那
阅读全文
摘要：一、打包分析 1.1、速度分析 我们的目的是优化打包速度，那肯定需要一个速度分析插件，此时 speed-measure-webpack-plugin 就派上用场了。它的作用如下： 分析整个打包总耗时 每个 plugin 和 loader 的耗时情况 首先，安装插件 npm i -D speed-me
阅读全文
摘要：1、watch // DOM <span>{{obj.a}}</span> <button @click="changeA">click me</button> data() { return { name: 'a' }; }, watch: { name: function(value,oldVa
阅读全文
摘要：我们都知道微信小程序的组件image是用来显示图片的，它有一下几个属性： 1、src 图片资源地址2、mode 图片裁剪、缩放的模式3、binderror 当错误发生时，发布到 AppService 的事件名，事件对象event.detail = {errMsg: ‘something wrong’
阅读全文
摘要：1. StatelessWidget 一个 StatelessWidget 是不能被改变的，比如：Icon、Text等。由于不可改变，因此并没有什么生命周期。 2. StatefulWidget 一个 StatefulWidget 是有状态的，可变的。一个 StatefulWidget 组件可以通过
阅读全文
摘要：Flutter安装介绍 在这里，你必须得安装好你的开发者环境，并且运行你的第一个flutter程序了。如果你还不知道怎么开始，请参考Flutter中文网安装教程或者Flutter官网安装教程进行安装环境。 目前我开发是通过Android Stdio和VSCode进行开发，如果你是前端开发工程师，你会
阅读全文
摘要：在前端开发中，设置元素的 class 列表和内联样式是基本要求。本文主要讲解vue开发中，样式列表和内联样式的绑定，仅供学习分享使用，如果有不足之处，还请指正。 概述 vue操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需
阅读全文
摘要：前言 之前写过一篇旧react项目安装并使用TypeScript的文章：在React旧项目中安装并使用TypeScript的实践。 博客里使用awesome-typescript-loader对Typescript代码进行检测和转换。 而这几天又修改了一下自己的脚手架，使用@babel/preset
阅读全文
摘要：最近在学习react框架，之前一直都是用vue 开发，知道在vue 中知道如何配置一下相关的webpack 有助于开发，学react 过程中，我也在想这些该怎么配置啊，所以就有这篇文章。这篇文章主要是讲 react-create-app 生成的项目利用 react-app-rewired 和 cus
阅读全文
摘要：3.0迟迟没有发布release版本，现阶段在vue项目中使用Typescript需要花不小的精力在工程的配置上面。主要的工作是webpack对TS，TSX的处理，以及2.x版本下面使用class的形式书写vue 组件的一些限制和注意事项。 webpack 配置 配置webpack对TS，TSX的支
阅读全文
摘要：大概因为平时工作项目的原因，写了很多次树形组件，越写越觉得可以写得更简单并且更具有复用性、扩展性。树组件的应用场景很多，比如一篇文章的目录、一个公司部门组织情况、思维导图等，其实都可以用树形结构来描述。本文讲述一下vue中树组件的简单实现。 树组件在线体验地址：http://wintc.top/la
阅读全文
摘要：前言 之前有用 webpack4与babel7改造基于vue-cli2生成的工程模板，介绍文章在此。之后通过一些实践，除去了cli工具相对复杂的配置结构，提供轻量化版本的配置方案。之所以说是轻量化，是相对于vue、react等框架提供的官方cli工具而言的。并不是说这些cli工具不好，它们本身提供了
阅读全文
摘要：在本教程中，我们将完成一个关于如何在 Node.js 中 使用 JavaScript ，并结合 JWT 认证，实现基于角色（role based）授权/访问的简单例子。 作为例子的 API 只有三个路由，以演示认证和基于角色的授权： /users/authenticate - 接受 body 中包含
阅读全文
摘要：我们在写vue项目的时候会遇到给组件命名，这里的name非必选项，看起来好像没啥用处，但是实际上这里用处还挺多的 export default { name:'xxx' } 1.当项目使用keep-alive时，可搭配组件name进行缓存过滤举个例子：我们有个组件命名为detail,其中dom加载完
阅读全文
摘要：每个团队都必须在开发过程中做出各种决定。其中通常会涉及到 yarn，npm 或其它用于构建和打包 JavaScript 代码的工具。一些开发人员渴望朝着某个方向前进，有时他们会花费大量时间来尝试，去做出实际上对他们的工作几乎没有什么影响的决策。 首先，要了解为什么要做出一个有趣的决定，我们需要看一下
阅读全文
摘要：webpack 加载动态图片 所谓动态图片指的是接口返回的图片地址，这里的地址指的是本地的图片地址，而非网络图片的url。本地有一个 image 文件夹，存放需要用到的图片。按照接口返回的图片地址比对去加载。webpack加载图片首先想到的是 file-loader 或者 url-loader 加载
阅读全文
摘要：借助react，我们可以构建动态且高度交互的单页应用程序，充分利用这种交互性的一种方法是通过条件渲染。 条件渲染一词描述了根据某些条件渲染不同UI标签的能力。在react文档中，这是一种根据条件渲染不同元素或组件的方法。此概念通常被应用到如下情况中： 从API渲染外部数据显示/隐藏元素切换应用程序功
阅读全文
摘要：什么是数据响应式 从一开始使用 vue 时，对于之前的 jq 开发而言，一个很大的区别就是基本不用手动操作 dom，data 中声明的数据状态改变后会自动重新渲染相关的 dom。换句话说就是 vue 自己知道哪个数据状态发生了变化及哪里有用到这个数据需要随之修改。 因此实现数据响应式有两个重点问题：
阅读全文
摘要：有时候给页面内容添加一个关键词搜索功能，如果搜索结果能够像浏览器搜索一样高亮显示，那找起来就会很明显体验会好很多。本文就介绍一下关键词搜索高亮的实现方案。 实现效果大概如下： 可在线预览：http://wintc.top/laboratory/#/search-highlight。 一、实现原理 实
阅读全文
摘要：日常我们开发了一个库之后，如何打包之后提供给别人使用呢？如果你不清楚，就继续看吧！！！ 初始化库 mkdir library cd library npm init -y 经过以上步骤后会生成一个library文件夹，里面包含一个package.json文件。然后简单修改为如下所示： { "name
阅读全文
摘要：一、概念 mpvue是 美团修改了 vue.js的 runtime和 compiler使其可以运行在小程序环境中，从而引入了整套 Vue.js开发体验的小程序框架。 二、优化细节 1、实例生命周期 不同于vue的是我们会在小程序 onReady 后，再去触发 vue mounted 生命周期 除了
阅读全文
摘要：vue 是一套在前端开发中广泛采用的用于构建用户界面的渐进式JavaScript框架。vue 通过响应的数据绑定和组合的视图组件让界面开发变得非常的简单。这边文章来看看如何使用Vue开发以太坊DApp。 Vue 简介 Vue 除了是JavaScript框架，还提供了一个配套的命令行工具 Vue CL
阅读全文
摘要：Angular.js是google开发者设计和开发的一套前端开发框架，帮助你简化前端开发的负担。下面给大家介绍一下你应该使用Angular.js的重要原因： 原因一：Google开发的框架 要知道开源界的很多框架都是开发人员由于个人兴趣或者激情而开发出来的，比如，Cappucino 还有 Knock
阅读全文
摘要：jquery validate插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息，且已翻译成其
阅读全文
摘要：不少前端开发者学习到一定阶段都会去封装一些自己的组件并将其开源。笔者在学习过程中发现，发布的资源包基本分为两类： 打包发布的资源包 非打包发布的资源包 那么这两种方式有何不同呢，他们的使用场景如何，具体的操作步骤又是怎么样的。本文将基于这两种发布方式，对比他们的不同，详解其步骤，并对在封装vue组件
阅读全文
摘要：之所以要做这个是因为，在一个组件内部需要引入一个js文件来定位。如果放在index.html，这样每个组件都会有这个js。所以需要在组件内单独引入。 第一种操作 Dom引入js： export default { mounted() { const s = document.createElemen
阅读全文
摘要：很少有人最初编写vue组件时打算将其开源。我们大多数人都是从自己编写组件开始的——我们有一个问题，然后决定通过构建一个组件来解决它。有时我们发现自己想要在代码库的新位置解决相同的问题，因此我们使用组件并对其进行重构，使其可重用。然后我们想在一个不同的项目中使用它，所以我们把它转移到一个独立的包中。然
阅读全文
摘要：Koa 介绍 koa 是由 Express 原班人马打造的，一个基于 Node.js 平台的 Web 开发框架 Express 是基于 ES5 的语法，随着新版 Node.js 开始支持 ES6 ，该团队重新编写诞生了 koa 1.0 ，而 koa2.0 则是更是超前的基于 ES7 安装 koa2
阅读全文
摘要：JQuery JQuery是一个优秀的JavaScript框架 JQuery宗旨是Write Less Do More JQuery是轻量级的js库 特点 轻量级的JavaScript框架 丰富的DOM选择器 链式表达式 支持事件、样式、动画 支持Ajax操作 跨浏览器兼容 插件扩展开发（丰富的第三
阅读全文
摘要：自定义组件 自定义组件的v-model 首先我们先说一下在自定义组件中使用v-model的必要条件 在自定义的组件中要有input(这里我们先不讨论单选复选框)在自定义组件的模板对象中要有props属性，且里面要含有一个value在自定义组件的input标签上要绑定value属性值为props中传入
阅读全文
摘要：前言 用 Typescript 写 react 可比写 vue 舒服太多了，react 对 ts 的支持可谓天生搭档，如果要用 ts 重构项目，不像 vue 对项目破坏性极大，React 可以相对轻松的实现重构。 顺便一提：全局安装的 create-react-app 现已无法再下载完整的 Reac
阅读全文
摘要：在vue进行前端开发中，条件判断主要用于根据不同的条件来决定显示或隐藏，或者进行视图之间的切换，本文以一个简单的小例子简述v-if的常见用法，仅供学习分享使用，如有不足之处，还请指正。 v-if 指令 v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲
阅读全文
摘要：前言 Plugin(插件) 是 webpack 生态的的一个关键部分。它为社区提供了一种强大的方法来扩展 webpack 和开发 webpack 的编译过程。这篇文章将尝试探索 webpack plugin，揭秘它的工作原理，以及如何开发一个 plugin。 一、Plugin 的作用 关于 Plug
阅读全文
摘要：一、思路分析和效果图 用vue来实现一个瀑布流效果，加载网络图片，同时有下拉刷新和上拉加载更多功能效果。然后针对这几个效果的实现，捋下思路： 根据加载数据的顺序，依次追加标签展示效果； 选择哪种方式实现瀑布流，这里选择绝对定位方式； 关键问题：由于每张图片的宽高不一样，而瀑布流中要求所有图片的宽度一
阅读全文
摘要：今天在看到 create-react-app 仓库时，在其安装方式上看到这样一条指令，一脸懵逼，这是什么？ npx create-react-app my-app cd my-app npm start nvm、 nrm、 npm、npx， 类似的名词屡见不鲜，npx 到底是什么？ 照例来到 git
阅读全文
摘要：在这篇文章中，你将学习针对机器学习的不同JavaScript框架。具体内容为： 1.DeepLearn.js Deeplearn.js是Google发布的一个开源的机器学习JavaScript库，可用于不同的目的，例如在浏览器中训练神经网络，理解ML模型，用于教育目的等。你可以在推理模式中运行预先训
阅读全文
摘要：react 旧版生命周期 React 的生命周期图如上所示，主要可分为 初始化阶段、挂载阶段、更新阶段、卸载阶段。 初始化阶段 发生在 constructor 中的内容，在 constructor 中进行 state、props 的初始化，在这个阶段修改 state，不会执行更新阶段的生命周期，可以
阅读全文
摘要：与目前业内的几个小程序框架相比较而言，mpx 开发设计的出发点就是基于原生的小程序去做功能增强。所以从开发框架的角度来说，是没有任何“包袱”，围绕着原生小程序这个 core 去做不同功能的 patch 工作，使得开发小程序的体验更好。 于是我挑了一些我非常感兴趣的点去学习了下 mpx 在相关功能上的
阅读全文
摘要：大多时候，我会使用template, vue单文件去渲染组件。虽然知道vue中有个render函数，但却很少在项目中去主动使用它。使用最多的地方是在使用一些UI框架的时候，比如iview table中的按钮操作，会使用到render函数。另外平时在阅读一些Vue UI框架源码的时候，也时常能遇到使用
阅读全文
摘要：一、filter() filter用于对数组进行过滤。 它创建一个新数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。 注意：filter()不会对空数组进行检测、不会改变原始数组 Array.filter(function(currentValue, indedx, arr), this
阅读全文
摘要：canvas有一个非常常用的方法canvas.toDataURL()，它会将canvas转化为data URL的格式。通常情况下这个data URL的类型为image。看看下面的例子： <canvas id="canvas" height="2" width="2"></canvas> var ca
阅读全文
摘要：一、字面量方式 var obj = { name: 'mm', age: 18, sayName: function() { console.log(this.name); } } 问题：创建多个对象时会造成代码冗余，很占内存空间。 二、工厂模式 function createToy(name) {
阅读全文
摘要：作用： 通过指定函数对数组进行处理，并将处理后的结果以新数组的形式返回 注意点： 不会改变原数组，只是将处理后的结果以新数组的形式返回 参数： 该方法可以接收两个参数 第一个参数是函数，数组中的每个元素都会执行该函数，并且是必须要传的 传入函数的三个参数 currentValue 为当前元素的值 必
阅读全文
摘要：我的意思是，对于刚开始使用这种语言和他语言（例如 C++ 或 C#）的开发人员来说，JavaScript 可能会很奇怪。 某些语言可能会让你大吃一惊 在本文中，我们将看到 5 个例子，并让你能够在几分钟的时间内读完。 数字分隔符 以下面的代码为例： const number1 = 2_0_0_0;
阅读全文
摘要：这些年来，ES6 将 js 的可用性提升到一个新的水平时: 箭头函数、类等等,这些都很棒。 箭头函数是最有价值的新功能之一，有很多好文章描述了它的上下文透明性和简短的语法。 但每个事务都有两面。通常，新特性会带来一些混乱，其中之一就是箭头函数被误导了。本文将介绍一些场景，在这些场景中，你应该绕过箭头
阅读全文
摘要：在 JavaScript 中，你可以通过多种方式去定义函数。 第一种常用的方法是使用关键字 function： // 函数声明 function greet(who) { return `Hello, ${who}!`; } // 函数表达式 const greet = function(who)
阅读全文
摘要：有些人认为观察者模式就是发布订阅模式，实际上观察者模式是包含了订阅发布模式，发布订阅模式只是观察者模式中的一种。观察者模式是观察者和被观察者之间的通信，而发布订阅模式中间增加了一个中转层，通过第三方来分发信息。 观察者模式 // Subject为被观察者，Subject中的状态（state）改变，就
阅读全文
摘要：多年以来，Node.js 都不是实现高 CPU 密集型应用的最佳选择，这主要就是因为 JavaScript 的单线程。作为对此问题的解决方案，Node.js v10.5.0 通过 worker_threads 模块引入了实验性的 “worker 线程” 概念，并从 Node.js v12 LTS 起
阅读全文
摘要：首先要明确什么是大型应用，其实这是仁者见仁、智者见智的问题，并且它是一个哲学问题，不是一个技术问题。假如有人问你，一个可以进行线上销售的网站，比如优衣库，大不大？你可能会说大，因为这与你平常所见的博客、企业官网等逻辑相比较确实复杂很多。或者说小，那么说明你开发过比它还复杂的系统。那么相比较淘宝而言呢
阅读全文
摘要：Nodejs是基于chrome浏览器的V8引擎构建的，也就说明它的模型与浏览器是类似的。我们的JavaScript会运行在单个进程的单个线程上。 但是V8引擎的单进程单线程并不是完美的结构，现如今CPU基本上都是多核的。真正的服务器往往有好几个CPU（像我们的线上物理机有12个核），所以，这就将抛出
阅读全文
摘要：nodejs可以使用检测因特网状态的库internet-available、is-online来检查网络状态，其原理是检测dns连接状态。这两个库提供了超时检测。 用nodejs检测网络状态： internet-available 这个库检测因特网连接状态原理，是检测dns连接状态。 这里大家肯定有
阅读全文
摘要：对于前端来说，请求是前端日常工作必备的，通过请求才能与后端进行数据交互，尤其在现在前后端分离的开发模式下，请求显得就更加重要。因此，对于前端开发者来说，掌握请求就很重要。下面将从http请求和常见的几个请求技术做具体的讲解 一、XMLHttpRequest XMLHttpRequest一开始只是微软
阅读全文
摘要：你可能在 JavaScript 项目中都用了console.log。这是一种查看变量的值或程序运行中发生的事情的便捷方法。但是 JavaScript console 对象还有许多其他的功能，可以在处理项目时提供帮助。本文将会介绍一些我的最爱，希望你在工作时记得使用它们！ 请注意，此处的例子适用于在浏
阅读全文
摘要：JavaScript中退出循环的方法：方法一、使用break语句退出循环。方法二、使用continue语句退出循环。方法三、使用return语句退出循环。 break语句 break语句会使运行的程序立刻退出包含在最内层的循环或者退出一个switch语句。 由于它是用来退出循环或者switch语句，
阅读全文
摘要：在一个以数字化为主导的世界中，物联网(IoT)在改变我们的生活和开展业务方式方面发挥着至关重要的作用。从智能生活到工作场所协作，以及与现场员工的联系，物联网将一如既往地节省时间和提高生产力。 根据一份微软物联网研究报告，大约85%的受访者表示他们目前正在采用物联网，四分之三的人处于项目计划阶段 。此
阅读全文
摘要：Promise只有三种状态：pending、resolve、reject,一个异步的承诺一旦发出，经历等待（pending）后，最终只能为成功或者失败，中途无法取消（abort）。 为promise提供abort功能的思路有两种： 手动实现abort，触发取消后，异步回来的数据直接丢弃（手动实现，比
阅读全文
摘要：Object.freeze( obj )可以 冻结 一个对象。一个被冻结的对象再也不能被修改； 冻结了一个对象则不能向这个对象添加新的属性，不能删除已经属性， 不能修改该对象已有属性的可枚举性、可配置性、可写性、以及不能修改已有属性的值。 此外，冻结一个对象后该对象的原型也不能被修改。freeze(
阅读全文
摘要：Promise的基本使用： 利用Promise是解决js异步执行时候回调函数嵌套回调函数的问题， 更简洁地控制函数执行流程； 通过new实例化Promise， 构造函数需要两个参数， 第一个参数为函数执行成功以后执行的函数resolve， 第二个函数为函数执行失败以后执行的函数reject： new
阅读全文
摘要：js 运行代码的时候分为几个步骤：语法分析 ==》预编译 ==》解释执行 语法解析：通篇扫描代码，查看语法是否出错 解释执行：读一行 - 解释一行 - 执行一行 预编译执行的操作： // 假设之前并没有定义a console.log(a); 打印结果：Uncaught ReferenceError:
阅读全文
摘要：作为号称下一代web应用模型的PWA，逐渐成为了一个各大前端厂商争先恐后进行涉足，布局的一个新的技术， 其主要的对标物Native app，作为现在最主流的mobile端应用，它的安全，性能，用户体验的确明显领先于其他互联网载体，但是原生App始终有一些缺点，比如 1. 昂贵开发成本 2. 软件上线
阅读全文
摘要：1.opacity opacity：0将元素本身及其子元素都置为不可见的，而元素本身依然占据它自己的位置并对网页的布局起作用，它会响应用户交互。 2.visibility visibility：hidden将元素本身及其子元素都置为不可见的，而元素本身依然占据它自己的位置并对网页的布局起作用，它不会
阅读全文
摘要：通过改变charset=utf-8中的utf-8就可以改变网页的编码。 一般我们在写css文件时候也需要在css文件顶部使用@charset "utf-8";来定义此CSS文件编码类型。一般html源代码和css文件编码要统一，如果不统一会导致CSS hack，页面乱码网页页面排版乱等兼容问题。 国
阅读全文
摘要：当我们想在表达式上进行匹配简单的值或者是参数数量时，我们可以使用Guards；它与mixin声明相关联，并包括附加到mixin的条件。每个mixin将有一个或多个由逗号分隔的防护，并且guard必须括在括号中。 为了尽量接近css的声明性，Less选择了使用通过受保护的Guards的mixins而不
阅读全文
摘要：1.利用css3属性 appearance。 该属性（强制）更改（改变）默认（原生）样式。 Firefox 支持替代的 -moz-appearance 属性；Safari 和 Chrome 支持替代的 -webkit-appearance 属性；IE不支持该属性。 所以可以利用该属性取消checkb
阅读全文
摘要：过渡 transition 1.过渡的定义和使用 在没有过渡属性的时候，当一个元素的属性值发生变化时，浏览器就会将个这个元素瞬间渲染成新属性值的样式。例如一个定位元素top:0，动态修改成top:100px，这个元素就瞬间跑到100px的位置，有时候我们为了达到某种视觉效果，希望它以动画的形式在一定
阅读全文
摘要：1.文件命名规则 文件名称统一用小写的英文字母、数字和下划线的组合。 a. html的命名原则引文件统一使用index.htm index.html index.asp文件名（小写）各子页命名的原则首先应该以栏目名的英语翻译取单一单词为名称。例如：关于我们 \ aboutus 信息反馈 \ feed
阅读全文
摘要：结构元素不具有任何样式，只是使页面元素的的语义更加明确。 header元素 header元素是一种具有引导和导航作用的的结构元素，该元素可以包含所有通常放在页面头部的内容。header元素通常用来放置整个页面或页面内的一个内容区块的标题，也可以包含网站Logo图片、搜索表单或者其他相关内容。 <he
阅读全文
摘要：当涉及到简化 css 设计和开发相关的工作时，工具总能创造奇迹。值得指出的是，绝大多数的网页设计者和开发人员对不同的 css 工具都感到兴奋，这些工具能帮助他们更快的制作功能完善又十分完美的网站和网页应用。下面给大家介绍几个CSS工具，它们将通过最大限度的发挥 CSS 的功能来帮助你建立神奇的网站。
阅读全文
摘要：公司国庆搞了个集卡、抽奖小活动。抽奖需要刮刮卡的效果，感觉 css 是实现不了。看我使用 canvas 如何实现刮刮卡效果。废话不多说，线上效果 jsrun-测试地址 、 lilnong.top-测试地址 实现方案都有什么 clearRect 这是我第一个找到的 API，作用是清除一个矩形区域内的内
阅读全文
摘要：viewport、强制浏览器全屏、IOS的Web APP模式、可点击元素出现阴影（这个我觉得真没必要去掉，用户点击是需要反馈的，而这个背景色刚刚好提供了一种反馈）等等，太多啦，这些相信大家百度一下就可以查到很多资料 本篇文章主要是讲一些其他的或者优化手段。内容不多 1. 弹出数字键盘 <!-- 有"
阅读全文
摘要：Mixins 具有多个参数 * 参数可以使用逗号或分号分隔。 （建议使用分号，因为逗号具有双重含义：可以将其解释为mixin参数分隔符或者是css列表分隔符）；使用逗号作为mixin分隔符使不可能创建逗号分隔的列表作为参数。 参数mixin使用一个或多个参数，通过参数和它的属性来扩展Less的功能，
阅读全文
摘要：写在前面 在真正的前端开发中，我们很少去写行内样式和内嵌样式，通常都是去引用外部样式。 而在我们学习之初的外部样式表都是用link引入的，但是当后来我们学习的逐渐深入，发现@import也可以引入样式。那么同样是引入外部样式，这两者有什么区别呢，下面请跟随我来详细了解一下link和@import的区
阅读全文
摘要：作为前端，在工作中难免会遇到关于排版的问题，以下是我整理的一些关于css的技巧，希望对你能有帮助。 1、每个单词的首字母大写 一般我们会用js实现，其实css就可以实现。js代码： var str = 'hello world'; str.replace(/( |^)[a-z]/g,(L)=>L.t
阅读全文
摘要：定义及用法 ⑴<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。 ⑵<meta> 标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。 ⑶元数据（metadata）是关于数据的信息。元数据总
阅读全文
摘要：webp 是目前 Web 比较流行的解决方案，相对于 Jpeg/png, 基于 VP8 的压缩，有着非常不错的压缩率。 <pliga' 1,="" 'onum'="" 'kern'="" 1;="" color:="" rgb(58,="" 65,="" 69);="" font-family:="
阅读全文
摘要：一、什么是URL/URN/URI URI=URL+URNURI：统一资源标识符URL：统一资源定位符URN：统一资源名称 二、传输协议 用来传输客户端和服务器端交互的信息的（类似于快递小哥）HTTP（顺丰）：超文本传输协议（除了传递普通的文本，还可以传递文件流或者进制编码等信息），是目前最常用的WE
阅读全文
摘要：块（Block） /* 常规写法和BEM写法相同 */ .list 元素(Element) 块中的子元素是块的子元素，并且子元素的子元素在 bem 里也被认为是块的直接子元素。一个块中元素的类名必须用父级块的名称作为前缀。如上面的例子，li.item 是列表的一个子元素 /* 常规写法 */ .li
阅读全文
摘要：一、心形 使用transform-origin属性实现设置不同的点为原点 1、改变元素基点transform-origin（transform-origin是变形原点，原点就是元素绕着旋转或变形的点） 注意：该属性只有在设置了transform属性的时候才起作用； 如果在不设置的情况下，元素的基点默
阅读全文
摘要：对于首屏的定义，浏览器没有给出标准的指标，因为不同网站对于首屏的要求也是不尽相同的。我们从谷歌的第一次有效时间（first meaningfull paint）得到了一些启发，例如，一个新闻网站文字跟字体对于它来说是更重要的，而图片是次要的。新闻网站可以认为所有文字或字体加载出来即为首屏。但是对于电
阅读全文
摘要：Web的发展日新月异，这也使得Web开发者不得不加快脚步，学习新的技术和编程语言。尤其是对于那些大量流量入口的网站来说，跟上技术发展趋势更是尤为重要。为了使得Web开发人员能够更加专注于业务层面的开发，市场上涌现了各种各样的Web开发工具，灵活运用这些工具就能使得你的开发效率大幅提升，实现事半功倍。
阅读全文
摘要：JavaScript 可以说是交互之王，它作为脚本语言加上许多 Web Api 进一步扩展了它的特性集，更加丰富界面交互的可操作性。这类 API 的例子包括WebGL API、Canvas API、DOM API，还有一组不太为人所知的 css API。 由于jsX和无数js框架的出现，使通过JS
阅读全文
摘要：现在做的项目是公司内部全部组要用的 viewer 库. Viewer 需要的功能非常的多，其中的一个就是需要提供一些常用的绘图API功能， 比如用户鼠标移动画箭头，画圈圈，高光选中文本等等。 挑战 目前遇到的挑战就是在 canvas, svg, dom + css 之间如何选择的问题，canvas
阅读全文
摘要：早期的项目中晓衡遇到游戏终于要完成了，辛苦了一阵满以为可以稍微放松一下了，但策划、运营要求，增加一个他们认为非常“简单”且重要的功能： 新手引导 。 回想起当年，接到这个任务时的感觉是手脚冒汗、天晕地暗、日月无光，游戏代码本来就千疮面孔，逻辑错综复杂，根本不知道该怎么下手？更困难的是，游戏本身功能和
阅读全文
摘要：提起 css 很多童鞋都很不屑，尤其是看到 RedMonk 2019 Programming Language Rankings 的时候，css 竟然排到了第七位。 我们先来看看这张排行榜： 从上面可以看出，CSS 的地位已经今非昔比了。 本节我们就来说说 CSS 渲染以及优化 相关的内容，主要围绕
阅读全文
摘要：前言 相信tab切换对于大家来说都不算陌生，后台管理系统中多会用到。如果不知道的话，可以看一下浏览器上方的标签页切换，大概效果就是这样。 1.如何切换 使用动态组件,相信大家都能看懂（部分代码省略） //通过点击就可以实现两个组件来回切换 <button @click="changeView">切换
阅读全文
摘要：1.css sprite是什么,有什么优缺点 将多个小图片拼接到一个图片中。通过 background-position 和元素尺寸调节需要显示的背景图案。 减少 HTTP 请求数，极大地提高页面加载速度增加图片信息重复度，提高压缩比，减少图片大小 2 display: none; 与 visibi
阅读全文
摘要：解码 PNG 图片就是把一张图片从二进制数据转成包含像素数据的 ImageData 。 图片的二进制数据可以从 <canvas> ， <img> ，Object URLs，Image URLs， Blob 对象上获取到。参见浏览器图像转换手册。 ImageData 是一个包括了像素数据、图片宽高数据
阅读全文
摘要：1.Cross Site Script（XSS，跨站脚本攻击） XSS 就是攻击者在 Web 页面中插入恶意脚本，当用户浏览页面时，促使脚本执行，从而达到攻击目的。XSS 的特点就是想尽一切办法在目标网站上执行第三方脚本。 举个例子。原有的网站有个将数据库中的数据显示到页面的上功能，document
阅读全文
摘要：什么是<!DOCTYPE html>？ 在html文档初，往往会有这么一句话<!DOCTYPE html>，那么它的意义是什么呢？它是html5标准网页声明,全称为Document Type HyperText Mark-up Language，意思为文档种类为超文本标记性语言或超文本链接标示语言，
阅读全文
摘要：前言 原本只是想简单的聊一下代码格式化的问题，无奈本文拖沓了很久，在此期间，我又思考了很多，我越来越觉得代码格式化是一门艺术。为了衬托“艺术”二字，可能叫“代码美化”更贴切一点，但是本文的深度远没有标题那么宏大。 在我看来，代码质量不仅体现在逻辑上，也要体现在形式上。尤其前端代码，在日渐复杂的单页面
阅读全文
摘要：实现样式： 1、鼠标移入后，鼠标样式图标变为“锤子”。 2、用户砸金蛋，锤子简单的扬起效果。 3、砸碎金蛋，显示内容。 分析实现步骤： 1、在html中插入一颗金蛋 找一张静态图片或带一点效果的动态图，直接放入img标签即可。 2、鼠标移入，改变鼠标样式图标 系统自带的鼠标样式就那几种，可以通过cs
阅读全文
摘要：首先，为了避免与微软的 Visual Studio IDE 发生混淆，这里先说明一下，Visual Studio Code（也即 VS Code）是一款轻量级的编辑器，类似 Atom 或 Sublime Text。它的采用量节节攀升，迅速占领了开发者市场！ 2015 年，微软推出了 VS Code
阅读全文
摘要：今天我们深度了解一下 rem 单位，这个单位目前已经得到了优秀浏览器的支持，并且有一些兼容方案来帮助你在低版本的 IE 浏览器中的使用它。 什么是 rem 可能在你使用收音机或者用其他音乐播放器之前，就已经听过“R.E.M.”这个词了。在这个乐队眼中，这个词是“浅睡眠时眼球的快速转动”的缩写，而在
阅读全文
摘要：前几天遇到一个页面需求是这样的： 一个评论框，后面的按钮有点赞或者发送评论两种状态，其中发送按钮有根据输入框中是否有字分为可点击和不可点击两种状态。 需求： 没有文字，没有聚焦——点赞没有文字，聚焦——灰色发送有文字——红色发送 如果用js实现，需要监听输入框的change和focus事件，比较麻烦
阅读全文
摘要：SVG 简介 SVG，即可缩放矢量图形(Scalable Vector Graphics)，是一种 XML 应用，可以以一种简洁、可移植的形式表示图形信息。目前，人们对 SVG 越来越感兴趣。大多数现代浏览器都能显示 SVG 图形，并且大多数矢量绘图软件都能导出 SVG 图形。SVG 主要可以概括为
阅读全文
摘要：做前端最难受的就是产品给的需求以及测试给的bug了，看待这个标题是不是有点蒙，这是什么需求，下面来解读下！ 需求 需求：如下图，点击已保存按钮弹出已保存列表，当点击屏幕其他区域要关闭这个下拉框，是不是很简单 加点东西，但是点击这个下拉框内部的区域不能关闭下拉框）（原谅我里面没写东西你就当有东西，给个
阅读全文
摘要：实现一个普通边框 <style> .border { width: 100px; height: 50px; border: 1px solid red; } </style> <div class="border"></div> 实现由四个三角形组成的正方形 <style> .triangle {
阅读全文
摘要：根据设计稿的实际宽度值,与设计稿最大宽度值,动态计算根字体大小，适应不同的屏幕比例。 本文的px转rem换算公式为: 100px = 1rem 18px = 0.18rem 基础css body,dl,dd,ul,ol,h1,h2,h3,h4,h5,h6,pre,form,input,textare
阅读全文
摘要：在css基础当中，我们往往会遇到块元素和行内元素，块元素和行内元素也是很重要的基础知识。那么块级元素是什么？html中的块级元素有哪些？ 什么是块级元素？ display属性为block的元素为块级元素。通常块级元素在很多浏览器中，都是显示占据一行，并且排斥其他元素和其他元素在同一行，在浏览器中，块
阅读全文
摘要：虽然编程环境每天都有新变化，但 Android 无疑是其中更新迭代最频繁的，每年甚至每个月都有新东西。本文介绍了 2020 年开发者最需要关注的 5 大 Android 开发技术。 在众多 Android 开发团队参加的 Droidcon London 2019 大会上，一系列新技术令人眼花缭乱。从
阅读全文
