链式编程的实现原理
jQuery可以让我们开发者一直使用点语法调用自身方法的原理，主要原因是jQuery内部利用了js的对象来实现。
在jQuery中，如果一直对同一个元素或元素的其他关系元素（兄弟元素，父子元素）进行操作，那么可以使用 .语法(点语法)，一直写下去。
$(\"#box\").css(\"background\", \"pink\").css(\"font-size\":\"29px\"); $(\"#box\").siblings().css(\"background\", \"\");
可以写成：
$(\"#box\").css(\"background\", \"pink\").siblings().css(\"background\", \"red\");
实现链式编程jQuery选择器本身是一个jquery对象。jQuery内部利用this返回了自己本身。
//js中，声明一个对象
var obj = {
name:\"姓名\",
desc: function(){
console.log(this); // 打印当前自身对象
console.log(this.name); // 调用自身对象的属性
return this; // 实现链式编程的原理，就是在调用方法后，方法本身返回对象。
},
read: function(){
console.log(\"hello!\");
return this;
}}
jQuery的链式编程风格实例
首先本人通过一个案例来展示jQuery的链式编程风格。先写一个页面，展示一个列表，代码如下：
<body>
<div>
<ul class=\"menu\">
<li class=\"level1\">
<a href=\"#\">水果</a>
<ul class=\"level2\">
<li><a href=\"#\">苹果</a></li>
<li><a href=\"#\">菠萝</a></li>
<li><a href=\"#\">香瓜</a></li>
</ul>
</li>
<li class=\"level1\">
<a href=\"#\">主食</a>
<ul class=\"level2\">
<li><a href=\"#\">面条</a></li>
<li><a href=\"#\">馒头</a></li>
<li><a href=\"#\">米饭</a></li>
</ul>
</li>
</ul>
</div>
</body>
<script type=\"text/javascript\">
$(function() {
$(\".level1 > a\").click(function() {
$(this).addClass(\"current\").next().show().parent.siblings().children(\"a\").removeClass(\"current\").next().hide();
return false;
});
});
</script>
代码执行后的效果如下图所示：
上述代码的扩展效果就是通过jQuery的链式操作实现的，所有增加current类的操作、查询子元素的方法调用、动画方法的调用等都是对同一个元素进行的，所以在开始获取到一个jQuery对象后，后面的所有方法、属性的调用都通过 “.” 进行连续调用即可，这种模式就是链式操作。
为了增加代码的可读性和可维护性，我们将上面的链式代码格式的修改如下：
<script type=\"text/javascript\">
$(function() {
$(\".level1 > a\").click(function() {
// 给当前的元素添加current样式
$(this).addClass(\"current\")
// 下一个元素显示
.next().show()
// 父元素的同辈元素的子元素a移除current样式
.parent.siblings().children(\"a\").removeClass(\"current\")
// 他们的下一个元素隐藏
.next().hide();
return false;
});
});
</script>
经过规范格式的调整后，增加了代码的易读性，更加方便后期的维护。
与此同时，我们对于同一个jQuery对象进行链式操作时，主要遵循下面3条格式规范。
（1）对于同一个对象不超过3个操作，可以直接写成一行，代码如下：
<script type=\"text/javascript\">
$(function() {
$(\"li\").show().unbind(\"click\");
});
</script>
（2）对于同一个对象的较多操作，建议每行写一个操作，代码如下：
<script type=\"text/javascript\">
$(function() {
$(this).removeClass(\"mouseout\")
.addClass(\"mouseover\")
.stop()
.fadeTo(\"fast\", 0.5)
.fadeTo(\"fast\", 1)
.unbind(\"click\")
.click(function() {
.......
});
});
</script>
（3）对于多个对象的少量操作，可以每个对象写一行，如果涉及子元素，可以考虑适当的缩进。代码如下：
<script type=\"text/javascript\">
$(function() {
$(this).addClass(\"highLight\")
.children(\"a\").show().end()
.siblings().removeClass(\"highLight\")
.children(\"a\").hide();
});
</script>
以上就是有关jQuery的链式编程风格。
总结
© 版权声明
THE END
暂无评论内容