JS 코드를 유지하는 세 가지 방법

이번에는 JS 코드를 유지하는 세 가지 방법을 알려드리겠습니다. JS 코드를 유지 관리할 때 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

유지관리. 다른 언어에서는 개발 작업을 수행하기 위해 기존 개체를 라이브러리로 사용하는 것이 좋습니다. JS에서는 기존 객체를 무엇이든 할 수 있는 배경으로 취급할 수 있습니다. 기존 JS 객체를 유틸리티 라이브러리처럼 처리해야 합니다.

덮어쓰기 방법 없음

새 방법 없음

삭제 방법 없음

프로젝트의 유일한 개발자인 경우 이러한 종류의 수정은 자신이 알고 있고 이에 대한 기대가 있기 때문에 처리하기 쉽습니다. 팀과 함께 대규모 프로젝트를 진행하는 경우 이러한 변경으로 인해 많은 혼란이 발생하고 많은 시간이 낭비될 수 있습니다.

메서드를 재정의하지 않음

JS에서 최악의 방법은 자신이 소유하지 않은 개체의 메서드를 재정의하는 것입니다. JS에서 기존 메서드를 재정의하는 것은 매우 쉽습니다. 신성한 document.getElementById() 메서드도 예외는 아니며 쉽게 재정의될 수 있습니다. 아마도 다음과 유사한 패턴을 본 적이 있을 것입니다(이 접근법은 "함수 하이재킹"이라고도 함).

// 不好的写法document._originalGetElementById = document.getElementById;document.getElementById = function (id) {  if (id === 'window') {    return window;
  } else {    return document._originalGetElementById(id);
  }
}

위의 예에서 기본 메서드 document.getElementById()의 "포인터"는 document._originalGetElementById에 저장됩니다. 후속 사용. 그런 다음 document.getElementById()가 새 메서드로 재정의됩니다. 새 메서드는 원래 메서드를 호출하는 경우도 있지만 그렇지 않은 경우도 있습니다. 이 "재정의 및 안정적인 성능 저하" 패턴은 최소한 기본 메서드를 재정의하는 것만큼 나쁘고 어쩌면 더 나쁠 수도 있습니다. 왜냐하면 document.getElementById()가 예상대로 작동할 때도 있고 그렇지 않을 때도 있기 때문입니다. 대규모 프로젝트에서는 이러한 문제로 인해 많은 시간과 비용이 낭비될 수 있습니다.

새로운 메소드 없음

JS의 기존 객체에 메소드를 추가하는 것은 매우 간단합니다. 함수를 생성하고 이를 기존 개체의 속성에 할당하여 메서드로 만들면 됩니다. 이 접근 방식은 모든 유형의 개체를 수정할 수 있습니다.

// 不好的写法 - 在
DOM对象
上增加了方法document.sayImAwesome = function () {
  alert("You're awesome.");
}// 不好的写法 - 在原生对象上增加了方法Array.prototype.reverseSort = function () {  return this.sort().reverse();
}// 不好的写法 - 在库对象上增加了方法YUI.doSomething = function () {  // 代码}

객체에 메서드를 추가하는 것을 방지하는 것은 거의 불가능합니다(ES5에는 이를 수행하는 세 가지 새로운 메서드가 있으며 나중에 소개할 예정입니다). 자신이 소유하지 않은 개체에 메서드를 추가하는 것은 큰 문제이며 이름 지정 충돌로 이어질 수 있습니다. 객체에 현재 메소드가 없다고 해서 앞으로도 메소드가 없을 것이라는 의미는 아닙니다. 더 나쁜 점은 네이티브 메서드가 나중에 메서드와 일관되지 않게 작동하면 코드 유지 관리의 악몽에 빠지게 된다는 것입니다.

우리는 Prototype JS 클래스 라이브러리의 개발 역사에서 배워야 합니다. 프로토타입은 다양한 JS 객체를 수정하는 관점에서 매우 유명합니다. DOM과 네이티브 객체에 매우 자유롭게 메소드를 추가합니다. 실제로 대부분의 라이브러리 코드는 직접 객체 생성이 아닌 기존 객체를 확장하는 것으로 정의됩니다. Prototype 개발자는 라이브러리를 JS의 보완물로 간주합니다. 1.6 미만 버전에서는 Prototype이 document.getElementsByClassName() 메서드를 구현합니다. 아마도 이 방법은 HTML5에 공식적으로 정의되어 있고 Prototype의 사용을 표준화했기 때문에 알고 계실 것입니다.

