DaiCuoBBs

 找回密码
 免费注册

QQ登录

只需一步,快速开始

[jQuery] 如何开发jQuery插件

[复制链接]
admin 发表于 2019-12-22 17:31:36 | 显示全部楼层 |阅读模式
第一种
  1. // jQuery扩展方法
  2. $.fn.test = function() {}
  3. $(selector).test();
复制代码


推荐 第二种
  1. (function ($) {
  2.     $.fn.extend({
  3.         "bold": function () {
  4.             return this.css({ fontWeight: "bold" });
  5.         }
  6.     });
  7. })(jQuery);
复制代码


完整事例
  1. //闭包限定命名空间
  2. (function ($) {
  3.     $.fn.extend({
  4.         "highLight": function (options) {
  5.             var opts = $.extend({}, defaluts, options); //使用jQuery.extend 覆盖插件默认参数
  6.             return this.each(function () {  //这里的this 就是 jQuery对象
  7.                 //遍历所有的要高亮的dom,当调用 highLight()插件的是一个集合的时候。
  8.                 var $this = $(this); //获取当前dom 的 jQuery对象,这里的this是当前循环的dom
  9.                 //根据参数来设置 dom的样式
  10.                 $this.css({
  11.                     backgroundColor: opts.background,
  12.                     color: opts.foreground
  13.                 });
  14.             });

  15.         }
  16.     });
  17.     //默认参数
  18.     var defaluts = {
  19.         foreground: 'red',
  20.         background: 'yellow'
  21.     };
  22. })(window.jQuery);
复制代码
调用方法
  1. $("p").highLight({ foreground: 'orange', background: '#ccc' }); //调用自定义 高亮插件
复制代码
https://blog.csdn.net/lmhlmh_/article/details/80638261

 楼主| admin 发表于 2020-11-11 01:11:55 | 显示全部楼层
jquery插件bai一般有三种开发方式:
通过du$.extend()来扩展jQuery
通过$.fn 向jQuery添加新的方zhi法
通过$.widget()应用jQuery UI的部件工厂方式创dao建
以下重点讲解第二种:
1、例如定义一个对象的写法:
  1. var Haorooms= function(el, opt) {
  2.     this.$element = el,
  3.     this.defaults = {
  4.         'color': 'red',
  5.         'fontSize': '12px',
  6.         'textDecoration':'none'
  7.     },
  8.     this.options = $.extend({}, this.defaults, opt)
  9. };
  10. //定义haorooms的方法
  11. haorooms.prototype = {
  12.     changecss: function() {
  13.         return this.$element.css({
  14.             'color': this.options.color,
  15.             'fontSize': this.options.fontSize,
  16.             'textDecoration': this.options.textDecoration
  17.         });
  18.     }
  19. };
  20. $.fn.haorooms = function (option) {
  21.    
  22. };
复制代码

$.extend({}, this.defaults, opt)有{}主要是为了创建一个新对象,保留对象的默认值。

 楼主| admin 发表于 2020-11-11 01:39:05 | 显示全部楼层
  1. $(document).ready(function () {
  2.         var $input = $('input.file[type=file]');
  3.         if ($input.length) {
  4.             $input.fileinput();
  5.         }
  6.     });
复制代码


 楼主| admin 发表于 2020-11-11 12:56:13 | 显示全部楼层
  1. var Person = function(firstName, lastName, age){
  2.     this.firstName = firstName;
  3.     this.lastName = lastName;
  4.     this.age = age;
  5. }

  6. Person.prototype.fullName = function(){
  7.     return this.firstName + " " + this.lastName;
  8. };
复制代码
在JS中没有“类”这个概念,但是我们可以通过创建构造器来创建“对象”。假设现在我们要创建一系列Person对象,还需要传入姓、名和年龄,我们可以将构造器定义成下面这样(这部分代码应该放在模块之中):

现在先看第一个函数,你会看到我们创建了一个Person构造器。我们用它来构造新的person对象。这个构造器需要3个传入参数,然后将这3个参数赋值到执行上下文中。我们也是通过这种方式获取到公有实例变量。这里也可以创建私有变量:将传入参数赋值到这个构造器中的局部变量。但是这么做以后,公有的方法就没法获取这些私有的变量了,所以你最好还是把它们都变成公有的。也可以把方法放在构造器中同时还能从外部获取到它,这样方法就能拿到构造器里的私有变量了,不过这么做的话又会出现一系列新的问题。

第二个方法中我们使用了Person构造器的”原型”(prototype)。一个函数的原型就是一个对象,当你需要在某个实例上解析它所调用到的字段或者函数时你需要遍历这个函数上所有的实例。所以这几行代码所做的就是创建一个fullName方法的实例,然后所有的Person的实例都能直接调用到这方法,而不是对每个Person实例都添加一个fullName方法,造成方法的泛滥。


但这样每一个Person实例都会有fullName方法的副本,这不是我们希望的。

如果我们想要创建一个Person实例,我们可以这么做:

  1. var person = new Person("Justin", "Etheredge");
  2. alert(person.fullName());
复制代码


 楼主| admin 发表于 2020-11-11 13:05:00 | 显示全部楼层
多人开发时,可以根据自己的名字进行命名一个对象,然后自己写的变量及函数都放进这个命名空间中,这样就避免与他人冲突;在实际开发时,还会遇到多个文件之间共享一个命名空间,可以使用命名空间检测,避免重复或覆盖;例如:
  1. // 方法一
  2. if (typeof myObj === "undefined") {
  3.     var myObj = {};
  4. }

  5. // 方法二(推荐)
  6. var myObj = myObj || {};
复制代码

当你只是想对一个命名空间进行扩展,形如,对插件进行扩展,在JQuery.extend() 方法的扩展;
  1. var myObj=(function(o){
  2.         o.addFn = ""; // 实现扩展属性功能
  3.         return  o;
  4. })(window.myObj || {});  // 必须或上空对象,以便在没有事先声明而使用引起的错误
复制代码


 楼主| admin 发表于 2020-11-11 13:20:22 | 显示全部楼层
再看避免同一个库内多个子命名空间的冲突。通常可以自定义一个生成命名空间的函数,将命名空间传入并进行检查,没有就新建,有了就沿用:
  1. var X = {
  2.     namespace: function(ns) {   //将命名空间传入该方法进行检查
  3.         var parts = ns.split("."),
  4.             object = this, i, len;

  5.         for(i = 0, len = parts.length; i < len; i++) {
  6.             if (typeof object[parts[i]] === "undefined") {
  7.                 object[parts[i]] = {};  //没有就新建
  8.             }
  9.             object = object[parts[i]];
  10.         }
  11.         return object;
  12.     }
  13. }
  14. X.namespace("xButton.widget");
  15. X.namespace("xInputField.widget ");

  16. X.xButton.widget = …
  17. X.xInputField.widget = …
复制代码


您需要登录后才可以回帖 登录 | 免费注册

本版积分规则

QQ|Archiver|手机版|小黑屋|呆错站长论坛

GMT+8, 2021-1-20 01:56 , Processed in 0.049111 second(s), 22 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表