如何去除inline-block的间隙

描述：在html中，如果有几个inline-block的元素并排出现，同时他们之间有空格或者换行，那么在页面展示中就会出现若干像素的间隙。html代码如下：

// li是inline-block元素
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

那么有什么办法解决呢？
1.html中移除空格和换行

<ul>
    <li>1</li
    ><li>2</li
    ><li>3</li>
</ul>

或者

<ul>
    <li>1
    <li>2
    <li>3</li>
</ul>

当然这个方法的最大问题就是破坏了html的排版，不推荐

2.使用margin负值

ul li{
    display: inline-block;
    margin-left: -4px;
}

但是，inline-block的间隙在不同浏览器下的大小是不一致的，如图：

不同浏览器下的间隙大小

因此这个方法不适合大规模使用

3.使用font-size:0

ul{
    font-size:0;
}
li{
    font-size:12px;
}

这个方法是最普遍的

4.使用letter-spacing或word-spacing

ul{
    letter-spacing:-3px;
}
li{
    letter-spacing:0;
}

这个方法也很最普遍

CSS有哪些选择器

CSS主要有四种选择器：

• id选择器
• 类选择器
• 标签选择器
• 伪类选择器

基于以上四种可以组合成其他形式的选择器，比如：

• 后代选择器: 父代名 后代名 { 属性名:属性值; }
• 子代选择器: 父代名>子代名 { 属性名:属性值; }
• 群组选择器: #name1, .name2, #name div { 属性名:属性值; }

原生ajax

var xhr
if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest()
}else if(window.ActiveXObject){
    xhr = new ActiveXObject('Microsoft.XMLHTTP')
}
xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
        if(xhr.status == 200){
            // ...
        }else{
            // ...
        }
    }
}
// true -> async
xhr.open('GET', url, true)
// if POST, data in send
xhr.send(null)

实现上拉加载，下拉刷新

要实现这个功能的关键在于页面需要监听touchstart、touchmove和touchend事件，即：

// window 或 某个元素
window.addEventListner('touchmove', functinon(e){
  var touch = e.targetTouches[0]
  var x = touch.pageX
  var y = touch.pageY
  // 依据xy来决定是否执行什么事件
})

网页性能优化有哪些呢？

其实有很多，雅虎为我们总结了性能优化的34黄金法则，可以戳这里
能答出八条左右就够了。

• 减少网络请求
• 使用CDN
• Gzip压缩传输文件
• 添加Expires or Cache-Control头部
• 样式文件放入head标签中
• 脚本放在body标签底部
• 避免CSS表达式
• 使用外部js或css文件（缓存）
• 压缩js或css文件
• ...

a链接target

<a href="javascript:void 0;" target="_blank">链接</a>

在Firefox浏览器和IE浏览器下，点击链接后仍然会新开一个空页面。而在其他浏览器下则不会跳转。如果禁止跳转，则需要执行：

e.preventDefault()

如果写了javascript:void 0;就去掉target="_blank"

钩子函数/程序

钩子实际上是一个处理消息的程序段，每当特定的消息或数据发出时，在没有到达目的程序前，钩子会先获得消息或数据，即钩子会先获得控制权。这时钩子程序可以加工处理数据，也可以不作任何处理继续传递消息，还可以强制结束消息的传递。

input与textarea的区别

在form表单中，input和textarea是常见的输入文本信息的输入框。他们在功能上有很多相同地方，但是他们的最重要区别是：input无法处理自动换行，而textarea可以。即当输入的内容超过input的宽度时，它不会换行，而是继续在一行中输入。因此input不能存储换行符，textarea可以存储换行符。所以这决定了他们的应用场景，通常对于输入较短的内容时使用input，而需要输入大段的或需要存储换行符时，使用textarea。

表单中的input和textarea

Post提交后对数据的encode

其他不同点：
1.input标签是自闭合的，textarea则需要成对出现
2.input标签的value值放在里面，如<input name="age" value="28" id="" />
textarea标签的内容则是写在标签之间的<textarea>我是一段文本</textarea>

HTML可编辑属性contenteditable

今天无意中看到一个面试题：使用div来模拟textarea的功能。乍看感觉有点匪夷所思，之前一直以为表单元素才是可以编辑，难道div也可以编辑吗？原来在HTML5中提供一个全局的属性：contenteditable。当这个属性出现在一个标签上时，浏览器会修改元素的部件以允许编辑。面试题考察的就是对H5新特性的使用度。
张鑫旭的一篇博文 - div模拟textarea文本域轻松实现高度自适应就讲到了这个问题

