기본 페이지 1/2_javascript 기술로 JS 코드 기반 구축

백그라운드 프로그램에서는 작은따옴표를 필터링하므로, 어딘가에 이상한 공백이 있으면 작은따옴표를 의미하므로 설명합니다.
/**
* @author Super Sha
* QQ:770104121
* 이메일:supersha@foxmail.com
* All Rights Reserved!
*/
(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 < 인수.길이; i ) {
var elem = 인수[i]
if (typeof 인수[i] == "string") { / /유형 검사 수행
elem = document.getElementById(arguments[i]);
}
//말장난 의미: 문자열이 전달되고 매개변수가 하나만 있거나 DOM이 있는 경우 참조가 전달되면 둘 다 반환됩니다. DOM 노드 참조
if (arguments.length == 1) {
return elem
}
else {
elems.push(elem)
}
}
return elements;
}
window[ Susa ][ $ ] = $

/*
* 특정 요소 내의 하위 요소를 반환합니다. 또는 document
*/
function tag(type, elem){
elem = elem || document;
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;
}
}
//functionappendString(){
// 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)
false 반환
if (type == null || fn == null)
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
elem.attachEvent( 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)
false 반환

if (elem.removeEventListener) {//W3C 메서드
elem.removeEventListener(type, fn, false)
return true; else
if (elem.detachEvent) // IE 메서드
{
//node.detachEvent( on type, node[type fn])
elem.detachEvent( on type, fn);
return this;
}
}
window[ Susa ][ addEvent ] = addEvent;
window[ Susa ][ RemoveEvent ] = RemoveEvent

