>  기사  >  웹 프론트엔드  >  자바스크립트에서 퍼블릭 메소드 추출하는 방법(스킬 공유)

자바스크립트에서 퍼블릭 메소드 추출하는 방법(스킬 공유)

PHPz
PHPz원래의
2023-04-06 09:06:40761검색

프론트엔드 개발이 지속적으로 발전하면서 Javascript는 필연적이고 필요한 기술이 되었습니다. Javascript 개발에서 우리는 쉽게 재사용하기 위해 일부 메소드를 캡슐화해야 하는 상황에 자주 직면합니다. 이러한 캡슐화된 공개 메서드는 코드 중복을 줄이고, 개발 효율성을 향상시키며, 코드 유지 관리를 더욱 편리하게 만들 수 있습니다. 그렇다면 이러한 공개 메소드를 추출하는 방법은 무엇입니까? 일반적으로 사용되는 몇 가지 메소드 추출 기술을 살펴보겠습니다.

1. 캡슐화 기능

요소 획득, 데이터 유형 결정 등 일반적으로 사용되는 일부 방법을 함수로 캡슐화합니다. 이렇게 하면 반복적인 코드를 작성하지 않고도 개발 중에 이 함수를 직접 호출할 수 있습니다.

예:

// 요소 가져오기
function $(selector) {
return document.querySelector(selector);
}

// 데이터 유형 결정
function typeOf(obj) {
return Object.prototype .toString.call(obj).slice(8,-1).toLowerCase();
}

2. 프로토타입 체인 캡슐화 방법

일부 공용 메소드를 객체의 프로토타입 체인에 캡슐화하면 코드 중복이 줄어들고 더 편리해집니다. 부르다.

예:

// 공용 생성자
function Animal(name,age) {
this.name = name;
this.age = age;
}

// 생성자의 프로토타입 체인에 메서드를 추가합니다.
Animal.prototype.sayHello = function() {
console.log(你好,我是${this.name},我今年${this.age}岁了。);
};

// 인스턴스에서 직접 호출
let dog = new Animal("小黄",3);
dog.sayHello ( ; 가독성과 유지관리 용이성.

예:

// 모듈 캡슐화

let Utils = (function() {

// 비공개 메서드 정의

function add(num1,num2) {

return num1 + num2;

}

function minus(num1,num2) {
return num1 - num2;

}

// 공개 메소드 노출

return {

add,
minus
}

})();

//

console.log(Utils.add(2,3)) 호출 // 출력: 5
console .log(Utils.minus(5,2)); // 출력: 3

4. 도구 라이브러리

일반적으로 사용되는 일부 공용 함수는 lodash 및 jQuery와 같은 도구 라이브러리에 캡슐화될 수 있습니다. 이러한 도구 라이브러리는 개발을 보다 효율적으로 수행할 수 있는 몇 가지 편리한 방법을 제공합니다.

예:

// lodash에서 flatMap 메서드 사용

let arr = [[1],[2,3],[4]];

let newArr = _.FlatMap(arr);

console.log ( newArr); // 출력: [1, 2, 3, 4]


요약

위는 Javascript에서 공개 메소드를 추출하는 몇 가지 기술입니다. 캡슐화된 공개 메소드는 코드 중복을 크게 줄이고 개발 효율성을 향상시킬 수 있습니다. 편리합니다. 코드를 적절하게 유지하세요. 개발 중에 추출할 수 있는 일부 공개 메소드를 발견하면 위의 메소드 추출 기술을 사용해 코드를 더욱 표준화되고 간결하며 유지 관리하기 쉽게 만들 수도 있습니다.

위 내용은 자바스크립트에서 퍼블릭 메소드 추출하는 방법(스킬 공유)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.