Of Stack

The jquery code specification makes the code look better and better

  • 2021-07-16 01:16:56
  • OfStack

I recently learned jQuery, and I feel that this jQuery is really good. As he said, do less and do more! It feels really good to start with just 1. But if you write too much, you will find that one line of this code can be written so long. And the readability is not good. I was lucky enough to buy a sharp jQuery book. I just sorted it out. In the end, how to make your jQurey code look readable and aesthetic in practical application. I used a small example in this book. Let's teach you how to write dishes in code!

Needless to say, I want to present this demo code. Gentlemen! Look good ~ 


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title> Menu bar </title>
 <style>
 *{
  margin: 0;
  padding: 0;
 }
 .box{
  width: 400px;
  height: 280px;
  background-color: red;
  margin: 50px auto;
  border: 1px solid #000;
 }
 .box .menu{
  width: 100%;
  height: 100%;
  background-color: gold;
  list-style: none;
 }
 .box .menu>.level1{
  width: 100%;
  height: auto;
  line-height: 40px;
  list-style: none;
 }
 .box .menu>.level1>a.current{
  background-color: green;
  color: #0a0a0a;
  text-decoration: none;
 }
 .box .menu>.level1>a{
  display: inline-block;
  background-color: gray;
  width: 100%;
  text-align: center;
  text-decoration: none;
 }
 .box .menu>.level1>.level2{
  width: 100%;
  height: 160px;
  background-color: white;
  display: none;
  float: left;
 }
 .box .menu>.level1:nth-of-type(1)>.level2{
  display: block;
 }
 .box .menu>.level1>.level2 li{
  width: 100%;
  height: 40px;
  list-style: none;
  background-color: gainsboro;
  text-align: center;
 }
 </style>
 <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
 <script>
 $(function () {

  $(".level1>a").click(function () {
  $(this).addClass("current").next().show().parent().siblings().children("a").removeClass("current").next().hide();
  return false;
  });
 });
 </script>
</head>
<body>
<div class="box">
 <ul class="menu">
 <li class="level1">
  <a href="#one" class="current"> Shirt </a>
  <ul class="level2">
  <li> Short-sleeved shirt </li>
  <li> Long sleeve shirt </li>
  <li> Short-sleeved shirt </li>
  <li> Short-sleeved shirt </li>
  </ul>
 </li>
 <li class="level1">
  <a href="#one"> Sweater </a>
  <ul class="level2">
  <li> Cardigan sweater </li>
  <li> Cardigan sweater </li>
  <li> Cardigan sweater </li>
  <li> Cardigan sweater </li>
  </ul>
 </li>
 <li class="level1">
  <a href="#one"> Trousers </a>
  <ul class="level2">
  <li> Short-sleeved shirt </li>
  <li> Pants shirt </li>
  <li> Short-sleeved shirt </li>
  <li> Pants shirt </li>
  </ul>
 </li>
 </ul>
</div>
</body>
</html>

Children's shoes. Look at this code 


 $(".level1>a").click(function () {
  $(this).addClass("current").next().show().parent().siblings().children("a").removeClass("current").next().hide();
  return false;
  });

Excuse me, can you see what's going on when you look at it for the first time?

Even a great god who has been developed for several years. You can't see what this line of code is going to do at one eye. It's because this line of code is too long. Every time you read it, you should talk about the previous ones in series. There is no aesthetic feeling and readability.

Although jQuery separates behavior from content, jQuery code should also have a good hierarchical machine specification, so as to improve the readability and maintainability of the code one step further.

So the code should write this style 


 $(".level1>a").click(function () {
  $(this).addClass("current")
  .next().show()
  .parent().siblings().children("a").removeClass("current")
  .next().hide();
  return false;
  });

Split the action performed by the object into a separate line every time. In this way, the readability is greatly improved.

But don't divide it at will. If you divide it at will, you might as well divide it. So to sum up, the following three points

1. If there are no more than 3 operations on the same object, it can be written as 1 line directly

  $(this).addClass("current").show();

2. For more operation suggestions of agreeing objects, write 1 operation per line 


 $(this).addClass("current")
  .show()
  .fadeTo("mouseover")
  .fadeTo("fast",1)
  .unbind("click")
  .click(function(){
  //do something
  });

3. For a small number of operations on multiple objects, write 1 line per 1 object. If child elements are involved, consider appropriate indentation, such as the code in demo 


$(this).addClass("current")
  .childer("li").show().end()
.siblings().removeClass()
  .children("a").hide();

One more point to emphasize is to add comments to the code;

jQuery is famous for its powerful selector. Sometimes complicated problems can be easily solved with a 1-line selector, but it is easy to write the following code

$("#table > tbody > tr: has (td: has (: checkbox: enabled)). css ("background", "red"); Haha, can you recognize me with one eye?

When writing an excellent selector, don't forget to add comments to this section of code, which is very important. Whether you read it later or share it with others, cooperate with development, comments can play a good role

//Note: In an tbody of a table whose id is table, if checkbox is not disabled in 1 column of every 1 row, set the background of this row to red
$("#table > tbody > tr:has(td:has(:checkbox:enabled))").css("background","red");

Through similar meaningful annotations, good coding habits and styles can be cultivated, and development efficiency can be improved.

--------------------------------------------------------------------------------------------------------------

(1) Mutual conversion between jQuery object and DOM object

Before jQuery object and DOM object are converted to each other, the style of defining variables is agreed. If the object obtained is jQuery object, add $in front of the variable

For example:

var $variable = jQuery Object

If the DOM object obtained;

var varible = DOM object;

Related articles: