JavaScript学習10:動的ローディングスクリプトとスタイル
2657 ワード
私たちはWebページを書く時、多くのJavaScriptスクリプトファイルとCSSスタイルファイルを導入する必要があります.特にウェブサイトの需要量が多い時に、スクリプトの需要量も大きくなります.そうすると、ウェブサイトの性能は大幅に割引されます.したがって、ダイナミックロードの概念が現れました.ダイナミックローディングの実現方法を見てみましょう.
ダイナミックスクリプト:
まず、jsファイルを動的にロードするコードの例を見ます.
もう一つの動的実行jsの例を見てみよう.
私たちはきっといろいろなお肌の交換機能に慣れていますが、お肌の交換はどのように実現されるか考えたことがありません.私もこれを学んでやっとはっと悟ったのですが、意外にも高級そうな皮膚交換の機能はこんな簡単です.CSSのスタイルを変えたらいいです.
ウェブページのスタイルはどのように動的にロードされているか見てみましょう.通常のスタイル表は2つの方法でロードされます.もう一つは「link」ラベルで、もう一つは「style」ラベルです.したがって、2つの方法のコード例を示し、スタイルを動的にロードする方法を説明する.
linkタグを使ってロードして、上に述べた動的ローディングjsスクリプトと同じです.これ以上話しません.
ダイナミックスクリプト:
まず、jsファイルを動的にロードするコードの例を見ます.
// JS
var flag=false ;
if(flag){
loadScript('browserdetect.js');
}
function loadScript(url){
var script =document.createElement('script');
script.type='text/javascript';
script.src=url;
document.getElementsByTagName('head')[0].appendChild(script);
}
このようにすると、flagsの値を制御するだけで、jsスクリプトファイルが現在のページにロードされているかどうかを制御できます.もう一つの動的実行jsの例を見てみよう.
// JS
var flag=true ;
if(flag){
executeScript();
}
function executeScript(){
var script =document.createElement('script');
script.type='text/javascript';
var text=document.createTextNode("alert('Lian')");
script.appendChild(text);
document.getElementsByTagName('head')[0].appendChild(script);
}
ダイナミックスタイル私たちはきっといろいろなお肌の交換機能に慣れていますが、お肌の交換はどのように実現されるか考えたことがありません.私もこれを学んでやっとはっと悟ったのですが、意外にも高級そうな皮膚交換の機能はこんな簡単です.CSSのスタイルを変えたらいいです.
ウェブページのスタイルはどのように動的にロードされているか見てみましょう.通常のスタイル表は2つの方法でロードされます.もう一つは「link」ラベルで、もう一つは「style」ラベルです.したがって、2つの方法のコード例を示し、スタイルを動的にロードする方法を説明する.
linkタグを使ってロードして、上に述べた動的ローディングjsスクリプトと同じです.これ以上話しません.
<span style="font-size:18px;">// link
var flag=true;
if(flag){
loadStyle('basic.css');
}
function loadStyle(url){
var link=document.createElement('link');
link.rel='stylesheet';
link.type ='text/css';
link.href=url;
document.getElementsByTagName('head')[0].appendChild(link);
}</span>
面倒なのはスタイルを変更するためにstyleを使うことです.互換性に関する問題があるので、実行時にはブラウザでサポートするタイプによって、該当する関数を選択して実行します.コードの例を見てください.<span style="font-size:18px;">// style
var flag=true;
if(flag){
var style=document.createElement('style');
style.type='text/css';
document.getElementsByTagName('head')[0].appendChild(style);
insertRule(document.styleSheets[0],'#box','background:red',0);
}
function insertRule(sheet,selectorText,cssText,position){
// IE
if(sheet.insertRule){
sheet.insertRule(selectorText+"{"+cssText+"}",position);
}else if(sheet.addRule){ // IE
sheet.addRule(selectorText,cssText,position);
}
}</span>
先生が繰り返し強調したことを覚えています.必要がないなら、実体を増やさないでください.同様にプログラムの設計の過程でも、私達はプログラムを起動する時に、多くのものをロードして、必然的にプログラムの性能に影響します.そのため、必要な時に、少しずつ追加することをマスターします.