[转载]教你如何塑造JavaScript牛逼形象

http://www.html5cn.org/article-6571-1.html

如何写JavaScript才能逼格更高呢?怎样才能组织JavaScript才能让别人一眼看出你不简单呢?是否很期待别人在看完你的代码之后感叹一句“原来还可以这样写”呢?下面列出一些在JavaScript时的装逼技巧。

1. 匿名函数的N种写法

你知道“茴”的四种写法吗?ε=(?д?`*)??… 扯淡,但你或许不知道匿名函数的好几种写法。一般情况下写匿名函数是这样的:

  1. (function(){})();

复制代码

但下面几种写法也是可以的:

  1. !function(){}();
  2. +function(){}();
  3. -function(){}();
  4. ~function(){}();
  5. ~(function(){})();
  6. void function(){}();
  7. (function(){}());

复制代码

其实细看可以看出规律,因为+-!~这些具有极高的优先级,所以右边的函数声明加上括号的部分(实际上就是函数执行的写法)就直接执行了。当然,这样的写法,没有什么区别,纯粹看装逼程度。

2. 另外一种undefined

从来不需要声明一个变量的值是undefined,因为JavaScript会自动把一个未赋值的变量置为undefined。所有如果你在代码里这么写,会被鄙视的:

  1. var data = undefined;

复制代码

但是如果你就是强迫症发作,一定要再声明一个暂时没有值的变量的时候赋上一个undefined。那你可以考虑这么做:

  1. 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代码里有大量的条件逻辑判断时,那代码看起来多可怕:

  1. if () {
  2. // ...
  3. } else if () {
  4. // ...
  5. } else if () {
  6. // ...
  7. } else {
  8. // ...
  9. }

复制代码

不用我说你都猜到用什么语法来简化if-else了。没错,用||和&&,很简单的原理就不用说啦。值得一提的是,有时候用!!操作符也能简化if-else模式。例如这样:

  1. // 普通的if-else模式
  2. var isValid = false;
  3. if (value && value !== ‘error‘) {
  4. isValid = true;
  5. }
  6. // 使用!!符号
  7. var isValid = !!(value && value !== ‘error‘);

复制代码

“!”是取反操作,两个“!”自然是负负得正了。

4. 不加分号

关于
JavaScript要不要加分号的争论已经吵了好几年。Google的JavaScript语法指南告诉我们要加分号,很多JavaScript语法书
籍也告诉我们加上分号更安全。然而,分号加不加,全靠个人对代码的写法,你确信写得足够安全的话,不加分号显得更加高大上。

5. 赶上ES6的早班车

ES6即将在年底正式发布,赶时髦的开发者们,赶快在自己的代码里用起来。用上module声明,写写class,捣鼓一下Map,这些都会让你的代码逼格更高。神马?你都不会用?那也好歹在代码头部加上一个ES5的”use strict”;呀。

6. 添加AMD模块支持

给你写的代码声明一下AMD模块规范,这样别人就可以直接通过AMD的规范来加载你的模块了,如果别人没有通过规范来加载你的模块,你也可以优雅地返回一个常规的全局对象。来看看jQueryUI的写法:

  1. (function( factory ) {
  2. if ( typeof define === "function" && define.amd ) {
  3. // AMD. Register as an anonymous module.
  4. define( [ "jquery" ], factory );
  5. } else {
  6. // Browser globals
  7. factory( jQuery );
  8. }
  9. }(function( $ ) {
  10. // 这里放模块代码
  11. return $.widget;
  12. }));

复制代码

就用它来包裹你的实际代码吧,保证别人一看代码就知道你是个专业的开发者。

7. Function构造函数

很多JavaScript教程
告诉我们,不要直接用内置对象的构造函数来创建基本变量,例如var arr = new Array(2); 的写法就应该用var arr =
[1,
2];的写法来取代。但是,Function构造函数(注意是大写的Function)有点特别。Function构造函数接受的参数中,第一个是要传入
的参数名,第二个是函数内的代码(用字符串来表示)。

  1. 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语法上灵活,让大家对同一个功能有很多种不同的写法,写法上的优化是对程序结构和代码维护有很大帮助的。所
以,装逼得装得好看。

时间: 2024-10-06 00:07:29

[转载]教你如何塑造JavaScript牛逼形象的相关文章

教你如何塑造JavaScript牛逼形象

如何写JavaScript才能逼格更高呢?怎样才能组织JavaScript才能让别人一眼看出你不简单呢?是否很期待别人在看完你的代码之后感叹一句“原来还可以这样写”呢?下面列出一些在JavaScript时的装逼技巧. 1. 匿名函数的N种写法 你知道“茴”的四种写法吗?ε=(?д?`*)??… 扯淡,但你或许不知道匿名函数的好几种写法.一般情况下写匿名函数是这样的: (function(){})(); 复制代码 但下面几种写法也是可以的: !function(){}(); +function()

