Qz Blog

Talk is cheap,show me the code

Webpack Plugin 机制与常用 Plugin 总结

“Yeah It’s on. ” 前文 https://www.webpackjs.com/concepts/plugins/#%E5%89%96%E6%9E%90 插件是 webpack 的支柱功能。webpack 自身也是构建于，你在 webpack 配置中用到的相同的插件系统之上！插件目的在于解决 loader 无法实现的其他事。更新说明：很多早期常用插件在...

Posted by Qz on May 19, 2018

CSS 基础知识与常见实践总结

“Yeah It’s on. ” 选择器 element > element(子选择期) div>p 选择父级是 <div> 元素的 <p> 元素 element + element(相邻兄弟选择器) div+p 选择紧接着<div>元素之后的<p>元素 element ~ element(通用兄弟选择器) d...

Posted by Qz on May 1, 2018

JavaScript 重要基础与异步编程总结

“Yeah It’s on. ” 正文基础 with关键字网页链接 with语句的作用是将代码的作用域设置到一个特定的作用域中基本语法如下： with (expression) statement; 使用with关键字的目的是为了简化多次编写访问同一对象的工作，比如下面的例子： var qs = location.search.substring(1); v...

Posted by Qz on May 1, 2018

PostCSS 插件与工程实践总结

“Yeah It’s on. ” 正文网页链接 Some things you may think about PostCSS 一个后处理器更新说明：PostCSS 仍然是 CSS 工程化的重要基础设施，Tailwind、Autoprefixer、postcss-preset-env、px-to-rem/viewport 等工具都大量依赖它。但现代构建链路中也出现了...

Posted by Qz on April 14, 2018

SVG 基础语法与图形实践总结

“Yeah It’s on. ” 正文网页链接 SVG（Scalable Vector Graphics）是一种基于 XML 的图形格式，用于描述二维矢量图形。它是一种开放标准，由 W3C（World Wide Web Consortium）制定和维护。与位图图形（如 JPEG、PNG）不同，SVG 使用数学公式和几何描述来定义图形，因此它是矢量图形，可以无损地缩放和变换而...

Posted by Qz on April 11, 2018

JavaScript this 指向规则总结

“Yeah It’s on. ” 正文网页链接 this到底是谁 this既不是自身也不是当前函数的作用域。我们可以通过代码来测试。判断是不是自身 function fn(){ console.log(this.name) } fn.name = 'xxx' fn() //undefined 判断是不是作用域 function foo() { var ...

Posted by Qz on April 11, 2018

SSR 服务端渲染原理与实践总结

“Yeah It’s on. ” 更新说明：SSR 的形态已经从早期”手写 Node + renderToString 全量字符串渲染”演进为由元框架（meta-framework）主导的多种渲染模式混合方案，不再是 SPA / SSR 的二选一。不再是二选一，而是混合渲染：同一个应用里可以按路由/组件粒度组合 SSG（静态生成）、SSR（请求时渲染）、IS...

Posted by Qz on April 10, 2018

Async/Await 异步编程实践总结

“Yeah It’s on. ” 正文网页链接 http://es6.ruanyifeng.com/#docs/async ES2017 标准 (ES8) 引入了 async 函数，使得异步操作变得更加方便。 async 函数是什么？一句话，它就是 Generator 函数的语法糖。把异步写成同步的形式 const fs = require('fs'); cons...

Posted by Qz on March 27, 2018

Webpack Loader 机制与常用 Loader 总结

“Yeah It’s on. ” 正文网页链接 Loaders是webpack提供的最激动人心的功能之一了。通过使用不同的loader，webpack有能力调用外部的脚本或工具，实现对不同格式的文件的处理，比如说分析转换scss为css，或者把下一代的JS文件（ES6，ES7)转换为现代浏览器兼容的JS文件，对React的开发而言，合适的Loaders可以把React的中用到的...

Posted by Qz on March 21, 2018

前端框架选型与原理对比总结

“Yeah It’s on. ” 更新说明：本文早期以 Vue2 / React（class 组件 + VDOM）对比为主，如今框架格局和底层范式都有较大变化，但”解决 UI 与状态同步”这一根本诉求不变。 React：进入 React 19，主线是函数组件 + Hooks + RSC（服务端组件）+ Actions，class 组件、HoC/mixins 已...

Posted by Qz on March 18, 2018