js 플러그 인 으로 패키지 하 는 절차 방법

프로젝트 때문에 1 년 넘 게 일 했 지만 js 로 플러그 인 을 쓴 적 이 없습니다.프로젝트 가 너무 성숙 해서 평소에 봉 인 된 기능 플러그 인 을 사용 합 니 다.자신 이 너무 로 운 것 같 아 요.........................................................................................
봉 투 는 무엇 입 니까?
제 가 이해 하 는 것 은 하나의 기능 을 따로 구성 요 소 를 만 드 는 것 입 니 다.마치 만 두 를 만 드 는 것 과 같 습 니 다.예전 에 만 두 를 만 들 려 면 먼저 밀가루 로 만두 껍질 을 만 든 다음 에 만두 소 를 만 든 다음 에 만 두 를 만 드 는 것 입 니 다.그러나 지금 은 사람들 이 자동 으로 만 두 를 만 드 는 기 계 를 발 명 했 습 니 다.기계 안의 모든 절 차 는 당신 이 만 두 를 만 드 는 것 과 같 지만,하지만 지금 당신 이 해 야 할 일 은 딱 한 가지 입 니 다.원 료 를 넣 는 것 입 니 다.이 기 계 는 봉 인 된 플러그 인 이 고,원 료 는 당신 이 전달 하고 자 하 는 매개 변수 입 니 다.
왜 js 기능 을 플러그 인 으로 봉 합 니까?다음 과 같은 몇 가지 가 있 을 것 같 아 요.
1.코드 재 활용 에 편리 함
2.각 기능 구성 요소 의 간섭 을 피하 고 역할 영역 에 문제 가 있 을 수 있 습 니 다.
3.유지 하기 편리 하고 프로젝트 의 축적 에 도 유리 합 니 다.
4.계속 복사 붙 여 넣 기 가 낮 지 않 나 요.................................................
내 가 인터넷 에서 본 포장 은 두 가지 가 있 는 것 같다.하 나 는 js 의 원생 포장 이 고 하 나 는 jquery 의 포장 이다.이쪽 은 제 가 먼저 원생 포장 에 대해 말씀 드 리 겠 습 니 다.
우 리 는 패키지 할 때 js 코드 를 자체 실행 함수 에 넣 어서 변수 충돌 을 방지 할 수 있 습 니 다.

(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
});
그리고 전 참 은 어떻게 합 니까?우리 플러그 인 은 보통 필수 적 인 매개 변수 나 선택 할 수 있 는 매개 변수 가 있 습 니 다.제 가 보기 에는 선택 할 수 있 는 매개 변 수 는 플러그 인 에서 기본 값 을 주 었 을 뿐 입 니 다.우리 가 전 하 는 인 자 는 플러그 인의 기본 인 자 를 덮어 씁 니 다.$.extend({})로 덮어 쓸 수 있 습 니 다.

(function(){

  var demo = function(options){

    this.options = $.extend({

      "x" : 1,

      "y" : 2,

      "z" : 3

    },options)

  }

  window.demo = demo;

}()) 

그리고 구조 함 수 를 초기 화 할 때 작업 을 수행 할 수 있 습 니 다.

(function(){
  var demo = function(options){
    this.options = $.extend({
      "x" : "1",
      "y" : "2",
      "z" : "3"
    },options);
    this.init();
  };
  demo.prototype.init = function(){
    alert("x "+this.options.x+" y "+this.options.y+" z "+this.options.z);
  };
  window.demo = demo;
}());
new demo({
  "x" :"5",
  "y" :"4"
});
</script>

그렇게 됐어.아주 간단 한 패키지
 
제 게 의문 이 있 습 니 다.extend 는 jquery 일 뿐 입 니 다.js 대상 에 게 어떤 대체 방법 이 있 습 니까?좀 늦게 봐 요. 
그리고 제시 해 야 할 것 은 js 를 포장 할 때 우 리 는 주도면밀 하 게 고려 해 야 한 다 는 것 이다.예 를 들 어 그의 확장 성과 호환성,그리고 성능 이 어떤 지,그리고 필요 하지 않 은 것 은 포장 할 필요 가 없다.
현재 인터넷 에서 이미 완 성 된 플러그 인 은 셀 수 없 을 정도 로 많 고 기능 도 매우 강하 다.그러나 바로 이 점 이다.어떤 때 는 큰 플러그 인 을 우 리 는 아주 작은 부분 에 만 사용 할 때 가 있다.그러면 우리 자신 에 게 맞 는 것 으로 수정 해 야 한다.그리고 어떤 항목 의 스타일 은 현재 의 플러그 인 스타일 과 다 르 기 때문에 관건 은 자신의 프로젝트 에 맞 는 것 이다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

좋은 웹페이지 즐겨찾기