jqueryコード規範はコードをますます美しくします。

5586 ワード

jquery

最近jQueryを学んで、このjQueryを感じるのは本当にとても悪くなくて、やはり彼の言ったように、少なくして多くします！最初はいい感じだった。でも、たくさん書くと、このコードの一行はこんなに長く書くことができます。しかも可読性がまだよくないです。幸い自分で鋭いjQueryという本を買いました。整理しました。実際の応用の中で、自分のjQureyのコードをどうやって読み取り可能に見せるか、そして美しさがあります。私はこの本の中の小さな例を使いました。コードを教えてください。どうやって料理を書いたらいいですか？
余計なことを言わないで、このデモコードを提出したいです。みなさん！ほら、いいですね


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>   </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">  </a>
  <ul class="level2">
  <li>    </li>
  <li>    </li>
  <li>    </li>
  <li>    </li>
  </ul>
 </li>
 <li class="level1">
  <a href="#one">  </a>
  <ul class="level2">
  <li>    </li>
  <li>    </li>
  <li>    </li>
  <li>    </li>
  </ul>
 </li>
 <li class="level1">
  <a href="#one">  </a>
  <ul class="level2">
  <li>    </li>
  <li>    </li>
  <li>    </li>
  <li>    </li>
  </ul>
 </li>
 </ul>
</div>
</body>
</html>

子供靴たち。このコードを見てください

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

すみません、まず目で見てください。どういうことなのか分かりますか？
たとえ何年か開発された大神さんでも。この行のコードは何をするか一目でわかるわけにもいきません。この行はコードが長すぎるからです。読むたびに、前のものを自分で直列に書いてみます。美感がなく、読書性がない。
jQueryは行動と内容の分離をしていますが、jQueryコードもレベルの良いマシン仕様を持っていなければならないので、コードの可読性とメンテナンス性をさらに改善することができます。
だからコードはこのタイプを書くべきです。

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

各オブジェクトが実行する動作を個別の行に分割します。これで可読性が大幅に向上します。
しかし、勝手に分割しないで、勝手に分割してもいいです。そこでまとめました。以下の3点です。
1.同じ相手に対して3つ以上操作しない場合は、直接に1行として書くことができます。 $(this).addClass("current").show();2.同意対象の多くの操作提案に対して、行ごとに一つの操作を書く

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

3.複数のオブジェクトの少量の操作については、各オブジェクトに1行ずつ書いても良いです。サブ要素に関しては、適切なインデント、例えばdemoのコードなどが考えられます。

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

もう一つ強調したいのはコードに注釈を付けることです。
jQueryは強力なセレクタとして知られています。複雑な問題は1行のセレクタで簡単に解決できますが、次のコードを書きやすいです。
ドル（「(zhi table)」.tbody>tr：has（td：has）.css（「background」、「red」）；はは、一目で私を見分けられますか？
優秀なセレクタを作成する時には、このコードにコメントを付けることを忘れないようにすることが大切です。自分で読んでもいいです。他人と共有してもいいです。
//コメント：IDがテーブルのtbodyの中で、各行の列の中のチェックボックスが無効になっていない場合、この行の背景を赤にします。
ドル（「(zhi table)」.tbody>tr：has（td：has）.css（「background」、「red」）；
このような意味のある注釈を通じて、良い符号化習慣と風格を育成し、開発効率を高めることができます。
-----------------------------------------------------------
（1）jQueryオブジェクトとDOMオブジェクトの相互変換
jQueryオブジェクトとDOMオブジェクトが変換される前に、変数を定義するスタイルを先に約束します。取得したオブジェクトがjQueryオブジェクトであれば、変数の前に$
たとえば:
var$variable=jQueryオブジェクト
取得したDOMオブジェクトの場合；
var varible=DOM対象；
以上はjQuery編纂の規範です。この文章の内容が皆さんの学習や仕事に一定の助けを与えてくれることを願っています。

MySQL Order By使い方を共有する

MySQL Order By Rand（）効率分析