Java 11 正式发布,这 8 个逆天新特性教你写出更牛逼的代码

美国时间 09 月 25 日,Oralce 正式发布了 Java 11,这是据 Java 8 以后支持的首个长期版本. 为什么说是长期版本,看下面的官方发布的支持路线图表. Java 11 正式发布,这 8 个逆天新特性教你写出更牛逼的代码可以看出 Java 8 扩展支持到 2025 年,而 Java 11 扩展支持到 2026 年. 现在大部分都在用 Java 8,Java 9 和 10 目前很少有人在用,至少我没有发现有公司在生产环境应用的,那就是找死. 现在 Java 11 长期支持,也已

Java 11正式发布,这几个逆天新特性教你写出更牛逼的代码

就在前段时间,Oracle 官方宣布 Java 11 (18.9 LTS) 正式发布,可在生产环境中使用! 这无疑对我们来说是一大好的消息.作为一名java开发者来说,虽然又要去学习和了解java11,但内心还是欣慰的.我想至少你和我一样的心情:Java在手,天下我有! 今天我们来看一下Java 11到底是什么.他有什么特别的.到底要不要升级到Java 11. Java 11有什么特别的 在Oracle官网中,进入下载页面,第一个可供下载的JDK版本已经提换成了Java SE 11 (LTS),

史上最牛逼的javascript俄罗斯方块,63行代码搞定啊

<!doctype html><html><head></head><body> <div id="box" style="width:252px;font:25px/25px 宋体;background:#000;color:#9f9;border:#999 20px ridge;text-shadow:2px 3px 1px #0f0;"></div> <script>

我喜欢ASP.NET的MVC因为它牛逼的9大理由(转载)

我很早就关注ASP.NET的mvc的,因为最开始是学了Java的MVC,由于工作的原因一直在做.Net开发,最近的几个新项目我采用了MVC做了,我个一直都非常喜欢.Net的MVC.我们为什么使用MVC而不是用WebForm呢?下面就来说说MVC的亮点.由于我最近使用都是MVC5.0和EF6.1,所以下面的所有实例都是基于这两个版本的. 1.创建项目内置了Bootsrap Bootsrap是一个响应式的UI界面库,能快速的搭建响应式界面,如果没有美工,对界面要求不是很高的话完全可以直接作用,很方便

牛逼顿的一生

(本文系转载,原作者不详) watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" /> 3月28日是牛顿的忌日.可是知道的人非常少,我们毕竟更关心沈殿霞和张国荣.事实上牛顿老师在科学圈里曾经非常有权势,被女王封了爵位成了贵族,人称牛爵爷.官至皇家造币局局长兼皇家学会会长.假设阿尔伯特没有辞了以色列总统的话和他

为什么美国学生学的数学比我们简单却还能做出很牛逼的东西?

听说过这样一种说法:美国初中生学的数学是咱们国家小学生学的水平,美国高中生学的数学是咱们国家初中的水平.(不知道对不对) 那么,为什么很多需要数学的东西(比如计算机图形学领域)都是人家做出来的而不是咱们 ?算法对数学的要求够大了吧? PPS:一个类似的回答,有启发意义:美国高中教育那么粗浅,大学教育那么尖端,中间的 Gap 怎么搞定? 私以为 @倪大为 同学引用的答案说的是最正确的.特此赞同一下:"美国给予不热爱数学的学生最基础的数学教育,而给予热爱数学的天才最高水平的数学教育." 长久以来,中

douban_转自熊博网——牛逼顿

转自熊博网——牛逼顿 来自: 天云之叶(大道易得,小术难求) 2010-04-21 18:32:27 牛逼顿 作者:singularitys 3月28号是牛顿的忌日,但是知道的人很少,我们毕竟更关心沈殿霞和张国荣.其实牛顿老师在科学圈里曾经很有权势,被女王封了爵位成了贵族,人称牛爵爷,官至皇家造币局局长兼皇家学会会长.如果阿尔伯特没有辞了以色列总统的话和他有一拼. 说他有权势并不仅是官大,主要是贡献大.如果17世纪就有诺贝尔奖的话,牛顿老师至少能连续垄断4届物理学奖(分光计:力学体系的构建:反射

牛逼顿

这斜乜的眼神,微微上扬的左嘴角,坚挺的鹰钩鼻,笑而不语…… 确实透着股秒杀春哥,视女人为粪土的轰轰牛气. 作者:singularitys 3月28日是牛顿的忌日,但是知道的人很少,我们毕竟更关心沈殿霞和张国荣.其实牛顿老师在科学圈里曾经很有权势,被女王封了爵位成了贵族,人称牛爵爷,官至皇家造币局局长兼皇家学会会长.如果阿尔伯特没有辞了以色列总统的话和他有一拼. 说他有权势并不仅是官大,主要是贡献大.如果17世纪就有诺贝尔奖的话,牛顿老师至少能连续垄断4届物理学奖(分光计.力学体系的构建.反射望远