转自:http://berzniz.com/post/68001735765/javascript-hacks-for-hipsters

Javascript Hacks for Hipsters

Javascript is so much fun, except when it’s not.

There’s always the fear of runtime errors that keeps us thinking all the time while writing code. It makes us better coders - we have no other option than to visualize every line of code as if it’s running as we write it.

That’s why it’s so important to have tidy code. Small code. Pretty code. Code you just fall in love with. Otherwise, Javascript will scare you away.

I gathered some fun snippets I enjoy using instead of boring code that takes too much space. Some makes the code shorter, cleaner and more readable. Other are just plain hacks for debugging.

I learned all of this from open source code (until node.js all javascript code was open source, wasn’t it?), but I’ll write them here is if I invented them.

Hipster Hack #1 - Method calling

I really hate if/else blocks and this is quite a useful trick to call the right function based on a boolean value.

// Boring
if (success) {
obj.start();
} else {
obj.stop();
} // Hipster-fun
var method = (success ? 'start' : 'stop');
obj[method]();
 
view rawjshipster_method.js hosted with ❤ by GitHub

Hipster Hack #2 - String joins

It’s a known fact that strings like other strings. Sooner or later you’d like to concatenate two or more of them. I don’t really like +ing them together, so join() comes to the rescue.

['first', 'name'].join(' '); // = 'first name';

['milk', 'coffee', 'suger'].join(', '); // = 'milk, coffee, suger'
view rawjshipster_join.js hosted with ❤ by GitHub

Hipster Hack #3 - Default Operator ||

Javascript is all about not knowing what an object holds. Sometime you get it as a function argument, other times you might read it from the network or a configuration file. Either way, you can use the || operator to use the second argument if the first is falsy.

// default to 'No name' when myName is empty (or null, or undefined)
var name = myName || 'No name'; // make sure we have an options object
var doStuff = function(options) {
options = options || {};
// ...
};

Hipster Hack #4 - Guard Operator &&

Similar to the Default Operator, this one is super useful. It eliminates almost all IF calls and makes for a nicer code.

// Boring
if (isThisAwesome) {
alert('yes'); // it's not
} // Awesome
isThisAwesome && alert('yes'); // Also cool for guarding your code
var aCoolFunction = undefined;
aCoolFunction && aCoolFunction(); // won't run nor crash

Hipster Hack #5 - XXX Operator

This one is totally copyrighted and also SFW. Whenever I write some code, but then have to consult the web, or a different part of the code, I add an xxx line to the code. This makes the code break so I can get back to the specific place and fix it later. Much easier to search for it (xxx usually never appears) and you don’t have to think about a TODO comment.

var z = 15;
doSomeMath(z, 10);
xxx // Great placeholder. I'm the only one using xxx and it's so easy to find in code instead of TODOs
doSomeMoreMath(z, 15);
view rawjshipster_xxx.js hosted with ❤ by GitHub

Hipster Hack #6 - Timing

Ever wonder what’s faster: Looping with an i++ or looping with an i— ? Yeah, me neither. For those who does, you can use the console’s timing methods to test for slow loops or any other event-loop blocking code.

var a = [1,2,3,4,5,6,7,8,9,10];

console.time('testing_forward');
for (var i = 0; i < a.length; i++);
console.timeEnd('testing_forward');
// output: testing_forward: 0.041ms console.time('testing_backwards');
for (var i = a.length - 1; i >= 0; i--);
console.timeEnd('testing_backwards');
// output: testing_backwards: 0.030ms
view rawjshipster_timing.js hosted with ❤ by GitHub

Hipster Hack #7 - Debugging

I learned this one from a Java developer. I have absolutely no idea how he knew about it and I didn’t, but I’ve been using it ever since. Just drop a debugger statement and the debugger will stop on that line.

var x = 1;
debugger; // Code execution stops here, happy debugging
x++; var x = Math.random(2);
if (x > 0.5) {
debugger; // Conditional breakpoint
}
x--;

Hipster Hack #8 - Old School Debugging

I’ve always been a “printf debugger” more than a line-by-line-in-a-debugger kind of developer. If you’re like me, you’ll want to “export” some private vars into the global scope in order to examine them from time to time. Don’t forget to remove these before committing/pushing-to-production.

var deeplyNestedFunction = function() {
var private_object = {
year: '2013'
}; // Globalize it for debugging:
pub = private_object;
}; // Now from the console (Chrome dev tools, firefox tools, etc)
pub.year;

Hipster Hack #9 - Ultra Light Templates

Are you still concatenating strings using the + operator? Here’s a better way to combine a sentence with your data. It’s called templating and here’s a mini framework in 2.5 lines of code.

var firstName = 'Tal';
var screenName = 'ketacode' // Ugly
'Hi, my name is ' + firstName + ' and my twitter screen name is @' + screenName; // Super
var template = 'Hi, my name is {first-name} and my twitter screen name is @{screen-name}';
var txt = template.replace('{first-name}', firstName)
.replace('{screen-name}', screenName);

