jquery 插件开发备注

今天发现其实JQ自己早就有对这个临时数据的存储方法: $(“dom”).data(“mydata”,”this is data”);还有就是插件开发的时候我们经常要给插件添加方法,其实就用JS内部添加方法的方法即可 this.myfn=function(){} 下面给上一个显示部分文字的插件的源码: (类似CSS的text-overflow,但本插件你需要提供显示几个字,用于精确控制显示数量) 代码如下: /** * demo: * 1.$(“#limittext”).limittext(); * 2.$(“#limittext”).limittext({“limit”:1}); * 3.$ 在jQuery插件开发中，有时候我们需要为DOM元素存储临时数据，这时可以利用jQuery的`data()`方法。例如，`$(“dom”).data(“mydata”,”this is data”)`，这行代码会将字符串"this is data"绑定到指定DOM元素的"data-mydata"属性上，便于后续操作中检索和使用。 在开发jQuery插件时，我们常常需要扩展插件的功能，添加自定义方法。这可以通过在插件内部定义函数来实现。例如，如果要在插件中添加一个名为`myfn`的方法，只需写`this.myfn = function() {}`。这样，当调用该插件时，就可以像`$(selector).myfn()`一样使用这个新方法。 下面是一个具体的jQuery插件示例，该插件名为`limittext`，它的功能类似于CSS的`text-overflow`，但提供了更精确的控制，允许用户指定显示多少个字符。插件源码如下： ```javascript /** * demo: * 1. $(“#limittext”).limittext(); * 2. $(“#limittext”).limittext({“limit”:1}); * 3. $(“#limittext”).limittext({“limit”:1,”fill”:”(部分隐藏)”,”fillid”:”aaa”}); * 4. $(“#limittext”).limittext({“limit”:1,”fill”:”(部分隐藏)”,”fillid”:”aaa”}).limit(10); * 5. $(“#limittext”).limittext({“limit”:1,”fill”:”(部分隐藏)”,”fillid”:”aaa”}).limit(‘all’); * @param {Object} opt * @author Lonely * @link http://liushan.net */ jQuery.fn.extend({ limittext: function (opt) { opt = $.extend({ "limit": 30, "fill": "...", "fillid": null }, opt); var $this = $(this); var body = $(this).data('body'); if (body == null) { body = $this.html(); $(this).data('body', body); } this.limit = function (limit) { if (body.length <= limit || limit == 'all') var showbody = body; else { if (opt.fillid == null) var showbody = body.substring(0, limit) + opt.fill; else var showbody = body.substring(0, limit) + '<span id="' + opt.fillid + '">' + opt.fill + '</span>'; } $(this).html(showbody); } this.limit(opt.limit); return this; } }); ``` 插件接收一个参数对象`opt`，其中包含以下选项： - `limit`：限制显示的字符数，默认值是30。 - `fill`：超出限制字符数后替换的字符串，默认是"..."。 - `fillid`：如果需要在替换字符串周围包裹一个带有特定ID的`<span>`标签，可以设置此值。 在插件中，首先检查`body`数据是否已存储，如果没有，则将其从HTML中提取并存储。然后定义`limit`方法，根据传入的`limit`值处理文本。如果`limit`是'all'或文本长度小于等于`limit`，则显示全部文本；否则，根据`fillid`是否存在，决定如何插入`fill`字符串。 在示例中，`limittext`方法可以单独使用，也可以链式调用`limit`方法来改变限制。这展示了jQuery插件设计的灵活性和可扩展性。 jQuery插件开发的关键在于理解jQuery的API以及如何通过扩展jQuery对象（`$.fn`）来创建自定义功能。这个`limittext`插件是一个很好的实例，它展示了如何处理DOM元素的数据、添加自定义方法以及处理用户配置选项。