JAvascriptの分離
3650 ワード
cssのスタイルとコンテンツの分離メカニズムを参考にして、javascriptが実現する動作をhtmlドキュメントの構造とコンテンツから分離することができます.これにより、各ページに退路を残すことができます.javascript domプログラミング芸術の例を借りて、実現の考え方を簡単に説明します.
まずリンクを作成しますhtml
そしてこのリンクの画面を書き出します.html:
このリンクにonclickイベントをトリガーし、ポップアップウィンドウでpopupを表示したい場合.htmlの場合、一般的なやり方はホームです.htmlにwindowを呼び出すメソッドを追加します.Openメソッドはpopupをポップアップする.html画面で、onclickイベントでこのメソッドを呼び出します.
しかし、このように書く行為とドキュメントの構造は緊密に結合されており、cssの実現構想を参考にして、私たちは1つのイベントの処理と1つの属性の内容を関連付けることができるかどうか、すなわち1つのフックを創立することができて、cssの中でclassの属性を通じて、ここでjsの分離もclassでこのフックを創立することができて、具体的な実現方法は以下の通りです.
まずホームを修正します.html、リンクにcssプロパティを追加します.
そしてcommonを構築しますjs、内容は以下の通りです
jsコードのwindow.onload = prepareLinks;この文の用途はhtml全体のロードが完了した後、prepareLinksメソッドを実行することです.これにより、ある要素に追加したイベントをページにロードできます.
最後はホームでhtmlにこのjsを適用すると、
以上の手順を完了すると、ホームを開く.htmlの後、Exampleリンクをクリックすると、ポップアップするようにpopupが開きます.htmlページ.
またonloadで複数のメソッドをロードしたい場合は、次のような方法で実現できます.
まずaddLoadEventメソッドを追加
次に、onloadで呼び出す必要があるメソッドをaddLoadEventメソッドに明示的に伝え、複数ある場合は複数回呼び出す.
まずリンクを作成しますhtml
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Home.html</title>
</head>
<body>
<a href="popup.html">Example</a>
</body>
</html>
そしてこのリンクの画面を書き出します.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>popup.html</title>
</head>
<body>
！
</body>
</html>
このリンクにonclickイベントをトリガーし、ポップアップウィンドウでpopupを表示したい場合.htmlの場合、一般的なやり方はホームです.htmlにwindowを呼び出すメソッドを追加します.Openメソッドはpopupをポップアップする.html画面で、onclickイベントでこのメソッドを呼び出します.
しかし、このように書く行為とドキュメントの構造は緊密に結合されており、cssの実現構想を参考にして、私たちは1つのイベントの処理と1つの属性の内容を関連付けることができるかどうか、すなわち1つのフックを創立することができて、cssの中でclassの属性を通じて、ここでjsの分離もclassでこのフックを創立することができて、具体的な実現方法は以下の通りです.
まずホームを修正します.html、リンクにcssプロパティを追加します.
<a href="popup.html" class="popup">Example</a>
そしてcommonを構築しますjs、内容は以下の通りです
/**
* @author jacktom
*/
window.onload = prepareLinks;
function prepareLinks(){
var links = document.getElementsByTagName("a");
for(var i=0; i<links.length; i++){
// ie
if (links[i].getAttribute("className")){
if(links[i].getAttribute("className") == "popup") {
links[i].onclick = function(){
popUp(this.getAttribute("href"));
return false;
}
}
} else if(links[i].getAttribute("class")){// ff
if(links[i].getAttribute("class") == "popup") {
links[i].onclick = function(){
popUp(this.getAttribute("href"));
return false;
}
}
}
}
}
function popUp(winURL) {
window.open(winURL,"popup","width=320,height=480");
}
jsコードのwindow.onload = prepareLinks;この文の用途はhtml全体のロードが完了した後、prepareLinksメソッドを実行することです.これにより、ある要素に追加したイベントをページにロードできます.
最後はホームでhtmlにこのjsを適用すると、
<script type="text/javascript" src="event.js"></script>
以上の手順を完了すると、ホームを開く.htmlの後、Exampleリンクをクリックすると、ポップアップするようにpopupが開きます.htmlページ.
またonloadで複数のメソッドをロードしたい場合は、次のような方法で実現できます.
まずaddLoadEventメソッドを追加
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function'){
window.onload = func;
}else {
window.onload = function(){
oldonload();
func();
}
}
}
次に、onloadで呼び出す必要があるメソッドをaddLoadEventメソッドに明示的に伝え、複数ある場合は複数回呼び出す.
addLoadEvent(prepareLinks);
// ，
addLoadEvent(method1);
addLoadEvent(method2):
.
.
.
addLoadEvent(methodn);