加入我们 登录
 找回密码
 加入我们
搜索
创梦者 首页 技术控 查看内容

jQuery === 面条式代码?

2017-9-9 12:05| 发布者: 残梦| 查看: 285| 评论: 6

自从React/Vue等框架流行之后,jQuery被打上了面条式代码的标签,甚至成了“过街老鼠”,好像谁还在用jQuery,谁就还活在旧时代,很多人都争先恐后地拥抱新框架,各大博客网站有很大一部分的博客都在介绍新的框架, ...


jQuery


自从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时,发送按钮不可点击

如下图所示,当输入框没有内容时,发推按钮置灰不可点,有内容点才能点。


作者写的代码是这样的:

  1. // 初始化状态 
  2. $("button").prop("disabled"true); 
  3.   
  4. // 文本框的值发生变化时 
  5. $("textarea").on("input"function() { 
  6.   // 只要超过一个字符,就 
  7.   if ($(this).val().length > 0) { 
  8.     // 按钮可以点击 
  9.     $("button").prop("disabled"false); 
  10.   } else { 
  11.     //否则,按钮不能点击 
  12.     $("button").prop("disabled"true); 
  13.   } 
  14. }); 

这个代码本身写得很累赘,首先,既然一开始那个button是disabled的,那就直接在html上写个disabled属性就行了:

  1. "tweet-box"
  2.     name="textMsg"
  3.     "submit" name="tweet" value="Tweet"
  4.  

第二个要控制按钮的状态,其实核心只要一行代码就行了,不需要写那么长:

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

这个代码应该够简洁了吧,而且代码在jQuery和原生之间来回切换,游刃有余。

(2)实现剩余字数功能

如下图所示:


这个也好实现:

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

(3)添加图片按钮

如下图所示,左下角多了一个选择照片的按钮:


如果用户选择了照片,那么可输入字数将会减少23个字符,并且Add Photo文案要变成Photo Added。我们先来看下作者是怎么实现的,如下代码:

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

如果代码像作者这样写的话确实是比较乱,而且比较面条式。但是我们可以优雅地实现。首先,选择照片一般会写一个input[type=file]的隐藏输入框盖在上传图标下面:

  1. <div class="upload-container"> 
  2.     <img src="upload-icon.png" alt> 
  3.     <span id="add-photo">Add Photospan> 
  4.     <input type="file" name="photoUpload"> 
  5. div> 

然后监听它的change事件,在change事件里面给form套一个类:

  1. $(form.photoUpload).on("change"function() { 
  2.     // 如果选择了照片则添加一个photo-added的类 
  3.     this.value.length ? $(form).addClass("photo-added"
  4.                 // 否则去掉 
  5.                 : $(form).removeClass("photo-added"); 
  6.              
  7. }); 

然后就可以来实现文案改变的需求了,把上面#add-photo的span标签添加两个data属性,分别是照片添加和未添加的文案,如下代码所示:

  1. "add-photo" data-added-text="Photo Added"  
  2.       data-notadded-text="Add Photo"> 

通过form的类结合before/after伪类控制html上的文案,如下代码所示:

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

这样就可以了,我们算是用了一个比较优雅的方式实现了一个文案变化的功能,其中CSS的attr可以兼容到IE9,并且这里html/css/js相配合,共同完成这个变化的功能,这应该也挺好玩的。

剩下一个要减掉23字符的需求,只需要在减掉的时候判断一下:

  1. $(form.textMsg).on("input"function

完美

给力

泪奔

无聊

跪了
发表评论

最新评论

引用 游客 2017-10-29 11:47
Hello everyone! Lately I have been struggling with ...
引用 游客 2017-10-29 08:43
https://download.pearltrees.com/s/pic/or/-16185249 ...
引用 游客 2017-10-26 23:45
Oh Heavens. I don't know what to do as I have Lots ...
引用 游客 2017-9-17 02:07
Hello all! Lately I have been fighting with a lot  ...
引用 游客 2017-9-15 16:21
Hey everybody! Recently I have been struggling wit ...
引用 游客 2017-9-14 11:44
Hello all! Lately I have been struggling with a lo ...

查看全部评论(6)

精彩导读
想为 iPhone X 做交互设计?你需要读这篇文章
想为 iPhone X 做交互设计?你需
iPhone X(称之为 iPhone 10)已经正式发布,并将于 11 月 3 日开始... ...
信用已被透支殆尽,乐视汽车或成贾跃亭弃子
信用已被透支殆尽,乐视汽车或成
尽管在爆发了一系列讨债风波、资金危机、股权变动和易主剧情,并被愤... ...
人工智能时代,是时候学点Python了
人工智能时代,是时候学点Python
“是时候学点Python了”。作为一名不怎么安分的程序员,你或许觉得,... ...
《绝地求生》为什么这么火?
《绝地求生》为什么这么火?
当他们在“吃鸡”时,到底是在干嘛?分享一篇关于 “吃鸡”游戏《绝... ...
Python和Ruby两大语言全方位对比
Python和Ruby两大语言全方位对比
最近在考虑学习一门后端语言,在Ruby和Python直接犹豫,然后自己做了... ...
关注我们

关注微信公众号,了解最新精彩内容

WeChat

创梦者(cm-z.net)创建于2016年。

 

专注专业的技术学术讨论,前沿的科技资讯新闻,以及智能硬件结构拆解,电子产品评测等内容的科技媒体。



关于我们|Archiver|手机版|小黑屋|创梦者-与梦想者共创未来 ( 晋ICP备13003410号 )

GMT+8, 2018-2-21 15:32 , Processed in 0.043278 second(s), 21 queries .

本站由: 腾讯云 提供云服务器 Discuz! 提供后端支持

© 2015-2017 CMZ Inc.

返回顶部