HZQ

博客重写

24 June, 2018

blog 改为试用 gatsby 构建! TEST Travis

CSS Modules

12 September, 2016

随着 nodejs 大方光彩,es6, webpack 和 babel 的出现,javascript 模块化已经非常成熟,CSS 被远远的抛在身后,逐渐的 CSS 模块化已经成为项目中的痛点。sass, less, stylus,postcss 等虽然解决了 css…

ES6 元编程

18 June, 2016

ES6 增加了元编程的能力,元编程就是指某类计算机程序的编写,这类计算机程序编写或者操纵其它程序(或者自身)作为它们的数据,或者在运行时完成部分本应该在编译时完成的工作。说起来比较拗口, 大概来讲,就是编程语言操作自身的能力。听起来就很有趣!没错,ES…

js设计模式之观察者模式

25 January, 2016

js设计模式之迭代器模式

23 January, 2016

一二三四五,六七八九十! 迭代器模式 迭代器模式提供一种方法顺序访问一个聚合对象中各个元素,而又不暴漏该对象的内部表示. 当你需要访问一个聚合对象,而且不管这些对象是什么都需要遍历的时候,你就应该考虑使用迭代器模式.MartinFlower…

js设计模式之策略模式

22 January, 2016

厂家倒闭,原价 100元, 200元,300元的包包,现在全部50元,全部5…

js设计模式之单例模式

17 January, 2016

js设计模式之代理模式

17 January, 2016

乱哄哄,你方唱罢我登场,反认他乡是故乡;甚荒唐,到头来都是为他人作嫁衣裳。 代理模式 为对象提供一种代理以控制这个对象的访问. 公司BOSS需要定期检查项目进度,但是他并不会直接问你,而是让你的小组长去问你,小组长询问进度,问完后,将报告给交给BOSS…

JS模块化历程

15 January, 2016

在ES6 之前的 js 中,并没有像 java 的 import, C# 的 using, css 的 @import…

修改js词法作用域的几种方式

13 January, 2016

js中的作用域是词法作用域,也就是完全由编写代码期间函数的位置决定,那能不能人为的修改,创建作用域那?当然是可以的. with 虽然 with 已经被弃用,但是了解一下又不会怀孕~ with…

ES6之let

12 January, 2016

如果以前说 js 中没有块级作用域的话, ES6 后就不能这么说了哦! 什么是let let 是 ES6 中新增的关键字, 类似于 var 用来声明变量,但是所声明的变量只有在 let 所在块内有效.换句话说,let 声明的变量隐式地绑定在 let 的包含块中.let 需要在js…

JS中的提升

10 January, 2016

离得越近,其实看见的越少 - 《惊天魔盗团》 提升 上面这段代码大家都知道因为变量提升原因,执行起来是这样子的: 这看起来就好像函数和变量的声明被移动到了最上面,这就是 ,每个作用域都会提升,比如例子中的全局作用域和 fn…

flex简明教程(二)

06 January, 2016

接上次flex的文章,这次我们讲 flex 剩下的两种属性-弹性属性和对其属性 弹性属性 flex-basis : 数字值,默认值为auto,设置 flex item 主轴(row/column)的最小宽/高,通常配合grow 和 shrink使用 flex-grow…

flex简明教程(一)

05 January, 2016

传统的 css 布局采用盒模型,通过一些列定位属性来布局,但是对于垂直居中,等分这类特殊情况处理起来就比较麻烦,虽然使用负外边距,table-cell等方式也能兼容实现,但是始终是一种 hack. 什么是flex flex…

js基于时间的动画

01 January, 2016

说起前端动画,不得不提CSS动画和JS动画,这里简单谈谈这两者. CSS动画简单方便,在样式表中就可以管理动画的内容,但相应的可维护性也随之降低;对动画的控制能力不足,比如说拖拽动画等等无法实现;放弃了物理动效的支持,只能通过缓动函数来模拟. 相比之JS…

CSS3动画-深夜恶搞

15 December, 2015

本来只是想复习下 CSS3 动画属性, 但是一上手,就控制不住恶搞的欲望,真是可恶啊!! 预览地址: RPG Book

String的正则方法和RegExp的正则方法

14 December, 2015

JS 关于正则这块的函数在String和RegExp对象上都有一些方法,很容易弄混,网上的文章又介绍的特别乱,于是在这里做下总结. String 对象上有关正则的方法 String.prototype.search search…

文本溢出显示

13 December, 2015

我们写页面的时候经常会遇到,文字超出容器的宽度的情况,通常情况下会对文本进行裁剪,并加上三个点,CSS3 中新增了一个 text-overflow 属性,可以更改文本溢出时的样式,我们这次就来说说这个东西。 上面那个问题可以用这段代码解决: 现在我们来看看这段 CSS,text…

IE6/7中的inline-block

12 December, 2015

display:inline-block;在ie6、ie7下只有设置在默认显示方式为inline的元素上才会生效。为什么哪? 历史原因,早起的IE浏览器在渲染引擎中,如果所有的元素都应用布局的话,IE的性能会受到很大影响,当时IE团队采用了 layout…