字号与行距

用一张图解释两个事物：

字号与行距

关键参数

image.png

字体的大小问题，就可以解释了页面上有的元素莫名其妙被撑开了。
原文地址

<==================华丽的分割线========================>

Blob对象

一个 Blob对象表示一个不可变的, 原始数据的类似文件对象。Blob表示的数据不一定是一个JavaScript原生格式。 File 接口基于Blob，继承 blob功能并将其扩展为支持用户系统上的文件。

定义上说File对象的基础是Blob对象，即接受Blob对象的APIs也被列在 File文档中。

从Blob中读取内容的唯一方法是使用 FileReader。以下代码将 Blob 的内容作为类型数组读取：

var reader = new FileReader();
reader.addEventListener("loadend", function() {
   // reader.result contains the contents of blob as a typed array
});
reader.readAsArrayBuffer(blob);

<==================华丽的分割线========================>

解释器执行代码时的违描述

1.寻找调用函数的代码
2.在执行函数代码前，创建执行上下文
3.进入创建阶段

• 初始化作用域链
• 创建变量对象
  创建参数对象，检查参数的上下文，初始化其名称和值并创建一个引用拷贝
• 扫描上下文中的函数声明
  对于每个被发现的函数，在变量对象中创建一个和函数名同名的属性，这是函数在内存中的引用
  如果函数名已经存在，引用会被覆盖
• 扫描上下文中的变量声明
  对于每个被发现的变量声明，在变量对象中创建一个同名属性并初始化至为undefined
  如果变量名在变量对象中已经存在，什么都不做，继续扫描

4.确定上下文中的"this"
5.即获/代买执行阶段

• 执行/在上下文中解释函数代码，并在代码逐行执行时给变量赋值

看个例子：

function foo(i) {
    var a = 'hello';
    var b = function privateB() {

    };
    function c() {

    }
}

foo(22);

在调用foo(22)，创建阶段看起来像是这样：

fooExecutionContext = {
    scopeChain: { ... },
    variableObject: {
        arguments: {
            0: 22,
            length: 1
        },
        i: 22,
        c: pointer to function c()
        a: undefined,
        b: undefined
    },
    this: { ... }
}

你可以发现, 创建阶段 掌管着属性名的定义，而不是给它们赋值，不过参数除外。 一旦 创建阶段 完成之后，执行流就会进入函数中。 在函数执行完之后，激活 / 代码 执行阶段 看起来像是这样：

fooExecutionContext = {
    scopeChain: { ... },
    variableObject: {
        arguments: {
            0: 22,
            length: 1
        },
        i: 22,
        c: pointer to function c()
        a: 'hello',
        b: pointer to function privateB()
    },
    this: { ... }
}

<==================华丽的分割线========================>

localStorage的一些用法

原文地址：http://mp.weixin.qq.com/s/vy7pRk97T7SN7Jc-uI_smQ
1.存储一些持久化的数据（基本用法）
2.缓存静态文件（比较复杂，不太推荐）
3.同源窗口通信（同源窗口监听storage事件等）
4.作为前端DB的存储介质
5.表单自动持久化

<==================华丽的分割线========================>

new关键词干了些什么

1.声明一个中间对象；
2.将该中间对象的原型指向构造函数的原型；
3.将构造函数的this，指向该中间对象；
4.返回该中间对象，即返回实例对象。

伪代码

// 先一本正经的创建一个构造函数，其实该函数与普通函数并无区别
var Person = function(name, age) {
    this.name = name;
    this.age = age;
    this.getName = function() {
        return this.name;
    }
}

// 将构造函数以参数形式传入
function New(func) {

    // 声明一个中间对象，该对象为最终返回的实例
    var res = {};
    if (func.prototype !== null) {

        // 将实例的原型指向构造函数的原型
        res.__proto__ = func.prototype;
    }

    // ret为构造函数执行的结果，这里通过apply，将构造函数内部的this指向修改为指向res，即为实例对象
    var ret = func.apply(res, Array.prototype.slice.call(arguments, 1));

    // 当我们在构造函数中明确指定了返回对象时，那么new的执行结果就是该返回对象
    if ((typeof ret === "object" || typeof ret === "function") && ret !== null) {
        return ret;
    }

    // 如果没有明确指定返回对象，则默认返回res，这个res就是实例对象
    return res;
}

