11 2020 档案
摘要：当我开始学习JavaScript时，我把我在别人的代码、code challenge网站以及我使用的教程之外的任何地方发现的每一个节省时间的技巧都列了一个清单。 在这篇文章中，我将分享11条我认为特别有用的技巧。这篇文章是为初学者准备的，但我希望即使是中级JavaScript开发人员也能在这个列表中
阅读全文
摘要：promise是什么？ Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。简单来说，promise的作用就是
阅读全文
摘要：今天的话题是JavaScript中常被提及的「发布订阅模式和观察者模式」，提到这，我不由得想起了一次面试。记得在去年的一次求职面试过程中，面试官问我，“你在项目中是怎么处理非父子组件之间的通信的？”。我答道，“有用到vuex，有的场景也会用EventEmitter2”。面试官继续问，“那你能手写代码
阅读全文
摘要：vue-route 是什么 vue Router 是 Vue.js 官方的路由管理器。在早期的时候html模板存在服务端，然后根据浏览器输入不同的路径，服务端会根据不同的路径渲染不同的模板出来，这样的痛点就是用户每次操作的时候都要重新刷新页面，比如说很久之前的论坛，操作一下就要跳一下，交互体验很是不
阅读全文
摘要：编写高效率的 JavaScript ，其中一个关键就是要理解它的工作原理。编写高效代码的方法数不胜数，例如，你可以编写对编译器友好的 JavaScript 代码，从而避免将一行简单代码的运行速度拖慢 7 倍。 本文我们会专注讲解可以最小化 Javascript 代码解析时间的优化方法。我们进一步缩小
阅读全文
摘要：前端一直是距离用户最近的一层，随着产品的日益完善，我们会更加注重用户体验，而前端异常却如鲠在喉，甚是烦人。 一、为什么要处理异常？ 异常是不可控的，会影响最终的呈现结果，但是我们有充分的理由去做这样的事情。 1.增强用户体验；2.远程定位问题；3.未雨绸缪，及早发现问题；4.无法复线问题，尤其是移动
阅读全文
摘要：瀑布流布局中的图片有一个核心特点 —— 等宽不定等高，瀑布流布局在国内网网站都有一定规模的使用，比如pinterest、花瓣网等等。那么接下来就基于这个特点开始瀑布流探索之旅。 基础功能实现 首先我们定义好一个有 20 张图片的容器， <body> <style> #waterfall { posi
阅读全文
摘要：前言 最近在给自己的脚手架项目转到TypeScript时，遇到了一些麻烦。 项目之前采用的是react + react-redux + redux-thunk + redux-actions +redux-promise的体系。 当项目转TypeScript时,react和react-redux这种
阅读全文
摘要：现代的全栈应用程序通常由六层组成：数据访问、后端模型、API 服务端、API 客户端、前端模型和用户界面。我们需要大量的胶水代码才能将它们全部连接起来，并且领域模型在整个栈中存在重复。因此，开发的敏捷性受到了极大的影响。本文如何使用统一架构来构建全栈应用程序，以及统一架构语言扩展 Liaison。
阅读全文
摘要：这篇文章写一下前后端分离下的登录解决方案，目前大多数都采用请求头携带 Token 的形式。 开写之前先捋一下整理思路： 首次登录时，后端服务器判断用户账号密码正确之后，根据用户id、用户名、定义好的秘钥、过期时间生成 token ，返回给前端； 前端拿到后端返回的 token ,存储在 localS
阅读全文
摘要：在开发中，经常会遇到接口重复请求导致的各种问题。 对于重复的get请求，会导致页面更新多次，发生页面抖动的现象，影响用户体验。 对于重复的post请求，会导致在服务端生成两次记录（例如生成两条订单记录）。 如果当前页面请求还未响应完成，就切换到了下一个路由，那么这些请求直到响应返回才会中止。 无论从
阅读全文
摘要：我曾经想要在特定时间执行特定的操作，而无需亲自运行它们。 在本文中，我们将研究如何在 Node 程序中创建和使用 Cron 作业。为此我们将创建一个简单的程序，该应用程序会自动从服务器中删除自动生成的 error.log 文件。 Cron 作业的另一个优点是，你可以安排程序以不同的时间间隔执行不同的
阅读全文
摘要：说实话，我从工作开始就一直在接触babel，然而对于babel并没有一个清晰的认识，只知道babel是用于编译JavaScript，让开发者能使用超前的ES6+语法进行开发。自己配置babel的时候，总是遇到很多困惑，下面我就以babel@7为例，重新简单认识下babel。 什么是babel Bab
阅读全文
摘要：说起js中的with关键字，很多小伙伴们的第一印象可能就是with关键字的作用在于改变作用域，然后最关键的一点是不推荐使用with关键字。听到不推荐with关键字后，我们很多人都会忽略掉with关键字，认为不要去管它用它就可以了。但是有时候，我们在看一些代码或者面试题的时候，其中会有with关键字的
阅读全文
摘要：ArrayBuffer 对象与 Blob 对象大家或许不太陌生，常见于文件上传操作处理（如处理图片上传预览等问题）。那么本文将与大家深入介绍两者。 一、ArrayBuffer 对象 ArrayBuffer 对象是 ES6 才纳入正式 ECMAScript 规范，是 JavaScript 操作二进制数
阅读全文
摘要：作为一个前端，说不了解 Promise 对象用法的基本不存在，这里就不对功能用法进行介绍了。但本文将会讲述你可能不知道的 Promise 3 种奇妙用法。当然，每种用法都会有其适用的特殊场景。 Promise 对象是可以缓存 需求 对于一个对象而言，能够被缓存并不是一件难以理解的事情。缓存使用的意义
阅读全文
摘要：在本文中，我们将探讨过去围绕异步执行的JavaScript的演变以及它如何改变我们编写和读取代码的方式。我们将从Web开发的开始，一直到现代异步模式示例。JavaScript作为编程语言具有两个主要特征，这两个特征对于理解我们的代码是如何工作的都很重要。首先是它的同步特性，这意味着代码将几乎在您阅读
阅读全文
摘要：前言 为了支持业务中少量的es6+的高级特性，最近在研究了一下babel的垫片，现将此整理为文字，如下。 babel 和 babel ployfill 的关系 1、先来理解下 babel 到底是做什么的？ 简单来讲，babel解决语法层面的问题。用于将ES6+的高级语法转为ES5。 2、babel
阅读全文
摘要：动态类型语言的最大问题就是无法保证数据流总是正确的，因为我们无法“强行控制”一个参数或变量，比方说，让它不为 null。当我们面对这些情况时的标准做法是简单地做一个判断： function foo (mustExist) { if (!mustExist) throw new Error('Para
阅读全文
摘要：File 对象、FileList 对象与 FileReader 对象大家或许不太陌生，常见于文件上传下载操作处理（如处理图片上传预览，读取文件内容，监控文件上传进度等问题）。 那么本文将与大家深入介绍两者。 一、File 对象 1. 概念介绍 File 对象提供有关文件的信息，并允许网页中的 Jav
阅读全文
摘要：性能是网站运行是否良好的关键因素， 网站的性能与效率影响着公司的运营成本及长远发展，编写出高质高效的代码是我们每个开发人员必备的素质,也是我们良好的职业素养。 如何优化php性能呢？ 一、变量（重要） 1）、 变量大小,注意变量大小是节约内存的最有效手段，对于来自用户表单、数据库和文件缓存的数据都需
阅读全文
摘要：简洁而聚焦的产品定位，贯穿始终 你知道VS Code的开发团队人数只有二十出头吗？难以相信吧，大家都觉得VS Code无所不能，如此强大的工具那么几个人怎么做得出来。实际上功能丰富是个美好的错觉，因为大部分针对特定编程语言和技术的功能都是第三方插件提供的，VS Code的核心始终非常精简，这很考验产
阅读全文
摘要：1、token是什么？ token是一种用户标识，表示用户身份，类似于我们的身份证件。Token 是在服务端产生的。如果前端使用用户名/密码向服务端请求认证，服务端认证成功，那么在服务端会返回 Token 给前端。前端可以在每次请求的时候带上 Token 证明自己的合法地位。如果这个 Token 在
阅读全文
摘要：如果你是一个程序员，除了编码之外，你还需要大量的阅读。今天我要为大家介绍几本值得一读的书，包括《The Pragmatic Programmer》，《The Mythical Man-month: Essays on Software Engineering》和《Clean Code: A Hand
阅读全文
摘要：现在一聊到容器技术，大家就默认是指 Docker 了。但事实上，在 Docker 出现之前，PaaS社区早就有容器技术了，以 Cloud Foundry、OpenShift 为代表的就是当时的主流。 那为啥最终还是 Docker 火起来了呢？ 因为传统的PaaS技术虽然也可以一键将本地应用部署到云上
阅读全文
摘要：高并发系统总是那么令人着迷，比如说双十一的抢购，比如说12306的抢票，都是非常经典的高并发的例子，也是非常大的挑战。对于开发这样系统的人来说，最怕的就是突发的流量，就好比河流突发大水而引发洪涝灾害一样，突发的流量也会引起服务器奔溃。 为了应对这些突发的流量，我们总需要做点什么?今天我们来介绍一下高
阅读全文
摘要：心理学中有一篇相当古老、但又非常重要的论文，题为《魔法数字七（上下浮动二）：人类信息处理能力中的一些限制》。这篇文章衡量了大脑处理信息的极限，并给出了一个具体的数字：人脑可以同时容纳五到九个概念。我们当然能够把这个有趣的结论延伸到诸多领域当中，但对软件开发人员而言，下面两项含义最为重要： 构造（模型
阅读全文
摘要：什么是程序员的基本功 有人说：“初级程序员才比招式，高级程序员只看内功。”什么是程序员的基本功？不是那些高大上、新潮的技术、框架，而是程序员每天做的基础工作。 所谓基本功，就是说抽空都要练习的。就像一个学武之人一样，每天早上要跑步、扎马步，也像一个京剧演员样，一大早就要吼几嗓子，我们程序员也得每天练
阅读全文
摘要：需求篇 对于程序员来说，“单身”依然是人生最大的bug，关键是还无法调试。虽然俗话说“自古英雄多寂寞”，但是缺少另一半的人生总是不完整的。作为程序员，追女朋友一定要讲究策略。作者从需求分析到测试提供了一整套解决方案，现将其开源，希望各位程序员能找到自己心仪的女朋友。 需求分析 A、程序员为什么找不到
阅读全文
摘要：前言 MySQL在2016年仍然保持强劲的数据库流行度增长趋势。越来越多的客户将自己的应用建立在MySQL数据库之上，甚至是从Oracle迁移到MySQL上来。但也存在部分客户在使用MySQL数据库的过程中遇到一些比如响应时间慢，CPU打满等情况。阿里云RDS专家服务团队帮助云上客户解决过很多紧急问
阅读全文
摘要：前言 Http 缓存机制作为 web 性能优化的重要手段，对于从事 Web 开发的同学们来说，应该是知识体系库中的一个基础环节，同时对于有志成为前端架构师的同学来说是必备的知识技能。但是对于很多前端同学来说，仅仅只是知道浏览器会对请求的静态文件进行缓存，但是为什么被缓存，缓存是怎样生效的，却并不是很
阅读全文
摘要：利用CMS系统建站需要一些基本的建站知识才能达到快速建站，那么现在来讲一下如何利用CMS建站系统进行网站建设需要学习哪些东西? 1. 服务器与数据库操作以及简单的了解html和css知识 CMS系统都会依赖于一定的技术系统，使用某一种数据库解决方案，比如ASP+ACCESS或SQL Server、p
阅读全文
摘要：一、heredoc结构及用法 Heredoc 结构就象是没有使用双引号的双引号字符串，这就是说在 heredoc 结构中单引号不用被转义。其结构中的变量将被替换，但在 heredoc 结构中含有复杂的变量时要格外小心。其对格式化输出内容时，比较有用 。具体其有以下特点： 1、开始标记和结束标记使用相
阅读全文
摘要：关于级别 我们知道程序员分 初级，中级， 高级， 这个概念， 并不是以工作年限作为分类依据的。 也就是说， 级别和你工作多少年没有必然的联系。 一个初级工程师可能工作很多年依然是初级工程师， 也有的工程师， 工作短短两三年， 就跻身高级工程师的行列。 这一切， 都取决于你的能力。 不过也不是说高级工
阅读全文
摘要：谈到哲学，多数人都会直觉性的认为它是很高深的一门学问。实际上大多数情况并非如此，哲学研究的往往是非常简单的一些命题，而这些命题在常人看来可能并没有现实意义。 比如说：到底是先有鸡还是先有蛋的问题；比如说：一个号称只给不能给自己理发的人理发的理发师到底能不能给自己理发的问题。当然本文的目的并不在于讨论
阅读全文
摘要：三层架构 三层架构指的是: 视图层(View),服务层(Service)和持久层(DAO). 他们分别负责不同的功能.。单纯就是指后台的设计架构,这种架构模式是从微软来的, 微软提倡这种架构模式并且在 零几年的时候给了一个宠物商店的Demo 用于示范(有一点记不清了.). View层: 用于接收用户
阅读全文
摘要：前后端传参一般有两种形式： key=value 形式传参（即 parameter 形式）body 形式传参（传 json 数据给后端） key=value 形式传参 1.如果使用的是 GET 请求，浏览器展示的 Request URL 会自动在路径后面加上 ?a=1&b=2这样的参数，这就是 key
阅读全文
摘要：引言 “网络就像wifi，没有故障的时候，就没有人意识到它的存在”，这句话有无数的翻版，但是对于网络工程师来说，这就是现身说法。 由于即便是在上千人的公司，网络工程师的人数也仅仅是个位数，所以他们的工作也鲜为人知 。 “网络是不是有问题?”这句话几乎成了所有SRE排错时的口头禅，如果这个时候网络工程
阅读全文
摘要：错误和异常 在编写代码的时候，先不管出于什么原因，在运行阶段，可能都看到过一些错误的信息。这些信息当中（至少）有两种可区分的错误：语法错误 和 异常。 语法错误 语法错误也叫解析错误，这可能在学习编码中最容易遇到的错误： >>> while True print('Hello World') Fil
阅读全文
摘要：HTTPS和HTTP的区别主要如下： 1、https协议需要到ca申请证书，一般免费证书较少，因而需要一定费用。 2、http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。 3、http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是44
阅读全文
摘要：除了使用 js 追踪用户，现在有人提出了还可以使用 css 进行网页追踪和分析，译者认为，这种方式更为 优雅，更为 简洁，且 不好屏蔽，值得尝试一波 我们可以用它来做什么 我们可以收集关于用户的一些基本信息，例如 屏幕分辨率（当浏览器最大化时）以及用户使用的什么浏览器（引擎） 此外，我们可以监测用户
阅读全文
摘要：定义 网站响应时间是指系统对请求作出响应的时间。通俗来讲就是我们把网址输入进浏览器然后敲回车键开始一直到浏览器把网站的内容呈现给用户的这段时间。网站响应时间是越短越好，因为网站页面打开速度越快，就意味着我们的用户可以更快的访问站点或者我们的服务器。一般我们网站的响应时间保持在100~1000ms即可
阅读全文
摘要：在过去的几星期里，随着 Martin Fowler 博客上，那篇 Cam Jackson 写的微前端的文章发布，到处都在讨论 Microfrontend。作为一个微前端 “专家”，我也分享一下：如何去落地微前端。 微前端是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将单页面前端应用由单
阅读全文
摘要：埋点方案的确定，业界的埋点方案主要分为以下三类： 代码埋点：在需要埋点的节点调用接口，携带数据上传。如百度统计等；可视化埋点：使用可视化工具进行配置化的埋点，即所谓的「无痕埋点」，前端在页面加载时，可以读取配置数据，自动调用接口进行埋点。如开源的Mixpanel;无埋点：前端自动采集全部事件并上报埋
阅读全文
摘要：css3 的 calc() 函数允许我们在属性值中执行数学操作。例如，我们可以使用 calc() 指定一个元素宽的固定像素值为多个数值的和。 .foo { width: calc(100px + 50px); } 为什么是 calc() 如果你使用过 css 预处理器，比如 SASS，以上示例你或许
阅读全文
摘要：互联网有数不清的网页，且不断在以指数级速度产生新内容。到 2022 年，整个互联网创建和复制的数据将达到 44 ZB，也就是 44 万亿 GB。这么大体量内容的背后也带来了丰富信息源，唯一的问题是怎么在这浩如烟海的信息中检索到你想要的信息并带来价值。 直接解决方案就是使用 Web 挖掘工具 。Web
阅读全文
摘要：W3C的意思是万维网联盟（World Wide Web Consortium），创建于1994年10月，是一个会员组织，它的工作是对web进行标准化 >W3C 致力于实现所有的用户都能够对 web 加以利用，W3C 同时与其他标准化组织协同工作 W3C 扮演者一个会员组织的角色（ Microsoft
阅读全文
摘要：在日常写完代码之后，你是否会有 Code Review 的习惯？Code Review 即代码审查，其目的在于找到开发时被忽视的 Bug，以此极大地提高代码质量也可以帮助开发者们更加熟悉项目。但遗憾的是，很多业界的开发者并没有常规代码审查的习惯。那么对于程序员而言，Review 是否真的是一项必备的
阅读全文
摘要：第一阶段：html+css JavaScript基础：js基础教程、js内置对象常用方法、常见DOM树操作大全、ECMAscript、DOM、BOM、定时器和焦点图。 JS基本特效：常见特效、例如：tab、导航、整页滚动、轮播图、JS制作幻灯片、弹出层、手风琴菜单、瀑布流布局、滚动事件、滚差视图。
阅读全文
摘要：前言 开发过程少不了会遇到给某个状态设置过期时间的需求,例如:进入页面有个默认弹窗,用户关闭之后在 1 小时之内再次打开不能再弹; 面对这样需求我们首先想到的是需要设置一个变量去控制弹窗的隐藏(因为默认是开启的), 如何去保证这个变量的有效时间呢? 这里就涉及到数据的持久化,前端数据持久化可以理解为
阅读全文
摘要：最近在项目的过程中遇到了一个问题，menu-bar希望始终显示在最上面，而在之后的元素都显示在它之下，当时设置了 z-index 也没有效果，不知道什么原因，因此找了一下css有关层叠方面的资料，解决了这个问题，这里记录一下~ 屏幕是一个二维平面，然而html元素却是排列在三维坐标系中，x为水平位置
阅读全文
摘要：1、文本属性 文本对齐 text-align 属性规定元素中的文本的水平对齐方式。 属性值：none | center | left | right | justify 文本颜色 color属性 文本首行缩进 text-indent 属性规定元素首行缩进的距离，单位建议使用em 文本修饰 text-
阅读全文
摘要：PWA 的译文为渐进式 Web 应用，它根据设备的支持情况来提供更多功能，如离线能力、推送通知，甚至本地应用的外观和速度，以及对资源进行本地缓存。旨在提升 Web App 的性能，改善 Web App 的用户体验。面对拥有如此优秀特性的 PWA，本文作者 Stefan Dorresteijn 大胆预
阅读全文
摘要：看到太多的网页设计师发布企业站的个人作品，设计中总是摆脱不了大框套小框的设计布局思路，不加思索的跳入单一的网页布局形式中，于是就有了把企业站常用的页面布局方式总结一下的想法，让大家包括我自己全面的了解一下企业站的常见布局方式，做到对此种类型的网站布局心中有数，跳出狭隘、单一的设计思路，于是就有了这篇
阅读全文
摘要：前言 这篇文章主要讲解决思路，不对各种概念进行过多讲解。 问题描述 开发微信H5页面的时候，在Ios微信内置浏览器中点击返回按钮返回上一页时，上一页面不会被刷新。在浏览器缓存机制中，在返回上一页的操作中， html/js/css/接口等动静态资源不会重新请求，但是js会重新加载。但在Ios微信页面中
阅读全文
摘要：1. # 10年9月，twitter改版。一个显著变化，就是URL加入了"#!"符号。比如，改版前的用户主页网址为http://twitter.com/username改版后，就变成了http://twitter.com/#!/username这是主流网站第一次将"#"大规模用于重要URL中。这表明
阅读全文
摘要：本文重点关注如何充分利用html5和css让web app运行更加流畅. Tip 1: 使用web storage代替cookie cookie最大的缺陷是在每一次HTTP请求中都会携带所有符合规则的cookie数据.这会增加请求响应时间,特别是XHR请求. 在html5中使用sessionStor
阅读全文
摘要：html 5已经成为Web开发者当中最流行的语言之一，“健壮的”语言有很大的生产优质万维网内容的能力。html 5在近三年的增长迅猛，新引入HTML 5的技术更加的优秀。HTML 5技术被现代浏览器所支持，如Chrome、Firefox、Internet Explorer等等。而今天，我们将为您推荐
阅读全文
摘要：前言 在安全攻防战场中，前端代码都是公开的，那么对前端进行加密有意义吗？可能大部分人的回答是，毫无意义，不要自创加密算法，直接用HTTPS吧。但事实上，即使不了解密码学，也应知道是有意义的，因为加密前和解密后的环节，是不受保护的。HTTPS只能保护传输层，此外别无用处。 而加密环节又分： 传输加密（
阅读全文
摘要：打包工具可以更好的管理html，css，JavaScript，使用可以锦上添花，不使用也没关系。 1. 前言 1.1 前端 前端三剑客：结构层 html，表现层 css，行为层 JavaScript。 html好比是房子的地基，css和 javascript是房子的建筑材料，这三个部分一起组成个漂亮
阅读全文
摘要：一、思考 在移动端越来越重要的背景下，每位web开发者对移动适配都有自己的想法。是移动优先，还是PC优先，还是两者兼得？在实际开发中这个问题是和项目产品定位有关的，也涉及到UI的设计，不是开发者能决定。但不管产品如何定位，作为开发者总是要提供最好的解决方案，是用一套样式还是多套样式？网上一搜，有静态
阅读全文
摘要：css 用于控制网页的样式和布局。css3 是最新的 CSS 标准。CSS3新增了很多的属性，下面一起来分析一下新增的一些属性： 1.CSS3边框： border-radius：CSS3圆角边框。在 CSS2 中添加圆角矩形需要技巧，我们必须为每个圆角使用不同的图片，在 CSS3 中，创建圆角是非常
阅读全文
摘要：解释一下web前端工作是做啥的，Web前端开发工程师，主要职责是利用(X)html/css/JavaScript/Flash等各种Web技术进行客户端产品的开发。完成客户端程序（也就是浏览器端）的开发，开发JavaScript以及Flash模块，同时结合后台开发技术模拟整体效果，进行丰富互联网的We
阅读全文
摘要：图片渲染要解决的几个主要问题 1、图片默认是水平方向，要设置图片居中 max-height:100%;max-width:100%;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)" 2、需要旋转的情况是：图片的宽度大
阅读全文
摘要：我们在学习JavaScript，或其他任何编码技能的时候，往往是因为这些拦路虎而裹足不前：有些概念可能会造成混淆，尤其当你是从其他语言转过来的时候。找不到时间（有时是动力）学习。很容易忘记已经理解了的东西。工具多又在不断变化，所以不知道从哪里开始。 幸运的是，这些拦路虎是可以被识别，并消灭的。在这篇
阅读全文
摘要：一.什么是浏览器兼容性问题？ 所谓的浏览器兼容性问题，是指不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况；而造成浏览器兼容问题的根本原因，是浏览器的内核不同导致的。认识浏览器内核 浏览器类型 内核 js引擎 IE Trident jscript Firefox Gecko Tra
阅读全文
摘要：在大多数的文章中，attribute 一般被翻译为“特性”，property 被译为“属性”。 结论 把结论写在最前面，如果你全都懂，后面就不用看了。 html attributeDOM property 值永远是字符串或 null 值可以是任意合法 js 类型 大小写不敏感 大小写敏感 不存在时返
阅读全文
摘要：前后端分离已成为互联网项目开发的业界标准使用方式，通过nginx+tomcat的方式（也可以中间加一个nodejs）有效的进行解耦，并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务（多种客户端，例如：浏览器，车载终端，安卓，IOS等等）打下坚实的基础。这个步骤是系统架构从
阅读全文
摘要：网上浏览的时候。看到有些页面会有背景的水印效果，使用canvas实现了个类似的效果，如图 可以作为背景，也可以作为页面前景覆盖，防止网页信息的截图 实现代码 let canvas = document.createElement('canvas') canvas.id = '__canvas' ca
阅读全文
摘要：原因何在 1.从客观原因来看，前端相对于后端的入门门槛确实低了不少。公司对前端的需求量虽然很旺盛，但是对前端的技术能力要求却不是很高，特别是一些小公司或者不是技术驱动的公司。这给人一种错觉，好像只需要懂一些js，会一般的html+css就能完成前端的工作。也由于这种原因，前端总是处于技术鄙视链的最底
阅读全文
摘要：前言 老鸟：怎样去监听 DOM 元素的高度变化呢？菜鸟：哈哈哈哈哈，这都不知道哦，用 onresize 事件鸭！老鸟扶了扶眼睛，空气安静几秒钟，菜鸟才晃过神来。对鸭，普通 DOM 元素没有 onresize 事件，只有在 window 对象下有此事件，该死，又双叒叕糗大了。 哈哈哈哈，以上纯属虚构，
阅读全文
摘要：背景介绍 信息流App是当下最流行的产品之一，如今日头条等。我所在的团队也是在做这样一款信息流App。App的Feed流是客户端Native实现的。用户点击Feed流中的文章后，会进入到文章底层页。文章底层页大部分都是Native实现的，但是有一些文章的数据是非结构化的，Native没有办法很好地处
阅读全文
摘要：为什么要做前端错误监控? 1. 为了保证产品的质量 2. 有些问题只存在于线上特定的环境 3. 后端错误有监控,前端错误没有监控 前端错误的分类 前端错误分为两类: 即时运行错误和资源加载错误 即使运行错误的捕获方式 即时运行错误的捕获方式分为两类 try...catch window.onerro
阅读全文
摘要：当我们在进行开发的时候，通常需要属于我们自己的错误类来反映任务中可能出现的特殊情况。对于网络操作错误，我们需要 HttpError，对于数据库操作错误，我们需要 DbError，对于搜索操作错误，我们需要 NotFoundError，等等。 我们自定义的错误应该具有基本的错误属性，例如 messag
阅读全文
摘要：关于浏览器缓存 浏览器缓存，有时候我们需要他，因为他可以提高网站性能和浏览器速度，提高网站性能。但是有时候我们又不得不清除缓存，因为缓存可能误事，出现一些错误的数据。像股票类网站实时更新等，这样的网站是不要缓存的，像有的网站很少更新，有缓存还是比较好的。今天主要介绍清除缓存的几种方法。 怎么清除浏览
阅读全文
摘要：现在，有越来越多所谓的“教程”来帮助我们提高网站的易用性。我们收集了一些在Web开发中容易出错和被忽略的小问题，并且提供了参考的解决方案，以便于帮助Web开发者更好的完善网站。 通过避免下面这些小错误，可以使得我们的网站变得更为友好。 错误1： 表单的label标签跟表单字段没有关联 利用“for”
阅读全文
摘要：效果图 实现思路 打开图片并将图片绘制到canvas中； 利用canvas的drawImage()函数来裁剪图片； 将canvas转化为Image即可。 html代码： <div id="container"> <div id="btnDiv"> <button id="btn1">截图</butt
阅读全文
摘要：实现基本功能 完整代码查看这里 ，下面只展示html结构和JavaScript <div class="carousel"> <div class="panels"> <a href="#"> <img src="http://cdn.jirengu.com/book.jirengu.com/img
阅读全文
摘要：前言 在开发中经常有从列表跳到详情页，然后返回详情页的时候需要缓存列表页的状态（比如滚动位置信息），这个时候就需要保存状态，要缓存状态；vue里提供了keep-alive组件用来缓存状态。可以用以下几种方案解决问题； 一、利用meta标签 直接上代码,1、首先在路由中的meta标签中记录keepAl
阅读全文
摘要：近来，各大平台的操作系统纷纷引入 Dark Mode 深色模式，包括 Windows、MacOS 以及 Android 甚至 iOS 13 也将引入该模式。深色模式引入的同时，同时允许我们基于用户的偏好设计特定的样式。 近期，W3C css 工作组发布了 css Color Adjust Level
阅读全文
摘要：代码评审标准 代码评审的主要目的是确保 Google 代码库的整体代码运行状况随着时间的推移而不断改善。代码评审的所有工具和过程都是为此设计的。 为了实现这一点，必须做出一系列的权衡。 首先，开发人员必须能够在其任务上取得进展。如果开发人员从未向代码库提交过改进，那么代码库将永远不会得到改善。另外，
阅读全文
摘要：当组织规模达到一定量级，就会不可避免的陷入到技术选型困境中：新技术是否值得被采用、如何判断可行性、替换成本有多高、隐藏陷阱有哪些等等。本文将从技术管理的角度出发，介绍ThoughtWorks技术雷达何以成为技术管理者的案头手册。 技术雷达脱胎于ThoughtWorks一线实践者的内部讨论，后来陆续受
阅读全文
摘要：自动化是科技行业前进的方向，但它也是一把双刃剑。做对了，能够削减费用开销，减少维护工作；做错了，会让流程更加复杂，并增加预算。就像任何技术或流程一样，自动化在某些时候、某些地方是有效的，而在其他一些领域，要么不是很有效果，要么无效。 如今， 自动化系统和人类之间的差距正在逐渐缩小，人类和机器各自最擅
阅读全文
摘要：今天，我们谈一谈JAMStack 和它的未来演变。 历史总是喜欢重演。 我在 1999 年建立了自己的第一个网站，使用的是当时的 Web 高手（这里我还没法用“开发者”这个词）能接触到的最先进技术：所见即所得的编辑器。对我（以及许多其他许多人！）而言，这种技术最早指的就是 微软 FrontPage
阅读全文
摘要：编程容易产生挫折，即使作为一种业余爱好也可能是这样。建立一个网页，手机APP或桌面应用都是个很大的工程，好的记笔记技能是让这个工程井然有序的关键，也是克服压力、绝望和倦怠的好方法。 但是大多数笔记应用的设计并不是以程序员作为目标受众，这些程序可能会让使用者用起来很难受，甚至完全放弃这些工具。这就是为
阅读全文
摘要：你想成为一名Web开发人员，有一个问题，在技术行业还没有经验。你可能上了很多课程并且也写了很多个人项目，但是简历上经验一栏却始终和你没有什么关系。转型到一个新的领域并不是那么容易，你想知道你是否已经准备好了，是否有人会认真的对待你，最重要的是你是否能得到工作。 相信我：不要让那些担心阻碍你前进的道路
阅读全文
摘要：明白了之后，当时有点情绪，因为技术本身是架构性质的团队，一个人架构，多个人实施，而且多个平台之间还具有耦合，如果不是有一个整体负责的人，很难把系统做好，最终白做。但是随后更多的还是反思自己。对于为什么最终问题归结到我们几个技术负责人身上，我们的问题肯定有很多，我们承认技术情商低不会处理问题，但是绝不
阅读全文
摘要：马克·吐温曾在给记者的一封信中写道：“有关我死亡的报道有些夸张”。马克·吐温的这句俏皮话用在软件技术从业人员身上是再合适不过了。年复一年，技术专家们掀起了一轮又一轮舆论浪潮，宣称这个或那个技术或趋势已经死亡，或者，如果足够幸运的话，正在走向死亡的路上。 我倾向于认为这是一种相对较新的现象，但早在 2
阅读全文
摘要：背景 16年普通本科毕业，毕业后来到北京，任职于一家创业公司，三年前端开发经验。 三年时间任职于同一家公司，环境逐渐舒适，不管是技术上还是业务上都到达了一个瓶颈期，于是便有了这次跳槽经历。 核心诉求 在换工作的时候，要认真思考自己下一步的目标与未来的一个职业规划，明白自己想要什么，搞清楚自己的核心诉
阅读全文
摘要：WEB前端开发学习过程中，作为一个新手入门级别的菜鸟你，要如何的高效的学习呢？ html语言学习的7个秘诀 也就是说如何学习html语言。 新手们有一个常见的错误就是犹豫于判断哪种编程语言是做好的、最该先学的。 我们有很多的选择，但你不能说那种语言“最好”。 我们应该理解：说到底，什么语言并不重要。
阅读全文
摘要：缓存是搭建高性能高并发系统的必备手段之一，通常用来解决性能瓶颈，是程序员的必备知识点，也是面试必备考点。 尽管，产品经理大概率不会关注系统性能，但程序员在实现需求的时候必须思考系统承载的并发量和用户量。缓存主要用来解决性能瓶颈的问题，一旦错误使用反而会令系统崩溃。今天，我们就通过4W的方式系统化地总
阅读全文
摘要：1. Volt Volt是一个插件管理器，你可以通过它来安装插件并创建名为“配置文件”的插件组合，Volt仍然相对较新，所以还不够完美(例如，每个插件只能有一个配置文件)，但除此之外，我发现它非常方便、非常快、非常简单。 2. Vim-Rainbow 几乎所有主流的编程语言都需要用到方括号，圆括号，
阅读全文
摘要：一、forward和redirect的区别 从地址栏显示来说：forward是服务器内部重定向，客户端浏览器的网址不会发生变化；redirect发生一个状态码，告诉服务器去重新请求那个网址，显示的的新的网址 数据共享：forward使用的是同一个request，可以共享request的数据，redi
阅读全文
摘要：当你忙于工作时，就很容易陷入满足于现状的心态，接受当前的一切。事实上，没有人会永远是一个程序员。即便是有些工作了二三十年的程序员，随着职业技能的发展，他们也在不同的公司间跳槽。 即使是在同一家公司，这些经验丰富的程序员也会在他们的职业生涯中稳步上升。程序员可能是现在为数不多的，在职场上会考核你的专业
阅读全文
摘要：问题背景 先说说为什么会有开发效率的问题。Flutter 的跨平台多适用于 UI 等上层需求，本来是可以提升开发效率的。但是诸如 LBS、系统和设备信息、获取相册等常用功能都需要两端去写很多 Native 代码。 最终原本的『两端开发』最后成了『三端开发』 。很少会有完全用 Flutter 开发的
阅读全文
摘要：今天主要分享两个shell脚本实例，内容不重要，重点是看如何去实现。 1. 批量创建特殊要求用户 需求：批量创建10个系统帐号hwb01-hwb10并设置密码(密码为随机数，要求字符和数字等混合)。 脚本： #!/bin/bash ##################################
阅读全文
摘要：首先，这篇文章的适用人群 Web 文档和开发工具从业者。这里我还是举几个例子帮助理解 你们的产品类似于 Office Online, Google Docs, 石墨, 语雀, Notion 等等 你们的产品类似于 Monaco Editor, CodeMirror, Ace 等等 对 Web 平台
阅读全文
摘要：一、前端是什么？ 工作流程为从UI处得到原型图或者效果图，在项目（网站、微信公众号、小程序、WEBAPP）中还原图片效果，然后与后台进行各种数据交互。 目前的前端市场整体还是处于迅速发展期，市场对于前端的需求也一直比较大。 市场对于中高级的前端工程师需求更加迫切，所以就算入了前端的门，也需要不断的提
阅读全文
摘要：一、关于php ini介绍 php.ini apache在启动时php.ini被读取。对于服务器模块版本的php，仅在web服务器启动时读取一次。对于CGI和CLI版本，每次调用都会被读取 Apache Web服务器在启动时会把目录转到根目录，这将使得PHP尝试在根目录下读取php.ini，如果·存
阅读全文
摘要：划重点 MVVM 双向数据绑定 在Angular1.x版本的时候通过的是 脏值检测 来处理 而现在无论是react还是vue还是最新的Angular，其实实现方式都更相近了 那就是通过 数据劫持+发布订阅模式 真正实现其实靠的也是ES5中提供的 Object.defineProperty ，当然这是
阅读全文
摘要：接触前端也有一段时间了，逐渐开始接触Node.js，刚刚接触Node.js的时候一直都以为Node.js就是JavaScript，当对Node.js有一定的了解之后，其实并不然两者之间有关系，其中的关系又不是必然的，对Node.js进行的一些了解，对其进行一些概述，本篇文章并没有对Node.js的A
阅读全文
摘要：本项目使用主要d3.jsv4制作，分两部分，一个是实际展示的连线动画图，另一个是管理人员使用鼠标编辑连线的页面。对于d3.js如何引入图片，如何画线等基础功能，这里就不再介绍了，大家可以找一些入门文章看一下。这里主要介绍一下重点问题。 1.连线动画图 此图的主要功能是每隔给定时间，通过ajax请求后
阅读全文
摘要：最近遇到一个需求，需要限制文本框输入数字，而number类型的输入框有箭头，个人不是很喜欢，因此想要寻求其它途径实现。本想通过网上找个现成的插件，然而百度，谷歌一番都没有找到满意的答案，至于随手一搜出来的方案或多或少都有点缺陷。因此自己动手，丰衣足食。 事件选型 首先我们很容易想到通过事件来达到目的
阅读全文
摘要：前言 webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。w
阅读全文
摘要：什么是 style-loader style-loader 的功能就一个，在 DOM 里插入一个 <style> 标签，并且将 css 写入这个标签内。 简单来说就是这样： const style = document.createElement('style'); // 新建一个 style 标签
阅读全文
摘要：通过将 BFF 构建于 serverless 之上，将人工智能实验室（天猫精灵）数十个中后台应用整合到了一个统一入口。用云函数的方式取代了传统基于 Nodejs 的 BFF 层，提供了在一个站点下不同应用以及不同环境的快速切换能力。从而极大程度的降低了开发成本和运维成本，使机器数量从 200 余台缩
阅读全文
摘要：从 react Hooks 正式发布到现在，我一直在项目使用它。但是，在使用 Hooks 的过程中，我也进入了一些误区，导致写出来的代码隐藏 bug 并且难以维护。这篇文章中，我会具体分析这些问题，并总结一些好的实践，以供大家参考。 问题一：我该使用单个 state 变量还是多个 state 变量？
阅读全文
摘要：其实转换成model类是有好处的，转换后可以减少上线后APP崩溃和出现异常，所以我们从这节课开始，要制作model类模型，然后用model的形式编辑UI界面。 类别json的分析 比如现在从后台得到了一串jsON数据： { "code": "0", "message": "success", "da
阅读全文
摘要：一个订阅好友在线的组件 我们在DidMount的时候通过ID订阅了好友的在线状态，并且为了防止内存泄漏，我们需要在WillUnmount清除订阅 但是当组件已经显示在屏幕上时，friend prop 发生变化时会发生什么？ 我们的组件将继续展示原来的好友状态。这是一个 bug。而且我们还会因为取消订
阅读全文
摘要：谷歌的数据表明，一个有 10 条数据 0.4 秒可以加载完的页面，在变成 30 条数据加载时间为 0.9 秒后，流量和广告收入减少了 20%。当谷歌地图的首页文件大小从 100kb 减少到 70~80kb 时，流量在第一周涨了 10%，接下来的三周涨了 25%。 腾讯的前端工程师根据长期的数据监控也
阅读全文
摘要：讲解Flutter 路由传递，这是一个大的概述图。 当 app 的页面变多的时候，就需要考虑页面传值的问题，在第一个页面如何把数据传递到 另外一个页面？最最基本的方法是在打开新页面，传递参数过去。但当 app 变得很大或者功能变多，你会发现传值是一件费劲的事情。例如前期设计的时候，只需要一个参数，但
阅读全文
摘要：随着Nodejs的不断发展，对于前端来说要做的东西也就更多，vue脚手架react脚手架等等等一系列的东西都脱颖而出，进入到人们的视野当中，对于这些脚手架工具来讲也只是停留在应用阶段，从来没有想过脚手架是如何实现的？vue init webpack 项目名称是如何通过这样的命令创建了一个项目，其最重
阅读全文
摘要：小程序底层实现原理及一些思考 两月以后，看着电脑，我回想起接到通知说要开发小程序引擎的那个下午。当时的我以为，这个小程序和其他小程序都不一样，因为它是个假的，其实是个网页。两月之后，我才发现，“噢~原来大家都是这么做的啊”。 最近一直在做小程序的底层实现，过程中磕磕绊绊也多次进行架构方向上的转型，趁
阅读全文
摘要：在前端开发的过程中，我们可能会花不少的时间去集成 API、与 API 联调、或者解决 API 变动带来的问题。如果你也希望减轻这部分负担，提高团队的开发效率，那么这篇文章一定会对你有所帮助。 文章中使用到的技术栈主要有： react 全家桶 TypeScript Rxjs 文章中会讲述集成 API
阅读全文
摘要：作用域插槽是 vue.js 中一个很有用的特性，可以显著提高组件的通用性和可复用性。问题在于，它实在不太好理解。尝试搞清楚父子作用域之间错综复杂的关系，其痛苦程度不亚于求解一个棘手的数学方程。 当你无法理解一个东西的时候，最好的办法就是在解决问题的过程中体会它的应用。本文将向你展示如何使用作用域插槽
阅读全文
摘要：0. 基础要求 了解常见的 ES6 新特性 ES6 的导入导出语法 解构赋值 箭头函数 etc... 了解 vue 2.x 的基本使用 组件 常用的指令 生命周期函数 computed、watch、ref 等 1. 相关资源 【知乎 - vue Function-based API RFC】http
阅读全文
摘要：vue 将 <slot> 元素作为承载分发内容的出口 // layout.vue <div class="container"> <main> <slot></slot> </main> </div> 当组件渲染的时候，<slot></slot> 将会被替换该组件起始标签和结束标签之间的任何内容 /
阅读全文
摘要：作为 vue 全家桶的一员，vuex 的重要性不言而喻，不管是用来管理状态，还是封装 Controler 都很好用。不过在一些体量较小的项目中，为了几个简单的状态或者处理函数而引入 Vuex，就像是高射炮打蚊子，大材小用了 这时候就可以模拟 Vuex，自己写一个简单的 Store， 用来管理状态并实
阅读全文
摘要：1. 一个原则 做权限管理，一个核心思想就是后端做权限控制，前端做的所有工作都只是为了提高用户体验，我们不能依靠前端展示或者隐藏一个按钮来实现权限控制，这样肯定是不安全的。 就像用户注册时需要输入邮箱地址，前端校验之后，后端还是要校验，两个校验目的不同，前端校验是为了提高响应速度，优化用户体验，后端
阅读全文
摘要：介绍 Dojo store 提供可预测的、一致的状态容器，内置了对共享状态管理模式的支持。 Dojo store 包提供了一个集中式存储，为应用程序提供真正的单一数据源。Dojo 应用程序的操作使用单向数据流；因此，所有应用程序数据遵循相同的生命周期，确保应用程序逻辑是可预测的，且易于理解。 功能描
阅读全文
摘要：vue3 就是基于 Proxy 对其数据响应系统进行了重写，现在这部分可以作为独立的模块配合其他框架使用。数据响应可分为三个阶段： 初始化阶段 --> 依赖收集阶段 --> 数据响应阶段 Proxy代理须知 用 Proxy 做代理时，我们需要了解几个问题： 1、 Proxy 代理是如何对其 trap
阅读全文
摘要：方法一：通过原生的Nodejs API，方法如下： #!/usr/bin/env node # test.js var argv = process.argv; console.log(argv) 通过以下命令执行： node test.js param1 --param2 -param3 结果输出
阅读全文
摘要：话说vue3已经发布，就引起了大量前端人员的关注，木得办法，学不动也得硬着头皮学呀，本篇文章就简单介绍一下「vue3的数据响应原理」，以及简单实现其reactive、effect、computed函数，希望能对大家理解vue3响应式有一点点的帮助。话不多说，看下面栗子的代码和其运行的结果。 <div
阅读全文
摘要：有关即将发布的 vue.js 的第 3 个主要版本的信息越来越多。通过下面的讨论，虽然还不能完全确定其所有内容，但是我们可以放心地认为，它将是对当前版本（已经非常出色）的巨大改进。 vue 团队在改进框架 API 方面做得非常出色。 尤雨溪将 Vue 3 的目标描述为： 使其更快 使其更小 使其更易
阅读全文
摘要：一、react-Hooks要解决什么？ 以下是上一代标准写法类组件的缺点，也正是hook要解决的问题 大型组件很难拆分和重构，也很难测试。 业务逻辑分散在组件的各个方法之中，导致重复逻辑或关联逻辑。 组件类引入了复杂的编程模式，比如 Render props 和高阶组件 设计目的 加强版函数组件，完
阅读全文
摘要：1.前言 vue的父子组件通信用什么？：prop和$emit的组合。如果是爷孙组件呢？：那么就要用父组件来转发数据和事件了。如果是太爷爷和孙子组件呢？：当然是vuex啦emmm 好的，没我啥事了，我这就走。 不行，我还能再挣扎一会儿！肯定有一部分兄弟做的项目比较小，组件通信的情况不是很多，懒得引入v
阅读全文
摘要：引言 前端需要学习的东西真的挺多的，之前主要从事的是MVC框架，操作DOM，使用JQUERY比较多，不知到什么时候，发现现在前端MVVM是主流，不得不把之前的大部分东西丢掉，作为前端婴儿不断前行。 所以以后的文章，可能开始都比较基础，希望大拿不要见笑，若有不对的地方，希望指正，我也会不断修正迭代。
阅读全文
摘要：Lodash是一个可以提高开发者效率、提高原生js方法性能的 JavaScript 第三方实用工具库； Lodash特点就是一致性、模块化、高性能。业界赫赫有名，其不需要引入其他第三方依赖，我们在使用的过程中可以封装好的方法；（其模块化特别适用于：创建符合功能的函数、遍历 array（数组）、obj
阅读全文
摘要：引言 在前段时间看到这样一个关于 vue 的问题，为什么每个组件 template 中有且只能一个 root？ 可能，大家在平常开发中，用的较多就是 template 写 html 的形式。当然，不排除用 jsX 和 render() 函数的。但是，究其本质，它们最终都会转化成 render() 函
阅读全文
摘要：在以前传统的前端页面开发方式时，存在协同困难，可复用性差的问题，导致开发和维护都不是一件简单的事。而组件化思想的提出，以及vue、react等MV*框架的快速流行，让我们开始尝试用组件化的思想去开发。由于笔者最近在研究组件库的搭建，故撰文记之。 前言 组件化思想让我们把页面划分为一个个组件，组件内部
阅读全文
摘要：背景 由于我们无法将小程序直接分享到朋友圈，但分享到朋友圈的需求又很多，业界目前的做法是利用小程序的 Canvas 功能生成一张带有二维码的图片，然后引导用户下载图片到本地后再分享到朋友圈。而小程序 Canvas 功能是很难用的，往往为了绘制一张简单图片，就得写上一堆 boilerplate cod
阅读全文
摘要：简介 Fabric.js是一个可以简化Canvas程序编写的库。 Fabric.js为Canvas提供所缺少的对象模型, svg parser, 交互和一整套其他不可或缺的工具。Fabric.js可以做很多事情，如下： 在Canvas上创建、填充图形（包括图片、文字、规则图形和复杂路径组成图形）。
阅读全文
摘要：中间件是什么呢？ 中间件就是客户端http请求发起传送到服务器和服务器返回响应之间的一些处理函数。 为什么要使用中间件? 通过中间件，可以对数据进行操作使得我们能方便地操作请求数据编写服务器响应。如body-parse中间件对post请求的参数进行处理让我们可以通过res.body快速获取请求参数，
阅读全文
摘要：前言 网上有关ssr开发环境搭建的文章不算多，就算找到也是比较高级的，不太适合新手入坑；这篇内容只抽取了其中最重要的部分，实现最基础的开发环境搭建；所谓开发环境无非两件事：自动打包·自动刷新页面,叫法比较土，也可以叫热更新，热加载。 自动更新renderer 先看目录结构没啥东西，新增了一个hot.
阅读全文
摘要：因为业务需要，每个http请求都要加上一个请求头，所以每次都要写很多重复的代码。 现在尝试把wx.request简单的封装了一下，调用一个request方法，每次请求自动携带header头信息，这样就省事多了，包含了常见的get post put delete 四种请求方法，支持Promise方式调
阅读全文
摘要：JavaScript 框架以及 html 和 css 已成为每个现代软件项目前端开发的重要组成部分。 2020 年将会是为你的 Web 项目选择正确的 JavaScript 框架的又一个年头。如果你正在阅读本文，相信你对下一个程序的技术栈感到困惑。确定它并不容易，本文旨在解决每个开发者的这种困境。与
阅读全文
摘要：node-sass是我们开发中很常见的依赖包，也是安装时间冗长和最常见到报错的依赖。安装node-sass失败原因有很多种，我们在说失败原因之前，先来分析一下node-sass的安装过程(以下node版本为v10.15.3)： PS D:\demo> npm i node-sass // 从npm源
阅读全文
摘要：（一）前言 vue 代码中的 slot 是什么，简单来说就是插槽。 <slot> 元素作为组件模板之中的内容分发插槽，传入内容后 <slot> 元素自身将被替换。 看了上面这句官方解释，可能一样不知道 slot 指的是什么，那么就来看看在 vue 中，什么时候你需要用到 slot 。 举例：一个组件
阅读全文
摘要：网上各种言论说 react 上手比 vue 难，可能难就难不能深刻理解 jsX，或者对 ES6 的一些特性理解得不够深刻，导致觉得有些点难以理解，然后说 react 比较难上手，还反人类啥的，所以我打算写两篇文章来讲新手学习 React 的时候容易迷惑的点写出来 为什么要引入 React 在写 Re
阅读全文
摘要：在css中，很容易在鼠标hover时进行更改，只需： .item { background: blue; } .item:hover { background: green; } 在vue中，它会变得更复杂一些，因为我们没有内置这个功能。我们必须自己实现这些。不过别担心，工作量不是很大。 监听正确的
阅读全文
摘要：我们先来看一个js中常见的js对象序列化成JSON字符串的问题，请问，以下JS对象通过JSON.stringify后的字符串是怎样的？先不要急着复制粘贴到控制台，先自己打开一个代码编辑器或者纸，写写看，写完再去仔细对比你的控制台输出，如果有误记得看完全文并评论，哈哈。 var friend={ fi
阅读全文
摘要：问题1:JavaScript 中 undefined 和 not defined 的区别 JavaScript 未声明变量直接使用会抛出异常：var name is not defined，如果没有处理异常，代码就停止运行了。但是，使用typeof undeclared_variable并不会产生异
阅读全文
摘要：JavaScript 函数式编程是一个存在了很久的话题，但似乎从 2016 年开始，它变得越来越火热。这可能是因为 ES6 语法对于函数式编程更为友好，也可能是因为诸如 Rxjs (reactiveX) 等函数式框架的流行。 看过许多关于函数式编程的讲解，但是其中大部分是停留在理论层面，还有一些是仅
阅读全文
摘要：前两天给个人网站添加了一个小功能，就是在文章编辑上传图片的时候自动给图片加上水印。给网页图片添加水印是个常见的功能，也是互联网内容作者保护自己版权的方法之一。本文简单记录一下借助canvas在前端实现图片添加水印的实现方法。canvas元素其实就是一个画布，我们可以很方便地绘制一些文字、线条、图形等
阅读全文
摘要：背景 使用过 mobx + mobx-react 的同学对于 ES 的新特性装饰器肯定不陌生。我在第一次使用装饰器的时候，我就对它爱不释手，书写起来简单优雅，太适合我这种爱装 X 且懒的同学了。今天我就带着大家深入浅出这个优雅的语法特性：装饰器。 预备知识 全球统一为 ECMAScript 新特性、
阅读全文
摘要：随着开发过程中自动 UI 测试的兴起，无头浏览器已变得非常流行。网站爬虫和基于 html 的内容分析也有无数的用例。 在 99％ 的场合下，你实际上不需要浏览器 GUI，因为它是完全自动化的。运行 GUI 比发布基于 Linux 的服务器或在微服务集群（例如 Kubernetes）上扩展简单的Doc
阅读全文
摘要：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 prop” 是指一种在 react 组件之间使用一个值为函数的 prop 共享代码的简单技术 简而言之，只要一个组件中某个属性的值是函数，那么就可以说该组件使用了 Render Props 这种技术。听起来好像就那么回事儿，那到底 Render Props 有哪些应用场景呢，咱
阅读全文
摘要：在制作网页动态效果时，可能会遇到需要延时在执行的需求，这时就可以用到 js 中定时器来实现此类需求，本文将对setTimeout()做一个用法总结。 setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式(以毫秒为单位) setTimeout()只执行函数一次，如果需要多次调用可以使
阅读全文
摘要：匿名函数是没有函数名的，不能单独使用； 立即执行函数是基于匿名函数实现的，也没有函数名，会在定义后立即执行； 闭包是有权访问另一个函数作用域中的变量的函数。匿名函数、立即执行函数只要满足 有权访问另一个函数作用域中的变量 这一个条件，就成了闭包。 匿名函数 匿名函数：没有函数名的函数 匿名函数不能单
阅读全文
摘要：0. 如何仅保留满足异步条件的元素 在第一篇文章中，我们介绍了 async / await 如何帮助处理异步事件，但在异步处理集合时却无济于事。在本文中，我们将研究该filter函数，它可能是支持异步函数的最直观的方法。 1. Array.filter 该filter函数仅保留通过条件的元素。它得到
阅读全文
摘要：动机 对于搜索字符串的需求，在最坏的情况下，二叉搜索树的时间复杂度可能为 O(n)，“n” 是二叉树中存储的字符串的总数量。所以为了在最佳时间内搜索字符串，需要一种性能更好的数据结构。 Trie 树（又名单词搜索树）可以避免在搜索字符串时遍历整个树。仅包含字母的字符串会把 trie 节点的子级数量限
阅读全文
摘要：一、闭包概念闭包：有权访问另一个函数作用域中的变量的函数，一般情况就是在一个函数中包含另一个函数。从官方定义我们知道闭包是一个函数，只不过这个函数有[超能力]，可以访问到另一个函数的作用域。为什么说这个叫做[超能力]呢？因为我们知道函数作用域是独立的、封闭的，外部的执行环境是访问不了的，但是闭包具有
阅读全文
摘要：箭头功能值得流行。 它的语法简洁明了，使用词法绑定绑定 this，它非常适合作为回调。在本文中，通过了解决学习5个最佳实践，以便我们可以从中学习更多箭头函数的知识，并从它身上获得更多的好处。 1. 箭头函数名推断 js 中的箭头函数是匿名(anonymous)的:函数的name属性是''。 ( nu
阅读全文
摘要：为了保证的可读性，本文采用意译而非直译。 Infinity(无穷大)在 js 中是一个特殊的数字，它的特性是：它比任何有限的数字都大，如果不知道 Infinity， 我们在一些运算操作遇到时，就会觉得很有意思。 现在我们来看看 js 中的Infinity 属性，了解用例并解决一些常见的陷阱。 1.I
阅读全文
摘要：作为前端，在消费接口提供的数据时，往往由于数据实际分布在不同地方（如一部分存储在 ODPS ，而另一部分可能更适合在应用初始化时从本地载入内存）而需要对数据进行区分处理。当然，交互的实现可能也会需要很重的计算逻辑，而为了加速计算、不阻塞渲染线程，Web Worker 不失为一个很好的选择。 网上有很
阅读全文
摘要：Web开发太有意思了！ 但是JavaScript则……令人望而生畏。 Web开发中其他一切对你而言都是小菜一碟，但当你深入探究JavaScript的时候，不免有一种“众人皆醒你独醉”的悲壮——好像其他人都知道你不知道的一些大的基础的知识内容，并且这些内容可以帮助你理解所有知识。 事实是，的确如此，你
阅读全文
摘要：在软件开发中，任务运行器的好处是不言而喻的。它们可以帮助自动运行常见的冗长的任务，让你可以专注于更重要的事情中，比如敲出很棒的代码。说的严肃点，自动运行一些比如图片压缩、代码压缩、单元测试以及更多的任务的技能，简直就是节省时间的利器。 对于很多前端开发者而言，时下使用最多的任务管理器就是Grunt了
阅读全文
摘要：上图是“QQ截图”选择区域时的画面，可以看到除了中间框选的部分，其他区域被一层半透明层覆盖（backdrop），这种效果不知道专业叫法，这里称呼它“镂空遮盖层”。实际业务需求中倒是不多见，比较常见的是“页面上的新手引导”，“视频网站的关灯模式”等用到这种效果，通用简单的做法是将内容元素的z-inde
阅读全文
摘要：分享 Scss 文档太多了，但还是耐心看完了，总结自己常用的一些语法。官方文档 1、规则嵌套 Sass 允许将一套 css 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器，例如： #main p { color: #00ff00; width: 97%; .redbox { back
阅读全文
摘要：写在最前：移动端中导航的网格式布局无处无在，宽高怎么设置相适应？元素怎么居中对齐？不同场景怎么选择代码最高效？巧妙使用margin、padding等基础属性，小小技巧可以解决许多烦恼！ 一、Float布局 1、场景 首页导航布局（无间距） 2、页面布局 <div class="g-grid"> <d
阅读全文
摘要：css动画 css动画允许大多数html元素的动画，而无需使用JavaScript或Flash！ 动画浏览器支持 IE10+支持该属性的。其他低浏览器版本数字后跟-ms-， -webkit-，-moz-或-o-指定使用前缀的第一个版本。 什么是CSS动画？ 动画允许元素从一种样式逐渐变为另一种样式。
阅读全文
摘要：当我最初开始参加编程面试的时候，我所有最心仪的公司都忽视了我。现在回头看那个时候，我发现自己当时去参加面试都完全没做任何准备。虽然已经有许多博客文章和书籍在讲编程面试，但现在的我作为面试官，坐在桌子的另一边，还是能看到许多来参加编程面试的人没做任何准备，或者准备得很糟糕。这也就是为什么我开始写这篇指
阅读全文
摘要：本文主要介绍一种全新的前后端合作模式，在介绍这种模式之前咋们先来看看前后端合作模式的演变。 singsong：该模式主要对传统多页面应用构建的改进。关于 SPA（Single Page Application，单页应用程序）可以参考 SRR（Server-Side Render，服务端渲染）。 演变
阅读全文
摘要：什么是 Socket？ Socket 的中文翻译过来就是“套接字”。套接字是什么，我们先来看看它的英文含义：插座。 Socket 就像一个电话插座，负责连通两端的电话，进行点对点通信，让电话可以进行通信，端口就像插座上的孔，端口不能同时被其他进程占用。而我们建立连接就像把插头插在这个插座上，创建一个
阅读全文
摘要：之所以写这个总结，还要从上周的一次移动端项目的 debug 说起。那天，测试小姐姐拿着自己的 iphone6s 过来找我，说页面打不开。我想：这怎么可能，我手机里挺好的呀，Chrome调试工具也没报错呀！就把她手机拿过来看了看，发现一进去还真就是一片空白。WTF（手动黑人问号）！！！那问题就来了，开
阅读全文
摘要：html5语义元素 语义学是研究语言中单词和短语的含义。语义元素=具有意义的元素。 语义元素清楚地描述了它对浏览器和开发人员的意义。 非语义元素的示例：<div>和<span>- 对其内容一无所知。 语义元素的示例：<form>，<table>和<article>- 清楚地定义其内容。 所有现代浏览
阅读全文
摘要：每个市场都受到某些常见概念的制约，JavaScript 也不例外。 产品生命周期就是其中的一个概念，它可用于多个不同的环境，用以了解和预测产品的行为。这是一个商业概念，能够帮助我们了解产品在其生命中经历的阶段，并解释这些阶段对其受欢迎程度的影响 —— 在大多数情况下以销售情况来体现。可以通过观察市场
阅读全文
摘要：问题症状 今天在开发一个移动端的 H5 页面时，遇到了 IOS 上键盘收起时界面无法归位的问题。下面详细描述下问题和症状： 页面结构 出问题的页面是一个表单结构。即类似于一个 div 下有4个 input 表单的结构，用于用户填写邮寄信息。类似: <div> <input type="text" p
阅读全文
摘要：一直以来，可视化 Bug 跟踪工具都能帮助开发人员加速构建 Web 开发项目。因此作者在对大量的 Bug 跟踪工具进行了研究后，特别针对 Web 开发人员和设计人员列出了十大 Bug 跟踪工具。 在当今数字技术时代，网站和网页设计受到了个人及企业的极大追捧。Web 开发人员正致力于在网站中使用嵌入技
阅读全文
摘要：单位选择: vw 还是 rem ？ 我们选择了 rem 作为像素单位。因为本次开发的项目包含 ipad 与手机端，使用 rem 单位应对的根元素字体可以根据设备动态设置。因此 ipad 端与手机端公共的样式只需要写一套代码就能实现，而使用vw作为单位在无论什么情况下都需要写2套样式，见下面的例子：
阅读全文
摘要：有时候，我们一进入页面，就需要获取display为none元素的物理尺寸（宽高），或获取display为none元素的子元素的物理尺寸（宽高），本篇文章就如何解决以上问题给出自己的解决方案，获取display为none元素的子元素的物理尺寸。 方案一： 1、利用给元素添加行内样式：display:b
阅读全文
摘要：团队开启了一个新项目，希望能在原来项目的工程化基础上再进一步，于是想到了图片自动压缩。这里的图片自动压缩并不是在webpack构建阶段压缩，而是在git commit的时候进行。 pre-commit pre-commit 是git hook 众多钩子中的一个，在每次 git commit 前执行，
阅读全文
摘要：在这篇文章中，我介绍了一些编程时尝试使用的模式。这些模式是多年来我自己在工作中实践的结果，也有是从同事那里偷偷学到的。这些模式没有特定的顺序，只是一个简单的集合。 提前退出（early exits） function transformData(rawData) { // check if no d
阅读全文
摘要：如今，Android 和 iOS 是市场上最受欢迎的两大移动平台。很多企业都在寻找方法来构建能同时支持两大平台并满足用户需求的应用。 在两大平台统治市场的背景下，跨平台应用框架也随之崛起。这些框架对于开发人员和企业来说都大有裨益，他们可以在这些框架的帮助下更容易地开发出同时支持两大平台的应用。 移动
阅读全文
摘要：小程序canvas的API并没有像其他的一样支持小程序独有的 rpx 自适应尺寸单位，在绘制内容时所应用的单位仍然是 px，那么如何实现不同尺寸屏幕的自适应呢？ 我们的在开发中常用的参考屏幕尺寸（iPhone6）为：375*667； 那么想要适应其他尺寸的屏幕时只需按照iPhone6的绘制大小按比例
阅读全文
摘要：我同 css 打交道已经有几年了，每当需要就会用到它。最近我想明白了一个问题，那就是为什么做好 css 样式如此之难。如果你一直都在 CSS 中苦苦挣扎，你要知道自己并不是一个人。本文就是要告诉你为什么 CSS 这么难，并且搞不明白它也不是开发者的错。 示例问题 比如说我有了下面这个 CSS 类，它
阅读全文
摘要：一：基本知识缩影 1.css样式表的基本概念 2.样式表基本类型 1.内嵌样式 2.内联样式3.链入外部样式表4.导入外部样式 3.样式表配置方法 4.字体属性 1.font-family 2.font-size(四种尺寸方式：绝对尺寸（xx-small。。。medium。。xx-large7种），
阅读全文