>* getElementsByClassName 메소드는 클래스의 모든 요소에 대한 특정 참조를 반환합니다. 태그 및 elem 매개변수는 선택 사항입니다.
*/
function getElementsByClassName(classname, tag, elem){
elem = elem ||
if ( elem != $(elem) || elem == null)
return false
//이 함수의 parent.all 사용법에 주의하세요. parent는 문서이며 IE와 Mozilia를 구별합니다.
if (!tag)
tag = "*"
var allTags = (tag == * && elem.all) ? elem.getElementsByTagName (태그);

//지정된 클래스 이름이 포함되어 있는지 감지하는 정규식 생성
classname = classname.replace(/-/g, "\-")
var regex = new RegExp("(^| \s*)" 클래스 이름 "(\s*|$)");

var matchElements = new Array()
var elem;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; > /*
* 토글디스플레이 메소드, HTML 태그의 가시성을 토글
*/
functionggleDisplay(id, value){
var elem = $(id)
if (elem ! = $(elem) || elem == null || elem.nodeType != 1)
return false
if (elem.style.display != "none") {
elem.style. display = "none";
else {
elem.style.display = value ||
}
return true; " 토글디스플레이"] = 토글디스플레이;

/*
* insertAfter 메소드
*/
function insertAfter(node, referenceNode){
if (노드 ​​!= $(노드 ) || 노드 == null)
false를 반환합니다.
if (referenceNode != $(referenceNode) || referenceNode == null)
false를 반환합니다.

referenceNode.parentNode를 반환합니다. insertBefore(node ​​, referenceNode.nextSibling); //insertBefore 메소드에 주의하세요.
} // null이면 parentNode 끝에 삽입하세요.
window[ Susa ][ insertAfter ] = insertAfter;

/*
* RemoveChildren 메소드, 현재 노드 아래의 모든 하위 요소 삭제
*/
function RemoveChildren(parent){
if (parent != $(node ) || parent == null)
return false; while (parent.firstChild) { //노드 삭제를 위한 루프
parent.firstChild.parentNode.removeChild(node.firstChild);
return parent ;
}
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 ]

/*
* 이 실행 환경을 조정하는 데 사용되는 바인딩Function() 메서드
*/
function adjustFunc(obj, func){ //func의 실행 환경을 obj로 조정
return function(){ / /익명 함수에 대한 참조 반환
func.apply(obj, 인수)
}
}
window[ Susa ][ adjustFunc ] = adjustFunc;

/*
* 표시 창의 너비와 높이를 가져오고 너비와 높이 속성이 포함된 객체를 반환합니다. 이는 공개되지 않으며 이 익명 함수 내에서 다른 메서드로만 호출할 수 있습니다. 🎜>*/
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 obj; }

/*
* 디버그 로그 객체
*/
function log(id){
id = id || SusaLogWindow
var logWindow; // 각
var createWindow = function() { //목록 노드를 동적으로 생성하는 데 사용되는 개인 메서드
if (!document.body) {
alert( document.body가 아직 사용되지 않은 개인 속성) ); return
}
var browerWindowSize = getBrowserWindowSize()
var top = ((browerWindowSize - 200) / 2) || 브라우저의 새 창 왼쪽 상단 모서리
var left = ((browerWindowSize.width - 200) / 2) || 0

logWindow = document.createElement( ul ); UL 요소를 동적으로 생성합니다.
logWindow.setAttribute( id , id );

logWindow.style.position = //UL 요소 수정
logWindow.style.top = top px; >logWindow.style.left = 왼쪽 px;

logWindow.style.width = 250px;
logWindow.style.height = 200px;
logWindow.style.overflow = 스크롤; 🎜>logWindow.style.padding = 0;
logWindow.style.margin = 0;
logWindow.style.border = 1px 단색 검정;
logWindow. 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.border = 0;
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 != undefine ) {
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)
}
}
창[ Susa ][ log ] = new log( ; 예, 여러 매개변수를 지원합니다 // (원본)
*/
function debug(){
for (var i = 0; i < 인수.길이; i ) {
if (typeof 인수[i] != function ) {
alert("Params는 함수 유형입니다!")
return;
}
var args = 인수 ;

(function(){ //실행 함수 프로세스를 캡슐화합니다
try {
for (var i = 0; i < args.length; i ) {
args[i ](); //실행 함수
}
}
catch (ex) {
Susa.log.writeRaw( Error: ex.message " Line: "
}
})( );
}
window[ Susa ][ debug ] = debug;

/*
* 노드 유형의 상수 선언 및 결정 //Original
*/
창 [ 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:
NOTATION_NODE: 12
};

/*
* 브라우저가 DOM 레벨을 지원하는 정도를 감지하는 함수(원본)
*/
function CheckDOMLevel(){
if (document .implementation) { //문서 지원 여부 확인 .implementation 속성
var DOM = ["Core", "XML", "HTML", "Views", "SytleSheets", "CSS", "CSS2", " 이벤트", "UIEvents", "MouseEvents", "MutationEvent", "HTMLEvents", "Range", "Traversal", "LS", "LS-Async", "Validation"];
var Level = [" 1.0", "2.0", "3.0"] ;

for (var i = 0; i < DOM.length; i ) {
for (var j = 0; j < Level. length; j ) {
if (document .implementation.hasFeature(DOM[i], Level[j])) { //document.implementation.hasFeature는 두 개의 매개변수를 허용합니다
Susa.log.writeRaw("
DOM" Level[j] " " DOM ​​[i] " 지원됩니다.
");
}
else { Susa.log.writeRaw("DOM" Level[j] " " DOM[i] " 지원되지 않습니다!
")
}
} } }
else {
Susa.log.write("

DOM 구현이 지원되지 않습니다!

"); } } window[ Susa ][ CheckDOMLevel ] = CheckDOMLevel;
/*
* Get and 요소 속성의 값을 설정하면
*/
function attr(elem, name, value){
if (!name || name.constructor != String)를 호출하여 getter를 가져오고 setter를 설정할 수 있습니다. )
return ;

//이름이 이상하게 지정되었는지 확인
name = {
for : htmlFor ,
class : className
}[name] || 🎜>name;

if (typeof value != undefine ) {
elem[name] = value; //먼저 단축키를 사용하세요.
if (elem.setAttribute) { //가능하다면, use setAttribute
elem.setAttribute( name, value);
}
}
return elem[name] || elem.getAttribute(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 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 ][ 전 ]

/*
* 하위 요소를 다른 요소에 추가합니다. elem은 HTML 태그가 포함된 문자열이거나 DOM 요소 노드에 대한 참조일 수 있습니다. //(원본 참조)
*/
function add(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){ //앞 및 추가 함수의 보조 함수//(원본 참조)
var r = [] ;
if (elem && elem. constructor == String) { //매개변수가 문자열인 경우
var p = create("p")
p.innerHTML = elem
(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")
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;
}
return r;
}

/*
* DOM 요소 내의 모든 콘텐츠를 삭제합니다. 매개변수는 DOM 노드 참조일 수 있습니다. 또는 HTML ID 태그
*/
function 비어 있음( elem){
elem = 변환LabelID(elem)
while (elem.firstChild) {
elem.removeChild(elem.firstChild) ;
}
}
window["Susa "][ 비어 있음 ] = 비어 있음

/*
* DOM 요소를 가져오고 설정할 수 있는 html 함수입니다. DOM 요소에 대한 문자열 또는 참조 // (원본)
*/
function html(parent, elem){
parent =TransformLabelID(parent)
if (elem && $(elem) ) == elem) {
parent.innerHTML = elem.innerHTML;
부모 반환
}
else {
return elem && elem.constructor == String ? : parent.innerHTML;
}
}
window["Susa"]["html"] = html;

/*
* 텍스트 내용을 가져오는 일반 함수 요소 가져오기 및 설정을 모두 사용할 수 있습니다.
*/
function text (e){
e = 변환LabelID(e)
if (arguments[1]) {
e. innerHTML = 인수[1];
}
else {
var t = "";
e = e.childNodes || e; 그렇지 않으면 배열
for (var j = 0; j < e.length; j ) {
t = e[j].nodeType != 1 ? e[j]로 간주됩니다. nodeValue : text(e[j]); //텍스트 함수를 재귀적으로 호출합니다.
}
return t
}
}
window[ Susa ][ text ] = text; >
/*
* innerHTML 및 innerText와 유사한 externalHTML 및 externalText 메소드 // Original
*/
function externalText(elem, t){
elem =TransformLabelID(elem)
//DOM 노드인지 텍스트 문자열인지 확인
if (t) {
var el = t.constructor == String ? document.createTextNode(t) :
elem.parentNode; .insertBefore(el, elem); //현재 요소 앞에
elem.parentNode를 삽입합니다. RemoveChild(elem); //나중에 현재 노드를 삭제합니다.
else {
return text( elem); //두 번째 매개변수가 비어 있으면 현재 텍스트를 반환합니다.

}
function externalHTML(elem, h){
elem =TransformLabelID(elem); >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 = 생성 ("p");
p.appendChild(elem);
return p.innerHTML;
}
}
window["Susa"]["outerText"]
window[Susa]["outerHTML"] = externalHTML;

/*
* wrag는 현재 요소를 다른 요소로 래핑합니다. // 원본
*/
function wrag(elem, wragLabel, attrProp){
elem = 변환LabelID(elem)
var next = elem.nextSibling || document.body; //elem 요소의 다음 인접 요소를 가져옵니다. 없으면 body로 설정합니다.
var w = create(wragLabel); 현재 요소를 포함하는 데 사용되는 하나의 요소
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 노드 참조로 //원본
*/
function 변환LabelID(str ){
return !str ? false : $(str);
}

/*
* 단일 DOM 노드를 삭제합니다. 또는 HTML ID 태그입니다. // (원본)
*/
function delete(elem){
transformLabelID(elem).parentNode.removeChild(transformLabelID(elem))
window[ Susa ][ 제거 ] = 제거;

/*
* 복제 함수는 DOM 요소의 복사본을 반환합니다. 매개변수는 노드 참조 또는 HTML ID 태그 값일 수 있습니다. )
*/
function clone(elem){
returnTransformLabelID(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 false; 🎜>}
window["Susa"]["stopDefault"] = stopDefault;

/*
* 요소의 실제 및 최종 CSS 스타일 속성 값을 가져오는 함수
* /
function getStyle(elem, name){
elem =TransformLabelID(elem); //매개변수 elem은 DOM 참조일 수 있습니다.
if (elem.style[name]) { // 속성이 존재하고 스타일[ ]이면 설정되었으며 현재 상태입니다.
return elem.style[name]
}
else
if (elem.currentStyle) { // 그렇지 않으면, IE의 메소드를 사용해 보세요
return elem.currentStyle[name];
}
else
if (document.defaultView && document.defaultView.getCompulatedStyle) { //또는 W3C의 메소드(존재하는 경우)
//textAlign
name = name.replace(/([A-Z])/g, "-$1"); 대신 일반 'text-align' 스타일 규칙을 사용합니다. ();
return document.defaultView.getCompulatedStyle(elem, null).getPropertyValue(name)

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

/*
*단어-단어를 단어 형식으로 변환하는 함수
*/
function camelize(s) {
return s.replace(/-(w)/g, function(strMatch, p){
return p.toUpperCase();
})
}

/*
* 요소의 CSS 스타일을 설정합니다. 매개변수는 객체입니다(원본)
*/
function setStyle(elem, obj){
elem =TransformLabelID(elem)
for; ( var o in obj) { //obj 매개변수의 속성을 탐색합니다.
elem.style[o] = obj[o] //Css 스타일 설정
}
}
window[ Susa ] [ setStyle ] = setStyle;

/*
* getter 및 setter일 수 있는 CSS 함수는 특정 요소의 CSS 스타일을 반환합니다. // (원본)
*/
function css(elem, obj){
elem = 변환LabelID(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 ] = 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 < 인수.길이; i ) {
try {
return 인수[i]() //매개변수 함수 실행
}
catch(ex) {
continue;
}
}
window["Susa"]["$try"] = $try; >