说白了,这种方式自定义jQuery插件

说白了,这种方式自定义jQuery插件

其实这里就是根据自身项目特点编写自定义的插件,不过这视频写的插件不是特别的规范,请看我的

/* jquery.dropDown.js (下拉菜单插件) */
(function ($) {
   $.fn.extend({
       /*
        *  fn:dropDown() 下拉菜单插件
        *  param:data 标签数据段
        *  功能说明:鼠标移入移出改变 显示和隐藏的样式
        */
       'dropDown' : function (data) {
           this.each(function () {
               var $this = $(this);
               $this.hover(function () {
                   $this.addClass($this.data(data));    //获取数据段改变相应样式
               },function () {
                   $this.removeClass($this.data(data));
               });
               return $this;  
           });
       }
   })
})(jQuery);

按照视频上面的写法,还要在(function($){...})(jQuery)里面的作用域写函数?万一使用的函数名与jQuery全局作用域冲突了呢?直接将所有插件实现的代码放在function里面就可以了,这个就是对象级别的插件。

还有一个是类级别的插件,使用$.extend(),直接给jQuery添加静态方法,并且将函数置于jQuery命名空间中去。


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
好帮手慕星星 2019-07-12 12:03:45

同学你好,你这种写法和视频中其实是一样的,学习到后面就能看出来你这种写法不好维护。

添加到jquery原型上的其实是dropdown属性:

http://img1.sycdn.imooc.com//climg/5d2805ae0001e0cf07910595.jpg

后面跟着的function,在这里面调用了封装的dropdown方法,这个方法是在(function($){...})(jQuery)局部作用域中写的,不会造成冲突。如果说造成冲突的话,也可能是挂载jquery原型上的dropdown 。

在后面视频中老师对写的dropdown函数进行修改,在原型上也添加方法,变成了构造函数。这样在挂载在jquery原型上的dropdown方法中仍然适用 ,可以继续往下面学习哦。

祝学习愉快!

  • 提问者 _1973 #1
    就是两种写法,一种是我这种,一种是$.extend()
    2019-07-12 21:36:10
  • 好帮手慕星星 回复 提问者 _1973 #2
    是的,这两种常用的写法。
    2019-07-13 09:51:02
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
2.组件化网页开发
  • 参与学习           人
  • 提交作业       1121    份
  • 解答问题       14456    个

本阶段在运用JS实现动态网页开发的基础上,带你深入理解企业开发核心思想,完成一个企业级网页的开发,体验前端工程师的成就感。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师