基礎からJSコードベースを構築 1/2ページ_JavaScriptスキル

バックグラウンドプログラムがシングルクォートを除外するため、所々に変なスペースがある場合、それはシングルクォーテーションを意味しますので説明します。
/**
* @author Super Sha
* QQ:770104121
* 電子メール:supersha@foxmail.com
* 無断転載を禁じます!
*/
(function(){ //オリジナル
function $(s){
if (!s)
return false;
return s .constructor == String ? document.getElementById(s) : s;
}
window.$ =
})();関数をカプセル化し、それ自体で実行します。この関数で定義された関数または変数は汎用的に使用でき、名前空間
if (!window.Susa)
window[ で宣言しない限り、関数の外部からアクセスすることはできません。 Susa ] = { }; // Susa 名前空間を宣言します
/*
* 要素の参照を取得します
*/
function $(){
var elems = new Array() ;
for ( var i = 0; i < argument.length; i ) {
var elem = argument[i]
if (typeof argument[i] == "string") { / /型チェックを実行します
elem = document.getElementById(arguments[i]);
}
//これには語呂合わせの意味があります: 文字列が渡され、パラメータが 1 つしかない場合、または DOM がある場合参照が渡されると、両方が返されます DOM ノード参照
if (arguments.length == 1) {
return elem;
}
else {
elems.push(elem); 🎜>}
}
return elements;
}
window[ Susa ][ $ ] = $;

/*
* 特定の要素内の子要素を返します。 or document
*/
function tag(type, elem){
elem = elem ||
type = type "*"; // パラメータがない場合は、参照を返します。ドキュメントのすべての要素に
return elem.getElementsByTagName(type);
}
window[ Susa ][ tag ] = tag;

