DOM-1 모범 사례 준수

네임스페이스 재사용을 위한 계획

    (function() {
      function $(id) {
        return document.getElementById(id);
      }
      function alertNodeName(id) {
        alert($(id).nodeName);
      }
      window.myNamespace = {};
      window.myNamespace.showNodeName = alertNodeName;
    })();

myNamespace.showNodeName(test)

재사용 가능한 객체 이벤트 단순화

(function() {
    !window.A && (window['A'] = {});
    function $() {
      var elements = [], len = arguments.length;
      for(var i = 0; i < len; i++) {
        var element = arguments[i];
        if(typeof element === 'string') {
            element = document.getElementById(element);
        }
        if(len === 1) {
            return element;
        } else {
            elements.push(element);
        }
      } 
      return elements;   
    };
    // 
    A.isCompatible = function(other) {
      if(other === false || !Array.prototype.push || !Object.hasOwnProperty 
        || !document.createElement || !document.getElementsByTagName) {
        return false;
      }
      return true;
    };
    A.$ = $;
    A.addEvent = function(node, type, listener) {
      if(!(node = $(node))) return false;
      if(node.addEventListener) {
        node.addEventListener(type, listener, false);
        return true;
      } else if(node.attachEvent) {
        node.attachEvent('on' + type, listener);
        return true;
      }
      return false;
    };
    A.removeEvent = function(node, type, listener) {
      if(!(node = $(node))) return false;
      if(node.removeEventListener) {
        node.removeEventListener(type, listener, false);
        return true;
      } else if(node.attachEvent) {
        node.detachEvent('on' + type, listener);
        return true;
      }
      return false;
    };
    A.getByClass = function(className, tag, parent) {
      parent = parent || document;
      tag = tag || '*';
      if(!(parent = $(parent))) return false;
      var allTags = (tag === '*' && parent.all) ? parent.all : parent.getElementsByTagName(tag);
      var matchingElements = [];
      className = className.replace(/\-/g, '\\-');
      var regex = new RegExp('(^|\\s)' + className + '(\\s|$)');
      var element;
      for(var i = 0, len = allTags.length; i < len; i++) {
        element = allTags[i];
        if(regex.test(element.className)) {
            matchingElements.push(element);
        }
      }
      return matchingElements;
    };
    A.toggleDisplay = function(node, value) {
      if(!(node = $(node))) return false;
      var display = node.style.display;
      node.style.display = (display === 'none') ? (value || '') : 'none';
      return true;
    };
    A.insertAfter = function(changeNode, referenceNode) {
      if(!(changeNode = $(changeNode))) return false;
      if(!(referenceNode = $(referenceNode))) return false;
      return referenceNode.parentNode.insertBefore(changeNode, referenceNode.nextSibling);
    };
    A.removeChild = function(parent) {
      if(!(parent = $(parent))) return false;
      while(parent.firstChild) {
        parent.firstChild.parentNode.removeChild(parent.firstChild);
      }
      return parent;
    };
    A.prependChild = function(parent, newChild) {
      if(!(parent = $(parent))) return false;
      if(!(newChld = $(newChld))) return false;
      if(parent.firstChild) {
        parent.insertBefore(newChild, parent.firstChild);
      } else {
        parent.appendChild(newChild);
      }
      return parent;
    };
    A.create = function(tag, html) {
      if(!tag) return false;  
      html = html || '';
      var node = document.createElement(tag);
      node.innerHTML = html;
      return node; 
    };
  })();

javascript에서 흔히 볼 수 있는 함정

대소문자를 구분한다

싱글 따옴표와 더블 따옴표

일반적으로 내장 협조 전의를 사용한다.그러나 재행 내의 큰따옴표는 반드시 뜻을 바꾸어야 한다는 것을 주의해라

줄 바꾸기: js에서 문자열을 연결할 때

문자열 내에 백슬래시 이스케이프를 사용합니다

여러 문자열을 더하기 기호로 연결합니다

재부팅을 지원하지 않고 직접 교체하는 이른바 재부팅이란 프로그래밍 언어가 전달하는 함수나 방법의 매개 변수의 유형과 개수에 따라 서로 다른 함수나 방법을 구별하는 능력을 말한다

작용역 해석 및 패키지 닫기

작용역 해석에서 경로가 형성되고 작용역 체인으로 묘사한다

폐쇄는 작용역과 관련된 개념으로 내부 함수가 외부 함수가 실행되고 종료된 후에도 그 외부 함수의 속성에 접근할 수 있음을 말한다

function initAnchor() {
    for(var i = 0; i < 3; i++) {
      A.addEvent('anchor' + i, 'click', function() {
        alert('My id is anchor' + i);
      });
    }
  }
  A.addEvent(window, 'load', initAnchor);

상기에서 클릭 이벤트 감청기가 호출되었을 때 내부 작용역에서 i를 찾지 못했습니다.외부 역할 영역에서 찾기;외부 i의 값은 3이기 때문에 이런 문제는 정의된 후 바로 실행되지 않는 사건에서 자주 발생한다

  function initAnchor() {
    for(var i = 0; i < 3; i++) {
      registerListener(i);
    }
  }
  function registerListener(i) {
    A.addEvent('anchor' + i, 'click', function() {
      alert('My id is anchor' + i);
    });
  }
  A.addEvent(window, 'load', initAnchor);

상기에서 클릭의 감청기의 외부 환경은registerListener 함수로 변했다. 이 함수는 모든 실례(이 함수를 호출할 때마다 정확한 변수 작용역을 유지하기 위해 이 함수의 사본을 생성한다)의 내부 작용역에서 i

function initAnchor() {
    for(var i = 0; i < 3; i++) {
      (function() {
        A.addEvent('anchor' + i, 'click', function() {
          alert('My id is anchor' + i);
        });
      })(i);
    }
  }

function initAnchor() {
    for(var i = 0; i < 3; i++) {
      (function(i) {
        A.addEvent('anchor' + i, 'click', function() {
          alert('My id is anchor' + i);
        });
      })(i);
    }
  }

그래서 상례에서 두 번째 예는 익명 함수에서 흔히 볼 수 있는 모든 실례가 i를 유지합니다.첫 번째는 여전히 외부의 i를 찾습니다.

교체 대상은 자주 사용된다if(!all.hasOwnProperty(i)) continue;