JavaScript ログ操作オブジェクトのインスタンス

使用 ここで、JavaScript ログ操作オブジェクトのインスタンスを実現するために学んだ知識を包括的に使用してみましょう:

mylog.js: 主な役割は、mylogger コンストラクターを構築し、行を追加し、ノードを追加し、CSS コントロールを作成することです。 。

LD.js: 主な機能は、スクリプトと文字列のルールを策定し、名前空間を構築し、Id と className に基づいてオブジェクトを取得することです。

Test.js: 主な機能は、フォームにイベントを追加し、マイログ内のいくつかの機能の可用性をテストすることです。

Log.html: ログ オブジェクトを表示するために使用されます。

以下は各ファイルのコードです:

test.js

[javascript] view plaincopyprint?//ロードイベントをウィンドウオブジェクトに追加します

LD.addEvent(window,'load',function(){
LD.log .writeRaw('これは生です');

LD.log.writeRaw('これは太字です!');

LD.log.header('ヘッダー付き) ');

LD.log.write('ソースを書き込みます:これは太字です!');

for(i in document){
LD.log.write(i);
}
});
//ウィンドウオブジェクトにロードイベントを追加します
LD.addEvent(window,'load',function(){
LD.log.writeRaw('This is raw');

LD. log.writeRaw ('これは太字です!');

LD.log.header('ヘッダー付き');

LD.log.write('ソースの書き込み:これは太字です!');

for(i in document){
LD.log.write(i);
}
} );myLog.js[javascript] view plaincopyprint?// JavaScript Document

//myLogger のコンストラクター
function myLogger(id){
id=id||"ICLogWindow" // ログフォームへの参照
var logWindow; =null;
var createWindow=function(){ var browserWindowSize = LD.getBrowserWindowSize(); var left =(browserWindowSize.height-200)/2||0; -200)/2|| 0; 0 '; /ログフォームに行を追加します
this.writeRaw=function(message){
use using use using using use using use using ‐ ～ ‐ ‐ ‐ ‐
//Create li DOM ノード
var li への行=document.createElement('LI');

全体を通して、 off ‐ off ‐ off ‐ ‐ ‐ ‐d を使用します。 0';
li.style.borderBottom='1px 点線'; .margin='0'
li.style.color='#000';メッセージ情報を確認します。 En en li.appendchild (
document.createtextNode ('message is unknown'); Li.innerhtml = Message )
//次の形式で特権メソッドを宣言します。 of object literals窗 // ログ ウィンドウに行を追加し、単純に処理します== 0 ;
return this.writeRaw(message.toString()) ;
}else{
return this.writeRaw(typeof message);
}
}
// 号より小さい转换成HTML标记
message=message.replace(//g,">");背景色:黒;フォントの太さ:太字。 ;padding:0px 5px;">'+message+'';
return this.writeRaw(message);背景色 ']['log'] = new myLogger();

//myLogger
関数のコンストラクター myLogger(id){
id=id||"ICLogWindow";

//ログウィンドウの参照
var logWindow=null;
//ログウィンドウの作成
var createWindow=function(){
var browserWindowSize = LD.getBrowserWindowSize();
var top=(browserWindowSize.height-200) /2 ||0;
var left=(browserWindowSize.width-200)/2||0;

//UL を使用
logWindow=document.createElement("UL");
//ドキュメント Object UL の下に dom を追加します

//識別用のIDを追加します
logWindow.setAttribute("id",id);

//フォーム上のCSSスタイルを制御します
logWindow.style.position='absolute';
logWindow.style.top =top+' px';
logWindow.style.left=left+'px';

logWindow.style.width='200px';
logWindow.style.height='200px';
logWindow.style.overflow='scroll ';

logWindow.style.padding='0';
logWindow.style.margin='0';
logWindow.style.border='1px ソリッド ブラック';
logWindow.style.backgroundColor='white';
logWindow.style .listStyle='none';
logWindow.style.font='10px/10px Verdana、Tahoma、Sans';

// ページにフォームを追加します
document.body.appendChild(logWindow);
}

/ /ログフォームに行を追加します
this.writeRaw=function(message){
// ;
}
// li の dom ノードを作成
var li=document.createElement('LI');

// Controlフォーム上の CSS スタイル

li.style.padding='2px';
li.style.border='0';
li.style.borderBottom='1px 点線黒';
li.style.margin='0 ';
li.style.color='#000';

// メッセージを検証する Message

if(typeof message == 'unknown'){

// li にテキストノードを追加します。
li.appendChild(
document.createTextNode('メッセージは未定義です')
));
}else if(typeof li.innerHTML!=unknown){
//これは別の表現方法です
li.innerHTML=message ;
}else{
li.appendChild(
document.createTextNode(message)
);
}
logWindow.appendChild(li);
return true;
};
}
// オブジェクト リテラルの形式で特権メソッドを宣言します
//ログフォームに行を追加し、入力内容に対して簡単な処理を実行します
myLogger.prototype={

write:function(message){
if(typeof message=='string' && message.length==0 ) {T Return this.writeraw ('入力情報なし'); .tring ()) ;
}else{
return this.writeRaw(typeof message);
}
}
//大なり小なり記号を変換しますHTML タグに変換します
message=message.replace(//g,">");
return this.writeRaw(message);
},
header :function(message){
message=''+message+'' ;
return this.writeRaw(message);
}
};
window['LD ']['log'] = new myLogger();LD.js[javascript] view plaincopyprint?// JavaScript Document
if(document .all && !document.getElementById){
document.getElementById=function(id){
return document.all[id]
}
}

