JQuery = = = Noodle code?

Since React/vue and other frameworks have become popular, jquery has been tagged with noodle code, even "rat", as if who is still using jquery, who is still living in the old days, many people are scrambling to embrace the new framework, major blog sites have a large part of the blog is introducing a new framework, The "Surfers" in the era of competition. The new concept brought about by the new framework, the new way of development can not be denied the production efficiency, but jquery, etc. should be labeled "old-fashioned" noodle code?

We start with an article: "The introduction of React.js – for engineers who understand JQuery", the English text is this "react.js Introduction for people who Know Just enough jQuery to Get By, this article I have seen a long time ago, and now turn it out, in contrast to the next jquery and react respectively to achieve a push function, the author with jquery write code on the chaos, and with react no matter how complex the requirements, the code is still very clear.

We take a step-by-step approach to dismantling the original author's ideas.

　　(1) Input number is 0 o'clock, send button is not clickable

As shown, when the input box has no content, the push button is grayed out and there is a content point to point to.

The author writes the code like this:

1. //Initialize State
2. $ ( "button"). Prop ( "Disabled", true);
4. //text box value changes
5. $ ( " TextArea "). on ( "input", function () {
6. //As long as there is more than one character, the
7. if ($ (this). Val (). length > 0) {
8. //button to click
Li class= "alt" > $ ( "button"). Prop ( "disabled", FALSE);
9. } else {
10. //Otherwise, the button cannot be clicked
11. $ ( Span class= "string", "button"). Prop (true);
13. });

The code itself is very cumbersome, first of all, since the button at the beginning is disabled, then write a disabled attribute directly on the HTML line:

1. <form class="Tweet-box" >
2. <textarea name="textmsg" ></textarea>
3. <input disabled type="Submit" name="tweet" value="tweet" >
4. </form>

The second to control the state of the button, in fact, the core as long as a line of code, do not need to write so long:

1. Let form = $ (". Tweet-box") [0];
2. $ (form.textmsg). On ("input", function () {
3. form.tweet.disabled = this.value.length <= 0;
4. }). Trigger ("input");

This code should be concise enough, and the code between jquery and the original switch back and forth, easy.

(2) To achieve the remaining word count function

As shown in the following:

This is true:

1. Let form = $ (". Tweet-box") [0],
2. $leftWordCount = $ ("#left-word-count");
4. $ (form.textmsg). On ("input", function () {
5. Number of words already available
6. Let Wordscount = this.value.length;
7. $leftWordCount. Text (140-wordscount);
8. form.tweet.disabled = wordscount <= 0;
9. });

(3) Add Picture button

As shown, the lower left corner has one more button to select a Photo:

If the user selects a photo, the input word count will be reduced by 23 characters, and the add photo copy will be converted to photo Added. Let's take a look at how the author did it, the following code:

1. if ($ (this). Hasclass ("is-on")) {
2. $ (This)
3. . Removeclass ("is-on")
4. . Text ("Add Photo");
5. $ ("span"). Text ($-$ ("textarea"). Val (). length);
6. } Else {
7. $ (This)
8. . addclass ("is-on")
9. . Text ("? Photo Added ");
10. $ ("span"). Text (140-23-$ ("textarea"). Val (). length);
11. }

If the code is written like the author, it's really messy, and it's more noodle-style. But we can achieve it gracefully. First, selecting a photo typically writes a input[type=file] of the hidden input box cover below the upload icon:

2. <div class="Upload-container">
4. <img src="upload-icon.png" alt>
6. <span id="Add-photo">add photo</span>
8. <input type="file" name="Photoupload">
10. </div>

Then listen to its Change event and set a class for the form in the Change event:

1. $ (form.photoupload). On ("Change", function () {
2. Add a photo-added class if you select a photo
3. This.value.length? $ (form). addclass ("photo-added")
4. Otherwise, remove
5. : $ (form). Removeclass ("photo-added");
7. });

Then you can implement the requirements of the copy change, add the above #add-photo span tag two data properties, respectively, the photo is added and the copy is not added, as shown in the following code:

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

Control the text on the HTML by combining the class of the form with the Before/after pseudo-class, as shown in the following code:

1. #Add-photo:before {
2. Content:attr (Data-empty-text);
3. }
5. form.photo-added #Add-photo:before {
6. Content:attr ("Data-added-text");
7. }

In this way, we are using a more elegant approach to achieve a copy of the function, which CSS attr can be compatible with the IE9, and here Html/css/js together to complete the function of this change, this should also be very fun.

The remaining requirement to lose 23 characters is just to be judged when it is lost:

1. $ (form.textmsg). On ("input", function () {
2. Number of words already available
3. Let Wordscount = this.value.length;
4. form.tweet.disabled = wordscount <= 0;
5. $leftWordCount. Text (140-wordscount-
6. If you've added a picture and lost 23 characters
7. ($ (form). Hasclass ("photo-added")? 23:0));
8. });

