日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
jQuery===面條式代碼？

自從React/Vue等框架流行之后，jQuery被打上了面條式代碼的標(biāo)簽，甚至成了“過街老鼠”，好像誰(shuí)還在用jQuery，誰(shuí)就還活在舊時(shí)代，很多人都爭(zhēng)先恐后地?fù)肀驴蚣埽鞔蟛┛途W(wǎng)站有很大一部分的博客都在介紹新的框架，爭(zhēng)當(dāng)時(shí)代的“弄潮兒”。新框架帶來的新的理念，新的開發(fā)方式不可否認(rèn)帶來了生產(chǎn)效率，但是jQuery等就應(yīng)該被打上“舊時(shí)代”面條式代碼的標(biāo)簽么?

成都創(chuàng)新互聯(lián)公司網(wǎng)絡(luò)公司擁有10年的成都網(wǎng)站開發(fā)建設(shè)經(jīng)驗(yàn)，千余家客戶的共同信賴。提供做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)、網(wǎng)站開發(fā)、網(wǎng)站定制、賣鏈接、建網(wǎng)站、網(wǎng)站搭建、成都響應(yīng)式網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)師打造企業(yè)風(fēng)格，提供周到的售前咨詢和貼心的售后服務(wù)

我們從一篇文章說起：《React.js 的介紹 – 針對(duì)了解 jQuery 的工程師(譯)》，英文原文是這個(gè)《React.js Introduction For People Who Know Just Enough jQuery To Get By》， 這篇文章我好久前就看過，現(xiàn)在再把它翻出來，里面對(duì)比了下jQuery和React分別實(shí)現(xiàn)一個(gè)發(fā)推的功能，作者用jQuery寫著寫著代碼就亂套了，而用React不管需求多復(fù)雜，代碼條理依舊很清晰。

我們一步步按照原文作者的思路來拆解。

(1)輸入個(gè)數(shù)為0時(shí)，發(fā)送按鈕不可點(diǎn)擊

如下圖所示，當(dāng)輸入框沒有內(nèi)容時(shí)，發(fā)推按鈕置灰不可點(diǎn)，有內(nèi)容點(diǎn)才能點(diǎn)。

作者寫的代碼是這樣的：

 
 
 
 
    
  
  
  
  
  1. // 初始化狀態(tài)
    2. 
  
  
  
  
  2. $("button").prop("disabled", true);
    3. 
  
  
  
  
  3.  
    4. 
  
  
  
  
  4. // 文本框的值發(fā)生變化時(shí)
    5. 
  
  
  
  
  5. $("textarea").on("input", function() {
    6. 
  
  
  
  
  6.   // 只要超過一個(gè)字符，就
    7. 
  
  
  
  
  7.   if ($(this).val().length > 0) {
    8. 
  
  
  
  
  8.     // 按鈕可以點(diǎn)擊
    9. 
  
  
  
  
  9.     $("button").prop("disabled", false);
    10. 
  
  
  
  
  10.   } else {
    11. 
  
  
  
  
  11.     //否則，按鈕不能點(diǎn)擊
    12. 
  
  
  
  
  12.     $("button").prop("disabled", true);
    13. 
  
  
  
  
  13.   }
    14. 
  
  
  
  
  14. });
    15.

這個(gè)代碼本身寫得很累贅，首先，既然一開始那個(gè)button是disabled的，那就直接在html上寫個(gè)disabled屬性就行了：

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2.     
    3. 
  
  
  
  
  3.     
    4. 
  
  
  
  
  4.

第二個(gè)要控制按鈕的狀態(tài)，其實(shí)核心只要一行代碼就行了，不需要寫那么長(zhǎng)：

 
 
 
 
    
  
  
  
  
  1. let form = $(".tweet-box")[0];
    2. 
  
  
  
  
  2. $(form.textMsg).on("input", function() {
    3. 
  
  
  
  
  3.     form.tweet.disabled = this.value.length <= 0;
    4. 
  
  
  
  
  4. }).trigger("input");
    5.

這個(gè)代碼應(yīng)該夠簡(jiǎn)潔了吧，而且代碼在jQuery和原生之間來回切換，游刃有余。

(2)實(shí)現(xiàn)剩余字?jǐn)?shù)功能

如下圖所示：

