Webプラグインの開発概要


現在、私たちが開発している製品は、JavaScript、特にフロントのWebプラグインの部分に関連しています.この部分はウェブページのサードパーティプラグインであり、ユーザ(駅長またはblogger)がそのウェブページにタグを追加することによってロードされるため、他のJavaScriptとは若干異なる.
まとめてみると、この機能には次のようなニーズがあります.
  • は、Webページのロードに影響しません.これは、多くの駅長がウェブページの読み込み速度に特に関心を持っているため、重要です.
  • は、Webページの既存のコンテンツに影響を与えません.プラグインのHTML要素がWebページの既存のものと衝突できないことを意味し、JavaScriptのネーミングスペースも衝突できないことを意味します.
  • は、パラメータおよびユーザー定義をサポートします.通常のHTTPリクエストを用いてJavaScriptを動的に生成すると,必然的にサーバへの圧力が増大し,Cacheの効率が大幅に低下する.通常のクライアントJavaScriptを使用してパラメータを処理する方法が必要です.
  • はIE 6をサポートします.これはとてもつらいです.海外の調査ではIE 6の使用率は10%以上しかありませんが、私たちのサイトのデータによると、約1/3の人がまだIE 6を使用してアクセスしていることが明らかになりました.
  • コードはメンテナンス可能、拡張可能であるべきであり、jQueryのようにカスタムコンポーネントをサポートできることが望ましい.これにより、少なくとも私たち自身が新しい機能を追加するときに便利になり、後でサードパーティのアプリケーションをサポートすることができます.

  • この部分のコードは私が去年の下半期から書いたもので、今まで何度も調整して、今の構造は基本的に安定しています.上記の1、3、4はすでによく解決されているが、2と5は部分的に解決されているだけで、少なくとも私は現在の案に満足していない.(一)ロード速度を高めるフォーラムでは、あるページプラグインを使ったという駅長の話がよくありますが、機能はいいですが、ページのロードに影響を与えたので、削除しました.あるいは、プラグインを使わずにロード速度に影響を与えるのを恐れている人もいます.だから私たちにとって、これは考えざるを得ない第一の大事です.最初にプラグインのJSコードは一度にすべてブラウザにロードされ、すべてのロジックがブラウザで完了します.このような利点は、コードがすべてロードされると、クライアントの応答が非常に速く、特定の状況を除いてHTTP要求がこれ以上ないことである.欠点は、一度に大量のコードをロードすることですが、ほとんどの場合、ユーザーがWebページを閲覧するときにプラグインを使用することはなく、無駄になります.もう1つの問題は、サードパーティのWebページにロードされたJavaScriptがCookieを直接操作できず、ユーザー関連の操作ができないことです(実際には可能ですが、面倒です).しかし、もともと機能は多くなく、ユーザーも少ないため、あまり影響はありませんでした.しかしその時私たちはこのような構造ではいけないことに気づき、すぐに調整を行い、Iframeを使用しました.これにより、Iframe内のコンテンツは独立したWebページに相当し、現在のWebページとは全く関係なく、ロードにも影響しません.そしてIframe内は私たち自身のdomainで、Cookieを直接使うことができます.もちろん,ユーザの使用時の応答速度は従来より速くないが,許容範囲内である.もう1つのウェブページのロードを高速化する方法は、ラベルに基本的なコードがいくつかしかロードされず、他のコードにはCSS仕様が含まれており、すべてのウェブページのロードが終了するまでロードされません.このようなもう一つの良い副作用は、うまく処理すれば、独立したコードを再利用することができるということです.この方法では2つの問題を解決しなければならない.1つ目は、JSコードを動的にロードすることです.これはよく解決して、動的に要素を生成して、設定してhead要素に入れればいいです.ただし、callbackを設定する場合はIEに対応する必要があります.コードは次のとおりです.
        loadModule: function(url, callback) {
            var script = d.createElement('script');
            script.setAttribute('src', url);
            script.setAttribute('charset', "utf-8");
            script.setAttribute('type','text/javascript');
            if (callback) {
                script.onload = callback;
                script.onreadystatechange = function() {
                    if (this.readyState == 'complete' || this.readyState == 'loaded') {
                        callback();
                    }
                };
            }
            d.getElementsByTagName("head")[0].appendChild(script);
        }
    
    
    
    
    

    もう1つの問題は、ページがすべてロードされてからアクションを行う方法です.jQueryがあれば$(document)を使います.ready()でいいです.しかしjQueryライブラリは圧縮しても50 k以上あるので、私たちは使えません.だから私はjQueryのソースコードからこの関数を実現することを参考にして、$(document)に代わることができます.ready()使用:
    function onDocumentReady(callback){
    		// Mozilla, Opera and webkit
            if (document.addEventListener) {
                document.addEventListener("DOMContentLoaded", function(){
                    document.removeEventListener("DOMContentLoaded", arguments.callee, false);
                    callback.call(this);
                }, false );
    		// If IE event model is used
            } else if (document.attachEvent) {
            // ensure firing before onload,
            // maybe late but safe also for iframes
                document.attachEvent("onreadystatechange", function(){
                    if ( document.readyState === "complete" ) {
                        document.detachEvent( "onreadystatechange", arguments.callee );
                        callback.call(this);
                    }
                });
    // If IE and not an iframe
            		// continually check to see if the document is ready
                if (document. documentElement.doScroll && window == window.top) (function(){
                    if (isReady) return;
                    try {
    // http://javascript.nwbox.com/IEContentLoaded/
                        document. documentElement.doScroll("left");
                    } catch( error ) {
                        setTimeout(arguments.callee, 0);
                        return;
                    }
                    callback.call(this);
                })();
            }
            window.onload = callback;
    };
    
    
    
    
    

    現在、私たちのプラグインは最初は7 k程度のコードしかロードされていませんが、現在のページでは百来kの影響はほとんど無視できます.Webページのロードが完了したら、15 kコードをロードし、パラメータに基づいて別のモジュールをロードすることもできます.現在、プラグインの実行効果は非常によく、ユーザーがロード速度の問題に文句を言ったことはありません.