// 通过new声明创建实例，这里的p1，实际接收的正是new中返回的res
var p1 = New(Person, 'tom', 20);
console.log(p1.getName());

// 当然，这里也可以判断出实例的类型了
console.log(p1 instanceof Person); // true

<==================华丽的分割线========================>

ES6箭头函数

• 不绑定自己的this、arguments、super或new.target
• 不绑定arguments，即在箭头函数体中无法通过arguments读取到自己的参数，它仅仅是最近封闭范围内引用相同的名称
• 箭头函数没有prototype属性
• 在箭头函数中，this
  是根据当前的词法作用域来决定的，就是说，箭头函数会继承外层函数调用的this
  绑定（无论this绑定到什么）

为了有意外事情发生，请忘记箭头函数有this和arguments

<==================华丽的分割线========================>

void

void运算符 对给定的表达式进行求值，然后返回underfined
主要用途：
1.返回undefiend
经常在JS代码中获得全局变量undefined,就可以用void(0)

void(0) === undefined

2.Javascript URIs
当用户点击一个以javascriot:URI时，浏览器会对冒号后面的代码求值，然后把求值结果显示在页面上，这时页面基本上是一大片空白，这通常不是我们想要的。只有当返回结果是undefined时，浏览器才不会做这件傻事。于是我们用void(0)来实现这个需求。

<a href="javascript:void(0);"></a>

//推荐使用, 少几个字符嘛
<a href="javascript:;"></a>

<==================华丽的分割线========================>

RESTful架构

Representational State Transfer
1.每个URI定位一种资源；
2.客户端与服务器之间以某种表现形式传递资源;
3.客户端通过HTTP的四个动词（GET，POST，PUT，DELETE）对服务器端资源进行操作，实现表现层状态转化

符合以上标准的架构可以认为是RESTful架构

误区：
1.由于URI是用于定位一种资源，可以认为是资源的唯一标识，因此设计URI时，不应该出现动词；
2.对资源的限定条件，应该以search形式追加到URI中，如：api.xxx.com/imgs?size=1000&limit=10；
3.对资源表现层的限定，也可以在请求报文头部信息中说明：

accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8

<==================华丽的分割线========================>

attribute 与 property

attribute 与 property 都可以叫“特性”，也都可以叫“属性”

区别：
从 HTML 到 DOM 元素，一种是声明式的语言，一种是命令式语言。attribute 是直接收集 HTML 中的属性转为 js 对象，对象的 value 最接近原生态，也就是 HTML 标记里面的样子；property 也是转为 js 对象，但是转化的过程中会对 value 做一些处理，将 value 转为对 js 来说更有意义的值。
如：

<input type="checkbox" checked="checked" />

elem.getAttribute("checked”) // “checked”，原生态的值
elem.checked // true，对 js 来说更有意义的值

<==================华丽的分割线========================>

babel转es6至es5在IE8下运行有bug

关于default的问题：
由于 IE8 中不支持 default 做 key，这个暂时无解。
不过你暂时可以这样，不使用 export default，改用传统的 module.exports =。
引用时使用 import 或 require 均可

<==================华丽的分割线========================>

es5-shim 与 es5-sham的区别

shim: ES5中有的方法可以通过其他旧的JS代码模拟出来，那么shim的作用就是用ES3的代码去实现ES5中才有API。
如数组中的一些方法就可以完美模拟，（forEach, indexOf, some等）

sham： 当然有些ES5的API用ES3代码不能完美模拟出来，因此sham尽量模拟出来，起码不会有致命错误。但是最后结果对不对，那就管不着了。
如Object中的一些方法，如Object.creat, Object.defineProperty.

具体有哪些可以访问这里

那么引申出另一个问题，shim与polyfill有什么区别呢？
shim在英文中意思是硬垫片（铁的或者木头的），而polyfill在英文中意思是软垫片（棉花或聚酯类）
引申到JS中：
shim在旧浏览器中以强硬的手段模拟行为，比如jQuery的ajax，就是将XHR和ActiveXObject整合一起，这样保证在浏览器中请求行为是一致的。因此shim不会遵循标准，而是自己实现的
polyfill则是在旧浏览器中使用ActiveXObject模拟出window.XMLHttpRequest，尽量保持和标准一致

持续更新中...