tnblog
首页
视频
资源
登录

思宇上课笔记—jQuery插件的编写

2074人阅读 2019/4/7 18:35 总访问:12100 评论:2 收藏:0 手机
分类: jQuery



         jQuery课堂实例


        相信我们每个人在学习jQuery中,都或多或少的使用到了jQuery插件,jQuery插件使用起来确实非常的方便,快捷。但如果我们在实际开发中没有找到自己心仪的插件,那我们该怎么办呢?接下来,我就带领大家学习下jQuery插件的编写,我们自己来写插件。


            1.编写jQuery插件的两种方式

                

                    ①类级别开发:即给jQuery添加新的全局函数,相当于给jQuery类本身添加静态方法,eg:$.ajax()


                    ②对象级别开发:即给jQuery对象添加方法,eg:$(" ").find()


                    注意:我们编写jQuery插件应该在JavaScript页面单独编写,但由于在js 页面中,大多数的jQuery的方法无法点出来,不方便我们实际编写代码,所以我们可以在外面将方法写好,最后再封装成jQuery插件


                    


          2.类级别开发


                    ①添加一个新的全局函数


                         


                        效果如图:

                        

                        

                        ②使用$.extend(object)


                             

                            

                             效果如图:


                            


                            ③使用命名空间


                                 虽然在jQuery命名空间中,我们禁止使用了大量的javaScript函数名和变量名。但是仍然不可避免某些函数或变量名将和其他jQuery插件冲突,因此我们可以将一些方法封装到另一个自定义的命名空间,防止冲突。


                                  


                                    效果如图:


                                    


                            我们测试了这三种方式,可以很明显的发现这三种方法的调用都直接可以用$点出来,这样类型的就是jQuery插件的类级别开发。三种方法书写规范有一定的区别,要注意。但在我们实际的开发中我们不可能会单独写一个方法来输出一句话,我们一般写的方法都是对某个对象进行一系列的操作,这样就牵扯到jQuery插件的另一种开发:对象级开发。


            3.对象级开发


                      因为是对象级开发,所以我们先创建一个对象,一个div


                       


                     ①$.fn.方法()


                            


                            效果如图:


                            

                              

                    ②$.fn.extend()


                            


                            效果如图:


                            


                            我们测试完这两种方法可以看出,调用这两种方法都需要一个对象,然后我们就可以在方法体里面用$(this)对该对象进行一系列的操作,符合我们实际的开发,所以在实际开发中对象级开发jQuery插件的方法是经常使用的。


            4.将方法封装成插件


                    ①选择文件夹->右击添加->选择JavaScript文件


                         


                    ②我们在文件里建一个模板(编写的规范格式)


                            

                            

                            解释一下模板的意思:

                                1.在jQuery环境下封装自己的插件,首先为避免与其他库的冲突,需要在插件的后面传一个jQuery参数进去,对应的函数里面的参数写入$

                                2.为避免出现不可描述的问题(分号是为了和前面的代码隔开,js可以用换行分隔代码,但是合并压缩多个js文件之后,换行符一般会被删掉,所以连在一起可能会出错,加上分号就保险了 ),插件的前后加入分号, 这是我们每个程序员需要 养成的好习惯,你懂得!    

   

                      ③ 将方法放进模板中        

                                                               

                    ④调用插件


                            这样一个简单的插件就写好了,直接调用就可以了。如图:


                            


                            注意:我们这里要引用插件的位置 ,效果如图:  


                            


                5.总结


                        jQuery插件开发分为两种模式开发,类级别开发和对象级开发,而在我们实际开发中,又以对象级别开发为主,我们看完两种模式开发,可以发现,他们有共同点,用到了extend()方法,不同点是对象级开发用了fn()方法,大家可以去查询两种方法的用法,在下一期在做详解,累了,先溜了。


                        

                                        

评价
做个有趣的人!
排名
6
文章
6
粉丝
16
评论
8
{{item.articleTitle}}
{{item.blogName}} : {{item.content}}
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2024TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
欢迎加群交流技术