JS 캡슐화 플러그인 케이스

이번에는 JS encapsulation 플러그인 사례를 가져오겠습니다. JS encapsulation 플러그인의 주의사항은 무엇인가요?

프로젝트 문제로 인해 1년 넘게 js에서 플러그인을 작성하지 않았습니다. 프로젝트가 너무 성숙해서 주로 패키지된 기능 플러그인을 사용합니다. 기분이 너무 우울해요... 지난 이틀 동안 통계 차트와 할인 차트를 그릴 수 있는 canvas 플러그인을 작성하는 시간을 갖고 싶어서 온라인에 접속하여 패키징 방법을 배웠습니다. 이전에 소스 코드를 많이 읽었지만 이해하더라도 여전히 엉뚱한 생각인 것 같습니다...

캡슐화란 무엇인가요?

내 이해는 함수를 별도의 컴포넌트로 만드는 것은 만두를 만드는 것과 같습니다. 예전에는 만두를 만들려면 먼저 밀가루를 사용하여 만두소를 만든 다음 손으로 만두를 만들어야 했습니다. 기계를 만드는 과정은 기계 내부이지만 각 단계는 만두를 직접 만드는 것과 동일하지만 사실 지금 해야 할 일은 재료를 넣는 일뿐입니다. 여기 기계는 패키지 플러그인이고 원자재는 통과하려는 매개변수입니다

왜 js 함수를 플러그인으로 캡슐화해야 합니까? 다음과 같은 점이 있는 것 같아요

 1. 코드 재사용 촉진

 2. 동일한 기능을 가진 구성 요소 간의 간섭을 피하십시오. 범위에 문제가 있을 수 있습니다

  3. 유지 관리가 쉽고 프로젝트 축적에 도움이 됩니다

 4. 맨날 복사해서 붙여넣는게 너무 적다고 생각하지 않나요...

인터넷에서 본 캡슐화에는 두 가지 종류가 있는 것 같습니다. 하나는 js의 기본 캡슐화이고 다른 하나는 jquery의 캡슐화입니다. 먼저 네이티브 캡슐화에 대해 이야기하겠습니다.

캡슐화할 때 변수 충돌을 방지하기 위해 js 코드를 자체 실행 함수 에 넣을 것입니다. rreee

그런 다음

constructor

(function(){
  ......
  ......
}()}

를 만듭니다. 이 함수를 전역적으로 호출할 수 있도록 외부에 노출시켜주세요

(function(){
  var demo = function(options){
    ......
  }
}())

사실, 이제는 직접 호출할 수 있고, 캡슐화되어 있지만 어떤 기능도 구현하지 않습니다

(function(){
  var demo = function(options){
    ......
  }
  window.demo = demo;
}())

아니면

var ss = new demo({
  x:1,
  y:2
})；

그렇다면 매개변수를 전달하는 방법은 무엇입니까? 우리 플러그인 중 하나에는 일반적으로 필수 매개변수나 선택 매개변수가 있습니다. 제 생각에는 선택적 매개변수는 플러그인에서 제공하는 기본값일 뿐입니다. 우리가 전달하는 매개변수는 플러그인의 기본 매개변수를 재정의하며, $.extend({})

new demo({
  x:2,
  y:3
})；

로 재정의할 수 있습니다. 그런 다음 생성자를 초기화할 때 몇 가지 작업을 수행할 수 있습니다

(function(){
  var demo = function(options){
    this.options = $.extend({
      "x" : 1,
      "y" : 2,
      "z" : 3
    },options)
  }
  window.demo = demo;
}())

질문이 있습니다. 확장은 jquery에만 존재합니까? js

object에 대한 대안이 있나요? 나중에 확인해보겠습니다...

또 한 가지 언급해야 할 점은 js를 캡슐화할 때 성능뿐만 아니라 확장성, 호환성 등 모든 것을 고려해야 한다는 것입니다. 필요하지 않으면 캡슐화할 필요가 없습니다... 선택적으로 하세요.

인터넷에는 수많은 플러그인이 완성되어 있고 그 기능은 매우 강력합니다. 하지만 때때로 우리는 큰 플러그인의 일부만 사용하기 때문에 자신에게 맞게 수정해야 합니다. 일부 프로젝트의 스타일은 현재 플러그인 스타일과 다르기 때문에 자신의 프로젝트에 맞추는 것이 핵심입니다. 나는 당신이 이 기사를 읽는 방법을 마스터했다고 믿습니다. 더 흥미진진한 내용을 알고 싶다면 PHP 중국어 웹사이트의 다른 관련 기사를 주목해 보세요!

추천 자료:

Vuejs가 페이지 지역화를 작동하는 방법

webpack2+React 사용에 대한 자세한 설명

JQUERY는 현재 태그 이름을 통해 속성 값을 가져옵니다

위 내용은 JS 캡슐화 플러그인 케이스의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!