2015年1月份总结 2015 年的第一个月就在我们期待着春节的心情中度过了，在年初的时候指定了一些计划，要在 2015 年改变下自己，不能说是彻底改变吧，总是要有一些新的变化。在刚过去的一月份里，自我感觉应该是变化了，需要继续努力坚持。自己的网站在 12 月份正式上线了，那就得努力的充实自己的博客，多写点文章。小蚊在 1 月份一共写了 9 篇文章，争取在 2 月份能够完成 10 篇文章的目标！当然了，不能单纯的追求数量上的目标，也要追求质量上的要求。在前几天给屋里添了盆长寿花，屋里摆放着点绿色植物，心情自然就好了很多，同时也在每天地期待着能开更多的花。我 2015 年的目标是成功养活 3 个盆栽，养植物不仅仅是净化空气，也能净化心灵。工作方面的事情，比之间有更多的加班了，虽然有些不情愿，不过还是一个人住着，倒也是无所谓，反正回家之后也没什么事情做。在 1 月份的月底正式转正了，转正之后带来的直接变化就是工资比试用期的时候高了，其他的也没感觉出来，因为都已经工作三个月了嘛！ 更新了自己网站的样式，，努力让自己的博客变得更好； 元旦和周末的时候，和同学朋友一起出去玩，去前门逛街，去牛街吃饭，去首体滑冰； 添加了一盆长寿花； 因为 2 月份中间有个春节假期，关于目标这方面完成不了多少，但是依然还是有目标的： 在保证质量的情况下，完成 5 篇文章； 多与其他同学朋友交流。

博客正式放弃IE6~IE8浏览器 蚊子觉得，每一个关注中国互联网发展的人都应该行动起来，放弃IE6~IE8、放弃外壳浏览器！！！如果当前用户使用IE6~IE8访问本博客时，博客会自动跳转到高浏览器下载页面，给出chrome, firefox, opera和IE11的官方下载链接。http://www.xiabingbao.com/explore.html 连微软都宣布放弃IE6~IE8，并且弄了个“IE6丧钟”的网站，给IE6倒计时。你还等什么呢！！！IE6丧钟这个网站首页就有一张世界地图，上面用不同颜色标识世界各地的IE6占有率，毫无意外，中国这次是第一名，占有率高达2.33%。其实高占有率地区都在东南亚部分，中国就连政府主要还在用IE6呢！IE6丧钟地址：http://ie6countdown.com/

