本文介绍了如何使用JavaScript配合定时器实现实时显示input type range的当前值，同时还提供了JavaScript装逼指南。
分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.youkuaiyun.com/jiangjunshow
也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！
<!doctype html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>Document</title> <script type="text/javascript" src="jquery-2.2.4.min.js"></script> <style type="text/css"> input[type="range"] { width: 80%; background-color: red; border-radius: 15px; -webkit-appearance: none; height: 1px; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; background-color: green; border-radius: 50%; height: 30px; width: 30px; box-shadow: 0 1px 3px rgba(0, 0, 0, .4); border: none; position: relative; z-index: 10; } </style> <script type="text/javascript"> $(function() { $(".input_1").change(function() { $("p.p1").text($(this).val()); }) setInterval(function() { $("p.p2").text($(".input_2").val()); }, 0.01) }) </script> </head> <body> <p>添加change事件</p> <input type="range" class="input_1" step="0.01" min="0" max="5" value="0"> <p class="p1">0</p> <p>添加定时器</p> <input type="range" class="input_2" step="0.01" min="0" max="5" value="0"> <p class="p2">0</p> </body></html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
<!doctype html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>Document</title> <script type="text/javascript" src="jquery-2.2.4.min.js"></script> <style type="text/css"> input[type="range"] { width: 80%; background-color: red; border-radius: 15px; -webkit-appearance: none; height: 1px; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; background-color: green; border-radius: 50%; height: 30px; width: 30px; box-shadow: 0 1px 3px rgba(0, 0, 0, .4); border: none; position: relative; z-index: 10; } </style> <script type="text/javascript"> $(function() { $(".input_1").change(function() { $("p.p1").text($(this).val()); }) setInterval(function() { $("p.p2").text($(".input_2").val()); $(".input_2").val(+$(".input_2").val() + 0.1); }, 10); console.log(typeof $(".input_2").val()); }) </script> </head> <body> <p>添加change事件</p> <input type="range" class="input_1" step="0.01" min="0" max="5" value="0"> <p class="p1">0</p> <p>添加定时器</p> <input type="range" class="input_2" step="0.01" min="0" max="5" value="0"> <p class="p2">0</p> </body></html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
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; // undefinedvoid在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语法上灵活，让大家对同一个功能有很多种不同的写法，写法上的优化是对程序结构和代码维护有很大帮助的。所以，装逼得装得好看。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
Boolean这个技巧用的很多，也非常的简单!!'foo'通过两个取反，可以强制转换为Boolean类型。较为常用。Number这个也特别简单，String转化为Number+'45'+new Date会自动转化为number类型的。较为常用。IIFE这个其实非常有实用价值，不算是装逼。只是其他语言里没有这么玩的，给不太了解js的同学看那可牛逼大了。(function(arg) { // do something})(arg)实用价值在于可以防止全局污染。不过现在随着ES2015的普及已经没什么必要用这个了，我相信五年之后，这种写法就会逐渐没落。自己干五年，在实习生面前装逼用也是蛮不错的嘛~Closure闭包嘛，js 特别好玩的一个地方。上面的立即执行函数就是对闭包的一种运用。不了解的回去翻翻书，知乎上也有很多讨论，可以去看看。闭包用起来对初学者来说简直就是大牛的标志(其实并不是)。var counter = function() { var count = 0 return function() { return count++ }}上面用到了闭包，看起来还挺装逼的吧。不过好像没什么实用价值。那么这样呢？var isType = function(type) { return function(obj) { return toString.call(obj) == '[Object ' + type + ']'; }}通过高阶函数很轻松的实现判定类别。(别忘了有判定Array的Array.isArray())当然，很明显，这只是基础，并不能更装逼一点。来看下一节Event事件响应前端肯定都写烂了，一般来说如何写一个计数器呢？var times = 0var foo = document.querySelector('.foo')foo.addEventListener('click', function() { times++ console.log(times)}, false)好像是没什么问题哦，但是！变量times为什么放在外面，就用了一次放在外面，命名冲突了怎么办，或者万一在外面修改了怎么办。这个时候这样一个事件监听代码就比较牛逼了foo.addEventListener('click', (function() { var times = 0 return function() { times++ console.log(times) }})(), false)怎么样，是不是立刻感觉不一样了。瞬间逼格高了起来！通过创建一个闭包，把times封装到里面，然后返回函数。这个用法不太常见。parseInt高能预警从这里开始，下面的代码谨慎写到公司代码里！parseInt这个函数太普通了，怎么能装逼。答案是~~现在摁下F12，在console里复制粘贴这样的代码：~~3.14159// => 3~~5.678// => 5这个技巧十分装逼，原理是~是一个叫做按位非的操作，会返回数值的反码。是二进制操作。原因在于JavaScript中的number都是double类型的，在位操作的时候要转化成int，两次~就还是原数。Hex十六进制操作。其实就是一个Array.prototype.toString(16)的用法看到这个词脑袋里冒出的肯定是CSS的颜色。做到随机的话可以这样(~~(Math.random()*(1<<24))).toString(16)底下的原文链接非常建议去读一下，后三个技巧都是在那里学到的。«左移操作。这个操作特别叼。一般得玩 C 玩得多的，这个操作会懂一些。一般半路出家的前端码农可能不太了解(说的是我 ☹)。这个也是二进制操作。将数值二进制左移解释上面的1<<24的操作。其实是1左移24位。000000000000000000000001左移24位，变成了1000000000000000000000000不信？试着在console粘贴下面的代码parseInt('1000000000000000000000000', 2) === (1 << 24)其实还有一种更容易理解的方法来解释Math.pow(2,24) === (1 << 24)因为是二进制操作，所以速度是很快的。BTW[].forEach.call($$("*"),function(a){ a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)})翻译成正常语言就是这样的Array.prototype.forEach.call(document.querySelectorAll('*'), dom => dom.style.outline = `1px solid #${parseInt(Math.random() * Math.pow(2,24)).toString(16)}`)Others其他的，像是一些await, Decorators什么的。用上TypeScript基本就懂的东西我就不介绍了。祝愿大家越玩越牛逼
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
1.总是颠倒逻辑让我们从一个小优化开始，目的是为了使得非常简单的操作看起来复杂些。?12if (x && y) { … } // badif (!(!x || !y)) { … } // good2.在你的变量名字里使用扩展的unicode字符编译好的软件一旦发布成产品，它必须是一个黑盒。这对JavaScript来说是不可能的。如果有人想彻底搞懂你的JavaScript代码，他们仅仅需要打开浏览器控制台、加一些断点就能看到对象的状态。对象属性的名称，改用非规则字符串，来阻碍他们的进展。?12345678910111213 var foo = function (person) { // stuff happens // perhaps a breakpoint is added here // or they attempt to log the object console.log(person); } var person = {}; person[‘\t’] = ‘Nicholas’; person[‘\b’] = ‘Male’; person[‘\r’] = ‘Programmer’; person[‘\f’] = ‘Lover’;当你试图去查看变量时，会看到如下情景：t1当你试着在控制台输出log时，会看到：tu2用同样的技巧把Zalgo文本合并到你的代码tu33.补习你的三角学在我从大学退学以前，老师常常说数学和编程是多么地紧密相关。根据经验，我发现不是这回事儿。事实上，我开始觉得，老师是为了骗学生来上课。好吧，是时候好好利用学生欠下的严重债务了。不要用?1if (!val) { … }而要用?1Math.floor(.5 + ((Math.cos(val)*.5)))仅当val是2pi的整数倍时，它才会返回true。你甚至不需担心val不是一个数字。真没有关系。实际上，也不再有关系了。4.利用JavaScript的仁慈有多少次你在一个if语句该用等号操作符的时候而意外地使用了赋值操作符？这是非常恼人的，因为它不会报错、仅仅把程序带到不可意料的境地。?12345678function foo (x) { if (x=true给我老师的人工智能教程打call！http://blog.youkuaiyun.com/jiangjunshow
扫一扫
835
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
