黄庆的博客 | HUANG QING BLOG

你不知道的JavaScript 上

You Don't Know JS (1)

You Don’t Know JS 作用域闭包 this 原型作用域需要一套设计良好的规则来存储变量，并且之后可以方便地找到这些变量。这套规则被称为作用域。作用域包括词法作用域和动态作用域。作用域是一套规则，用于确定在何处以及如何查找变量（标识符）。如果查找的目的是对变量进行赋值，那么就会使用LHS 查询；如果目的是获取变量的值，就会使用RHS 查询。 ...

Posted by huangqing on August 30, 2017

前后端开发架构分离

分离前后端开发，独立部署

认识前后端分离在传统的web应用开发中，大多数的程序员会将浏览器作为前后端的分界线。将浏览器中为用户进行页面展示的部分称之为前端，而将运行在服务器，为前端提供业务逻辑和数据准备的所有代码统称为后端。架构上分离解耦，摆脱前后端在架构上的依赖。前后端各司其职，分开部署在不同的服务器上，通过RESTful接口传递数据。前后端分离并不只是开发模式，而是web应用的一种架构模式。在开发...

Posted by huangqing on August 16, 2017

标签语义化

标签语义化语义化的主要目的就是让大家直观的认识标签(markup)和属性(attribute)的用途和作用。优化搜索引擎，让爬虫能更好地理解网页结构。为什么要使用语义化标签？为了在没有css的情况下，页面也能呈现出良好的文档结构和代码结构提高用户体验，例如title、alt可进行详细说明有利于SEO，爬虫只看得懂代码方便特殊设备的解析，如屏幕阅读器、盲人阅...

Posted by huangqing on August 11, 2017

现代前端开发技术栈

2017年-现代前端开发技术栈

现代前端开发技术栈定义和整合一些关键的概念和理论，以确保我们的决策有助于解决我们在开发前端软件时所预料到的挑战: 利用 JavaScript 语言提供的最新功能来支持更优雅、一致和可维护的代码（比如import/export (modules)、class 和 async/await）。提供一个稳定成熟的、低到无需维护的（即，开发人员不需要安装或维护全局的开发依赖，且具...

Posted by huangqing on August 10, 2017

WebSocket

Web API - WebSocket

WebSocket websocket \ webplatform \ 《The Definitive Guide to HTML5 WebSocket》 WebSocket 发起单个请求，服务端不需要等待客服端，客户端在任何时候也能发消息到服务端，减少了轮询时候的延迟.经历一次连接后，服务器能给客户端发多次。下图是轮询与WebSocket的区别。基于http的实时消息是相...

Posted by huangqing on August 10, 2017

监听页面 DOM 变动并高效响应.👿

监听页面 DOM 变动并高效响应 JavaScript 中事件的发生阶段（捕获-命中-冒泡）: Graphical representation of an event dispatched in a DOM tree using the DOM event flow 开始的时候我一直在 window 状态改变涉及到的事件中寻找，一圈搜寻下来发现也就 onload 事件最接近了，所...

Posted by huangqing on August 9, 2017

高频 dom 操作和页面性能优化探索.👿

一、DOM操作影响页面性能的核心问题通过js操作DOM的代价很高，影响页面性能的主要问题有如下几点：访问和修改DOM元素修改DOM元素的样式，导致重绘或重排通过对DOM元素的事件处理，完成与用户的交互功能 DOM的修改会导致重绘和重排。重绘是指一些样式的修改，元素的位置和大小都没有改变；重排是指元素的位置或尺寸发生了变化，浏览器需要重新计算渲染树...

Posted by huangqing on August 9, 2017

SVG 雪碧图

svg sprite

svg sprite 概述 SVG（Scalable Vector Graphics）是一种矢量图格式。Adobe Illustrator是专门编辑、制作矢量图的软件。随着高清视网膜屏幕的出现，Web设计需要根据屏幕输出不同分辨率的图片。在开发中需要准备两套不同的图片应对，一套在普通屏幕上显示；一套在高清屏幕上显示。现在流行的icon font字体图标，其实质上是SVG的封装。 ...

Posted by huangqing on August 8, 2017

ES6 Promise

ES6 Promise 问题 JavaScript的Callback机制深入人心。而ECMAScript的世界同样充斥的各种异步操作（异步IO、setTimeout等）。异步和Callback的搭载很容易就衍生”回调金字塔”。——由此产生Deferred/Promise。 Deferred起源于Python，后来被CommonJS挖掘并发扬光大，得到了大名鼎鼎的Promise，并且已经...

Posted by huangqing on August 5, 2017

RxJS - 使用指南

RxJS reactive官网 / RxJS官网 / RxJS github / jsfiddle 弹珠图工具在网站http://rxmarbles.com/上，可以看到主要的操作符的弹珠图. 在网站https://rxviz.com/上可以编写任意Observable对象来查看弹珠图 BOOK RxJS in A...

Posted by huangqing on July 11, 2017

HUANG QING BLOG