无法将 jQuery 脚本转换为插件

Posted 2023-05-09

【中文标题】无法将 jQuery 脚本转换为插件

【英文标题】：Trouble Converting jQuery Script to Plugin

【发布时间】：2011-10-09 17:01:38

【问题描述】：

我正在尝试转换一个非常简单的脚本，该脚本从 Twitter 获取搜索结果并将其输出到无序列表中。这是我第一次尝试编写插件，当我调用它时它似乎并没有触发所有代码。自己编写的脚本可以正常工作，这是我为插件编写的代码：

(function($) 

    $.fn.tweetGet = function(options) 

        var defaults = 

            query: 'from:twitter&rpp=10',
            url: 'http://search.twitter.com/search.json?callback=?&q='
        ;

        var options = $.extend(defaults, options);

        return this.each(function() 

            // Get tweets from user query
            $.getJSON(options.url + options.query, function(data) 

                var tweets = [];

                $.each(data.results, function(i, tweet) 

                    tweets.push('<li>' + tweet.text.parseURL().parseUsername().parseHashtag() + '</li>');
                );

                $('#target').append('<ul>' + tweets.join('') + '</ul>');
            );

            // Parse tweets for URLs and convert to links
            String.prototype.parseURL = function() 
                return this.replace(/[A-Za-z]+:\/\/[A-Za-z0-9-_]+\.[A-Za-z0-9-_:%&~\?\/.=]+/g, function(url) 
                    return url.link(url);
                );
            ;

            // Parse tweets for twitter usernames and convert to links
            String.prototype.parseUsername = function() 
                return this.replace(/(?:^|\s)@[a-zA-Z0-9_.-]+\b/, function(user) 
                    var username = user.replace("@","")
                    return user.link("http://twitter.com/"+username);
                );
            ;

            // Parse tweets for hashtags and convert to links
            String.prototype.parseHashtag = function() 
                return this.replace(/[#]+[A-Za-z0-9-_]+/g, function(hash) 
                    var hashtag = hash.replace("#","%23")
                    return hash.link("http://search.twitter.com/search?q="+hashtag);
                );
            ;
        );
    ;
)(jQuery);

函数被调用：

$('#target').tweetGet(query: 'from:twitter&rpp:10');

return this.each(function() ; 之外的所有内容都可以正常工作，但其中的任何内容都不会触发或给我任何错误。我读过的所有教程似乎都在使用同样的基本格式，但我似乎无法弄清楚我做错了什么......

【问题讨论】：

不应该 this.each(function() 是 $(this).each(function()

我从文档中记得 $.fn.tweetGet 应该是 jQuery.fn.tweetGet

@eicto 从我在docs.jquery.com/Plugins/Authoring 上读到的内容看来都很好。

@phntmSPACEMAN 你是对的，这些都不是问题。

【参考方案1】：

这是一个工作版本：http://jsfiddle.net/JAAulde/QK35D/3/

( function( global )

    var String, $;

    if( global.jQuery )
    
        String = global.String;
        $ = window.jQuery;

        String.prototype = $.extend( String.prototype, 
            // Parse tweets for URLs and convert to links
            parseURL: function()
            
                return this.replace( /[A-Za-z]+:\/\/[A-Za-z0-9-_]+\.[A-Za-z0-9-_:%&~\?\/.=]+/g, function( url )
                
                    return url.link( url );
                 );
            ,
            // Parse tweets for twitter usernames and convert to links
            parseUsername: function()
            
                return this.replace( /@[a-zA-Z0-9_.-]+\b/g, function( user )
                
                    return user.link( 'http://twitter.com/' + user.replace( '@', '' ) );
                 );
            ,
            // Parse tweets for hashtags and convert to links
            parseHashtag: function()
            
                return this.replace( /[#]+[A-Za-z0-9-_]+/g, function( hash )
                
                    return hash.link( 'http://search.twitter.com/search?q=' + hash.replace( '#', '%23' ) );
                 );
            
         );

        $.fn.tweetGet = function( options )
        
            var defaults = 
                query: 'from:twitter&rpp=10',
                url: 'http://search.twitter.com/search.json?callback=?&q='
            ;

            options = $.extend( defaults, options );

            return this.each( function()
            
                var target = this;
                // Get tweets from user query
                $.getJSON( options.url + options.query, function( data )
                
                    var tweets = [];

                    $.each( data.results, function( i, tweet )
                    
                        tweets.push( '<li>' + tweet.text.parseURL().parseUsername().parseHashtag() + '</li>' );
                     );

                    $( target ).append( '<ul>' + tweets.join('') + '</ul>' );
                 );
             );
        ;
    
( window ) );

在我解释我的修改时，请观看此答案以获取更新。

编辑：

从插件中删除了对字符串原型的所有修改——它们不应该存在，因为它们不是插件代码的一部分，并且在每次调用插件时都会重新定义它们。 从插件中删除了 #target 选择器，因为它专门针对一个元素，而不是使用调用插件的集合（由于 getJSON 回调而调整了范围）。 从 options = $.extend( defaults, options ); 前面删除了 var 声明，因为它是不必要的，并且存在擦除在执行时传递到插件中的内容的风险。 顺便说一句，修复了您的 parseUsername 函数以停止在用户名 URL 中的用户名前添加空格 使用我的首选语法来本地化代码

【讨论】：

这太棒了！感谢分享。 +1

@JAAulde 很棒的东西，超出了我对回复的期望。感谢您的精彩解释！