CSS实现小三角 今天研究了纯 CSS 实现的气泡效果： 用小图片实现气泡效果不难，但图片一费流量，二难修改，改边框颜色、大小均要重新生成图片，一个普通的前端设计师和一个优秀的前端设计师的差距就在这里：前者完成任务，后者追求极致。当然，我作为一个非专业的前端设计师，以上效果也是经若干次 Google 后总结得出。预备知识：用 CSS 实现三角形。实现三角形之前，我们用 CSS 实现不同颜色的边框： 代码：.css1 { display: block; margin: 10px; width: 30px; height: 30px; border-style: solid; border-width: 20px; border-color: #f00 #00f #0f0 #f0f; background-color: #fff; } 把 div 的 border 加粗，四边颜色不同，就出现了神奇的效果，每一边都变成了梯形。如果把 div 的 width 和 height 都设为 0，会出现什么情况？ 代码：.css2 { display: block; margin: 10px; width: 0; height: 0; border-style: solid; border-width: 20px; border-color: #f00 #00f #0f0 #f0f; background-color: #fff; } 三角形出现了！但是是 4 个三角形，而气泡只需要一个！怎么办？把不需要的边框设置为透明： 代码：.css3 { display: block; margin: 10px; width: 0; height: 0; border-style: solid; border-width: 20px; border-color: transparent #00f transparent transparent; } 三角形初步完成！但是气泡的尖角不是三角形，而是斜线，怎么办？也有办法，找两个三角形叠在一起，线条就出来了： 代码：CSS 代码：.container { position: relative; display: block; width: 50px; height: 50px; } .div1 { display: block; position: absolute; left: 10px; top: 10px; width: 0; height: 0; border-style: solid; border-width: 20px; border-color: transparent #00f transparent transparent; } .div2 { display: block; position: absolute; left: 16px; top: 10px; width: 0; height: 0; border-style: solid; border-width: 20px; border-color: transparent #fff transparent transparent; } 为了让大家看清楚，两个三角形距离为 6px，如果把距离设为 1px，那就是两条细线了。但是第二个三角是白色的，怎么办？没关系，我们假定气泡的背景色是白色，第二个三角的颜色就正好融入背景色，如果气泡的背景色是其他颜色，就把第二个三角设定成一样的背景色。同样的道理，第一个三角的颜色要和气泡的边框色一致，通过相对定位，一个完美的气泡就出现了！最后一步，把样式整理到 CSS 文件中，写成简洁的形式： 提示内容... 大功告成！如果气泡的方向不是向左怎么办？只要叠加出正确方向的三角就行。最后看看新浪微博的转发气泡是如何实现的：哈哈，用了特殊字符“◆”，很明显没有我们的实现好，因为字符样式是固定的，而我们的三角可以调尖角！至于怎么调，把上下左右的 border-width 设置成不一样的宽度看看就知道了。原文地址： 廖雪峰-纯 CSS 气泡效果

Javascript的严格模式 在严格模式下，能够在函数内部选择进行较为严格的全局或局部的错误条件检测。使用严格模式的好处是可以提早知道代码中存在的错误，即使捕获一些可能导致编程uowu的ECMAScript行为。理解严格模式的规范非常重要，ECMAScript的下一个版本将以严格模式为基础指定。支持严格模式的浏览器包括IE10+,Firefox4+, Safari5.1+和Chrome。 1. 选择使用 # 要选择进入严格模式，可以使用严格模式的编译指示，实际上就是一个不会赋给任何变量的字符串：use strict;在老版本的浏览器里，会把它当做一行普通的字符串，加以葫芦。如果在全局作用域中（函数外部）给出这个编译知识，则整个脚本都将使用严格模式。换句话说，如果把带有这个编译指示的脚本放到其他文件中，则该文件中的Javascript代码将处于严格模式下。也可以只在函数中打开严格模式，就像下面这样：function doSomething(){ "use strict"; // 其他代码 } 如果你没有控制页面中所有脚本的权利，建议只在需要测试的特定函数中开启严格模式。 2. 变量 # 在严格模式下，什么时候创建变量以及怎么创建变量都是有限制的。首先，不允许意外创建全局变量。在非严格模式下，可以像下面这样创建全局变量。// 未声明变量 // 非严格模式：创建全局变量 // 严格模式：抛出错误 message = "hello wenzi"; 即使message前面没有var关键字，即使没有将它定义为某个全局对象的属性，也能将message为全局变量。但在严格模式下，如果给一个没有声明的变量赋值，那代码在执行时就会抛出错误。其实不能对变量调用delete操作符。非严格模式允许这样操作，单户静默失败（返回false），而在严格模式下，删除变量也会导致错误。// 删除变量 // 非严格模式：静默失败 // 严格模式：抛出错误 var color = "red"; delete color; 严格模式下对变量名也有限制。特别地，不能使用implements, interface, protected, public, static和yield作为变量名。这些都是保留字，将来的ES版本中可能会使用到他们。在严格模式，用以上的标识符作为变量会导致语法错误。 3. 对象 # 在严格模式下操作对象比在非严格模式下更容易导致错误。一般来说，非严格模式下会静默失败的情形，在严格模式下就会抛出错误。因此在开发中使用严格模式更能发现错误。在下列情形下操作对象的属性会导致错误： 为只读属性进行赋值； 为不可配置的属性使用delete操作符； 为不可扩展的对象添加谁能够 使用对象的另一个限制与通过对象字面量声明对象有关。在使用对象字面量时，属性名必须唯一。例如： // 重名属性 // 非严格模式：没有错误，以第二个属性为准 // 严格模式：抛出语法错误 var student = { name : 'wenzi', name : 'bing' } 这里的对象student有两个属性，都叫name。在非严格模式下，student对象的name属性值是第二个，而在严格模式下，这样的代码会导致语法错误。 4. 函数 # 首先，严格模式下要求明明函数的参数必须唯一。以下面这个函数为例：// 重名参数 // 非严格模式：没有错误，只能访问第二个参数 // 严格模式：抛出语法错误 function doSomething(num, num){ // 其他代码 } 在非严格模式下，这个函数声明不会抛出错误。通过参数名只能访问第二个参数，要访问第一个参数必须通过arguments对象。在严格模式下，arguments对象的行为也有所不同，在非严格模式下，修改明明参数的值也会反应到arguments对象中，而严格模式下这两个值是完全独立的。如：// 修改命名参数的值 // 非严格模式：修改会反应到arguments中 // 严格模式：修改不会反应到arguments中 function doSomething(value){ value = 7; console.log(value, arguments[0]); // 非严格模式下，输出：7, 7 // 严格模式下，输出：7, 10 } doSomething(10); 另一个变化是淘汰了arguments.callee和arguments.caller。在非严格模式下，这两个属性一个引用函数本身，一个引用调用函数。而在严格模式下，访问哪个属性都会抛出TypeError。例如：// 访问arguments.callee // 非严格模式：正常 // 严格模式：抛出错误 function factorial(num){ if(num

chrome的console讲解 Chrome 的开发者工具已经强大到没朋友的地步了，特别是其功能丰富界面友好的 console，使用得当可以有如下功效： 更高「逼格」更快「开发调试」更强「进阶级的 Frontender」 Bug 无处遁形「Console 大法好」 console.log # 大家都会用 log，但鲜有人很好地利用console.error?,?console.warn? 等将输出到控制台的信息进行分类整理。他们功能区别不大，意义在于将输出到控制台的信息进行归类，或者说让它们更语义化。各个所代表的语义如下： console.log：普通信息 console.info：提示类信息 console.error：错误信息 console.warn：警示信息 当合理使用上述 log 方法后，可以很方便地在控制台选择查看特定类型的信息。console.log('一颗红心向太阳', '吼吼~'); console.info('楼上药不能停！'); console.warn('楼上嘴太贱！'); console.error('楼上关你毛事？'); 如果再配合console.group? 与console.groupEnd，可以将这种分类管理的思想发挥到极致。这适合于在开发一个规模很大模块很多很复杂的 Web APP 时，将各自的 log 信息分组到以各自命名空间为名称的组里面。console.group('app.foo'); console.log('来自foo模块的信息 blah blah blah...'); console.groupEnd(); console.group('app.bar'); console.log('来自bar模块的信息 blah blah blah...'); console.groupEnd(); 而关于console.log，早已被玩儿坏了。一切都源于 Chrome 提供了这么一个 API：第一个参数可以包含一些格式化的指令比如%c。比如给hello world做件漂亮的嫁衣再拉出来见人：console.log('%chello world', 'font-size:25px;color:red;'); 如果你觉得不够过瘾，那就把你能写出来的最华丽的 CSS 样式都应用上吧，比如渐变。于是你可以得到如下华丽丽的效果：console.log( '%chello world', 'background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );color:transparent;-webkit-background-clip: text;font-size:5em;' ); 各种招大招的节奏啊~看着上面密集的代码不用惊慌，上面console.log()第二个参数全是纯 CSS 用来控制样式的，你不会陌生。而第一个参数里可以带用百分号开头的转义指令，如上面输出带样式的文字时使用的%c指令。更详细的指令参见官方 API 文档的这个表格。如果还不够过瘾，那咱们来 log 一些图片吧，甚至。。。动图？对，你得先有图，我们拿这张图为例。console.log( '%c', "padding:50px 300px;line-height:120px;background:url('http://wayou.github.io/2014/09/10/chrome-console-tips-and-tricks/rabbit.gif') no-repeat;" ); 看着上面摇摆的豆比兔是不是有种抽它一脸的冲动。除此，console.table? 更是直接以表格的形式将数据输出，不能赞得太多！ 借用之前写过的一篇博文里的例子：var data = [ { 品名: '杜雷斯', 数量: 4 }, { 品名: '冈本', 数量: 3 }, ]; console.table(data); 另外，console.log()? 接收不定参数，参数间用逗号分隔，最终会输出会将它们以空白字符连接。console.log('%c你好', 'color:red;', '小明', '你知道小红被妈妈打了么'); console.assert # 当你想代码满足某些条件时才输出信息到控制台，那么你大可不必写if或者三元表达式来达到目的，cosole.assert便是这样场景下一种很好的工具，它会先对传入的表达式进行断言，只有表达式为假时才输出相应信息到控制台。var isDebug = false; console.assert(isDebug, '开发中的log信息。。。'); console.count # 除了条件输出的场景，还有常见的场景是计数。当你想统计某段代码执行了多少次时也大可不必自己去写相关逻辑，内置的console.count可以很地胜任这样的任务。function foo() { //其他函数逻辑blah blah。。。 console.count('foo 被执行的次数：'); } foo(); foo(); foo(); console.dir # 将 DOM 结点以 JavaScript 对象的形式输出到控制台而console.log是直接将该 DOM 结点以 DOM 树的结构进行输出，与在元素审查时看到的结构是一致的。不同的展现形式，同样的优雅，各种体位任君选择反正就是方便与体贴。console.dir(document.body); console.log(document.body); console.time & console.timeEnd # 输出一些调试信息是控制台最常用的功能，当然，它的功能远不止于此。当做一些性能测试时，同样可以在这里很方便地进行。比如需要考量一段代码执行的耗时情况时，可以用console.time与 ?console.timeEnd来做此事。这里借用官方文档的例子：console.time('Array initialize'); var array = new Array(1000000); for (var i = array.length - 1; i >= 0; i--) { array[i] = new Object(); } console.timeEnd('Array initialize'); 当然，我们也可以选择自己写代码来计时：var start = new Date().getTime(); var array = new Array(1000000); for (var i = array.length - 1; i >= 0; i--) { array[i] = new Object(); } console.log(new Date().getTime() - start); 相信你也看到了，用内置的console.time是多么地方便，省去了自己写代码来计算的工作量。另外值得一提的是，通过调用内置的console.time得到的结果要比自己手动计算的时间差更精确可靠。 console.profile & console.timeLime # 当想要查看 CPU 使用相关的信息时，可以使用console.profile配合 ?console.profileEnd来完成这个需求。这一功能可以通过 UI 界面来完成，Chrome 开发者工具里面有个 tab 便是Profile。与此类似的功能还有console.timeLine配合 ?console.timeLineEnd,它的作用是开始记录一段时间轴，同样可以通过 Chrome 开发者工具里的Timeline? 标签来进行相应操作。所以在我看来这两个方法有点鸡肋，因为都可以通过操作界面来完成。但至少他提供了一种命令行方式的交互，还是多了种姿势供选择吧。 console.trace # 堆栈跟踪相关的调试可以使用console.trace。这个同样可以通过 UI 界面完成。当代码被打断点后，可以在Call Stack面板中查看相关堆栈信息。上面介绍的都是挂在window.console这个对象下面的方法，统称为Console API，接下来的这些方法确切地说应该叫命令，是 Chrome 内置提供，在控制台中使用的，他们统称为Command Line API。 $ # 似乎美刀总是被程序员及各种编程语言所青睐「你看看 PHP 代码就知道 PHPer 有多爱钱了」，在 Chrome 的控制台里，$用处还真是蛮多且方便的。$\_命令返回最近一次表达式执行的结果，功能跟按向上的方向键再回车是一样的，但它可以做为一个变量使用在你接下来的表达式中：2 + 2; //回车，再 $_ + 1; //回车得5 上面的$_需要领悟其奥义才能使用得当，而$0~$4 则代表了最近 5 个你选择过的 DOM 节点。 什么意思？在页面右击选择审查元素 ，然后在弹出来的 DOM 结点树上面随便点选，这些被点过的节点会被记录下来，而$0会返回最近一次点选的 DOM 结点，以此类推，$1 返回的是上上次点选的 DOM 节点，最多保存了 5 个，如果不够 5 个，则返回undefined。另外值得一赞的是，Chrome 控制台中原生支持类 jQuery 的选择器，也就是说你可以用$加上熟悉的 css 选择器来选择 DOM 节点，多么滴熟悉。$('body'); $(selector)返回的是满足选择条件的首个DOM元素。剥去她伪善的外衣，其实$(selector)是原生JavaScript document.querySelector() 的封装。 同时另一个命令$$(selector)返回的是所有满足选择条件的元素的一个集合，是对document.querySelectorAll()? 的封装。$$('div'); copy # 通过此命令可以将在控制台获取到的内容复制到剪贴板。copy(document.body); 然后你就可以到处粘了：看完此条命令行，机智的你是不是跟脑洞全开的我一样，冒出了这样一个想法：那就是通过这个命令可以在 JavaScript 里进行复制操作从而不用依赖 Flash 插件了。But 现实是残酷的，如之前所述的，这里的控制台命令只能在控制台中环境中执行，因为他不依附于任何全局变量比如window，所以其实在 JS 代码里是访问不了这个copy方法的，所以从代码层面来调用复制功能也就无从谈起。但愿有天浏览器会提供相应的 JS 实现吧~ keys & values # 这是一对基友。前者返回传入对象所有属性名组成的数据，后者返回所有属性值组成的数组。具体请看下面的例子：var tboy = { name: 'wayou', gender: 'unknown', hobby: 'opposite to the gender', }; keys(tboy); values(tboy); monitor & unmonitor # monitor(function)，它接收一个函数名作为参数，比如function a,每次a被执行了，都会在控制台输出一条信息，里面包含了函数的名称a及执行时所传入的参数。而 unmonitor(function)便是用来停止这一监听。function sayHello(name) { alert('hello,' + name); } monitor(sayHello); sayHello('wayou'); unmonitor(sayHello); sayHello('wayou'); debug & undebug # debug 同样也是接收一个函数名作为参数。当该函数执行时自动断下来以供调试，类似于在该函数的入口处打了个断点，可以通过 debugger 来做到，同时也可以通过在 Chrome 开发者工具里找到相应源码然后手动打断点。 而undebug? 则是解除该断点。而其他还有好些命令则让人没有说的欲望，因为好些都可以通过 Chrome 开发者工具的 UI 界面来操作并且比用在控制台输入要方便。 REFERENCE # Styled console logging in the Chrome DevTools (Canary) Chrome Console API Chrome Console Command Line API Feel free to repost but keep the link to this page please!原地址：Chrome 控制台不完全指南