javascript 小知识

javascript 永远是先解析声明函数，再解析变量

静态文件加载状态

通过 onreadystatechange 监听，node.readyState 为 loaded 或者 complete 时，加载完成。

探测功能、特性、对象属性

相对于使用 navigator.geolocation 探测功能特性或对象属性，使用 “geolocation” in navigator 更高效，前者可能会在某些浏览器下导致内存泄漏，如果这个属性值是假，那么前者探测方式将会得到一个“否”的结果，并不能真正探测出这个键名是否存在。

document.URL

document.URL == location.href，但是 document.URL 是只读的

scrollTop

  • quirks mode: document.body.scrollTop
  • strict mode: document.documentElement.scrollTop
  • ie：window.pageYOffset
  • 其他：window.scrollY

querySelectorAll return NodeList

NodeList

不是数组，和 arguments 对象类似，要使用数组的方法，可以用

1
2
3
Array.prototype.forEach.call(myNodeList, function() {
  // do something with nodeItem
});

array concat 和 push 互用

1
2
[1, 2].concat([3, 4]);
[1, 2].push(3, 4);

style.cssText 批量设置行内样式

classList API

1
2
3
divNode.classList.add('className');
divNode.remove('className');
divNode.toggle('className');

focus、blur 事件可以用捕获而不是冒泡的办法获得。

全能判断一个变量的类型：

1
2
Object.prototype.toString.call(myVar)
// [object Function/Object/String/Array/Boolean/Number]

jQuery ajax

发送请求时，当 dataType 为 json 时，jQuery 会在检查返回的字符串是否符合 json 格式（即使不用返回时也需要返回{}），并调用JSON.parse 方法再执行回调函数，否者回调函数不会执行并抛出 error 错误，执行 error 回调函数。

html5 新标签

  • 顾名思义为模版，它具有天然的标签内容隐藏的特点，即使你设置 display 为 block 也无济于事。

  • 它可出现在任意位置，类似与script和style标签。

  • childNodes 无效性，可使用 template.innerHTML 获取完整的 html 片段，若非得获取“伪子元素”，使用 template.content，返回一个文档片段，可以理解为另一个 document。

  • 支持 chrome ios8 android4.4 以上版本浏览器。

类似 template，还有 link rel=”import”，js 里的 registerElement、createShadowRoot，详见：http://www.ifeenan.com/~posts/JavaScript/2014-06-07-%E8%AF%B4%E8%AF%B4%20Web%20Components.md

dns-prefetch 加速 DNS 解析速度

详见 https://developer.mozilla.org/zh-CN/docs/Controlling_DNS_prefetching

input pattern

1
<input type="email" pattern="[^ @]*@[^ @]*" value="">

用户输入一个有效的 email 或 URL 地址，pattern 属性可以令你直接使用 regular expressions 而无需检查 JS 或服务器端代码。

iOS safari 访问 camera

对应的 html5 表单：

1
<input type="file" accept="image/*" capture="camera" id="capture">

API参考 HTML Media Capture：http://www.w3.org/TR/2011/WD-html-media-capture-20110414/

FormData

对象可快速获取 form 表单值，类似与 jQuery 的 serialize 方法，还可以利用其实现二进制文件的异步上传。详见：https://developer.mozilla.org/zh-CN/docs/Web/Guide/Using_FormData_Objects。使用 jQuery Ajax 时，需将 contentType 设置为 false，processData 也设置为 false 。

FileReader

使用FileReader对象, web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容，可用在图片预览等场景。

pushState

可改变地址栏但是不刷新页面，配合 Ajax 可良好的用于单页面应用。注意，pushState 并不会触发 popstate ，页面加载也不会触发 popstate，当history.go或者浏览器前进后退按钮被摁下时触发 popstate 。

window.event

ie下的对象，只存在于事件发生时。如果事件处理有setTimeout，延时里是索引不到 window.event 的。

new RegExp创建正则需要双重转义。

