转自: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. 0001_mysql 5.7.25安装初始化

    一.   下载mysql https://dev.mysql.com/downloads/mysql/ 二.   选择社区版本 三.   选择版本下载: 四.   跳过注册直接下载: 五.   解压后 ...

  2. 第1课 GUI程序原理分析

    1. 命令行应用程序 (1)命令行应用程序的特点 ①是一种基于顺序执行结构的可执行程序 ②程序执行过程中不需要与用户产生交互 ③程序执行后给出最终的运行结果 (2)命令行应用程序的运行模式——程序运行 ...

  3. 8种常被忽视的SQL错误用法

    作者:一杯甜酒 原文:https://blog.csdn.net/u012562943/article/details/71403500 sql语句的执行顺序: FROM <left_table ...

  4. 配置mysql环境变量

    配置mysql环境变量(非必要) 说明:给mysql配置环境变量后我们就可以在cmd里运行mysql(开启.停止等操作) 1. 和其实环境变量的配置方法一样,我们打开环境变量配置窗口(组合键win+P ...

  5. ubantu的安装和卸载

    ubuntu软件安装与卸载 更新Ubuntu软件下载地址 1. 寻找国内镜像源 所谓的镜像源:可以理解为提供下载软件的地方,比如Android手机上可以下载软件的91手机助手:iOS手机上可以下载软件 ...

  6. 通过PicturreId获取图片路径(Url)

    1.直接使用接口服务 _pictureService.GetPictureUrl((int)entity.SponsorPictureId); //entity是具体查询出来的实体对象 Sponsor ...

  7. s2选择框的全选和反选jQuery

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. artZoom 图片可放大旋转

    资源下载:http://www.sucaijiayuan.com/Js/TuPianDaiMa/774.html 第一步:引入文件 <link rel="stylesheet" ...

  9. ajax传参里含有特殊字符的坑

    问题场景:今天在测试自己手上的页面功能时,发现一个小bug,在用ajax向后台发数据时,只要参数中出现一些特殊字符,控制台会报错http 400的问题,其实就是特殊字符服务器不能解析.好了,问题是找到 ...

  10. Information Retrieval II

    [Information Retrieval II] 搜索引擎分类: 1.目录式搜索引擎. 2.全文搜索引擎. 3.元搜索引擎(Meta-Search Engine). 搜索引擎的4个阶段:下载(cr ...