首页 > 如何更优雅地写js?

如何更优雅地写js?

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


你可以先慢慢的学会把自己需要用到的功能封装到一个特定函数里面,不同功能用不同函数封装,便于以后复用,再慢慢的学习面向对象,以及闭包的各种灵活用法,然后用"类"来进行组件化,requireJS或者seaJS来加载组件,这些搞清楚后再去学vue或者react都会比较容易理解了,本质都是组件化,更容易维护。


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


也许你可以采用面向对象而不是面向过程的模式来写代码。 不过, 如果没有模块化, 同时也没有使用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) {}

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


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

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


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

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


vue.js

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

es2015/es6

var $ = document.querySelector.bind(document);
$('body').addEventListener('click', () => { alert('ok'); });
【热门文章】
【热门文章】