Webプラグインの開発概要
4899 ワード
現在、私たちが開発している製品は、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に対応する必要があります.コードは次のとおりです.
もう1つの問題は、ページがすべてロードされてからアクションを行う方法です.jQueryがあれば$(document)を使います.ready()でいいです.しかしjQueryライブラリは圧縮しても50 k以上あるので、私たちは使えません.だから私はjQueryのソースコードからこの関数を実現することを参考にして、$(document)に代わることができます.ready()使用:
現在、私たちのプラグインは最初は7 k程度のコードしかロードされていませんが、現在のページでは百来kの影響はほとんど無視できます.Webページのロードが完了したら、15 kコードをロードし、パラメータに基づいて別のモジュールをロードすることもできます.現在、プラグインの実行効果は非常によく、ユーザーがロード速度の問題に文句を言ったことはありません.
まとめてみると、この機能には次のようなニーズがあります.
この部分のコードは私が去年の下半期から書いたもので、今まで何度も調整して、今の構造は基本的に安定しています.上記の1、3、4はすでによく解決されているが、2と5は部分的に解決されているだけで、少なくとも私は現在の案に満足していない.(一)ロード速度を高めるフォーラムでは、あるページプラグインを使ったという駅長の話がよくありますが、機能はいいですが、ページのロードに影響を与えたので、削除しました.あるいは、プラグインを使わずにロード速度に影響を与えるのを恐れている人もいます.だから私たちにとって、これは考えざるを得ない第一の大事です.最初にプラグインのJSコードは一度にすべてブラウザにロードされ、すべてのロジックがブラウザで完了します.このような利点は、コードがすべてロードされると、クライアントの応答が非常に速く、特定の状況を除いてHTTP要求がこれ以上ないことである.欠点は、一度に大量のコードをロードすることですが、ほとんどの場合、ユーザーがWebページを閲覧するときにプラグインを使用することはなく、無駄になります.もう1つの問題は、サードパーティのWebページにロードされたJavaScriptがCookieを直接操作できず、ユーザー関連の操作ができないことです(実際には可能ですが、面倒です).しかし、もともと機能は多くなく、ユーザーも少ないため、あまり影響はありませんでした.しかしその時私たちはこのような構造ではいけないことに気づき、すぐに調整を行い、Iframeを使用しました.これにより、Iframe内のコンテンツは独立したWebページに相当し、現在のWebページとは全く関係なく、ロードにも影響しません.そしてIframe内は私たち自身のdomainで、Cookieを直接使うことができます.もちろん,ユーザの使用時の応答速度は従来より速くないが,許容範囲内である.もう1つのウェブページのロードを高速化する方法は、
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コードをロードし、パラメータに基づいて別のモジュールをロードすることもできます.現在、プラグインの実行効果は非常によく、ユーザーがロード速度の問題に文句を言ったことはありません.