if(!String.repeat){
String.prototype.repeat=function （l）{
）}（function（）{
function（）パラメーターv for（var i = 0; i＆lt; length; i ++）{
barment [i];Elements.push (Element);

Return Elements
// 名前空間を登録します
['ld'] ['$'] = $e, tag) {paint = print; / /タグをフィルタリングして、すべてのタグオブジェクトを取り出します var allTags=(tag == "*" &&parent.all) ?parent.all :parent.getElementsByTagName(tag)
varmatchingElements=new Array(); /-/g, "\-");
var regex=new RegExp("(^|\s)"+className+ "(\s|$)");
element=allTags[i ];

; func.apply(obj,arguments); 'Ld'] ['bindfunction'] = bindingfunction;

Function GetBrowserwindowsize () {
var de = documentelement; (de && de .clientWidth)
                        || document.body.clientWidth),
'高さ':(
window.innerHeight
|| (de && de.clientHeight)
|| de && document.body.clientHeight)
}
}; 
//注册本イベント
window['LD']['getBrowserWindowSize']=getBrowserWindowSize; 


function addEvent(node,type,listener){
if(!(node=$(node))) return false; 

if(node.addEventListener){
Node.addEventListener(type,listener,false); 
true を返します。 
}else if(node.attachEvent){
Node['e'+type+listener]=listener; 
node[type+listener]=function(){node['e'+type+listener](window.event);}
node.attachEvent('on'+type, node[type+listener]); 
true を返します。 
}
falseを返します。 
}; 
//注册本イベント
window['LD']['addEvent']=addEvent; 

})(); 
// JavaScript Document
if(document.all && !document.getElementById){
document.getElementById=function(id){
return document.all[id];
}
}

if(!String.repeat) {
String.prototype.repeat=function(l){
return new Array(l+1).join(this);
}
}

if(!String.trim){
String.prototype.trim=function (){
return this.replace(/^s+|+$/g,'');
}
}

(function(){
//名前空間を構築します
window['LD']={} ;

function $(){
var elements=new Array();
//arguments 現在の関数のパラメータ配列パラメータ
for(var i=0;i var element=arguments[i];
if(typeof element=='string'){
element=document.getElementById(element);
}
if(arguments.length==1){
return element;
window['LD']['$ ']=$;

function getElementsByClassName(className,tag){
parent=parent document;
if(!(parent=$(parent))) return false;


//var allTags=document.getElementsByTagName (tag);
//タグをフィルタリングし、すべてのタグ オブジェクトを削除します
var allTags=(tag == " *" &&parent.all) ?parent.all :parent.getElementsByTagName(tag);
varmatchingElements =new Array();

className=className.replace(/-/g,"\-");
var regex =new RegExp("(^|\s)"+className+ "(\s|$)" );

var element;
for(var i=0;i element=allTags [i];
if(regex.test(element.className)){
matchingElements.push( element);
}
要素); ly(obj,引数);
}
}; window ['ld'] ['bindfunction'] = bindfunction;
};
//このイベントを登録します
window['LD']['getBrowserWindowSize']=getBrowserWindowSize;


function addEvent(node,type,listener){
if(!(node=$(node))) return false;

if(node.addEventListener){
node.addEventListener(type,listener,false);
return true;
}else if(node.attachEvent){
node['e'+type+listener]= listener;
node[type+listener]=function(){node['e'+type+listener](window.event);}
node.attachEvent('on '+type,node[type+listener]);
return true;
}
return false;
};
// このイベントを登録します
window['LD']['addEvent']=addEvent;

}) ();


概要

この小さな例は基本的に、基本的なサポート、オブジェクト指向、プロトタイプ、オブジェクト リテラル、this、スコープ チェーン、その他の知識を含む、これまでに学んだことを組み合わせたものです すべてのポイントが含まれており、概要と見なすことができますJavaScriptの学習について。