如何更优雅地写js？

Question

刚毕业，平时在公司一般只改bug，现在终于可以做个小的新项目了。不过发现自己写的js很难看啊，都是绑定个事件，跟个回调函数，然后一块代码，
都是
$('').on('click',function(){
//......
});
这种，感觉很丑，问前辈们，有啥好的建议吗？

Answer 1

如果是用jQuery的话，我觉得这样并不丑，也基本只能这样写了。
前面有人提到先定义好函数，然后再去绑定，我觉得这样做并不好，如果这个函数你只在一个地方使用，用匿名的函数不是更好，为什么要在全局范围内多出那么多个函数名来呢？

如果不喜欢jQuery.你可以考虑使用其它库或框架。

Answer 2

vue.js

var fun = function(){console.log('hello')};
$('#id').on('click',fun);

Answer 3

es2015/es6

var $ = document.querySelector.bind(document);
$('body').addEventListener('click', () => { alert('ok'); });

Answer 4

首先建议你抛弃 jQuery 练习用 vanilla JavaScript

没事可以多 Google 一下例如「javascript best practice」之类的关键词

Answer 5

也许你可以采用面向对象而不是面向过程的模式来写代码。 不过， 如果没有模块化， 同时也没有使用ES6，不能使用class, 并且也只是绑定事件然后执行某些动作的话， 面向过程会显得方便一些。至于代码的美和丑， 我觉得王垠的编程的智慧里面写的还是挺不错的。

关于jQuery的事件绑定， 你可以把事件处理函数单独抽取为一个方法， 然后事件处理函数唯一的职责就是负责处理事件， 再把业务逻辑的相关处理抽象成一个方法。这样子说的话可能会太抽象了， 你可以看看JS高程661页的内容。然后， 最后你的代码可能看起来是这个样子：

var $doc = $(document);
$doc.click(clickHandler);
$doc.keydown(keydownHandler);
$doc.keyup(keyupHandler);

function clickHandler(e) {}
function keydownHandler(e) {}
function keyupHandler(e) {}

不过代码美丑这种事各人理解也是不一样的， 所以以上只是我个人的看法而已。

Answer 6

推荐一本书《编写可维护的javascript》