.Jquery插件开发（02）--插件设计

最新推荐文章于 2019-07-30 04:36:18 发布

枫柚master

最新推荐文章于 2019-07-30 04:36:18 发布

阅读量194

点赞数

CC 4.0 BY-SA版权

文章标签： jquery插件开发插件设计

本文链接：https://blog.youkuaiyun.com/qq_24935049/article/details/83142326

本文深入探讨了使用JQuery进行插件开发的基础，并以JSON格式器为例，详细讲解了对象创建、属性定义及方法实现的全过程。通过具体代码示例，展示了如何利用$.extend方法来初始化对象属性，以及如何为JQuery对象添加自定义方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基本框架设计--以JsonFormater为例，思考设计

1.对象创建

//define prototype function

function  JsonFormater(opt){

}

//define prototype

JsonFormater.prototype={

}

调用：

下面为小例子：

调用脚本：

<script type="text/javascript">

$(document).ready(function () {

      var jf;

      jf = new Student("hh");

      jf.hello();

});

</script>

1.对象属性

（1）.对外参数写法

this.options=$.extend({

xx:'',

tabSize:2

},opt||{});)

借助extend实现

$.extend(a,b)

（2）.Jquery扩展说明

1.jQuery.extend(object);为扩展jQuery类本身.为类添加新的方法。
2.jQuery.fn.extend(object);给jQuery对象添加方法。

（3）注意填充对象和属性方法

code

function JsonFormater(opt){

//out modify

this.opt=$.extend({

dom:'',

tabSize:2,

singleTab:"",

quoteKeys:true,

imgCollasped:"/image/Collasped.gif",

imgExpanded: "/image/Expanded.gif",

isCollapsible: true

},opt||{});

this.isFormated=false;

this.obj={

_dataObj:new Date(),

_regexpObj:new RegExp()

};

this.init();//function must the method is regexp

}

//define object 实例方法

JsonFormater.prototype={

//append init function

init:function(){

}

}

调用:

插件开发基础：Jquery插件开发（01）

下一篇：Jquery插件开发--核心功能篇