Javascript几个时髦的hack技巧《Javascript Hacks for Hipsters》的更多相关文章

  1. javascript自动填写表单小技巧

    javascript自动填写表单小技巧 在平时开发过程中,或者在访问某些站点,经常要频繁地填写一大堆表单时,我们可以利用javascript,写一段脚本,预先把要填的信息准备好,然后模拟点击按钮的动作 ...

  2. 【转载】webstorm-前端javascript开发神器中文教程和技巧分享

    webstorm是一款前端javascript开发编辑的神器,此文介绍webstorm的中文教程和技巧分享. webstorm8.0.3中文汉化版下载:百度网盘下载:http://pan.baidu. ...

  3. webstorm-前端javascript开发神器中文教程和技巧分享(转)

    webstorm是一款前端javascript开发编辑的神器,此文介绍webstorm的中文教程和技巧分享. webstorm8.0.3中文汉化版下载:百度网盘下载:http://pan.baidu. ...

  4. webstorm-前端javascript开发神器中文教程和技巧分享(转)

    webstorm是一款前端javascript开发编辑的神器,此文介绍webstorm的中文教程和技巧分享. webstorm8.0.3中文汉化版下载: 百度网盘下载:http://pan.baidu ...

  5. CSS hack技巧

    CSS hack技巧一览,原文来自CSDN freshlover的博客专栏<史上最全CSS Hack方式一览> 什么是CSS hack 由于不同厂商的流览器或某浏览器的不同版本(如IE6- ...

  6. 【历史】JavaScript和Java没啥关系!————JavaScript简史

    文章的开始先上张图: 图片拍摄自北京图书大厦,代表着现在国内应该是绝大部分书店的现状--Javascript书籍放在Java类当中.甚至很多业内人也一直认为Javascript是Java语言在浏览器内 ...

  7. 读《你不知道的JavaScript(上卷)》后感-浅谈JavaScript作用域(一)

    原文 一. 序言 最近我在读一本书:<你不知道的JavaScript>,这书分为上中卷,内容非常丰富,认真细读,能学到非常多JavaScript的知识点,希望广大的前端同胞们,也入手看看这 ...

  8. 2、JavaScript 基础二 (从零学习JavaScript)

     11.强制转换 强制转换主要指使用Number.String和Boolean三个构造函数,手动将各种类型的值,转换成数字.字符串或者布尔值. 1>Number强制转换 参数为原始类型值的转换规 ...

  9. 1、JavaScript 基础一 (从零学习JavaScript)

    1:定义:javascript是一种弱类型.动态类型.解释型的脚本语言. 弱类型:类型检查不严格,偏向于容忍隐式类型转换. 强类型:类型检查严格,偏向于不容忍隐式类型转换. 动态类型:运行的时候执行类 ...

随机推荐

  1. poj 2377 Bad Cowtractors (最大生成树prim)

    Bad Cowtractors Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 131072/65536K (Java/Other) To ...

  2. CentOS下查看最后登录的用户信息以及LOG记录

    CentOS下查看最后登录的用户信息tail /var/log/messagestail /var/log/secure 我们知道,在redhat下可以用lastlog查看各用户最后登录的信息,用la ...

  3. EMF与GEF

    基于Eclipse的编程架构 类似的场景大家基本都见过: JBPM--流程插件 Mule---ESB插件

  4. Python 中的属性访问与描述符

    在Python中,对于一个对象的属性访问,我们一般采用的是点(.)属性运算符进行操作.例如,有一个类实例对象foo,它有一个name属性,那便可以使用foo.name对此属性进行访问.一般而言,点(. ...

  5. cmd,amd,umd 模块写法

    mark一篇感觉写的不错的cmd/amd/umd的模块写法 原文:https://github.com/banricho/webLog/issues/12 umd通用写法: // jQuery 2.2 ...

  6. 基于C++11实现的线程池

    1.C++11中引入了lambada表达式,很好的支持异步编程 2.C++11中引入了std::thread,可以很方便的构建线程,更方便的可移植特性 3.C++11中引入了std::mutex,可以 ...

  7. 服务器选型:x86 vs 小型机谁更胜一筹?

    市场上关于X86 和小型机的争论从来就没有停止过,在以往的印象当中,x86服务器在中低端形成了统治之势,而小型机则在关键性应用领域(金融.证券.政府等)享有王者地位.但是随着X86服务器的不断发展,这 ...

  8. MySQL查询结果写入到文件总结

    Mysql查询结果导出/输出/写入到文件 方法一:直接执行命令: mysql> select count(1) from table into outfile '/tmp/test.txt'; ...

  9. 利用CSS3 filter:drop-shadow实现纯CSS改变图片颜色

    体验更优排版请移步原文:http://blog.kwin.wang/programming/css3-filter-drop-shadow-change-color.html 之前做项目过程中有时候遇 ...

  10. 使用openal与mpg123播放MP3,附带工程文件(转)

    使用openal与mpg123播放MP3,附带工程文件 使用openal和mpg123播放MP3文件 使用静态编译,相关文件都在附件里 相关工程文件:openal_mpg123_player.7z 使 ...