经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » jQuery » 查看文章
jQuery组件封装之return this.each(function () {});
来源:cnblogs  作者:奔跑的xqf  时间:2019/10/25 8:46:44  对本文有异议

记录一下自己的调试历程


 组件封装经常看到这么一段代码

  1. $.fn.plugin = function (options) {
  2. return this.each(function (i,t) {
  3. new Fun(this, options)
  4. });
  5. }
  6. //组件调用
  7. $(".div").plugin({
  8. str: ""
  9. })
  10. .css({
  11. "border": "1px dotted red"
  12. })
  13. .addClass('aaa');

  

为什么要return为什么要each?

自己调试了一番

发现若没有return,打印$(".div").easySlider({}) 因为这个方法没有返回值所以是undefined

经过return返回,打印$(".div").easySlider({}) 返回当前对象

若为undefined自然就不能够进行.css()或.addClass等方法调用了

 

这时候可能又纳闷了,直接return this 不就OK了么?

例如:

  1. $.fn.easySlider = function (options) {
  2. new ShowLink(this, options)
  3. return this;
  4. }  

这个时候就要说each了,??还是之前的??,倘若页面上有N个class为div的元素呢,即:this.length>1

这里each就必然要上场了,且每个对象都要返回,所以此段代码无疑是最方便的写法了:

  1. return this.each(function () {
  2. new ShowLink(this, options)
  3. });

再配合上构造函数以及向对象上添加属性和方法,差不多就是整个封装的流程了。

 

原文链接:http://www.cnblogs.com/xqfffffff/p/11731659.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号