菜单

jQuery === 面条式代码?

2019年5月17日 - 金沙前端

图片 1

  自从React/Vue等框架流行之后,jQuery被打上了面条式代码的价签,以致成了“过街老鼠”,好像何人还在用jQuery,哪个人就还活在旧时代,很几人都争相地拥抱新框架,各大博客网站有十分大学一年级部分的博客都在介绍新的框架,争当时期的“弄潮儿”。新框架带来的新的思想,新的开拓格局不可否认带来了生育功用,但是jQuery等就相应被打上“旧时代”面条式代码的标签么?

  大家从1篇小说聊到:《React.js 的牵线 – 针对通晓 jQuery
的程序猿(译)》,英文原稿是其壹《React.js Introduction For People Who
Know Just Enough jQuery To Get By》,
这篇文章小编好久前就看过,现在再把它翻出来,里面临比了下jQuery和React分别完成3个发推的机能,作者用jQuery写着写着代码就乱套了,而用React不管要求多复杂,代码条理如故很清晰。

  大家一步步根据原著小编的思绪来拆除。

  (一)输入个数为0时,发送开关不可点击

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

 

图片 2

  作者写的代码是这般的:

  1. // 初步化状态
  2. $(“button”).prop(“disabled”, true);

    1. // 文本框的值发生变化时
  3. $(“textarea”).on(“input”, function() {

  4. // 只要当先2个字符,就

  5. if ($(this).val().length > 0) {
  6. // 按键能够点击
  7. $(“button”).prop(“disabled”, false);

  8. } else {

  9. //不然,开关不可能点击
  10. $(“button”).prop(“disabled”, true);

  11. }

  12. });

  那几个代码自身写得很麻烦,首先,既然一同初特别button是disabled的,那就径直在html上写个disabled属性就行了:

  1. <form class=”tweet-box”>
  2. <textarea name=”textMsg”></textarea>
  3. <input disabled type=”submit” name=”tweet” value=”Tweet”>
  4. </form>

  第四个要调控按键的情事,其实核心只要1行代码就行了,无需写那么长:

  1. let form = $(“.tweet-box”)[0];
  2. $(form.textMsg).on(“input”, function() {

  3. form.tweet.disabled = this.value.length <= 0;

  4. }).trigger(“input”);

  这几个代码应该够简洁了吧,而且代码在jQuery和原生之间往来切换,听得多了就能说的清楚。

  (二)实现剩余字数成效

  如下图所示:

 

