自从React/Vue等框架流行以来，jQuery就被贴上了面条代码的标签，甚至成了“过街老鼠”。看来谁还在用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(){//As只要超过一个字符，就可以了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("input");这段代码应该足够简单，代码可以轻松地在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个字符,AddPhoto文案将变为PhotoAdded。我们先看看作者是如何实现的，代码如下：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标签中添加两个数据属性，分别是照片添加和未添加文案，如下代码所示：