這個(gè)也好實(shí)現(xiàn)：

 
 
 
 
    
  
  
  
  
  1. let form = $(".tweet-box")[0],
    2. 
  
  
  
  
  2.     $leftWordCount = $("#left-word-count");
    3. 
  
  
  
  
  3.  
    4. 
  
  
  
  
  4. $(form.textMsg).on("input", function() {
    5. 
  
  
  
  
  5.     // 已有字?jǐn)?shù)
    6. 
  
  
  
  
  6.     let wordsCount = this.value.length;
    7. 
  
  
  
  
  7.     $leftWordCount.text(140 - wordsCount);
    8. 
  
  
  
  
  8.     form.tweet.disabled = wordsCount <= 0; 
    9. 
  
  
  
  
  9. });
    10.

(3)添加圖片按鈕

如下圖所示，左下角多了一個(gè)選擇照片的按鈕：

如果用戶選擇了照片，那么可輸入字?jǐn)?shù)將會(huì)減少23個(gè)字符，并且Add Photo文案要變成Photo Added。我們先來看下作者是怎么實(shí)現(xiàn)的，如下代碼：

 
 
 
 
    
  
  
  
  
  1. if ($(this).hasClass("is-on")) {
    2. 
  
  
  
  
  2.   $(this)
    3. 
  
  
  
  
  3.     .removeClass("is-on")
    4. 
  
  
  
  
  4.     .text("Add Photo");
    5. 
  
  
  
  
  5.   $("span").text(140 - $("textarea").val().length);
    6. 
  
  
  
  
  6. } else {
    7. 
  
  
  
  
  7.   $(this)
    8. 
  
  
  
  
  8.     .addClass("is-on")
    9. 
  
  
  
  
  9.     .text(" Photo Added");
    10. 
  
  
  
  
  10.   $("span").text(140 - 23 - $("textarea").val().length);
    11. 
  
  
  
  
  11. }
    12.

如果代碼像作者這樣寫的話確實(shí)是比較亂，而且比較面條式。但是我們可以優(yōu)雅地實(shí)現(xiàn)。首先，選擇照片一般會(huì)寫一個(gè)input[type=file]的隱藏輸入框蓋在上傳圖標(biāo)下面：

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2.     
    3. 
  
  
  
  
  3.     Add Photo
    4. 
  
  
  
  
  4.     
    5.

然后監(jiān)聽它的change事件，在change事件里面給form套一個(gè)類：

 
 
 
 
    
  
  
  
  
  1. $(form.photoUpload).on("change", function() {
    2. 
  
  
  
  
  2.     // 如果選擇了照片則添加一個(gè)photo-added的類
    3. 
  
  
  
  
  3.     this.value.length ? $(form).addClass("photo-added")
    4. 
  
  
  
  
  4.                 // 否則去掉
    5. 
  
  
  
  
  5.                 : $(form).removeClass("photo-added");
    6. 
  
  
  
  
  6.             
    7. 
  
  
  
  
  7. });
    8.

然后就可以來實(shí)現(xiàn)文案改變的需求了，把上面#add-photo的span標(biāo)簽添加兩個(gè)data屬性，分別是照片添加和未添加的文案，如下代碼所示：

 
 
 
 
    
  
  
  
  
  1. 
  
  
  
  
  2.       data-notadded-text="Add Photo">
    3.

通過form的類結(jié)合before/after偽類控制html上的文案，如下代碼所示：

 
 
 
 
    
  
  
  
  
  1. #add-photo:before {
    2. 
  
  
  
  
  2.     content: attr(data-empty-text);
    3. 
  
  
  
  
  3. }
    4. 
  
  
  
  
  4.  
    5. 
  
  
  
  
  5. form.photo-added #add-photo:before {
    6. 
  
  
  
  
  6.     content: attr("data-added-text);
    7. 
  
  
  
  
  7. }
    8.

這樣就可以了，我們算是用了一個(gè)比較優(yōu)雅的方式實(shí)現(xiàn)了一個(gè)文案變化的功能，其中CSS的attr可以兼容到IE9，并且這里html/css/js相配合，共同完成這個(gè)變化的功能，這應(yīng)該也挺好玩的。

剩下一個(gè)要減掉23字符的需求，只需要在減掉的時(shí)候判斷一下：

 
 
 
 
    
  
  
  
  
  1. $(form.textMsg).on("input", function() {
    2. 
  
  
  
  
  2.     // 已有字?jǐn)?shù)
    3. 
  
  
  
  
  3.     let wordsCount = this.value.length;
    4. 
  
  
  
  
  4.     form.tweet.disabled = wordsCount <= 0;
    5. 
  
  
  
  
  5.     $leftWordCount.text(140 - wordsCount - 
    6. 
  
  
  
  
  6.             //如果已經(jīng)添加了圖片再減掉23個(gè)字符
    7. 
  
  
  
  
  7.             ($(form).hasClass("photo-added") ? 23 : 0));
    8. 
  
  
  
  
  8. });
    9.

