4

動作する小さな jQuery スニペットがありますが、JS を改善するために、その効率を改善する方法について提案をお願いします。

この関数は、WordPress の抜粋を短縮します。元の WordPress Excerpt から最初の 40 単語を抽出します。これが私が気にかけている部分です。その後、元の抜粋の最後に「続きを読む」リンクを追加し、切り捨てられたバージョンの最後に追加します。

繰り返しになりますが、切り捨てられた抜粋を返すためのより高速で簡潔な方法は何でしょうか。「スライス」を試してみたところ、たくさんのコンマがありました。

jQuery('.page-id-7 .promo_slider_excerpt').each(function (i) {
    var s = jQuery(this).html();
    var sw = s.split(' '); // separate contents into array of words
    var t = [];
    var v;
    if (sw.length > 40) {
        var a = jQuery(this).children('a'); // this is the Continue Reading link
        for (v = 0; v < 40; v++) {
            t = (t + ' ' + sw[v]); // Build the shortened excerpt (this is the part I wanted to improve)
        }
        t = (t + ' ' + a[0].outerHTML); // Add the Continue Reading onto the end
        jQuery(this).html(t);
    } else {
        t = s;
        jQuery(this).html(t);
    }
});
4

2 に答える 2

8

最初の 40 語と続きを読むリンクについては、次のことをお勧めします。

var s = jQuery(this).text(),
    fortyWords = s.split(' ').slice(0,39).join(' '),
    link = document.createElement('a'),
    linkText = document.createTextNode('continue reading');
link.href = 'http://path.to.article/';
link.appendChild(linkText);
$(this).text(fortyWords).append(link);

JS Fiddle の概念実証。

OPからのさらなる質問に応じて編集されました（以下のコメントで）：

1: Firebug で、ある手法と別の手法の「効率」を区別する方法はありますか? IOW: あなたの例は良さそうですが、メモリと速度と for ループを比較できますか?

正直なところわかりませんが、残念ながら私は Firefox をまったく使用していません。また、Chromium をほぼ独占的に使用していますが、メモリ使用量や速度のプロファイリング ツールを発見するのに十分な時間、Chromium を使用していませんでした。

ただし、特定のアプローチの動作速度を示すテストを実行できるJS Perfがあります。ただし、メモリ使用量にはまったく触れていません。

2: 私のバージョンでは.html()メソッドと.outerHTMLプロパティを使用しています。ウェブ上で、常に信頼できるとは限らないという投稿を目にします。それはIE6からのホールドオーバーですか？私のユーザーは皆かなり最新の状態にあるのに、なぜ.text()ノードを使用して追加することを選択したのだろうか?

html()使用するのに適した方法ですが、html を文字列形式で操作する場合にのみ使用するのが理想的です。上記の場合、私が本当に扱いたかったのはテキスト文字列だけだったので、文字列を扱う方が簡単に思えました。text()私が操作していた要素内に他の要素があった場合、それを使用するhtml()必要がありました。そうしないと、テキストを DOM に書き込み/置換するときに、それらの要素が上書きされてしまいます。

outerHTML歴史的にも、率直に言って経験的にも、あまり成功していないことを思い出すようです。単純に個人的な好みの問題ですが、私はめったにそれを使用しようとは思いません。IE 6 からの引き継ぎでしょうか？よくわかりません。驚かないでしょうが、残念ながらまったくわかりません。

text()前述のように、テキストを扱っていたので、使用することにしました。そしてhtml()、htmlノードを挿入していたので、ノードを個別に追加しました。同じ内容を完全に渡してhtml()いたら、うまくいったと思います。しかし、繰り返しになりますが、個人的な好みであり、テキストまたは html を操作/操作しているかどうかが明確になると思います。

参考文献:

于 2012-06-07T17:31:30.983 に答える
0

これには JQuery を使用しないでください。必要に応じて、フィルターを使用して抜粋を変更できます。サーバーに作業を任せます：

remove_filter('get_the_excerpt', 'wp_trim_excerpt');
add_filter('get_the_excerpt', 'new_excerpt_format');
function new_excerpt_format($text)
{
    global $post;
    $raw_excerpt = $text;
    if(!$text)
    {
        $text = get_the_content('');
        $text = strip_shortcodes($text);
        $text = apply_filters('the_content', $text);
        $text = str_replace(']]>', ']]&gt;', $text);

        $exceptions = ''; //PRESERVE CERTAIN TAGS, ADD/REMOVE AS NEEDED (ex: <p>,<a>,<em>,<strong>,<br>)
        $text = strip_tags($text, $exceptions);

        $maxCount = 55; //DEFAULT WP WORD COUNT, INCREASE/DECREASE AS NEEDED
        $excerpt_length = apply_filters('excerpt_length', $maxCount);

        $moreText = '.... <a href="'.get_permalink($post->ID).'">Read More &gt;&gt;</a>'; //CUSTOM MORE TEXT, CHANGE AS NEEDED
        $excerpt_more = apply_filters('excerpt_more', $moreText);

        $words = preg_split("/[\n\r\t ]+/", $text, $excerpt_length+1, PREG_SPLIT_NO_EMPTY);
        if(count($words) > $excerpt_length)
        {
            array_pop($words);
            $text = implode(' ', $words);
            $text = $text.$excerpt_more;
        }
        else
            $text = implode(' ', $words);
    }
    return apply_filters('wp_trim_excerpt', $text, $raw_excerpt);
}

これを functions.php ファイルに追加するだけで、必要なものはすべて処理されます。これが役立つかどうか教えてください。

于 2012-06-07T20:09:52.537 に答える