服务器端数据推送技术

  • WebSocket。WebSocket 规范是 HTML 5 中的一个重要组成部分，已经被很多主流浏览器所支持。不过 WebSocket 技术也比较复杂，包括服务器端和浏览器端的实现都不同于一般的 Web 应用。

  • 简易轮询。基于 HTTP 协议来达到实时推送的效果。

  • COMET 技术。改进了简易轮询的缺点，使用的是长轮询。长轮询的方式在每次请求时，服务器端会保持该连接在一段时间内处于打开状态，而不是在响应完成之后就立即关闭。COMET 技术并不是 HTML 5 标准的一部分，从兼容标准的角度出发，也不推荐使用。

  • 服务器数据推送。不WebSocket 规范更加复杂一些，适用于需要进行复杂双向数据通讯的场景。对于简单的服务器数据推送的场景，使用服务器推送事件就足够了。

Promise

使用 Promise 改善异步流程

数组拷贝

array.slice()

对象拷贝

$.extend({}, object)

getAllResponseHeaders

获取异步响应头

css 小知识

calc()

css 数学运算

弹性盒模型

display: flex 新

display: box 旧

元素上下居中

  • css3: 弹性盒模型

  • css3: translate

    1
    2
    3
    4
    5
    6
    .element{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

  • 模拟 table

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .elementParentParent {
      display: table;
      .parent {
        display: table-row;
        .element {
          display: table-cell;
          vertical-align: middle;
        }
      }
    }

  • 事先知道元素高度：

    1
    2
    3
    4
    5
    6
    .element{
      position: absolute;
      top: 50%;
      height: 100px;
      margin-top: -50px; // 一半元素高度
    }

绝对定位元素的上下左右居中

1
2
3
4
5
6
7
8
9
10
.element {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 200px;
  height: 300px;
  margin: auto;
}

适用于知晓宽高数值的情形。

css 创建三角形

使用 border 设置各边的 width 及颜色（配合上 transparent ）可创建直角三角形。

两边对齐

常见的左中右三元素第一个左对齐，第二个居中对齐，最后一个靠右对齐，css3 使用伸缩布局（ display: flex ）配合 justify-content: space-between 便可实现，再也不需要设置 float 和 text-align 那么麻烦的做法。

模糊阴影

设置背景（rgba），.element::after 设置为底层作为背景，背景使用 blur 滤镜

data/image

  • 增加文件体积，浏览器会阻塞加载 css 文件，之后才渲染网页，保持 css 文件的小巧能让用户更快的看到网页，速度就是 pv
  • 渲染占 cpu，特别是在移动端
  • 不能缓存，每次渲染都需要重新解析渲染，耗资源
  • 不语义化，不知道这张图片是什么，没有命名，不语义

placeholder 样式

  • webkit 使用伪元素 ::-webKit-input-placeholder
  • firefox 使用伪元素 ::-moz-placeholder
  • IE10+ 使用伪类 :-ms-input-placeholder

伪类和伪元素怎么区分

看是否产生了新的元素（抽象），例子：

  • ::first-line 如果不使用伪类伪元素，需要在第一行加标签 span，这时，css 中他就是伪元素，伪元素使用两个冒号
  • :first-child 如果不使用伪类伪元素，只需在第一个元素加 class 即可实现，不需要新加标签，这时，css 中他就是伪类，伪类使用一个冒号

图片适配 retina 屏

使用 image-set

1
background-image: image-set(url(/image@1x.png) 1x, url(/image@2x.png) 2x)

:nth-child 和 :nth-of-type

  • e:nth-child 匹配的是父元素的第 n 个子元素 e
  • e:nth-of-type 匹配同类型中的第 n 个同级兄弟元素 e

prefetch

1
<link rel="prefetch" href="/avatar.png" />

在页面加载的时候预先加载指定的页面或元素。也能够使用 prerendering 特性令你的网站速度更快，浏览器能够在后台获取并渲染整个页面。

transform 闪烁

闪烁归根结底是帧率不足，可通过开启硬件加速解决，使用

1
2
transform: transform3d(0, 0, 0);
transform-style: preserve-3d;

如若还是没解决，这肯定是其他地方出了问题，极大可能是你没设置 tap-highlight-color: rgba(255, 255, 255, 0)

禁止 iOS 下旋转屏幕字体大小变化

通过 css 设置元素的 text-size-adjust: none 即可禁止字体变大变小。
设置了 font-size 具体值（ px 单位）的字体不受旋转影响。

hover 显示边框

使用 outline 而不是 border

aspect-ratio

css 媒体查询 aspect-ratio 定义的屏幕可视区的高宽比，设置是必须是 1/1 的形式，不允许出现小数，必须有斜杠。可以用这个检查手机的横竖状态。

box-shadow 和 filter: drop-shadow

前者的的阴影是矩形，而后者是真真正正的包裹整个元素周围，尽管是不规则多边形。

css transition

简写时推荐写法 all .2s ease 1s，注意，两个时间，出现在前面的动画过渡时间，第二个时间为开始动画前等待的时间，当只有一个时间时，它只能是动画过渡时间。

css3 background

background: #fff url(/path.png) left center/200px 100px no-repeat scroll content-box padding-box，注意，background-size可以只设置宽，图片自动等比例缩放。

background-position 可根据边距偏移

例如 background-position: right 10px bottom 5px 表示参照点为右下角，向左偏移 10 像素，向上偏移 5 像素。

关闭拼写检查

常看见mobile browser在输入时会在你的单词底划上个红色虚线，很不顺眼有木有，通过设置 input/textarea 的 spellcheck=”false” 即可搞定

如何写好输入框

  • 在书写输入框的时候，如果要增加光标高度，那么最可行的做法是增加文字的大小

  • 始终设置输入框高度，始终设置行高为 1，不使用 padding-top、padding-bottom

input date pickers

iOS 8.1 支持 type 类型有 date、time、month，不支持 week、datetime、datetime-local

网页端支持emoji

使用iconfont：http://emojisymbols.com/

段落 underline

1
2
3
4
5
6
p {
  line-height: 25px;
  background-image: linear-gradient(to bottom, #fff 24px, #ccc 24px, rgba(0,0,0,0.5) 25px);
  background-repeat: repeat-y;
  background-size: 100% 25px;
}

效果如图：

webapp 和 rem

设置 document 根元素的 font-size，其他元素的宽高使用 rem 单位进行布局。

以 320px 屏幕宽度为标准宽度举例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
(function(doc, win) {
  'use strict';
  var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function() {
      var clientWidth = docEl.clientWidth;
      if (!clientWidth) {return;}
      docEl.style.fontSize = 16 * (clientWidth / 320) + 'px';
    };

  if (!doc.addEventListener) {return;}
  win.addEventListener(resizeEvt, recalc, false);
  doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

border-radius

「/」（斜杠）标签

1
border-raduis: 35px 25px 30px 20px / 25px 35px 20px 20px;

「/」前定义 x 轴半径，「/」后定义 y 轴半径。

table-layout

  • fixed 表格只计算第一行的宽度便可渲染，之后行的宽度依第一行的进行排版。
  • auto 表格需要分析整个单元格的内容之后才能确定列宽。

Hello world

Hexo

A fast, simple & powerful blog framework, powered by Node.js.

Features

  • Blazing fast generating
  • Support for GitHub Flavored Markdown and most Octopress plugins
  • One-command deploy to GitHub Pages, Heroku, etc.
  • Powerful plugin system

Installation

1
$ npm install hexo-cli -g

Quick Start

Setup your blog

1
2
3
$ hexo init blog
$ cd blog
$ npm install

Start the server

1
$ hexo server

Create a new post

1
$ hexo new "Hello Hexo"

Generate static files

1
$ hexo generate

More Information

License

MIT