然后在選擇圖片之后trigger一下，讓文字發(fā)生變化，如下代碼倒數(shù)第二行：

 
 
 
 
    
  
  
  
  
  1. /*
    2. 
  
  
  
  
  2.  * @trigger 會(huì)觸發(fā)文字輸入框的input事件以更新剩余字?jǐn)?shù)
    3. 
  
  
  
  
  3.  */
    4. 
  
  
  
  
  4. $(form.photoUpload).on("change", function() {
    5. 
  
  
  
  
  5.     // 如果選擇了照片則添加一個(gè)photo-added的類
    6. 
  
  
  
  
  6.     this.value.length ? $(form).addClass("photo-added") : 
    7. 
  
  
  
  
  7.                 // 否則去掉
    8. 
  
  
  
  
  8.                 $(form).removeClass("photo-added");
    9. 
  
  
  
  
  9.     $(form.textMsg).trigger("input");
    10. 
  
  
  
  
  10. });
    11.

這里又使用了事件的機(jī)制，用reac應(yīng)該基本上都是用狀態(tài)state控制了。

再來看***一個(gè)功能。

(4)沒有文字但是有照片發(fā)推按鈕要可點(diǎn)

上面是只要沒有文字，那么發(fā)推按鈕不可點(diǎn)，現(xiàn)在要求有圖片就可點(diǎn)。這個(gè)也好辦，因?yàn)槿绻袌D片的話，form已經(jīng)有了一個(gè)類，所以只要再加一個(gè)判斷就可以了：

 
 
 
 
    
  
  
  
  
  1. $(form.textMsg).on("input", function() {
    2. 
  
  
  
  
  2.     // 已有字?jǐn)?shù)
    3. 
  
  
  
  
  3.     let wordsCount = this.value.length;
    4. 
  
  
  
  
  4.     form.tweet.disabled = wordsCount <= 0 
    5. 
  
  
  
  
  5.             //disabled再添加一個(gè)與判斷
    6. 
  
  
  
  
  6.             && !$(form).hasClass("photo-added");
    7. 
  
  
  
  
  7.     $leftWordCount.text(140 - wordsCount - 
    8. 
  
  
  
  
  8.             //如果已經(jīng)添加了圖片再減掉23個(gè)字符
    9. 
  
  
  
  
  9.             ($(form).hasClass("photo-added") ? 23 : 0));
    10. 
  
  
  
  
  10. });
    11.

***看一下，匯總的JS代碼，加上空行和注釋總共只有23行：

 
 
 
 
    
  
  
  
  
  1. let form = $(".tweet-box")[0],
    2. 
  
  
  
  
  2.     $leftWordCount = $("#left-word-count");
    3. 
  
  
  
  
  3.  
    4. 
  
  
  
  
  4. $(form.textMsg).on("input", function() {
    5. 
  
  
  
  
  5.     // 已有字?jǐn)?shù)
    6. 
  
  
  
  
  6.     let wordsCount = this.value.length;
    7. 
  
  
  
  
  7.     form.tweet.disabled = wordsCount <= 0 
    8. 
  
  
  
  
  8.             //disabled再添加一個(gè)與判斷
    9. 
  
  
  
  
  9.             && !$(form).hasClass("photo-added");
    10. 
  
  
  
  
  10.     $leftWordCount.text(140 - wordsCount - 
    11. 
  
  
  
  
  11.             //如果已經(jīng)添加了圖片再減掉23個(gè)字符
    12. 
  
  
  
  
  12.             ($(form).hasClass("photo-added") ? 23 : 0));
    13. 
  
  
  
  
  13. });
    14. 
  
  
  
  
  14.  
    15. 
  
  
  
  
  15. /*
    16. 
  
  
  
  
  16.  * @trigger 會(huì)觸發(fā)文字輸入框的input事件以更新剩余字?jǐn)?shù)
    17. 
  
  
  
  
  17.  */
    18. 
  
  
  
  
  18. $(form.photoUpload).on("change", function() {
    19. 
  
  
  
  
  19.     // 如果選擇了照片則添加一個(gè)photo-added的類
    20. 
  
  
  
  
  20.     this.value.length ? $(form).addClass("photo-added") : 
    21. 
  
  
  
  
  21.             // 否則去掉
    22. 
  
  
  
  
  22.             $(form).removeClass("photo-added");
    23. 
  
  
  
  
  23.     $(form.textMsg).trigger("input");
    24. 
  
  
  
  
  24. });
    25.

