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
})；

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

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

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

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

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

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

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