JS 는 디자인 모델 중의 단일 모델 (Singleton) 을 바탕 으로 패 키 징 에 대한 데이터 삭제 및 검사 기능 을 실현 합 니 다.

본 고 는 JS 가 디자인 모델 중의 단일 모델 (Singleton) 을 바탕 으로 패 키 징 을 실현 하여 데이터 에 대한 삭제 와 검사 기능 을 설명 했다.여러분 께 참고 하도록 공유 하 겠 습 니 다. 구체 적 으로 는 다음 과 같 습 니 다.
단일 모드
단일 모드 의 핵심 구조 에는 단일 사례 라 고 불 리 는 특수 클래스 만 포함 되 어 있다.단일 모드 를 통 해 시스템 의 클래스 가 하나의 인 스 턴 스 만 있 음 을 보증 할 수 있 습 니 다.
단일 모델 의 최초 정 의 는 (에디슨 비 슬 리, 1994) 에 나 타 났 다. "하나의 인 스 턴 스 만 있 고 전체 방문 점 을 제공 합 니 다."
단일 모드 정의: "하나의 클래스 가 있 고 하나의 인 스 턴 스 만 있 으 며 자체 적 으로 전체 시스템 에 제공 합 니 다."

var Singleton = (function(){
 SingletonClass() {
 }
 var singleton = null;
 return {
  getInstance: function() {
   if (singleton == null) {
  singleton = new singletonClass();
   } else {
  return singleton;
   }
  }
 }
})();
Singleton.getIntance();

전단 에 서 는 인터페이스 와 관련 된 추가 삭제 와 비동기 작업 을 자주 사용한다.예 를 들 어, 내 가 데이터 목록 을 조작 할 때, 항상 삭제 기능 을 수정 하 는 것 이 빠 질 수 없다.어떤 방안 은 동기 화 (페이지 새로 고침) 로 사용자 가 비동기 화 를 잘 체험 하 는 것 이다.
코드 는 다음 과 같다.
기능 을 늘리다

$(".add").click(function(){
  $.ajax({
  type: "post"
    dataType:"json",
    url: "//www.jb51.net/",
    data: {name:"csdn  ",dir:"web  "},
    success: function( result ){
    if ( result.status ) { alert("    ！") } else { alert("    ") }
  },
    error: function(){
    alert("      ，             ");
  }
  });
});

삭제 기능

$(".del").click(function(){
  $.ajax({
  type: "post"
    dataType:"json",
    url: "//www.jb51.net/",
    data: {id:"1"},
    success: function( result ){
    if ( result.status ) { alert("    ！") } else { alert("    ") }
  },
    error: function(){
    alert("      ，             ");
  }
  });
});

위의 두 코드 세 션 은 기능 을 추가 하고 삭제 하 는 JS 코드 를 간단하게 설명 했다.어떤 학생 들 은 공통점 이 있다 는 것 을 발견 했다. 즉, ajax 요청 중 일 부 는 똑 같 고 삭제 기능 이 다른 곳 에서 도 사용 된다 면?그럼 다른 데 도 코드 같은 코드 를 써 야 돼 요.너무 불편 해 요.
우리 개선 합 시다.

var SingletonCRUD = (function(){
 SingletonClass() {}
 SingletonClass.prototype = {
   constructor: SingletonClass,
   add: function( data ) {
  $.ajax({
   type: "post"
     dataType:"json",
     url: "//www.jb51.net/",
     data: data,
     success: function( result ){
    if ( result.status ) { alert("    ！") } else { alert("    ") }
   },
     error: function(){
    alert("      ，             ");
   }
    });
   }，
  remove: function( data ) {
  $.ajax({
   type: "post"
     dataType:"json",
     url: "//www.jb51.net/",
     data: data,
     success: function( result ){
    if ( result.status ) { alert("    ！") } else { alert("    ") }
   },
     error: function(){
    alert("      ，             ");
   }
    });
   }
 }
 var singleton = null;
 return {
  getInstance: function() {
   if (singleton == null) {
  singleton = new singletonClass();
   } else {
  return singleton;
   }
  }
 }
})();
var curd = SingletonCRUD.getIntance();
$(".add").click(function(){
  var data = {"name":"name"};
  curd.add( data );
});
$(".del").click(function(){
  var data = {"id": 1};
  curd.remove( data );
});

항상 Singleton 인 스 턴 스 를 사용 하여 도구 류 를 만 듭 니 다.
디자인 모델 의 장점 을 사용: 결합 을 풀 고 가 독성 이 강 하 며 코드 구조 가 뚜렷 하 다.
위의 작은 예 를 통 해 이벤트 에서 가 져 온 데이터 (click 의 이벤트 함수) 와 조작 데이터 (ajax 요청) 를 분리 합 니 다.
단일 모드 에 대한 최 적 화 된 코드 를 통 해:

var SingletonCRUD = (function(){
 SingletonClass() {}
 SingletonClass.prototype = {
   constructor: SingletonClass,
   ajax: function(url, data success ){
  $.ajax({
   type: "post"
     dataType:"json",
     url: url,
     data: data,
     success: success,
     error: function(){
    alert("      ，             ");
   }
    });
   },
   add: function( data ) {
  this.ajax("//www.jb51.net/", data, function( result ){
    if ( result.status ) { alert("    ！") } else { alert("    ") }
  });
   }，
  remove: function( data ) {
  this.ajax("//www.jb51.net/", data, function( result ){
    if ( result.status ) { alert("    ！") } else { alert("    ") }
  });
   }
 }
 var singleton = null;
 return {
  getInstance: function() {
   if (singleton == null) {
  singleton = new singletonClass();
   } else {
  return singleton;
   }
  }
 }
})();

SingleClass 의 ajax 방법 은 하나의 외관 모델 (Facade) 에 해당 하 며 내부 디 테 일 을 숨 기 고 외부 에 인 터 페 이 스 를 노출 하 는 것 입 니 다.
자 바스 크 립 트 와 관련 된 내용 은 본 사이트 의 주 제 를 볼 수 있 습 니 다.,,,,, 및《 자 바스 크 립 트 수학 연산 용법 총 결 》.
본 고 에서 말 한 것 이 여러분 의 자 바스 크 립 트 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.