[转载]教你如何塑造JavaScript牛逼形象
http://www.html5cn.org/article-6571-1.html
如何写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才能让别人一眼看出你不简单呢?是否很期待别人在看完你的代码之后感叹一句“原来还可以这样写”呢?下面列出一些在JavaScrip ...
- Java 11 正式发布,这 8 个逆天新特性教你写出更牛逼的代码
美国时间 09 月 25 日,Oralce 正式发布了 Java 11,这是据 Java 8 以后支持的首个长期版本. 为什么说是长期版本,看下面的官方发布的支持路线图表. 可以看出 Java 8 扩 ...
- Java 11 这 8 个逆天新特性教你写出更牛逼的代码!
美国时间2018年 09 月 25 日,Oralce 正式发布了 Java 11,这是据 Java 8 以后支持的首个长期版本. 为什么说是长期版本,看下面的官方发布的支持路线图表. 可以看出 Jav ...
- Java 11正式发布,这几个逆天新特性教你写出更牛逼的代码
就在前段时间,Oracle 官方宣布 Java 11 (18.9 LTS) 正式发布,可在生产环境中使用! 这无疑对我们来说是一大好的消息.作为一名java开发者来说,虽然又要去学习和了解java11 ...
- 我喜欢ASP.NET的MVC因为它牛逼的9大理由(转载)
我很早就关注ASP.NET的mvc的,因为最开始是学了Java的MVC,由于工作的原因一直在做.Net开发,最近的几个新项目我采用了MVC做了,我个一直都非常喜欢.Net的MVC.我们为什么使用MVC ...
- 【转载】可能是世界上最牛逼的网站统计程序——Matomo
大家做网站的时候一般都会使用网站统计程序.通常,国内网站会使用百度统计.CNZZ等,而国外网站则会使用Google Analytics等统计.国内的统计程序普遍功能不太丰富,且响应速度一般.Googl ...
- douban_转自熊博网——牛逼顿
转自熊博网——牛逼顿 来自: 天云之叶(大道易得,小术难求) 2010-04-21 18:32:27 牛逼顿 作者:singularitys 3月28号是牛顿的忌日,但是知道的人很少,我们毕竟更关心沈 ...
- js深入研究之牛逼的类封装设计
<script type="text/javascript"> var Book = function(newIsbn, newTitle, newAuthor) { ...
- csvkit---python一个牛逼到不行的csv处理库
先吐槽一下:不管是百度还是谷歌,查来查去除了官方文档之外就没有任何可以借鉴的例子,虽然官方文档写的挺好的.但是我一直以为是在python语言的方式运行的,结果是以命令行的方式运行的,搞得我还以为这个库 ...
随机推荐
- [转帖]Cgroups 与 Systemd
Cgroups 与 Systemd 大神的文章很牛B .. https://www.cnblogs.com/sparkdev/p/9523194.html 看不太懂 , 转帖一下 自己留着好好看呢. ...
- springmvc+mybatis 处理图片(一):上传图片
一直觉得上传图片文件之类的很难,所以最后才处理图片,发现也并没有那么难,开始正文. 思路:将前台上传的file存到MutipartFile类型字段中,再将MulipartFile转换为pojo类中的b ...
- Codeforces Round #526 Div. 1 自闭记
日常猝死. A:f[i]表示子树内包含根且可以继续向上延伸的路径的最大价值,统计答案考虑合并两条路径即可. #include<iostream> #include<cstdio> ...
- P3758 [TJOI2017]可乐
题目描述 加里敦星球的人们特别喜欢喝可乐.因而,他们的敌对星球研发出了一个可乐机器人,并且放在了加里敦星球的1号城市上.这个可乐机器人有三种行为: 停在原地,去下一个相邻的城市,自爆.它每一秒都会随机 ...
- 【刷题】洛谷 P3690 【模板】Link Cut Tree (动态树)
题目背景 动态树 题目描述 给定n个点以及每个点的权值,要你处理接下来的m个操作.操作有4种.操作从0到3编号.点从1到n编号. 0:后接两个整数(x,y),代表询问从x到y的路径上的点的权值的xor ...
- BZOJ5305 [Haoi2018]苹果树 【组合数学】
题目链接 BZOJ5305 题解 妙啊 要求的是所有可能的树形的所有点对距离和 直接考虑点的贡献肯定想不出,这样的所有点对距离问题通常转化为边的贡献 考虑一条边会产生多少贡献 我们枚举\(i\)节点的 ...
- Android 捕获组合键
android中捕获组合键http://blog.csdn.net/wenlibin1985/article/details/5579359 Android组合键http://www.eoeandro ...
- 解题:JSOI 2008 Blue Mary的战略地图
题面 这大概不算是从零开始的DP学习系列,这不是最大子矩形吗=.= 定义$dp[x][y][xx][yy]$表示第一张地图中右下角为$(x,y)$,第二张地图中右下角为$(xx,yy)$的最大公共子矩 ...
- 【bzoj2754】【scoi2012】喵星球上的点名
题解们: 1.首先可以被很多暴力给搞过去:我以前也是这样水过去的 2.ac自动机 2.1 抽离fail树 对点名建自动机,建$fail$树的时候只保留询问节点: 对于一个喵,子串==在自动机里匹配到的 ...
- POI上传,导入excel文件到服务器1
首先说一下所使用的POI版本3.8,需要用的的Jar包: dom4j-1.6.1.jarpoi-3.8-20120326.jarpoi-ooxml-3.8-20120326.jarpoi-ooxml- ...