bs3.x dropdown 改写hover 触发
bootstrap3.x • lopo1983 发表了文章 • 1 个评论 • 2649 次浏览 • 2016-01-06 17:09
$('[data-toggle="dropdown"]').each(function() {
var $this = $(this),
$parent = $this.parent();
$this.off('click.dropdown.data-api');
$parent.hover(function() {
$this.dropdown('toggle');
});
}); 查看全部
var $this = $(this),
$parent = $this.parent();
$this.off('click.dropdown.data-api');
$parent.hover(function() {
$this.dropdown('toggle');
});
}); 查看全部
$('[data-toggle="dropdown"]').each(function() {
var $this = $(this),
$parent = $this.parent();
$this.off('click.dropdown.data-api');
$parent.hover(function() {
$this.dropdown('toggle');
});
}); 高性能 CSS3 动画
CSS/SASS/SCSS/LESS • lopo1983 发表了文章 • 0 个评论 • 1780 次浏览 • 2015-12-28 14:41
(转自 自腾讯AlloyTeam)
?高性能移动Web相较PC的场景需要考虑的因素也相对更多更复杂，我们总结为以下几点： 流量、功耗与流畅度。 在PC时代我们更多的是考虑体验上的流畅度，而在Mobile端本身丰富的场景下，需要额外关注对用户基站网络流量使用的情况，设备耗电量的情况。
关于流畅度，主要体现在前端动画中，在现有的前端动画体系中，通常有两种模式：JS动画与CSS3动画。 JS动画是通过JS动态改写样式实现动画能力的一种方案，在PC端兼容低端浏览器中不失为一种推荐方案。?
而在移动端，我们选择性能更优浏览器原生实现方案：CSS3动画。
然而，CSS3动画在移动多终端设备场景下，相比PC会面对更多的性能问题，主要体现在动画的卡顿与闪烁。
目前对提升移动端CSS3动画体验的主要方法有几点：
尽可能多的利用硬件能力，如使用3D变形来开启GPU加速
-webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
?
如动画过程有闪烁（通常发生在动画开始的时候），可以尝试下面的Hack：
?
-webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000; -moz-perspective: 1000; -ms-perspective: 1000; perspective: 1000;
如下面一个元素通过translate3d右移500px的动画流畅度会明显优于使用left属性：
#ball-1 { transition: -webkit-transform .5s ease; -webkit-transform: translate3d(0, 0, 0); } #ball-1.slidein { -webkit-transform: translate3d(500px, 0, 0); } #ball-2 { transition: left .5s ease; left: 0; } #ball-2.slidein { left: 500px; }
注：3D变形会消耗更多的内存与功耗，应确实有性能问题时才去使用它，兼在权衡
尽可能少的使用box-shadows与gradients
box-shadows与gradients往往都是页面的性能杀手，尤其是在一个元素同时都使用了它们，所以拥抱扁平化设计吧。
尽可能的让动画元素不在文档流中，以减少重排
?
position: fixed; position: absolute;
? 查看全部
?高性能移动Web相较PC的场景需要考虑的因素也相对更多更复杂，我们总结为以下几点： 流量、功耗与流畅度。 在PC时代我们更多的是考虑体验上的流畅度，而在Mobile端本身丰富的场景下，需要额外关注对用户基站网络流量使用的情况，设备耗电量的情况。
关于流畅度，主要体现在前端动画中，在现有的前端动画体系中，通常有两种模式：JS动画与CSS3动画。 JS动画是通过JS动态改写样式实现动画能力的一种方案，在PC端兼容低端浏览器中不失为一种推荐方案。?
而在移动端，我们选择性能更优浏览器原生实现方案：CSS3动画。
然而，CSS3动画在移动多终端设备场景下，相比PC会面对更多的性能问题，主要体现在动画的卡顿与闪烁。
目前对提升移动端CSS3动画体验的主要方法有几点：
尽可能多的利用硬件能力，如使用3D变形来开启GPU加速
-webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
?
如动画过程有闪烁（通常发生在动画开始的时候），可以尝试下面的Hack：
?
-webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000; -moz-perspective: 1000; -ms-perspective: 1000; perspective: 1000;
如下面一个元素通过translate3d右移500px的动画流畅度会明显优于使用left属性：
#ball-1 { transition: -webkit-transform .5s ease; -webkit-transform: translate3d(0, 0, 0); } #ball-1.slidein { -webkit-transform: translate3d(500px, 0, 0); } #ball-2 { transition: left .5s ease; left: 0; } #ball-2.slidein { left: 500px; }
注：3D变形会消耗更多的内存与功耗，应确实有性能问题时才去使用它，兼在权衡
尽可能少的使用box-shadows与gradients
box-shadows与gradients往往都是页面的性能杀手，尤其是在一个元素同时都使用了它们，所以拥抱扁平化设计吧。
尽可能的让动画元素不在文档流中，以减少重排
?
position: fixed; position: absolute;
? 查看全部
(转自 自腾讯AlloyTeam)
?高性能移动Web相较PC的场景需要考虑的因素也相对更多更复杂，我们总结为以下几点： 流量、功耗与流畅度。 在PC时代我们更多的是考虑体验上的流畅度，而在Mobile端本身丰富的场景下，需要额外关注对用户基站网络流量使用的情况，设备耗电量的情况。
关于流畅度，主要体现在前端动画中，在现有的前端动画体系中，通常有两种模式：JS动画与CSS3动画。 JS动画是通过JS动态改写样式实现动画能力的一种方案，在PC端兼容低端浏览器中不失为一种推荐方案。?
而在移动端，我们选择性能更优浏览器原生实现方案：CSS3动画。
然而，CSS3动画在移动多终端设备场景下，相比PC会面对更多的性能问题，主要体现在动画的卡顿与闪烁。
目前对提升移动端CSS3动画体验的主要方法有几点：
尽可能多的利用硬件能力，如使用3D变形来开启GPU加速
?
如动画过程有闪烁（通常发生在动画开始的时候），可以尝试下面的Hack：
?
如下面一个元素通过translate3d右移500px的动画流畅度会明显优于使用left属性：
注：3D变形会消耗更多的内存与功耗，应确实有性能问题时才去使用它，兼在权衡
尽可能少的使用box-shadows与gradients
box-shadows与gradients往往都是页面的性能杀手，尤其是在一个元素同时都使用了它们，所以拥抱扁平化设计吧。
尽可能的让动画元素不在文档流中，以减少重排
?
?
?高性能移动Web相较PC的场景需要考虑的因素也相对更多更复杂，我们总结为以下几点： 流量、功耗与流畅度。 在PC时代我们更多的是考虑体验上的流畅度，而在Mobile端本身丰富的场景下，需要额外关注对用户基站网络流量使用的情况，设备耗电量的情况。
关于流畅度，主要体现在前端动画中，在现有的前端动画体系中，通常有两种模式：JS动画与CSS3动画。 JS动画是通过JS动态改写样式实现动画能力的一种方案，在PC端兼容低端浏览器中不失为一种推荐方案。?
而在移动端，我们选择性能更优浏览器原生实现方案：CSS3动画。
然而，CSS3动画在移动多终端设备场景下，相比PC会面对更多的性能问题，主要体现在动画的卡顿与闪烁。
目前对提升移动端CSS3动画体验的主要方法有几点：
尽可能多的利用硬件能力，如使用3D变形来开启GPU加速
-webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
?
如动画过程有闪烁（通常发生在动画开始的时候），可以尝试下面的Hack：
?
-webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000; -moz-perspective: 1000; -ms-perspective: 1000; perspective: 1000;
如下面一个元素通过translate3d右移500px的动画流畅度会明显优于使用left属性：
#ball-1 { transition: -webkit-transform .5s ease; -webkit-transform: translate3d(0, 0, 0); } #ball-1.slidein { -webkit-transform: translate3d(500px, 0, 0); } #ball-2 { transition: left .5s ease; left: 0; } #ball-2.slidein { left: 500px; }注：3D变形会消耗更多的内存与功耗，应确实有性能问题时才去使用它，兼在权衡
尽可能少的使用box-shadows与gradients
box-shadows与gradients往往都是页面的性能杀手，尤其是在一个元素同时都使用了它们，所以拥抱扁平化设计吧。
尽可能的让动画元素不在文档流中，以减少重排
?
position: fixed; position: absolute;
?
bootstrap-3.3.5 搜索框
bootstrap3.x • lopo1983 回复了问题 • 2 人关注 • 1 个回复 • 2346 次浏览 • 2015-12-25 16:59
JavaScript装逼指南
javascript/jQuery • lopo1983 发表了文章 • 1 个评论 • 1906 次浏览 • 2015-12-24 15:21
如何写JavaScript才能逼格更高呢？怎样才能组织JavaScript才能让别人一眼看出你不简单呢？是否很期待别人在看完你的代码之后感叹一句“原来还可以这样写”呢？下面列出一些在JavaScript时的装逼技巧。
1. 匿名函数的N种写法
你知道“茴”的四种写法吗？ε=(?д?｀*)??… 扯淡，但你或许不知道匿名函数的好几种写法。一般情况下写匿名函数是这样的：(function(){})();但下面几种写法也是可以的：
!function(){}();
+function(){}();
-function(){}();
~function(){}();
~(function(){})();
void function(){}();
(function(){}());
当然，这样的写法，没有什么区别，纯粹看装逼程度。
2. 另外一种undefined
从来不需要声明一个变量的值是undefined，因为JavaScript会自动把一个未赋值的变量置为undefined。所有如果你在代码里这么写，会被鄙视的：var data = undefined;但是如果你就是强迫症发作，一定要再声明一个暂时没有值的变量的时候赋上一个undefined。那你可以考虑这么做：var data = void 0; // undefinedvoid在JavaScript中是一个操作符，对传入的操作不执行并且返回undefined。void后面可以跟()来用，例如void(0)，看起来是不是很熟悉？没错，在HTML里阻止带href的默认点击操作时，都喜欢把href写成javascript:void(0)，实际上也是依靠void操作不执行的意思。
当然，除了出于装逼的原因外，实际用途上不太赞成使用void，因为void的出现是为了兼容早起ECMAScript标准中没有undefined属性。void 0的写法让代码晦涩难懂。
3. 抛弃你的if和else
当JS代码里有大量的条件逻辑判断时，那代码看起来多可怕：if () { // ... } else if () { // ... } else if () { // ... } else { // ... }不用我说你都猜到用什么语法来简化if-else了。没错，用||和&&，很简单的原理就不用说啦。值得一提的是，有时候用!!操作符也能简化if-else模式。例如这样：// 普通的if-else模式 var isValid = false; if (value && value !== 'error') { isValid = true; } // 使用!!符号 var isValid = !!(value && value !== 'error');“!”是取反操作，两个“!”自然是负负得正了。
4. 不加分号
关于JavaScript要不要加分号的争论已经吵了好几年。Google的JavaScript语法指南告诉我们要加分号，很多JavaScript语法书籍也告诉我们加上分号更安全。然而，分号加不加，全靠个人对代码的写法，你确信写得足够安全的话，不加分号显得更加高大上。
5. 赶上ES6的早班车
ES6即将在年底正式发布，赶时髦的开发者们，赶快在自己的代码里用起来。用上module声明，写写class，捣鼓一下Map，这些都会让你的代码逼格更高。神马？你都不会用？那也好歹在代码头部加上一个ES5的"use strict";呀。
6. 添加AMD模块支持
给你写的代码声明一下AMD模块规范，这样别人就可以直接通过AMD的规范来加载你的模块了，如果别人没有通过规范来加载你的模块，你也可以优雅地返回一个常规的全局对象。来看看jQueryUI的写法：(function( factory ) { if ( typeof define === "function" && define.amd ) { // AMD. Register as an anonymous module. define( [ "jquery" ], factory ); } else { // Browser globals factory( jQuery ); } }(function( $ ) { // 这里放模块代码 return $.widget; }));就用它来包裹你的实际代码吧，保证别人一看代码就知道你是个专业的开发者。
7. Function构造函数
很多JavaScript教程都告诉我们，不要直接用内置对象的构造函数来创建基本变量，例如var arr = new Array(2);?的写法就应该用var arr = [1, 2];的写法来取代。但是，Function构造函数（注意是大写的Function）有点特别。Function构造函数接受的参数中，第一个是要传入的参数名，第二个是函数内的代码（用字符串来表示）。var f = new Function('a', 'alert(a)'); f('test'); // 将会弹出窗口显示test或许大家疑惑了，你这样绕着写，跟function f(a) {alert(a);}比有什么好处呢？
事实上在某种情况下是有好处的，比如不能用eval的时候，你需要传入字符串内容来创建一个函数的时候。在一些JavaScript模板语言的解析，和字符串转换json对象的时候比较实用。
8. 用原生Dom接口不用jQuery
一个傲娇的前端工程师是不需要jQuery的，前提是你经得起折腾。实际上，几乎所有的jQuery方法都可以用同样的Dom原生接口来实现，因为这货本来就是用原生接口实现的嘛，哈哈。怎样做到不用jQuery（也叫jQuery-free）呢？阮老师的博文《如何做到 jQuery-free？》?给我们很好的讲解了做法。依赖于querySelector和querySelectorAll这两个现代浏览器的接口，可以实现跟jQuery同样方便和同样效率的Dom查找，而且其他的类似Ajax和CSS的接口同样也可以把原生方法做一些兼容方面的包装即可做到jQuery-free。
总结
上述所有的JavaScript装逼写法，一些是为了程序易懂或者效率提高的语法糖，这样的做法是比较可取的，比如前面所说的省略if-else的做法；而有些写法则容易造成代码晦涩难懂或者效率偏低，例如上面说的void 0的写法，实际上不可取。JavaScript语法上灵活，让大家对同一个功能有很多种不同的写法，写法上的优化是对程序结构和代码维护有很大帮助的。所以，装逼得装得好看。 查看全部
1. 匿名函数的N种写法
你知道“茴”的四种写法吗？ε=(?д?｀*)??… 扯淡，但你或许不知道匿名函数的好几种写法。一般情况下写匿名函数是这样的：(function(){})();但下面几种写法也是可以的：
!function(){}();
+function(){}();
-function(){}();
~function(){}();
~(function(){})();
void function(){}();
(function(){}());
当然，这样的写法，没有什么区别，纯粹看装逼程度。
2. 另外一种undefined
从来不需要声明一个变量的值是undefined，因为JavaScript会自动把一个未赋值的变量置为undefined。所有如果你在代码里这么写，会被鄙视的：var data = undefined;但是如果你就是强迫症发作，一定要再声明一个暂时没有值的变量的时候赋上一个undefined。那你可以考虑这么做：var data = void 0; // undefinedvoid在JavaScript中是一个操作符，对传入的操作不执行并且返回undefined。void后面可以跟()来用，例如void(0)，看起来是不是很熟悉？没错，在HTML里阻止带href的默认点击操作时，都喜欢把href写成javascript:void(0)，实际上也是依靠void操作不执行的意思。
当然，除了出于装逼的原因外，实际用途上不太赞成使用void，因为void的出现是为了兼容早起ECMAScript标准中没有undefined属性。void 0的写法让代码晦涩难懂。
3. 抛弃你的if和else
当JS代码里有大量的条件逻辑判断时，那代码看起来多可怕：if () { // ... } else if () { // ... } else if () { // ... } else { // ... }不用我说你都猜到用什么语法来简化if-else了。没错，用||和&&，很简单的原理就不用说啦。值得一提的是，有时候用!!操作符也能简化if-else模式。例如这样：// 普通的if-else模式 var isValid = false; if (value && value !== 'error') { isValid = true; } // 使用!!符号 var isValid = !!(value && value !== 'error');“!”是取反操作，两个“!”自然是负负得正了。
4. 不加分号
关于JavaScript要不要加分号的争论已经吵了好几年。Google的JavaScript语法指南告诉我们要加分号，很多JavaScript语法书籍也告诉我们加上分号更安全。然而，分号加不加，全靠个人对代码的写法，你确信写得足够安全的话，不加分号显得更加高大上。
5. 赶上ES6的早班车
ES6即将在年底正式发布，赶时髦的开发者们，赶快在自己的代码里用起来。用上module声明，写写class，捣鼓一下Map，这些都会让你的代码逼格更高。神马？你都不会用？那也好歹在代码头部加上一个ES5的"use strict";呀。
6. 添加AMD模块支持
给你写的代码声明一下AMD模块规范，这样别人就可以直接通过AMD的规范来加载你的模块了，如果别人没有通过规范来加载你的模块，你也可以优雅地返回一个常规的全局对象。来看看jQueryUI的写法：(function( factory ) { if ( typeof define === "function" && define.amd ) { // AMD. Register as an anonymous module. define( [ "jquery" ], factory ); } else { // Browser globals factory( jQuery ); } }(function( $ ) { // 这里放模块代码 return $.widget; }));就用它来包裹你的实际代码吧，保证别人一看代码就知道你是个专业的开发者。
7. Function构造函数
很多JavaScript教程都告诉我们，不要直接用内置对象的构造函数来创建基本变量，例如var arr = new Array(2);?的写法就应该用var arr = [1, 2];的写法来取代。但是，Function构造函数（注意是大写的Function）有点特别。Function构造函数接受的参数中，第一个是要传入的参数名，第二个是函数内的代码（用字符串来表示）。var f = new Function('a', 'alert(a)'); f('test'); // 将会弹出窗口显示test或许大家疑惑了，你这样绕着写，跟function f(a) {alert(a);}比有什么好处呢？
事实上在某种情况下是有好处的，比如不能用eval的时候，你需要传入字符串内容来创建一个函数的时候。在一些JavaScript模板语言的解析，和字符串转换json对象的时候比较实用。
8. 用原生Dom接口不用jQuery
一个傲娇的前端工程师是不需要jQuery的，前提是你经得起折腾。实际上，几乎所有的jQuery方法都可以用同样的Dom原生接口来实现，因为这货本来就是用原生接口实现的嘛，哈哈。怎样做到不用jQuery（也叫jQuery-free）呢？阮老师的博文《如何做到 jQuery-free？》?给我们很好的讲解了做法。依赖于querySelector和querySelectorAll这两个现代浏览器的接口，可以实现跟jQuery同样方便和同样效率的Dom查找，而且其他的类似Ajax和CSS的接口同样也可以把原生方法做一些兼容方面的包装即可做到jQuery-free。
总结
上述所有的JavaScript装逼写法，一些是为了程序易懂或者效率提高的语法糖，这样的做法是比较可取的，比如前面所说的省略if-else的做法；而有些写法则容易造成代码晦涩难懂或者效率偏低，例如上面说的void 0的写法，实际上不可取。JavaScript语法上灵活，让大家对同一个功能有很多种不同的写法，写法上的优化是对程序结构和代码维护有很大帮助的。所以，装逼得装得好看。 查看全部
如何写JavaScript才能逼格更高呢？怎样才能组织JavaScript才能让别人一眼看出你不简单呢？是否很期待别人在看完你的代码之后感叹一句“原来还可以这样写”呢？下面列出一些在JavaScript时的装逼技巧。
1. 匿名函数的N种写法
你知道“茴”的四种写法吗？ε=(?д?｀*)??… 扯淡，但你或许不知道匿名函数的好几种写法。一般情况下写匿名函数是这样的：(function(){})();但下面几种写法也是可以的：
!function(){}();
+function(){}();
-function(){}();
~function(){}();
~(function(){})();
void function(){}();
(function(){}());
当然，这样的写法，没有什么区别，纯粹看装逼程度。
2. 另外一种undefined
从来不需要声明一个变量的值是undefined，因为JavaScript会自动把一个未赋值的变量置为undefined。所有如果你在代码里这么写，会被鄙视的：var data = undefined;但是如果你就是强迫症发作，一定要再声明一个暂时没有值的变量的时候赋上一个undefined。那你可以考虑这么做：var data = void 0; // undefinedvoid在JavaScript中是一个操作符，对传入的操作不执行并且返回undefined。void后面可以跟()来用，例如void(0)，看起来是不是很熟悉？没错，在HTML里阻止带href的默认点击操作时，都喜欢把href写成javascript:void(0)，实际上也是依靠void操作不执行的意思。
当然，除了出于装逼的原因外，实际用途上不太赞成使用void，因为void的出现是为了兼容早起ECMAScript标准中没有undefined属性。void 0的写法让代码晦涩难懂。
3. 抛弃你的if和else
当JS代码里有大量的条件逻辑判断时，那代码看起来多可怕：if () { // ... } else if () { // ... } else if () { // ... } else { // ... }不用我说你都猜到用什么语法来简化if-else了。没错，用||和&&，很简单的原理就不用说啦。值得一提的是，有时候用!!操作符也能简化if-else模式。例如这样：// 普通的if-else模式 var isValid = false; if (value && value !== 'error') { isValid = true; } // 使用!!符号 var isValid = !!(value && value !== 'error');“!”是取反操作，两个“!”自然是负负得正了。
4. 不加分号
关于JavaScript要不要加分号的争论已经吵了好几年。Google的JavaScript语法指南告诉我们要加分号，很多JavaScript语法书籍也告诉我们加上分号更安全。然而，分号加不加，全靠个人对代码的写法，你确信写得足够安全的话，不加分号显得更加高大上。
5. 赶上ES6的早班车
ES6即将在年底正式发布，赶时髦的开发者们，赶快在自己的代码里用起来。用上module声明，写写class，捣鼓一下Map，这些都会让你的代码逼格更高。神马？你都不会用？那也好歹在代码头部加上一个ES5的"use strict";呀。
6. 添加AMD模块支持
给你写的代码声明一下AMD模块规范，这样别人就可以直接通过AMD的规范来加载你的模块了，如果别人没有通过规范来加载你的模块，你也可以优雅地返回一个常规的全局对象。来看看jQueryUI的写法：(function( factory ) { if ( typeof define === "function" && define.amd ) { // AMD. Register as an anonymous module. define( [ "jquery" ], factory ); } else { // Browser globals factory( jQuery ); } }(function( $ ) { // 这里放模块代码 return $.widget; }));就用它来包裹你的实际代码吧，保证别人一看代码就知道你是个专业的开发者。
7. Function构造函数
很多JavaScript教程都告诉我们，不要直接用内置对象的构造函数来创建基本变量，例如var arr = new Array(2);?的写法就应该用var arr = [1, 2];的写法来取代。但是，Function构造函数（注意是大写的Function）有点特别。Function构造函数接受的参数中，第一个是要传入的参数名，第二个是函数内的代码（用字符串来表示）。var f = new Function('a', 'alert(a)'); f('test'); // 将会弹出窗口显示test或许大家疑惑了，你这样绕着写，跟function f(a) {alert(a);}比有什么好处呢？
事实上在某种情况下是有好处的，比如不能用eval的时候，你需要传入字符串内容来创建一个函数的时候。在一些JavaScript模板语言的解析，和字符串转换json对象的时候比较实用。
8. 用原生Dom接口不用jQuery
一个傲娇的前端工程师是不需要jQuery的，前提是你经得起折腾。实际上，几乎所有的jQuery方法都可以用同样的Dom原生接口来实现，因为这货本来就是用原生接口实现的嘛，哈哈。怎样做到不用jQuery（也叫jQuery-free）呢？阮老师的博文《如何做到 jQuery-free？》?给我们很好的讲解了做法。依赖于querySelector和querySelectorAll这两个现代浏览器的接口，可以实现跟jQuery同样方便和同样效率的Dom查找，而且其他的类似Ajax和CSS的接口同样也可以把原生方法做一些兼容方面的包装即可做到jQuery-free。
总结
上述所有的JavaScript装逼写法，一些是为了程序易懂或者效率提高的语法糖，这样的做法是比较可取的，比如前面所说的省略if-else的做法；而有些写法则容易造成代码晦涩难懂或者效率偏低，例如上面说的void 0的写法，实际上不可取。JavaScript语法上灵活，让大家对同一个功能有很多种不同的写法，写法上的优化是对程序结构和代码维护有很大帮助的。所以，装逼得装得好看。
1. 匿名函数的N种写法
你知道“茴”的四种写法吗？ε=(?д?｀*)??… 扯淡，但你或许不知道匿名函数的好几种写法。一般情况下写匿名函数是这样的：(function(){})();但下面几种写法也是可以的：
!function(){}();
+function(){}();
-function(){}();
~function(){}();
~(function(){})();
void function(){}();
(function(){}());
当然，这样的写法，没有什么区别，纯粹看装逼程度。
2. 另外一种undefined
从来不需要声明一个变量的值是undefined，因为JavaScript会自动把一个未赋值的变量置为undefined。所有如果你在代码里这么写，会被鄙视的：var data = undefined;但是如果你就是强迫症发作，一定要再声明一个暂时没有值的变量的时候赋上一个undefined。那你可以考虑这么做：var data = void 0; // undefinedvoid在JavaScript中是一个操作符，对传入的操作不执行并且返回undefined。void后面可以跟()来用，例如void(0)，看起来是不是很熟悉？没错，在HTML里阻止带href的默认点击操作时，都喜欢把href写成javascript:void(0)，实际上也是依靠void操作不执行的意思。
当然，除了出于装逼的原因外，实际用途上不太赞成使用void，因为void的出现是为了兼容早起ECMAScript标准中没有undefined属性。void 0的写法让代码晦涩难懂。
3. 抛弃你的if和else
当JS代码里有大量的条件逻辑判断时，那代码看起来多可怕：if () { // ... } else if () { // ... } else if () { // ... } else { // ... }不用我说你都猜到用什么语法来简化if-else了。没错，用||和&&，很简单的原理就不用说啦。值得一提的是，有时候用!!操作符也能简化if-else模式。例如这样：// 普通的if-else模式 var isValid = false; if (value && value !== 'error') { isValid = true; } // 使用!!符号 var isValid = !!(value && value !== 'error');“!”是取反操作，两个“!”自然是负负得正了。
4. 不加分号
关于JavaScript要不要加分号的争论已经吵了好几年。Google的JavaScript语法指南告诉我们要加分号，很多JavaScript语法书籍也告诉我们加上分号更安全。然而，分号加不加，全靠个人对代码的写法，你确信写得足够安全的话，不加分号显得更加高大上。
5. 赶上ES6的早班车
ES6即将在年底正式发布，赶时髦的开发者们，赶快在自己的代码里用起来。用上module声明，写写class，捣鼓一下Map，这些都会让你的代码逼格更高。神马？你都不会用？那也好歹在代码头部加上一个ES5的"use strict";呀。
6. 添加AMD模块支持
给你写的代码声明一下AMD模块规范，这样别人就可以直接通过AMD的规范来加载你的模块了，如果别人没有通过规范来加载你的模块，你也可以优雅地返回一个常规的全局对象。来看看jQueryUI的写法：(function( factory ) { if ( typeof define === "function" && define.amd ) { // AMD. Register as an anonymous module. define( [ "jquery" ], factory ); } else { // Browser globals factory( jQuery ); } }(function( $ ) { // 这里放模块代码 return $.widget; }));就用它来包裹你的实际代码吧，保证别人一看代码就知道你是个专业的开发者。
7. Function构造函数
很多JavaScript教程都告诉我们，不要直接用内置对象的构造函数来创建基本变量，例如var arr = new Array(2);?的写法就应该用var arr = [1, 2];的写法来取代。但是，Function构造函数（注意是大写的Function）有点特别。Function构造函数接受的参数中，第一个是要传入的参数名，第二个是函数内的代码（用字符串来表示）。var f = new Function('a', 'alert(a)'); f('test'); // 将会弹出窗口显示test或许大家疑惑了，你这样绕着写，跟function f(a) {alert(a);}比有什么好处呢？
事实上在某种情况下是有好处的，比如不能用eval的时候，你需要传入字符串内容来创建一个函数的时候。在一些JavaScript模板语言的解析，和字符串转换json对象的时候比较实用。
8. 用原生Dom接口不用jQuery
一个傲娇的前端工程师是不需要jQuery的，前提是你经得起折腾。实际上，几乎所有的jQuery方法都可以用同样的Dom原生接口来实现，因为这货本来就是用原生接口实现的嘛，哈哈。怎样做到不用jQuery（也叫jQuery-free）呢？阮老师的博文《如何做到 jQuery-free？》?给我们很好的讲解了做法。依赖于querySelector和querySelectorAll这两个现代浏览器的接口，可以实现跟jQuery同样方便和同样效率的Dom查找，而且其他的类似Ajax和CSS的接口同样也可以把原生方法做一些兼容方面的包装即可做到jQuery-free。
总结
上述所有的JavaScript装逼写法，一些是为了程序易懂或者效率提高的语法糖，这样的做法是比较可取的，比如前面所说的省略if-else的做法；而有些写法则容易造成代码晦涩难懂或者效率偏低，例如上面说的void 0的写法，实际上不可取。JavaScript语法上灵活，让大家对同一个功能有很多种不同的写法，写法上的优化是对程序结构和代码维护有很大帮助的。所以，装逼得装得好看。
程序员编程语录
扯蛋 • lopo1983 发表了文章 • 1 个评论 • 1998 次浏览 • 2015-12-24 14:55
1. 一个好的程序员是那种过单行线马路都要往两边看的人。(Doug Linder)
2. 程序有问题时不要担心。如果所有东西都没问题，你就失业了。(软件工程的Mosher定律)
3. 程序员的麻烦在于，你无法弄清他在捣腾什么，当你最终弄明白时，也许已经晚了。(超级计算机之父Seymour Cray)
4. 我想大部分人都知道通常一个程序员会具有的美德。当然了，有三种：懒惰，暴躁，傲慢。(Perl语言发明者Larry Wall)
5. 编程时要保持这种心态：就好象将来要维护你这些代码的人是一位残暴的精神病患者，而且他知道你住在哪。(Martin Golding)
6. 一个人写的烂软件将会给另一个人带来一份全职工作。(Jessica Gaston)
7. 如果建筑工人像程序员写软件那样盖房子，那第一只飞来的啄木鸟就能毁掉人类文明。(Gerald Weinberg)
8. 这世界最有可能毁灭的方式——大多数专家都同意——是次意外。这就是为什么会有我们，我们是计算机专家，我们创造意外。(Nathaniel Borenstein)
9. 我们这个行业有个特别奇怪的现象：不仅我们不从失败里吸取教训，同时也不从成功中学习经验。 (Keith? Braithwaite)
10. 一种新技术一旦开始流行，你要么坐上压路机，要么成为铺路石。(Stewart Brand)
11. 如果没能一次成功，那就叫它1.0版吧。(unknown)
12. 所有的程序员都是编剧，所有的计算机都是烂演员。(Anonymous Hack Actor)
13. 工作进度上越早落后，你就会有越充足的时间赶上。(Anonymous Scheduler)
14. 当有这样的一种编程语言出现：它能让程序员用简单的英语编程，你将会发现，程序员都开始不会说英语。(Anonymous Linguist)
15. 为什么我们没有时间把事情做对，却总有时间把事情做过头？(Anonymous)
16. 傻瓜都能写出计算机能理解的程序。优秀的程序员写出的是人类能读懂的代码。
17. 任何你写的代码，超过6个月不去看它，当你再看时，都像是别人写的。(Eagleson’s law) 查看全部
2. 程序有问题时不要担心。如果所有东西都没问题，你就失业了。(软件工程的Mosher定律)
3. 程序员的麻烦在于，你无法弄清他在捣腾什么，当你最终弄明白时，也许已经晚了。(超级计算机之父Seymour Cray)
4. 我想大部分人都知道通常一个程序员会具有的美德。当然了，有三种：懒惰，暴躁，傲慢。(Perl语言发明者Larry Wall)
5. 编程时要保持这种心态：就好象将来要维护你这些代码的人是一位残暴的精神病患者，而且他知道你住在哪。(Martin Golding)
6. 一个人写的烂软件将会给另一个人带来一份全职工作。(Jessica Gaston)
7. 如果建筑工人像程序员写软件那样盖房子，那第一只飞来的啄木鸟就能毁掉人类文明。(Gerald Weinberg)
8. 这世界最有可能毁灭的方式——大多数专家都同意——是次意外。这就是为什么会有我们，我们是计算机专家，我们创造意外。(Nathaniel Borenstein)
9. 我们这个行业有个特别奇怪的现象：不仅我们不从失败里吸取教训，同时也不从成功中学习经验。 (Keith? Braithwaite)
10. 一种新技术一旦开始流行，你要么坐上压路机，要么成为铺路石。(Stewart Brand)
11. 如果没能一次成功，那就叫它1.0版吧。(unknown)
12. 所有的程序员都是编剧，所有的计算机都是烂演员。(Anonymous Hack Actor)
13. 工作进度上越早落后，你就会有越充足的时间赶上。(Anonymous Scheduler)
14. 当有这样的一种编程语言出现：它能让程序员用简单的英语编程，你将会发现，程序员都开始不会说英语。(Anonymous Linguist)
15. 为什么我们没有时间把事情做对，却总有时间把事情做过头？(Anonymous)
16. 傻瓜都能写出计算机能理解的程序。优秀的程序员写出的是人类能读懂的代码。
17. 任何你写的代码，超过6个月不去看它，当你再看时，都像是别人写的。(Eagleson’s law) 查看全部
1. 一个好的程序员是那种过单行线马路都要往两边看的人。(Doug Linder)
2. 程序有问题时不要担心。如果所有东西都没问题，你就失业了。(软件工程的Mosher定律)
3. 程序员的麻烦在于，你无法弄清他在捣腾什么，当你最终弄明白时，也许已经晚了。(超级计算机之父Seymour Cray)
4. 我想大部分人都知道通常一个程序员会具有的美德。当然了，有三种：懒惰，暴躁，傲慢。(Perl语言发明者Larry Wall)
5. 编程时要保持这种心态：就好象将来要维护你这些代码的人是一位残暴的精神病患者，而且他知道你住在哪。(Martin Golding)
6. 一个人写的烂软件将会给另一个人带来一份全职工作。(Jessica Gaston)
7. 如果建筑工人像程序员写软件那样盖房子，那第一只飞来的啄木鸟就能毁掉人类文明。(Gerald Weinberg)
8. 这世界最有可能毁灭的方式——大多数专家都同意——是次意外。这就是为什么会有我们，我们是计算机专家，我们创造意外。(Nathaniel Borenstein)
9. 我们这个行业有个特别奇怪的现象：不仅我们不从失败里吸取教训，同时也不从成功中学习经验。 (Keith? Braithwaite)
10. 一种新技术一旦开始流行，你要么坐上压路机，要么成为铺路石。(Stewart Brand)
11. 如果没能一次成功，那就叫它1.0版吧。(unknown)
12. 所有的程序员都是编剧，所有的计算机都是烂演员。(Anonymous Hack Actor)
13. 工作进度上越早落后，你就会有越充足的时间赶上。(Anonymous Scheduler)
14. 当有这样的一种编程语言出现：它能让程序员用简单的英语编程，你将会发现，程序员都开始不会说英语。(Anonymous Linguist)
15. 为什么我们没有时间把事情做对，却总有时间把事情做过头？(Anonymous)
16. 傻瓜都能写出计算机能理解的程序。优秀的程序员写出的是人类能读懂的代码。
17. 任何你写的代码，超过6个月不去看它，当你再看时，都像是别人写的。(Eagleson’s law)
2. 程序有问题时不要担心。如果所有东西都没问题，你就失业了。(软件工程的Mosher定律)
3. 程序员的麻烦在于，你无法弄清他在捣腾什么，当你最终弄明白时，也许已经晚了。(超级计算机之父Seymour Cray)
4. 我想大部分人都知道通常一个程序员会具有的美德。当然了，有三种：懒惰，暴躁，傲慢。(Perl语言发明者Larry Wall)
5. 编程时要保持这种心态：就好象将来要维护你这些代码的人是一位残暴的精神病患者，而且他知道你住在哪。(Martin Golding)
6. 一个人写的烂软件将会给另一个人带来一份全职工作。(Jessica Gaston)
7. 如果建筑工人像程序员写软件那样盖房子，那第一只飞来的啄木鸟就能毁掉人类文明。(Gerald Weinberg)
8. 这世界最有可能毁灭的方式——大多数专家都同意——是次意外。这就是为什么会有我们，我们是计算机专家，我们创造意外。(Nathaniel Borenstein)
9. 我们这个行业有个特别奇怪的现象：不仅我们不从失败里吸取教训，同时也不从成功中学习经验。 (Keith? Braithwaite)
10. 一种新技术一旦开始流行，你要么坐上压路机，要么成为铺路石。(Stewart Brand)
11. 如果没能一次成功，那就叫它1.0版吧。(unknown)
12. 所有的程序员都是编剧，所有的计算机都是烂演员。(Anonymous Hack Actor)
13. 工作进度上越早落后，你就会有越充足的时间赶上。(Anonymous Scheduler)
14. 当有这样的一种编程语言出现：它能让程序员用简单的英语编程，你将会发现，程序员都开始不会说英语。(Anonymous Linguist)
15. 为什么我们没有时间把事情做对，却总有时间把事情做过头？(Anonymous)
16. 傻瓜都能写出计算机能理解的程序。优秀的程序员写出的是人类能读懂的代码。
17. 任何你写的代码，超过6个月不去看它，当你再看时，都像是别人写的。(Eagleson’s law)
开启平台的第一问：引入Bootstrap用什么方式好
bootstrap3.x • lopo 回复了问题 • 2 人关注 • 1 个回复 • 2533 次浏览 • 2015-12-24 09:56