编写一个正确的jQuery插件的麻烦

我正在重写一个jQuery插件，用于我在实习过程中构建的RSS阅读器。 此插件使用Google的Feed API来提取JSON格式的RSS Feed并将其返回给开发人员，从而允许他们微调控制该Feed在网页上的显示方式。 我一直在关注官方jQuery插件创作页面作为参考。

在参考页面上，代码示例表明您需要将插件添加到jQuery的原型： $.fn 。 这就是我所做的：

 (function($) { "use strict"; $.fn.rssObj = function(newUrl) { var RSSFeed = function(newUrl) { /* * An object to encapsulate a Google Feed API request. */ this.feedUrl = newUrl; }; RSSFeed.prototype.load = function() { var feed = new google.feeds.Feed(this.feedUrl); feed.load(function(result) { console.log(result); }); }; return new RSSFeed(newUrl); }; })(jQuery); 

当我尝试通过执行$.rssObj("http://rss.test.com")来使用此插件时，我的浏览器给了我这个错误：

 $.rssObj() is not a function 

我究竟做错了什么？

Answer 1

如果你希望你的函数在jQuery 实例上可用，你可以添加$.fn （例如，你从$("your selector here")回来的对象$("your selector here")等）。 如果您希望直接从$ object获取函数，可以直接将其添加到它。

这是一个显示每个的例子：

 // Creating the plugin (function($) { // This will be on *instances* $.fn.green = function() { // `this` is the jQuery instance we were called on return this.css("color", "green"); }; // This will be on the $/jQuery object itself $.blue = function(selector) { // You don't use `this` here (you could if you want, // it will be === $/jQuery, but there's no reason to) $(selector).css("color", "blue"); return this; }; })(jQuery); // Usage jQuery(function($) { // Make all divs green with a border $("div").green().css("border", "1px solid green"); // Make all paragraphs blue $.blue("p"); }); 

 
I'm a div
 
I'm a paragraph
  

Answer 2

看看我在哪里完成了作者想要做的事情！ 我只是使用了我多年来一直使用的模板：

 (function($) { if (!$.myExample) { // check your plugin namespace does not already exist $.extend({ // this will allow you to add your plugin to the jQuery lib myExample: function(elm, command, args) { // keep in mind, right here you might want to do a class or data check to determine which direction this call is going // for example, upon init the plugin on an element you may add the plugin name as a class, // this way, when it's recalled, you can see it alrady has that class and might be calling a command, // thus make an if statemnt to push the process through return elm.each(function(index){ // do work to each element as its passed through // be sure to use something like // return elm.each(function(e) { dor work }); // as your final statement in order to maintain "chainability" }); } }); $.fn.extend({ // this gives the chainability functionality seen with $ funcs like: $("#eleID").css("color", "red") <--returns original element object myExample: function(command) { return $.myExample($(this), command, Array.prototype.slice.call(arguments, 1)); } }); $.myExample.props = { // Here you can establish specific properties to your plugin, prehaps even make them "Over-writable" key1: "value", key2: "value" }; $.myExample.methods = { // Here you can establish specific methods/functions for your plguin to carry out and maintain your namespace as well key1: function(param) { /* do work */ }, key2: function(param) { /* do work */ } }; // This next part is not seen in many plugins but useful depending on what you're creating $.myExample.init = function(param) { // If you have an initialize method to apply, namespace it in here and calll on initializing your plugin var key = "value", key2 = { subKey: "value" }; /* / run any number of initializing functions here / I prefer to make my param a value that can be a / string with a possible object / the string for holding a base configuration / the object for any change in properties or base values for that config */ }; $.myExample.defaults = { // establish base properties here that can be over-written via .props, but their values should never truly change key1: "value", key2: { prop1: { subKey1: "value", subKey2: "value" }, prop2: { subKey1: "value" } }, key3: function(param) { } }; } })(jQuery);