html大概有10行，還有6行核心CSS，不過這兩個(gè)比較易讀。再來看一下React的完整版本，作者的實(shí)現(xiàn)：

 
 
 
 
    
  
  
  
  
  1. var TweetBox = React.createClass({
    2. 
  
  
  
  
  2.   getInitialState: function() {
    3. 
  
  
  
  
  3.     return {
    4. 
  
  
  
  
  4.       text: "",
    5. 
  
  
  
  
  5.       photoAdded: false
    6. 
  
  
  
  
  6.     };
    7. 
  
  
  
  
  7.   },
    8. 
  
  
  
  
  8.   handleChange: function(event) {
    9. 
  
  
  
  
  9.     this.setState({ text: event.target.value });
    10. 
  
  
  
  
  10.   },
    11. 
  
  
  
  
  11.   togglePhoto: function(event) {
    12. 
  
  
  
  
  12.     this.setState({ photoAdded: !this.state.photoAdded });
    13. 
  
  
  
  
  13.   },
    14. 
  
  
  
  
  14.   remainingCharacters: function() {
    15. 
  
  
  
  
  15.     if (this.state.photoAdded) {
    16. 
  
  
  
  
  16.       return 140 - 23 - this.state.text.length;
    17. 
  
  
  
  
  17.     } else {
    18. 
  
  
  
  
  18.       return 140 - this.state.text.length;
    19. 
  
  
  
  
  19.     }
    20. 
  
  
  
  
  20.   },
    21. 
  
  
  
  
  21.   render: function() {
    22. 
  
  
  
  
  22.     return (
    23. 
  
  
  
  
  23.       
    24. 
  
  
  
  
  24.         
  
  
  
  
  25.                   onChange={this.handleChange}>
    26. 
  
  
  
  
  26.         
    27. 
  
  
  
  
  27.         { this.remainingCharacters() }
    28. 
  
  
  
  
  28.         
  
  
  
  
  29.           disabled={this.state.text.length === 0 && !this.state.photoAdded}>Tweet
    30. 
  
  
  
  
  30.         
  
  
  
  
  31.           onClick={this.togglePhoto}>
    32. 
  
  
  
  
  32.           {this.state.photoAdded ? " Photo Added" : "Add Photo" }
    33. 
  
  
  
  
  33.         
    34. 
  
  
  
  
  34.       
  •     );
  •   }
  • });
  •  
  • React.render(
  •   ,
  •   document.body
  • );

    • React的套路是監(jiān)聽事件然后改變state，在jsx的模板里，使用這些state展示，而jQuery的套路是監(jiān)聽事件，然后自己去控制DOM展示。React幫你操作DOM，jQuery要自己去操作DOM，前者提供了便利但同時(shí)也失去了靈活性，后者增加了靈活性但同時(shí)增加了復(fù)雜度。

    使用jQuery不少人容易寫出面條式的代碼，但是寫代碼的風(fēng)格我覺得和框架沒關(guān)系，關(guān)鍵還在于你的編碼素質(zhì)，就像你用了React寫class，你就可以說你就是面向?qū)ο罅?不見得，我在《JS與面向?qū)ο蟆愤@篇文章提到，寫class并不代表你就是面向?qū)ο?，面向?qū)ο笫且环N思想而不是你代碼的組織形式。一旦你離開了React的框架，是不是又要回到面條式代碼的風(fēng)格了?如果是的話那就說明你并沒有沒有掌握面向?qū)ο蟮乃枷?。不過，React等框架能夠方便地組件化，這點(diǎn)是不可否認(rèn)的。

    還有一個(gè)需要注意的是，框架會(huì)幫你屏蔽掉很多原生的細(xì)節(jié)，讓你專心于業(yè)務(wù)邏輯，但往往也讓你喪失了原生的能力不管是html還是js，而這才是最重要的功底。例如說對(duì)于事件，由于所有的事件都是直接綁在目標(biāo)元素，然后通過state或者其它第三方的框架進(jìn)行傳遞，這樣其實(shí)就沒什么事件的概念了。所以需要警惕使用了框架但是喪失了基本的前端能力，再如ajax分頁(yè)改變url，或者說單頁(yè)面路由的實(shí)現(xiàn)方式，還有前后退的控制，基本上能夠完整回答地比較少。很多人都會(huì)用框架做頁(yè)面，但是不懂JS.


    當(dāng)前名稱：jQuery===面條式代碼？
    文章源于：http://www.dlmjj.cn/article/copeojh.html