自从React/Vue等框架流行之后，jQuery就被贴上了面条代码的标签，甚至成了“过街老鼠”。拥抱新框架，各大博客网站上有很大一部分博客都在引入新框架，力争成为时代的“潮流”。新框架带来的新思想、新开发方式无疑带来了生产力，但jQuery等是否应该被贴上“老年”面条代码的标签呢？先说一篇文章：《React.js 的介绍 – 针对了解 jQuery 的工程师(译)》，英文原文是这篇《React.js Introduction For People Who Know Just Enough jQuery To Get By》，很久以前看过这篇文章，现在重看，比较了jQuery和React实现的推特功能，作者在jQuery里写的代码是乱七八糟的，但是有了React，再复杂的需求，代码还是很清晰的。下面按照原作者的思路一步步拆解吧。(1)当输入个数为0时，发送按钮无法点击，如下图。当输入框没有内容时，发送按钮是灰色的，不能点击，只有有内容才能点击。作者写的代码是这样的：//初始化状态$("button").prop("disabled",true);//当文本框的值发生变化时$("textarea").on("input",function(){//只要不止一个字符，if($(this).val().length>0){//可以点击按钮$("button").prop("disabled",false);}else{//否则按钮无法点击$("button").prop("disabled",true);}});这段代码本身写起来就很麻烦，首先，既然一开始按钮是disabled的，那么直接在html上写一个disabled属性就可以了：二是控制按钮的状态。其实核心只需要一行代码，不需要这么长：letform=$(".tweet-box")[0];$(form.textMsg).on("input",function(){form.tweet.disabled=this.value.length<=0;}).trigger("输入");这段代码应该足够简单，代码在jQuery和native之间来回切换，很轻松。(2)如下图实现剩余字数统计功能：这个也很容易实现：letform=$(".tweet-box")[0],$leftWordCount=$("#left-word-count");$(form.textMsg).on("input",function(){//字数letwordsCount=this.value.length;$leftWordCount.text(140-wordsCount);form.tweet.disabled=wordsCount<=0;});(3)添加图片的按钮如下图所示，左下角有一个选择照片的按钮：如果用户选择了照片，则字符数可输入的内容将减少23个字符，添加照片的文本将更改为已添加照片。我们先看看作者是如何实现的，代码如下：if($(this).hasClass("is-on")){$(this).removeClass("is-on").text("AddPhoto");$("span").text(140-$("textarea").val().length);}else{$(this).addClass("is-on").text("?PhotoAdded");$("span").text(140-23-$("textarea").val().length);}如果代码像作者那样写，真的是乱七八糟，更像面条。但是我们可以优雅地做到这一点。首先，选择照片时，上传图标下方会写一个input[type=file]的隐藏输入框：AddPhoto
然后监听它的change事件，在change事件中给form设置一个class:$(form.photoUpload).on("change",function(){//如果选择了照片，添加照片添加类this.value.length?$(form).addClass("photo-added")//否则删除：$(form).removeClass("photo-added");});然后就可以实现文案变化的需求了，在上面#add-photo的span标签中添加两个数据属性，分别是照片添加和未添加文案，如下代码所示：