/*
* の値を返します。入力ボックス
*/
function value(id){
var elem = $(id) //匿名関数で定義されたメソッドを呼び出す
if (elem != null && (elem) .nodeName == INPUT || elem.nodeName == TEXTAREA )) {
return elem.value
}
}
window[ Susa ][ value ] = value; >/*
* は文字列を素早く連結できます StringBuilder オブジェクト // (オリジナル)
*/
var StringBuilder = {
_arr: new Array,
append: function(str){
if (typeof str == "string" ) {
this._arr.push(str);
}
return this;
toString: function(){
if (this._arr.length != 0) {
var strs = this._arr.join( , );
this._arr = [] //追加を繰り返すトリックを解決します
return strs;
}
else {
return null;
}
}
//function appendString(){
// for(var i= 0;i<3;i ){
// StringBuilder.append("test");
// }
// return StringBuilder.toString(); //window[ Susa ][ str ]=appendString ;

/*
* addEvent メソッドと moveEvent メソッド
*/
function addEvent(elem, type, fn){
if (elem != $(elem) || elem == null)
return false;
if (type == null || fn == null)
return false; (elem.addEventListener) { //W3C メソッド
elem.addEventListener(type, fn, false);
return true;
}
else
if (elem.attachEvent); IEメソッド
//node[e type fn]=fn;
///node[type fn]=function(){
//node[e type fn](window.event) / /なぜこれが行われるのかわかりません
//}
//node.attachEvent( on type,node[type fn]); //return this; on type, function(){
fn.call (elem)
});
//注: ここで匿名関数を使用して、IE の this オブジェクトが誤ってポイントするのを防ぎます。
return this;
}
else {
elem["on" type] = function(){
fn.call(elem)
};
}
}
関数RemoveEvent(elem, type, fn){
if (elem != $(elem) || elem == null)
return false;
if (type == null || fn == null)
return false;

if (elem.removeEventListener) {//W3C メソッド
elem.removeEventListener(type, fn, false); else
if (elem.detachEvent) // IE メソッド
{
//node.detachEvent( on type, node[type fn]);
elem.detachEvent( on type, fn);
これを返します;
}
}
window[ Susa ][ addEvent ] = addEvent;
window[ Susa ][removeEvent ] = deleteEvent; >* getElementsByClassName メソッドは、クラスのすべての要素への特定の参照を返します。タグおよび elem パラメータはオプションです。
*/
function getElementsByClassName(classname, tag, elem){
elem = elem || document;
if ( elem != $(elem) || elem == null)
return false;
//この関数のparent.allの使い方に注意してください。親はドキュメントであり、IE と Mozilia を区別します。
if (!tag)
tag = "*";
var allTags = (tag == * && elem.all) : elem.getElementsByTagName (tag);

//指定されたクラス名が含まれているかどうかを検出する正規表現を作成します
classname = classname.replace(/-/g, "\-"); new RegExp("(^| \s*)" クラス名 "(\s*|$)");

var matchElements = new Array();for (var i = 0; i < allTags.length; i ) {
elem = allTags[i];
if (regex.test(elem.className)) { //正規のクラス名に基づいてクラス名を検出しますルール
matchElements.push(elem);
}
}

return matchElements;
}
window[ Susa ][ getElementsByClassName ] = getElementsByClassName; > /*
* toggleDisplay メソッド、HTML タグの表示/非表示を切り替えます
*/
function toggleDisplay(id, value){
var elem = $(id)
if (elem ! = $(elem) || elem == null || elem.nodeType != 1)
return false;
if (elem.style.display != "none") {
elem.style. display = "なし";
else {
elem.style.display = 値
}
window[ Susa ][ " toggleDisplay"] = toggleDisplay;

/*
* insertAfter メソッド
*/
function insertAfter(node,referenceNode){
if (node != $(node) ) || ノード == null)
return false;
if (referenceNode != $(referenceNode) || ReferenceNode == null)
return false; insertBefore(node , ReferenceNode.nextSibling); // insertBefore メソッドに注意してください。
} // 2 番目のパラメータが null の場合、parentNode
window[ Susa ][ insertAfter ] = insertAfter;

/*
* 現在のノードの下にあるすべての子要素を削除します
*/
function RemoveChildren(parent){
if (parent != $(node ) ||parent == null)
return false;
while (parent.firstChild) { //ノードを削除するループ
parent.firstChild.parentNode.removeChild(node.firstChild);
returnparent ;
}
window[Susa][removeChildren] =removeChildren;

/*
* prependChild メソッド、選択したノードを現在のノードの前に挿入します。 🎜>*/
function prependChild(parent, newNode){
if (parent != $(parent) ||parent == null)
return false;
if (newNode != $( newNode) || newNode == null)
return false;

if (parent.firstChild) { //
parent.insertBefore(newNode,parent.firstChild) を判定するときにサブ関数があります);
}
else {
parent.appendChild(newNode);
親を返す;
}
window[ Susa ][ prependChild ] = >
/*
* このメソッドの実行環境を調整するために使用される bindingFunction() メソッド
*/
functionAdjustFunc(obj, func){ //func の実行環境を obj に調整します
return function(){ / /匿名関数への参照を返します
func.apply(obj, argument);
}
window[ Susa ][AdjustFunc ] = applyFunc;

/*
* 表示ウィンドウの幅と高さを取得し、幅と高さの属性を含むオブジェクトを返します。これはパブリックではないため、この匿名関数 < 内の他のメソッドによってのみ呼び出すことができます。 🎜>*/
function getBrowserWindowSize(){
var de = document.documentElement; // ルート ノードを取得します
var obj = {
width : (window.innerWidth || (de.clientWidth) ) || document.body.clientWidth),
height : ( window.innerHeight || (de.clientHeight) || document.body.clientHeight)
}

return
}

/*
* デバッグ ログ オブジェクト
*/
function log(id){
id = id ||
var logWindow = null;各プロパティで使用されるプライベート プロパティ。
var createWindow = function() { //リスト ノードを動的に生成するために使用されるプライベート メソッド。
if (!document.body) {
alert( document.body hasn't読み込みが完了しました。
return;
}
var browerWindowSize = getBrowserWindowSize(); // 位置を取得します。ブラウザの新しいウィンドウの左上隅の
var left = ((browwerWindowSize.width - 200) / 2) ||

logWindow = document.createElement( ul ); UL 要素を動的に生成します
logWindow.setAttribute( id , id );

logWindow.style.position =Absolute; //UL 要素を変更します
logWindow.style.top = top px; >logWindow.style.left = 左 px;

logWindow.style.width = 200px;
logWindow.style.overflow = スクロール; 🎜>logWindow.style.padding = 0;
logWindow.style.border = 1px ソリッドブラック;
logWindow.style.backgroundColor = ホワイト; style.listStyle = none;
logWindow.style.font = 10px/10px Verdana,Tahoma,Sans;

document.body.appendChild(logWindow); // 動的に生成されたノードを本文に追加します。 >}

this.writeRaw = function (message){ //createWindow メソッドによって生成された UL ノードに LI コンテンツを追加するために使用される特権メソッド。
if ( !logWindow)
createWindow(); //初期ウィンドウが存在しない場合は作成します
var li = document.createElement("li") //LI 要素を動的に生成します
li .style.padding = 2px;
li.style.borderBottom = 1px 点線
li.style.margin = 0 2px; color = #000;li.style.font = 9px/9px Verdana、Tahoma、Sans ;

if (メッセージの種類 == 未定義) {
li.appendChild(document.createTextNode( メッセージは未定義です! ));
}
else
if (typeof li.innerHTML != unknown ) {
li.innerHTML = message;
else {
li.appendChild(document.createTextNode(message));
}

logWindow.appendChild(li) // 生成された LI ノードを logWindow に追加します
return true;
}
}

log.prototype = {
write: function(message){
if (arguments.length == 0) { //警告メッセージパラメータが空です
return this.writeRaw("パラメータが不足しています!");
}

if (typeof message != "string") { //渡されたパラメータがstring にアクセスし、toString メソッドの呼び出しを試みます。アクセスが存在しない場合は、オブジェクト タイプを記録します。
if (message.toString)
return this.writeRaw(message.toString()); // に注意してください。この判定メソッド: message.toString。 オブジェクトに特定の属性が含まれているかどうかを判断します。
else
return this.writeRaw(typeof message);
message = message.replace(//g, " >"); // <>左右の山かっこをフィルタリングします
return this.writeRaw(message);
},
header: function(message){ //ヘッダーをログウィンドウ
メッセージ = -->
メッセージ
<-- ; return this.writeRaw(message); }
}
window[ Susa ][ log ] = new log( ; はい、複数のパラメータをサポートしています // (オリジナル)
*/
function debug(){
for (var i = 0; i if (typeof argument[i] != function ) {
alert("Params sould be Function type!");
return;
}
}
var args = argument ;

(function(){ //実行関数プロセスをカプセル化します
try {
for (var i = 0; i < args.length; i ) {
args[i ](); //実行関数
}
}
catch (ex) {
Susa.log.writeRaw( エラー: ex.message " Line: "
}
})( );
}
window[ Susa ][ debug ] = debug;

/*
* ノードの型の宣言と決定 //Original
*/
window [ Susa ][ ノード ] = {
ELEMENT_NODE: 1,
ATTRIBUTE_NODE: 2,
TEXT_NODE: 3,
CDATA_SECTION_NODE: 4,
ENTITY_REFERENCE_NODE: 5 、
ENTITY_NODE: 6、
PROCESSION_INSTRUCTION_NODE: 7、
COMMENT_NODE: 8、
DOCUMENT_NODE: 9、
DOCUMENT_TYPE_NODE: 10、
DOCUMENT_FRAGMENT_NODE: 11、
NOTATION_NODE: 12
};

/*
* ブラウザが DOM レベルをサポートする範囲を検出する関数 (オリジナル)
*/
function CheckDOMLevel(){
if (ドキュメント.implementation) { //ドキュメントがサポートされているかどうかを判断します .implementation property
var DOM = ["Core", "XML", "HTML", "Views", "SytleSheets", "CSS", "CSS2", " Events"、"UIEvents"、"MouseEvents"、"MutationEvent"、"HTMLEvents"、"Range"、"Traversal"、"LS"、"LS-Async"、"Validation"];
var Level = [" 1.0", "2.0", "3.0"] ;

for (var i = 0; i for (var j = 0; j if (document .implementation.hasFeature(DOM[i], Level[j])) { //document.implementation.hasFeature は 2 つのパラメータを受け入れます
Susa.log.writeRaw("DOM" レベル[j] " " DOM [i] " サポートされています。
");
}
else {
Susa.log.writeRaw("DOM" レベル[j] " " DOM[i] " はサポートされていません! ")
}
}
} } else {
Susa.log.write("

DOMI 実装はサポートされていません!

");
} } window[ Susa ][ CheckDOMLevel ] = CheckDOMLevel; /*
* Get and要素プロパティの値を設定するには、
*/
function attr(elem, name, value){
if (!name || name.constructor != String )
return ;

//名前が変かどうかを確認します
name = {
for : htmlFor ,
class : className
}[name] || 🎜>name;

if (typeof value != unknown ) {
elem[name] = value; // 最初にショートカットを使用します
if (elem.setAttribute) { // 可能であれば、 use setAttribute
elem.setAttribute( name, value);
}
}
return elem[name] || 属性の値を返します
}
window[ Susa ][ attr ] = attr;

/*
* 新しい DOM 要素を作成するための汎用関数
*/
function create(label){
return document.createAttributeNS ? document.createElementNS( http://www.w3.org/1999/xhtml , label) : document.createElement(label); //新しく作成された要素の参照を返します
}
ウィンドウ[スーサ][作成] =

/*
* TextNode ノードの作成 function
*/
//function createText(elem){ // DOM 要素によって直接呼び出されます
// $(elem)==elem this.appendChild(elem):this. appendChild(document.createTextNode(elem));
// return this;
//}
function createText(parent, elem){ //(オリジナルを参照)
return $(elem) = = elem ?parent.appendChild(elem) :parent.appendChild(document.createTextNode(elem));
window["Susa"][createText] = createText;
* 別の DOM 要素の前に要素を挿入 // (オリジナルを参照)
*/
function before(newNode,referenceNode){

if (!newNode && $(referenceNode) !=referenceNode )
return false;
var elems = checkElem(newNode); // ノード参照を追加する配列を取得します
for (var i = elems.length - 1; i >= 0 ; i --) {
referenceNode.parentNode.insertBefore(elems[i], ReferenceNode)
}
}
window[ Susa ][ before ] = before; /*
* 子要素を別の要素に追加します。 elem は HTML タグを含む文字列、または DOM 要素ノードへの参照にすることができます。 // (オリジナルを参照)
*/
function append(parent, elem){
if (!elem && $(parent) !=parent)
return false;
var elems = checkElem(elem);ノード参照を追加したい
for (var i = elems.length - 1; i >= 0; i--) {
parent.appendChild(elems[i])
; }
window[ Susa ][ append ] = append;

function checkElem(elem){ //before関数とappend関数の補助関数//(原文参照)
var r = [] ;
if (elem && elem.constructor == String) { //パラメータが文字列の場合
var p = create("p");
p.innerHTML =
for (var i = p.childNodes.length - 1 ; i >= 0; i--) {
r[r.length] = p.childNodes[i] //配列を動的に生成するメソッド }
}
else
if (elem && elem.constructor == Array) { //パラメータが配列の場合
var p = create("p"); .innerHTML = elem.join( );
for ( var i = p.childNodes.length - 1; i >= 0; i--) {
r[r.length] = p.childNodes[ i]; //配列を動的に生成するメソッド
}
}
else
if (elem && $(elem) == elem) { //DOM ノードの場合
r [r.length] = elem;
}
}

/*
* パラメータは DOM ノード参照にすることができます。または HTML ID タグ
*/
function empty(elem){
elem =transformLabelID(elem);
while (elem.firstChild) {
elem.removeChild(elem.firstChild) ;
}
}
window["Susa "][ empty ] = empty;

/*
* DOM 要素を取得および設定できます。文字列または DOM 要素への参照 // (オリジナル)
*/
function html(parent, elem){
parent =transformLabelID(parent);
if (elem && $(elem); ) == elem) {
parent.innerHTML = elem.innerHTML;
}
elm && elem.constructor == 文字列 ? :parent.innerHTML;
}
}
window["Susa"]["html"] = html;

/*
* のテキストコンテンツを取得する一般的な関数要素は取得と設定の両方で使用できます。
*/
function text (e){
e =transformLabelID(e);
if (arguments[1]) {
e. innerHTML = argument[1];
else {
var t = "";
e = e.childNodes e; // 要素が渡された場合、その子の走査を続行します。それ以外の場合は、配列
for (var j = 0; j t = e[j].nodeType != 1 ? e[j] であるとみなされます。 nodeValue : text(e[j]); //テキスト関数を再帰的に呼び出します
}
}
window[ Susa ][ text ] = text; >
/*
* innerHTML および innerText に似た innerHTML および innerText メソッド // オリジナル
*/
function innerText(elem, t){
elem =transformLabelID(elem); >//DOM ノードかテキスト文字列かを確認します
if (t) {
var el = t.constructor == String ?
elem.parentNode; .insertBefore(el, elem); //現在の要素の前にノード
elem.parentNode を挿入します。removeChild(elem) //現在のノードを後で削除します
}
return text( elem); // 2 番目のパラメータが空の場合は、現在のテキストを返します。 >if (h) {
var elems = checkElem(h); //h の文字列またはノードの配列を返します
for (var i = elems.length - 1; i >= 0; i--) {
elem.parentNode.insertBefore(elems[i], elem);
}
elem.parentNode.removeChild(elem);
else {
var p = create ("p");
p.appendChild(elem);
return p.innerHTML;
}
window["Susa"]["outerText"]
window[Susa]["outerHTML"] = innerHTML;

/*
* wrag は現在の要素を別の要素でラップします // オリジナル
*/
function wrag(elem, wragLabel, attrProp){
elem =transformLabelID(elem);var next = elem.nextSibling || // elem 要素の次の隣接要素を取得します。
var w = create(wragLabel); //現在の要素を含めるために使用される 1 つの要素
for (var o in attrProp) { //新しい要素の属性を設定します
w.setAttribute(o, attrProp[o])
} >w.appendChild (elem);
next == document.body ? document.body.appendChild(w) : next.parentNode.insertBefore(w, next); // 含まれる要素をドキュメントに挿入します。 }
window ["Susa"]["wrag"] = wrag;

/*
* パラメータを HTML ID タグから DOM ノード参照に変換 //元の
*/
functiontransformLabelID(str ){
return !str ? false : $(str);

/*
* 単一の DOM ノードを削除します。または HTML ID タグ。 >window[ Susa ][remove ] = delete;

/*
* clone 関数は DOM 要素のコピーを返します。 // (オリジナル) パラメータはノード参照または HTML ID タグ値です。 )
*/
function clone(elem){
return transformLabelID(elem).cloneNode(true);
}
window[ Susa ][ clone ] = clone; 🎜>/*
* 時間バブリングを防ぐための汎用関数
*/
function stopBubble(e){
if (e && e.stopPropagation) { //パラメータが渡された場合、 w3c メソッド
e.stopPropagation();
}
else {
window.event.cancelBubble = true; //IE メソッド
}
}
window[ Susa ][ stopBubble ] = stopBubble;

/*
* ブラウザーのデフォルト動作を防止するための汎用関数
*/
function stopDefault(e){
if (e && e.preventDefault ) { / /W3C メソッド
e.preventDefault();
else {
window.event.returnValue = false; //IE メソッド
}
return
}
window["Susa"]["stopDefault"] = stopDefault;

/*
* 要素の実際の最終的な CSS スタイル属性値を取得する関数
* /
function getStyle(elem, name){
elem =transformLabelID(elem) //パラメータ elem は DOM 参照または
if (elem.style[name]) { //属性が存在し、 style[ ] の場合、それは設定されています (そして現在です)
return elem.style[name];
}
else
if (elem.currentStyle) { // それ以外の場合、 IE のメソッドを使用してみます
return elem.currentStyle[name];
}
else
if (document.defaultView && document.defaultView.getComputedStyle) { //または W3C のメソッド (存在する場合)
//textAlign
name = name.replace(/([A-Z])/g, "-$1"); の代わりに、一般的な 'text-align' スタイル ルールを使用します。 ();
return document.defaultView.getComputedStyle(elem, null).getPropertyValue(name);

}
else {
return null; 🎜>window["Susa"][ getStyle ] = getStyle;

/*
*単語を Word 形式に変換する関数
*/
function Camelize(s) {
return s.replace(/-(w)/g, function(strMatch, p){
return p.toUpperCase();
});
}

/*
* 要素の CSS スタイルを設定します。パラメータはオブジェクト (オリジナル)
*/
function setStyle(elem, obj){
elem =transformLabelID(elem); ( var o in obj) { //obj パラメータのプロパティを調べます
elem.style[o] = obj[o] //CSS スタイルを設定します
}
}
window[ Susa ] [ setStyle ] = setStyle;

/*
* css 関数はゲッターとセッターとして使用でき、特定の要素の CSS スタイルを返します // (オリジナル)
*/
function css(elem, obj){
elem =transformLabelID(elem);
if (elem && (typeof obj == "string")) {
return getStyle(elem, obj); getStyle 関数を呼び出して、特定の CSS スタイルの値を取得します
}
else
if (typeof obj == "object") {
for (var o in obj) {
elem .style[o] = obj [o];
}
}
}
window[ Susa ][ css ] =

/*
* 2 つを結合しますオブジェクトを結合し、その結果をマージします。最初のオブジェクトに統合します。 //元の
*/
function mergeObj(obj1, obj2){
if ((typeof obj1 == "Object") && (typeof obj2 == " Object"))
return false;
for (var o in obj2) {
obj1[o] = obj2[o];
}
return obj1;
}
window[" Susa"]["mergeObj"] = mergeObj;

/*
* いくつかの関数参照を渡し、エラーのない最も近い関数を取得して実行します (オリジナル)
*/
function $try(){
for (var i = 0; i try {
return argument[i](); // パラメータ関数を実行
}
catch (例) {
Continue;
}
}
window["Susa"]["$try"] = $try; >