图片 3

  那个能够完毕:

  1. let form = $(“.tweet-box”)[0],
  2. $leftWordCount = $(“#left-word-count”);

    1. $(form.textMsg).on(“input”, function() {
  3. // 已有字数

  4. let wordsCount = this.value.length;
  5. $leftWordCount.text(140 – wordsCount);
  6. form.tweet.disabled = wordsCount <= 0;
  7. });

  (三)增多图片开关

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

 

图片 4

  固然用户接纳了照片,那么可输入字数将会回落②贰个字符,并且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);
  11. }

  借使代码像笔者这么写的话当真是相比乱,而且相比面条式。不过大家得以优雅地促成。首先,选用照片相像会写2个input[type=file]的藏身输入框盖在上传Logo上边:

  1. <div class=”upload-container”>

  2. <img src=”upload-icon.png” alt>

  3. <span id=”add-photo”>Add Photo</span>

  4. <input type=”file” name=”photoUpload”>

  5. </div>

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

  1. $(form.photoUpload).on(“change”, function() {

  2. // 假诺选拔了照片则增加3个photo-added的类

  3. this.value.length ? $(form).addClass(“photo-added”)
  4. // 不然去掉
  5. : $(form).removeClass(“photo-added”);
    1. });

  然后就足以来贯彻文案改换的须要了,把上边#add-photo的span标签加多多个data属性,分别是相片加多和未加多的文案,如下代码所示:

  1. <span id=”add-photo” data-added-text=”Photo Added”
  2. data-notadded-text=”Add Photo”></span>

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

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

  5. }

  那样就能够了,大家毕竟用了多个相比优雅的章程贯彻了多少个文案变化的效应,在那之中CSS的attr能够合营到IE9,并且这里html/css/js相包容,共同完结那几个调换的意义,那应当也挺风趣的。

  剩下1个要压缩二三字符的需要,只须要在减小的时等候法庭判剖断一下:

  1. $(form.textMsg).on(“input”, function() {

  2. // 已有字数

  3. let wordsCount = this.value.length;
  4. form.tweet.disabled = wordsCount <= 0;
  5. $leftWordCount.text(140 – wordsCount –
  6. //要是已经增添了图片再减掉2贰个字符
  7. ($(form).hasClass(“photo-added”) ? 23 : 0));

  8. });

  然后在甄选图片之后trigger一下,让文字产生变化,如下代码尾数第三行:

  1. /*
  2. * @trigger
    会触发文字输入框的input事件以更新剩余字数
  3. */
  4. $(form.photoUpload).on(“change”, function() {

  5. // 假若选拔了照片则增加贰个photo-added的类

  6. this.value.length ? $(form).addClass(“photo-added”) :
  7. // 不然去掉
  8. $(form).removeClass(“photo-added”);
  9. $(form.textMsg).trigger(“input”);
  10. });

  这里又采用了轩然大波的建制,用reac应该大约都以用状态state调整了。

  再来看最后三个效率。

  (4)未有文字不过有相片发推按键要可点

  上边是只要未有文字,那么发推开关不可点,未来需求有图片就可点。那几个也好办,因为要是有图表的话,form已经有了多少个类,所以一旦再加1个论断就足以了:

  1. $(form.textMsg).on(“input”, function() {

  2. // 已有字数

  3. let wordsCount = this.value.length;
  4. form.tweet.disabled = wordsCount <= 0
  5. //disabled再增添三个与推断
  6. && !$(form).hasClass(“photo-added”);
  7. $leftWordCount.text(140 – wordsCount –
  8. //假如已经增多了图片再减掉二17个字符
  9. ($(form).hasClass(“photo-added”) ? 23 : 0));

  10. });

  最终看一下,汇总的JS代码,加上空行和注释总共只有2三行:

  1. let form = $(“.tweet-box”)[0],
  2. $leftWordCount = $(“#left-word-count”);

    1. $(form.textMsg).on(“input”, function() {
  3. // 已有字数

  4. let wordsCount = this.value.length;
  5. form.tweet.disabled = wordsCount <= 0
  6. //disabled再加多3个与决断
  7. && !$(form).hasClass(“photo-added”);
  8. $leftWordCount.text(140 – wordsCount –
  9. //假如已经加多了图片再减掉贰1个字符
  10. ($(form).hasClass(“photo-added”) ? 23 : 0));

  11. });

    1. /*
  12. * @trigger
    会触发文字输入框的input事件以革新剩余字数
  13. */
  14. $(form.photoUpload).on(“change”, function() {

  15. // 如若选拔了照片则增进一个photo-added的类

  16. this.value.length ? $(form).addClass(“photo-added”) :
  17. // 否则去掉
  18. $(form).removeClass(“photo-added”);
  19. $(form.textMsg).trigger(“input”);
  20. });

  html大概有十行,还有陆行主旨CSS,可是那多个比较易读。再来看一下React的共同体版本,小编的兑现:

  1. var TweetBox = React.createClass({
  2. getInitialState: function() {
  3. return {
  4. text: “”,
  5. photoAdded: false
  6. };
  7. },
  8. handleChange: function(event) {
  9. this.setState({ text: event.target.value });
  10. },
  11. togglePhoto: function(event) {
  12. this.setState({ photoAdded: !this.state.photoAdded });
  13. },
  14. remainingCharacters: function() {
  15. if (this.state.photoAdded) {
  16. return 140 – 23 – this.state.text.length;

  17. } else {

  18. return 140 – this.state.text.length;
  19. }
  20. },
  21. render: function() {
  22. return (
  23. <div className=”well clearfix”>
  24. <textarea className=”form-control”
  25. onChange={this.handleChange}></textarea>
  26. <br/>
  27. <span>{ this.remainingCharacters() }</span>
  28. <button className=”btn btn-primary
    pull-right”
  29. disabled={this.state.text.length === 0 &&
    !this.state.photoAdded}>Tweet</button>
  30. <button className=”btn btn-default
    pull-right”
  31. onClick={this.togglePhoto}>
  32. {this.state.photoAdded ? “✓ Photo Added” :
    “Add Photo” }
  33. </button>
  34. </div>
  35. );
  36. }
  37. });
    1. React.render(
  38. <TweetBox />,
  39. document.body
  40. );

  React的覆辙是监听事件然后改成state,在jsx的模版里,使用这个state突显,而jQuery的套路是监听事件,然后自个儿去调整DOM突显。React帮你操作DOM,jQuery要团结去操作DOM,前者提供了有益但还要也错过了灵活性,后者增添了灵活性但同时扩张了复杂度。

  使用jQuery不少人轻便写出面条式的代码,不过写代码的品格小编感觉和框架不妨,关键还在于你的编码素质,就像是你用了React写class,你就足以说您正是面向对象了?不见得,小编在《JS与面向对象》这篇小说提到,写class并不代表你正是面向对象,面向对象是一种思索而不是你代码的团伙格局。①旦你相差了React的框架,是还是不是又要回到面条式代码的品格了?假如是的话那就注脚您并不曾未有通晓面向对象的构思。可是,React等框架可以方便地组件化,那点是不可不可以认的。

  还有三个索要专注的是,框架会帮你屏蔽掉大多原生的细节,令你收视返听于专业逻辑,但屡次也让您丧失了原生的手艺不管是html依旧js,而那才是最珍视的根底。比如说对于事件,由于具有的事件都以直接绑在对象成分,然后经过state或然其余第②方的框架举行传递,那样事实上就没怎么风浪的概念了。所以必要警惕使用了框架只是丧失了基本的前端本事,再如ajax分页改变url,或许说单页面路由的兑现格局,还有前后退的垄断,基本上能够壹体化回答地比较少。很四个人都会用框架做页面,不过不懂JS.

 

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图