做好事的快乐

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

• 1
• 2
• 3

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

• 1
• 2
• 3

或者

• 1
• 2
• 3

当然这个方法的最大问题就是破坏了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 链接 在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值放在里面，如 textarea标签的内容则是写在标签之间的我是一段文本 HTML可编辑属性contenteditable 今天无意中看到一个面试题：使用div来模拟textarea的功能。乍看感觉有点匪夷所思，之前一直以为表单元素才是可以编辑，难道div也可以编辑吗？原来在HTML5中提供一个全局的属性：contenteditable。当这个属性出现在一个标签上时，浏览器会修改元素的部件以允许编辑。面试题考察的就是对H5新特性的使用度。 张鑫旭的一篇博文 - div模拟textarea文本域轻松实现高度自适应就讲到了这个问题 字号与行距 用一张图解释两个事物： 字号与行距 一般而言，页面上设置字体大小以后，图中橙色线间距也就是字体大小了。但有些字体不是这样的，它们会比字体大小多出一些。原因是什么呢？ 这需要从字体设计说起，先看一个字体的一些参数： 关键参数 其中ascender到descender的距离就是font-size的大小。在字体设计中，有一个设计参数Units Per Em，一般为了计算比率方便，设计师会把它定位1000unit，如下图所示： image.png 那么一般ascender到descender的距离为1000才是合理，但是有时候设计师就会设计的比1000大，相应，它就会被撑开。 比如，ascender - descender = 1200，font-size: 20px，那么它的实际大小是1200/1000 * 20 = 24px 字体的大小问题，就可以解释了页面上有的元素莫名其妙被撑开了。 原文地址 <==================华丽的分割线========================> 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)来实现这个需求。 //推荐使用, 少几个字符嘛 <==================华丽的分割线========================> 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 来说更有意义的值。 如： 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，尽量保持和标准一致 持续更新中...