JS反柯里化

11 December, 2015

JS柯里化

10 December, 2015

柯里化(英语:Currying),是把接受多个参数的函数变换成接受一个单一参数的函数,并且返回接受余下的参数而且返回结果的新函数的技术。白话文就是:一个currying…

JS实现简单的AOP

09 December, 2015

AOP(Aspect Oriented Programming)指的是面向切面编程,比如说ASP.NET的Http…

闭包的应用

08 December, 2015

说到闭包就先要了解两个小知识。第一个就是作用域,javascript…

图片格式

07 December, 2015

作为一个前端,每天与各种各样的图片打交道,那么它们有什么区别?应用场景分别是什么?欢迎收看本期今日xx :-) 我们常见的图片格式有,gif,png,jpeg,ico这几种,哦对,还有google的 WebP…

call和apply

06 December, 2015

ECMAScript 3给 Function 的原型中定义了两个方法,分别是 Function.prototype.call 和 Function.prototype.apply。它们两个都可以改变函数体内 this的指向,区别仅在第二个参数不同。 apply…

js中的this

05 December, 2015

javascript 的 this 虽然和其他语言一样总是指向一个对象,但是具体指向哪个对象是在运行时基于执行环境动态绑定的,并不是函数被声明时的环境。 this 因为 with 和 eval 不常使用,这里不再讨论。实际应用中,this…

拥抱自由shadowsocks

04 December, 2015

从 2013 年开始用 jproxy 已经3年了,最终她也没能逃过魔掌:( ,感谢 xiaojay 大大期间不断的维护!Google…

js严格模式限制总结

20 November, 2015

ES5 中添加了一种严格模式,这种模式使得js在编写的时候更为严格,从而消除一些语法不合理,不严谨的的地方. 这里对使用”use strict”后的限制做下总结 变量必须声明后再使用,不会默认创建全局变量 eval…

事件委托

09 November, 2015

感谢 同学提出的问题,文章已修改! 我们经常会遇到给一堆元素绑定事件的情况,比如说给每个 li 中的 a 元素添加 onclik 事件,每一个 a 都要绑定多次事件处理器,这会影响页面性能,每绑定一个页面处理器都是有代价的,访问的 DOM…

CSS选择器优化

08 November, 2015

样式系统从最右边的选择符开始向左边匹配规则。只要当前选择符的左边还有其他的选择符,样式系统就会继续向左移动,直到找到和规则匹配的元素,或者因为不匹配而退出。 最右边优先 我最初的觉得 CSS 选择符一定也是从左到右匹配规则的,就像下面这个例子 先找到 id 为 header…

当line-height小于font-size时发生了什么

07 November, 2015

最近在看 line-height 的时候,当 line-height 大于 font-size 时大家都明白,那如果 line-height 小于 font-size 时会发生了什么? Demo1 起初,我一直不能明白 20px 的 line-height 减去 100px…

CSS的层叠、特殊性和继承

02 November, 2015

在一个样式表中要查找同一个元素,我们可以通过多种规则找到。CSS…

为什么要用href=javascript:void(0);

02 November, 2015

用了这么久的 和 ,突然被人问:为什么这么写?竟不知如何回答…(果然,我是弱鸡啊!) 使用这种方式,常出现在元素是 a…

HTML5新增元素介绍

01 November, 2015

HTML5 新增了一些元素为了用于更好的文档结构,使用这些标签能让章节和标题特性更精确,使得文档大纲变的可预测,结构更 Semantic! section…

参加与大师面对面活动后的小心思

24 October, 2015

重排与重绘

01 September, 2015

浏览器下载完页面中的组件后,会解析并生成两个内部数据结构--DOM树(表示页面结构)、渲染树(表示 DOM 节点如何显示)。每当DOM…

即兴小诗

11 May, 2015

两轮考勤一日志,系向OA充薪直。 长太息以掩涕零,哀码农之多坚。

Hello World

01 May, 2015

This is my first post on my new fake blog! How exciting! I’m sure I’ll write a lot more interesting things in the future. Oh, and here’s a…

Sass系列之基本语法

19 April, 2015

Sass 是对 CSS 的扩展,让 CSS 语言更强大、优雅。 它允许你使用变量、嵌套规则、 mixins、导入等众多功能, 并且完全兼容 CSS 语法。 Sass 有助于保持大型样式表结构良好, 同时也让你能够快速开始小型项目, 特别是在搭配 Compass…

Sass系列之安装

17 April, 2015

Sass 对 CSS3 的语法进行了扩充,增加了新的规则、变量、函数、选择器、继承等特性,让 css 看起来更像一门语言,这种特性也被称作“css预编译”,我们通过它可以用编程的思路去写样式,然后通过编译生成我们需要的样式表文件。 当然,类似的还有 Less、stylus…

第一篇文章

10 April, 2015

折腾来折腾去,总算是有个家了!两个月前搭建起来这个博客,到现在才决心要好好维护下去,真是惭愧啊。 总之,今后我会在这里记录写生活琐碎、音乐、技术分享等等。 博客由 hexo 驱动,部署于 github