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; // undefined
void在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编程黑科技,装逼指南,高逼格代码,让你惊叹不已 Javascript是一门很吊的语言,我可能学了假的JavaScript,哈哈,大家还有什么推荐的 本文秉承着:你看不懂是 ...
- 你以为 CSS 只是个简单的布局?装逼指南了解一下
装逼指南 本文中,所有的图形都是在单个标签内实现的,大量使用了 CSS3 中的 ::before .::after 伪元素,transparent .border,多重线性与径向渐变,多重内外阴影,如 ...
- EXCEL装逼指南之动态进度条(项目经理必备技能)
EXCEL装逼指南之动态进度条(项目经理必备技能) 作为浪迹职场多年的混子(项目经理),是否常常对项目进度把控不利,汇报工作又含含糊糊让领导不知所以而经常惨遭领导羞辱,同事嘲笑? 那么如何做一份让领导 ...
- java装逼的话_程序员装逼指南(语言篇)
原标题:程序员装逼指南(语言篇) 语言:千万不要说自己是做Java或者.Net的,一下子就屌丝了.PHP现在也不行,Python稍微有点烂大街,但还是明显要强过前几个.剩下的可以说自己是做Ruby的, ...
- 高级程序员装逼指南,是高级哦!(转)
高级程序员装逼指南,是高级哦! 下面这个才是高级版本 ;; 这是注释 ;; 0.9版本 ;; 2011年8月22日 ** 前言 ** 最近网上出了一个<程序员装逼指南>,觉得这个东西其实图 ...
- 高级程序员装逼指南,是高级哦!
下面这个才是高级版本 ;; 这是注释 ;; 0.9版本 ;; 2011年8月22日 ** 前言 ** 最近网上出了一个<程序员装逼指南>,觉得这个东西其实图样图森破 然后在下跟微博上的一些 ...
- myqr一句代码实现二维码背景图片自定义装逼指南
myqr一句代码实现二维码背景图片自定义装逼指南 文章目录 myqr一句代码实现二维码背景图片自定义装逼指南 前提准备 步骤 注意 拓展 示例 前提准备 1.Python安装(下载安装教程自行查阅). ...
- OSChina 周二乱弹 ——程序员高级装逼指南
2019独角兽企业重金招聘Python工程师标准>>> [今日歌曲推荐] @贺常志 :<闷>-王菲,看我菲的慵懒.不可一世. <闷>-王菲 手机党少年们想听歌 ...
- js中当等于最小值是让代码不执行_28 个JavaScript编程黑科技,装逼指南,高逼格代码,让你惊叹不已...
Javascript 是一门很厉害的语言,我可能学了假的 JavaScript,哈哈,大家还有什么推荐的,欢迎补充. 1.单行写一个评级组件 "★★★★★☆☆☆☆☆".slice( ...
最新文章
- Commvault公司营收增长 但本季度仍身陷亏损
- 2020人工智能全球女性榜发布,致敬这些杰出的女科学家
- Csharp: 拼音转汉字字符搜索字符串
- 表单如何提交后mysql_如何在表格中添加表单,并提交MYSQL数据库
- MySQL给用户设置密码(修改密码)、创建用户,grant为某个IP、某个网段或所有IP地址创建访问用户并授权
- 服务器内存型号与频率,一张图看懂如何选择DDR4内存的频率和容量
- 手机端调试console.log,直接引入一个js文件
- react typescript 子组件调用父组件
- 人工智能指用计算机,人工智能测试题..doc
- java mvp模式_MVP模式入门(结合Rxjava,Retrofit)
- license授权什么意思_微信公众号的scope权限什么意思
- cvCalcEMD2() 直方图匹配
- 配置文件或模板中的占位符替换工具类.
- big O notation - 大 O 表示法
- 2019-2-27-VisualStudio-插件-翻译注释
- 草根大牛论道“下一代软件研发” 开启软件转型讨论大潮
- JavaScript:世界上最被误解的语言
- 单片机外围电路设计之二:电容
- 生产用计算机软件管理台账,计算机台账管理系统
- 创新:颠覆笔记本音响系统!Audigy
热门文章
- ajaxToolKit中 的折叠面板用法--Accordion
- SpringMvc之整合DWR3.0.0推送消息
- Android 屏幕旋转时Activity的变化
- Response.Redirect、 Server.Transfer、Server.Execute三者区别
- TCP 连接断连问题剖析
- 戴尔:发力互联互通 构建世界基础设施中心
- 《C++编程风格(修订版)》——1.1 抽象
- Java jvisualvm简要说明
- Junos路由器静态路由及动态路由rip和ospf配置测试
- FPGA 之 VGA的IP核编写