Then after selecting the picture trigger, let the text change, the following code is the penultimate line:

1. /*
2. * @trigger triggers the input event of the text input box to update the remaining word Count
3. */
4. $ (form.photoupload). On ("Change", function () {
5. Add a photo-added class if you select a photo
6. This.value.length? $ (form). addclass ("photo-added"):
7. Otherwise, remove
8. $ (form). Removeclass ("photo-added");
9. $ (form.textmsg). Trigger ("input");
10. });

Here again the use of the mechanism of the event, with the REAC should be basically used in state control.

Let's take a look at the last feature.

　　(4) There is no text, but there is a photo push button to be dot

Above is as long as there is no text, then push button can not point, now requires a picture to point. This is good, because if there is a picture, the form already has a class, so as long as one more judgment can be:

1. $ (form.textmsg). On ("input", function () {
2. Number of words already available
3. Let Wordscount = this.value.length;
4. form.tweet.disabled = Wordscount <= 0
5. Disabled add one more and judge
6. &&!$ (form). Hasclass ("photo-added");
7. $leftWordCount. Text (140-wordscount-
8. If you've added a picture and lost 23 characters
9. ($ (form). Hasclass ("photo-added")? 23:0));
10. });

Finally, a summary of the JS code, plus empty lines and comments total only 23 lines:

2. Let form = $ (". Tweet-box") [0],
4. $leftWordCount = $ ("#left-word-count");
8. $ (form.textmsg). On ("input", function () {
10. Number of words already available
12. Let Wordscount = this.value.length;
14. form.tweet.disabled = Wordscount <= 0
16. Disabled add one more and judge
18. &&!$ (form). Hasclass ("photo-added");
20. $leftWordCount. Text (140-wordscount-
22. If you've added a picture and lost 23 characters
24. ($ (form). Hasclass ("photo-added")? 23:0));
26. });
30. /*
32. * @trigger triggers the input event of the text input box to update the remaining word Count
34. */
36. $ (form.photoupload). On ("Change", function () {
38. Add a photo-added class if you select a photo
40. This.value.length? $ (form). addclass ("photo-added"):
42. Otherwise, remove
44. $ (form). Removeclass ("photo-added");
46. $ (form.textmsg). Trigger ("input");
48. });

There are about 10 lines of HTML and 6 lines of core CSS, but these two are easier to read. Take a look at the full version of React, the author's implementation:

2. var Tweetbox = React.createclass ({
4. Getinitialstate: function () {
6. return {
8. Text: "",
10. Photoadded: false
12. };
14. },
16. HandleChange: function (event) {
18. This.setstate ({text:event.target.value});
20. },
22. Togglephoto: function (event) {
24. This.setstate ({photoadded:!this.state.photoadded});
26. },
28. Remainingcharacters: function () {
30. if (this.state.photoAdded) {
32. return 140-23-this.state.text.length;
34. } Else {
36. return 140-this.state.text.length;
38. }
40. },
42. Render: function () {
44. Return (
46. <div classname="Well clearfix" >
48. <textarea classname="Form-control"
50. Onchange={this.handlechange}></textarea>
52. <br/>
54. <span>{this.remainingcharacters ()}</span>
56. <button classname="btn btn-primary pull-right"
58. Disabled={this.state.text.length = = = 0 &&!this.state.photoadded}>tweet</button>
60. <button classname="btn btn-default pull-right"
62. Onclick={this.togglephoto}>
64. {this.state.photoAdded? "? Photo Added ": " Add photo "}
66. </button>
68. </div>
70. );
72. }
74. });
78. React.render (
80. <tweetbox/>
82. Document.body
84. );

React's routine is to listen for events and then change state, and in Jsx's template, use these state displays, while jquery is listening to events and then controlling the DOM display on its own. React help you operate the Dom,jquery to operate the DOM itself, which provides convenience but also loses flexibility, which adds flexibility but adds complexity.

Using jquery many people easy to write the noodle-style code, but the style of writing code I think and the framework does not matter, the key is your coding quality, as you use the react write class, you can say you are object-oriented? Not necessarily, I mentioned in the "JS and object-oriented" article, Writing class does not mean that you are object-oriented, object-oriented is an idea rather than the organization of your code. Once you're out of the react frame, are you going back to the style of the spaghetti code? If so, it means that you haven't mastered the object-oriented thinking. However, it is undeniable that frameworks such as react can be easily modular.

Another thing to note is that the framework will help you block out many of the native details and allow you to focus on the business logic, but often it also gives you the ability to lose your native abilities, whether it's HTML or JS, and that's the most important foundation of your life. For example, for an event, because all events are tied directly to the target element and then passed through the state or other third-party framework, there is actually no concept of event. So need to be wary of using the framework but lost the basic front-end capabilities, such as Ajax paging change URL, or the implementation of single-page routing, as well as the control of the front back, basically can be completely answered less. Many people will use the framework to do the page, but do not understand JS.

JQuery = = = Noodle code?