Prototype의 document.getElementsByClassName() 메서드는 지정된 CSS 클래스 이름을 가진 요소가 포함된 배열을 반환합니다. Prototype은 또한 배열을 반복하고 각 요소에 대해 함수를 실행하는 Array.prototype.each() 메서드를 배열에 추가합니다. 이를 통해 개발자는 다음과 같은 코드를 작성할 수 있습니다.

document.getElementsByClassName('selected').each(doSomething);

HTML5가 이 방법을 표준화하고 브라우저가 이를 기본적으로 구현하기 시작할 때까지 코드는 문제가 없습니다. Prototype 팀은 네이티브 document.getElementsByClassName()이 출시될 것을 알았을 때 다음과 같은 몇 가지 방어 코드를 추가했습니다.

if (!document.getElementsByClassName) {  document.getElementsByClassName = function (classes) {    // 非原生实现
  };
}

그래서 Prototype은 존재하지 않는 경우 document.getElementsByClassName()을 정의합니다. 문제가 해결된 것처럼 보이지만 또 다른 중요한 사실이 있습니다. HTML5 document.getElementsByClassName()은 배열을 반환하지 않으므로 Each() 메서드가 전혀 존재하지 않습니다. 기본 DOM 메소드는 NodeList라는 특수 컬렉션 유형을 사용합니다. document.getElementsByClassName()은 다른 DOM 메서드 호출과 일치하는 NodeList를 반환합니다.

document.getElementsByClassName() 메서드가 브라우저에서 기본적으로 구현되는 경우 NodeList에는 Each() 메서드가 없기 때문에 기본이든 Prototype에서 추가한 Each() 메서드이든 JS 오류가 발생합니다. 실행 중. 최종 결과는 Prototype 사용자가 클래스 라이브러리 코드를 업그레이드할 뿐만 아니라 자신의 코드도 수정해야 한다는 것입니다. 이는 실제로 유지 관리가 악몽입니다.

从Prototype的错误中可以学到，你不可能精确预测JS将来会如何变化。标准已经进化了，它们经常会从诸如Prototype这样的库代码中获得一些线索来决定下一代标准的新功能。事实上，原生的Array.prototype.forEach()方法在ECMAScript5有定义，它与Prototype的each()方法行为非常类似。问题是你不知道官方的功能与原生会有什么样的不同，甚至是微小的区别也将导致很大的问题。

大多数JS库代码有一个插件机制，允许为代码库安全地新增一些功能。如果想修改，最佳最可维护的方式是创建一个插件。

不删除方法

删除JS方法和新增方法一样简单。当然，覆盖一个方法也是删除已存在的方法的一种方式。最简单的删除一个方法的方式就是给对应的名字赋值为null。

// 不好的写法 - 删除了DOM方法document.getElementById = null;

将一个方法设置为null，不管它以前是怎么定义的，现在它已经不能被调用到了。如果方法是在对象的实例上定义的（相对于对象的原型而言），也可以使用delete操作符来删除。

var person = {  name: 'Nicholas'};delete person.name;console.log(person.name); // undefined

上例中，从person对象中删除了name属性。delete操作符只能对实例的属性和方法起作用。如果在prototype的属性或方法上使用delete是不起作用的。例如：

// 不影响delete document.getElementById;console.log(document.getElementById('myelement')); // 仍然能工作

因为document.getElementById()是原型上的一个方法，使用delete是无法删除的。但是，仍然可以用对其赋值为null的方式来阻止被调用。

无需赘述，删除一个已存在对象的方法是糟糕的实践。不仅有依赖那个方法的开发者存在，而且使用该方法的代码有可能已经存在了。删除一个在用的方法会导致运行时错误。如果你的团队不应该使用某个方法，将其标识为“废弃”，可以用文档或者用静态代码分析器。删除一个方法绝对应该是最后的选择。

反之，不删除你拥有对象的方法实际上是比较好的实践。从库代码或原生对象上删除方法是非常难的事情，因为第三方代码正依赖于这些功能。在很多案例中，库代码和浏览器都会将有bug或不完整的方法保留很长一段时间，因为删除它们以后会在数不胜数的网站上导致错误。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

web开发中如何避免空比较

为什么web开发中需要避免使用全局变量

위 내용은 JS 코드를 유지하는 세 가지 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!