我见过最好最详细的 JavaScript 关系的解释；Vue源码之响应式原理；vscode扩展之根据Vue模板自动生成Scss结构；150行Node.js实现的dns代理工具；新手写的Vue源码学习记录(渲染过程)；浅析 Nodejs 模块化；你不知道的 console，让 JS 调试更简单；JavaScript 中 == 和 === 的区别
-
我见过最好最详细的 JavaScript 关系的解释 我无意在 Reddit 上找到了这个 JavaScript meme ，它是我见过最好的抽象。 你可以通过运行开发者工具来运行（图中）的每行代码来验证此关系的准确性。结果并不令人惊讶，但仍然令人失望。 当然，这个小实验触发了我的兴趣… 这是怎么发生的？ 凭借经验，我学会了接受 JavaScript 这滑稽…
-
Vue源码之响应式原理 像Vue官网上面说的，vue是通过 Object.defineProperty 来侦测对象属性值的变化。 function defineReactive (obj, key, val) { let dep = new Dep() Object.defineProperty(obj, key, { enumerable: true, configurable: true, get () { return val }, …
-
vscode扩展之根据Vue模板自动生成Scss结构 某次小组内开周会，提到开发效率的问题，有个小伙伴提到写新页面的时候， template 大概布局写完后，对着 template 结构写 scss 是件比较耗时耗力的事情，如果能作出一个自动依据 template 结构生成 scss 文件的 vscode 插件就好了 我当时也没在意，后来周会结束后觉得这事情可以做一下，于是抽空看了下 vscode 扩展…
-
150行Node.js实现的dns代理工具 工具地址： github.com/Yi-love/dns… 安装： npm install dns-proxy-server -g 这个我觉得应该还是挺实用的一个工具。开发过程中我们需要配置IP来访问测试环境域名。 使用电脑开发测试还好，直接使用 Switch hosts! , 修改域名IP即可访问特定IP的域名网站。 那么如何在手机上也尽可能容易的访问到测试环境…
-
新手写的Vue源码学习记录(渲染过程)在技术领域上更是如此, 比如: 类名头字母大写, promiseA+ 规范, DOM 标准, es 标准, 都是规矩, 是我们编码的规矩.
-
浅析 Nodejs 模块化 本文只讨论 CommonJS 规范，不涉及 ESM 我们知道 JavaScript 这门语言诞生之初主要是为了完成网页上表单的一些规则校验以及动画制作，所以布兰登.艾奇（Brendan Eich）只花了一周多就把 JavaScript 设计出来了。可以说 JavaScript 从出生开始就带着许多缺陷和缺点，这一点一直被其他语言的编程者所嘲笑。随着 BS 开发模…
-
你不知道的 console，让 JS 调试更简单 对于前端的各位工程师，肯定不会对console陌生，但是，你又能了解多少呢，今天就让小鹏来一窥大前世界。 Chrome控制台-开发者工具 windows按F12， MAC按Command + Option + C或Command + Option + J, 即可打开控制台 1. 向 Web 控制台输出一条消息 console.log(‘Hello world!’); console.info(‘Hello world!’); …
-
JavaScript 中 == 和 === 的区别1、 两个不同的基本数据类型： 如果两个基本数据类型（string、number）不同，会将它们转化为数据类型，再进行比较。例如：
-
JavaScript数据结构——集合的实现与应用 与数学中的集合概念类似，集合由一组无序的元素组成，且集合中的每个元素都是唯一存在的。可以回顾一下中学数学中集合的概念，我们这里所要定义的集合也具有空集（即集合的内容为空）、交集、并集、差集、子集的特性。 在ES6中，原生的Set类已经实现了集合的全部特性，稍后我们会介绍它的用法。 我们使用JavaSctipt…
-
ThreeJs 认识核心类 ThreeJs 中定义了一些核心类，在实际的项目开发过程中，除了要常握场景、相机以及灯光等相关类的用法，还要掌握核心类的用法。 二、认识核心类 1.Object3D Object3D 是 ThreeJs 中对物体抽象的基类，包括相机和灯光都是 Object3D 的子类。一般情况下，我们不会直接使用这个类，对于构造物体，一般我们都…
-
可能会搞砸你的面试：你知道一个TCP连接上能发起多少个HTTP请求吗？本文由原作者松若章原创发布，作者主页：zhihu.com/people/hrsonion/posts，感谢原作者的无私分享。
-
前端工程师征服树形组件的秘籍 前言 树形组件的需求，很多人遇到都觉得头疼、逻辑复杂，除了展示之外，还要有增删该查的逻辑。一般树形组件具有多个层级，如果当前层级有下一个层级，会有像 children、list 等属性，数据结构一般就是 const tree = [ { name: ‘a’, id: 1, }, { name: ‘b’, id: 2, …
-
微前端 —— portal项目portal项目包括两个功能： 1. 路由分发与应用加载； 2. 抽离公共依赖；
-
阿里P7前端高级工程师，都需要掌握哪些技术栈？ 大家都知道，阿里P7前端高级工程师，基本上是一线前端技术人能达到的最高职级，也是很多程序员追求的目标。达到年薪50W+股票的P7级别，不仅要具备优秀的编程能力，在系统设计能力和技术视野方面，也要有较深的积淀。 最近技术大牛 廖雪峰 邀请他一位在阿里做前端架构师的朋友，整理出一份xmind——“Web全栈架构师所需技…
-
【DailyENJS第5期】如何使用preload、preconnect、prefetch提高Web性能 DailyENJS致力于翻译优秀的前端英文技术文章，为技术同学带来更好的技术视野。 今天让我展示可以让你的网站快速加载的简单技术。 首先，我们需要知道什么是Preload，Preconnect和Prefetch。 Preload: 当我们在 link 标签中使用 preload 时，它会提前请求资源。主要用于获取当前路由中使用的高优先级资…
-
微前端 —— 理论篇基于spa类的单页应用，随着企业工程项目的体积越来越大，开发的功能越来越多，页面也越来越多，项目随之也变得越来越臃肿，维护起来十分困难，往往改一个logo，或者改一个小样式，都要将项目全部重新打包一遍，维…
-
CommonJs模块中为何exports = 1导出是一个空对象 当我们想在一个 a.js 中暴露一个常量a, 可以通过 exports.a = 10 或者 module.exports = {a: 10} , b.js 引入常量a的时候: b.js: const { a } = require(‘./a’); ## 对应exports.a = 10暴露方式 console.log(a); ## 输出10 const a = require(‘./a’).a; ## 对应module.exports = {a: 10} console.log(a); ## 输…
-
用JavaScript来计算两个图像的相似度最近看了阮一峰老师的相似图片搜索的原理（二），其中介绍了通过内容特征法来对比两个图片的相似性。 大致步骤： 把图片都缩放到50×50大小 转成灰度图片 利用”大津法”（Otsu’s method）确定阈值 通过阈值再对图片…
-
Web 组件的问题 Web 组件在 Web 社区中变得越来越受欢迎。它们提供了一种在没有框架的情况下标准化和封装 JavaScript 增强组件的方法。 然而，Web 组件有一些缺点。例如，他们有一些技术限制，很容易被误用，导致用户流失。 有可能 —— 当然也是我的希望 —— Web 组件会随着时间的推移而改进，这些问题将得到解决。但是现在，我还是…
-
vuecli3开发环境下sourcemap在浏览器上查看源代码的问题老项目重构，vue脚手架更新至vue-cli3,经过一番配置后，发现跟之前的vue-cli2相比，调试的时候找到源代码的文件变得困难许多，如查看login.vue页面，出现一堆搜索结果：
-
Node.js 如何简洁优雅的访问 MySQL 数据库 一、前言 nodejs诞生以来出现了一大批的web框架如express koa2 egg等等，前端可以不再依赖后端可以自己控制服务端的逻辑。今天我们就来说说前端在nodejs中如何操作mysql数据库。 二、操作数据库 直接使用mysqljs，比如查询一个字段，代码逻辑看起来是很清晰的，但是仅查询一个字段就需要这么多代码实在是过于麻烦： …
-
JavaScript通过userAgent判断几个常用浏览器 通常在做h5页面的时候需要在微信、QQ、微博等生态内做一些引流的工作，但引流时受限于这些平台。比如上次的文章 《h5唤醒app实现以及注意点》 就是妥协的一个办法，那么常用的这几个浏览器的User Agent什么样呢？如何判断呢？今天就具体来看看这个问题。 User Agent定义 User Agent中文名为用户代理，简称 UA，它是…
-
[英] Git Submodule 的简单教程 Introduction In our Git projects, sometimes we will include and use other Git projects as submodules. One easy and reproducible way to do this is simply to clone the other Git projects and copy the Git projects in the directories under our own projects. However, it is also likely that…
-
使用 Go 和 ReactJS 构建聊天系统 (二) 原文地址： Part 2 – Simple Communication 译文地址： github.com/watermelo/d… 原文作者： Elliot Forbes 译者：咔叽咔叽 译者水平有限，如有翻译或理解谬误，烦请帮忙指出 本节完整代码： GitHub 本文是使用 ReactJS 和 Go 来构建聊天应用程序的系列文章的第 2 部分。你可以在这里…
-
Node.js 12：服务端 JavaScript 的未来 自 2009 年首次发布以来，Node.js 一直是一项改变游戏规则的技术。概括来说，它允许开发人员使用 JavaScript 在服务端运行脚本，在页面发送到用户的 Web 浏览器之前生成动态 Web 内容。Node.js 是“JavaScript 无处不在”的潮流代表；在这种潮流推动下，服务端和客户端脚本不再需要使用不同的语言编写，开发 Web 应用只用…
-
通过 OpenGL 理解前端渲染原理（一） 一、OpenGL OpenGL，是一套绘制3D图形的API，当然它也可以用来绘制2D的物体。OpenGL有一大套可以用来操作模型和图片的函数，通常编写OpenGL库的人是显卡的制造者。我们买的显卡都支持特定版本的OpenGL。 下图是用OpenGL做的旋转的立方体。 二、渲染原理 2.1 渲…
-
JavaScript稀疏数组 稀疏数组 概念 在一些后端语言中，如 C，数组内的值通常被分配在一系列连续的内存地址上，但是在 js 中，某些数组内存则不是连续的，所谓 稀疏 ，顾名思义，不连续，存在一些空隙； 例如： var arr = new Array(3); console.log(arr); // (3) 通过以上方法创建数组，其中 Array(3) 中的参数…
-
修复跨平台 Webfonts 渲染不一致的问题 Issue 最近开发的几个 Web 项目都遇到了同样的问题，在 Windows 上与设计稿 pixel-perfect 的网页，在 macOS 或 iPhone 上测试的时候却出现字体偏移现象，如下图所示： 与这个 span 相关的的 css 大致如下： .gs-header-menu__mega-toggle span { font-family: Larsseit; font-weight:…
-
前端动画专题（三）：撩人的按钮特效本文来自「心谭博客」的《动画设计·按钮特效》，更多文章放在了Github欢迎交流和Star 特效一览 滑箱： 果冻： 脉冲： 闪光： 气泡： 滑箱特效 效果图 原理 因为 button 元素可以使用 before/after 伪元素，所以借…
-
使用 Go 和 ReactJS 构建聊天系统 (三) 我们先来创建一个非常简单的 Header 组件。我们需要在 frontend/src/ 目录下 创建一个叫 components/ 的新目录，并在其中添加一个 Header/ 目录，它将容纳 Header 组件的所有文件。 – src/ – – components/ – – – Header/ – – – – Header.jsx – – – – index.js – – – – Header.scss 复制代码 注意 – 每当我们创建…
前端日报栏目数据来自码农头条，每日分享互联网上热门的前端开发、移动开发、设计、资源和资讯等，为开发者提供动力，如果觉得内容对你有用，记得分享给你的小伙伴。进入码农头条查看更多
