집 >웹 프론트엔드 >JS 튜토리얼 >싱글톤 캡슐화 추가, 삭제, 수정 및 쿼리

싱글톤 캡슐화 추가, 삭제, 수정 및 쿼리

php中世界最好的语言원래의: 2018-03-23 15:48:202175검색

이번에는 싱글톤 패키지 추가, 삭제, 수정, 확인에 대해 알려드리겠습니다. 싱글톤 패키지 추가, 삭제, 수정, 확인 시 주의사항은 무엇인가요?

이 문서의 예에서는 JS가 디자인 패턴에서 단일 사례 패턴(Singleton)을 기반으로 데이터의 추가, 삭제, 수정 및 확인을 캡슐화하는 기능을 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 사항은 다음과 같습니다.

단일 케이스 패턴

단일 케이스 패턴의 핵심 구조에는 싱글톤이라는 특수 클래스만 포함되어 있습니다. 싱글톤 패턴은 시스템의 클래스에 인스턴스가 하나만 있도록 보장할 수 있습니다. 싱글톤 패턴의 원래 정의는 "Design Patterns"(Addison Wesley, 1994)에 나와 있습니다. "클래스에 인스턴스가 하나만 있음을 보장하고 해당 클래스에 대한 액세스를 제공합니다. 전역 액세스 포인트입니다. "

싱글톤 패턴 정의: "

클래스에는 인스턴스가 하나만 있으며 인스턴스화되어 전체 시스템에 제공됩니다. "

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

프런트 엔드에서는 인터페이스 관련 항목을 사용하는 경우가 많습니다. 비동기 작업을 추가, 삭제, 수정 및 확인합니다. 예를 들어, 저는 데이터 목록을 조작할 때 수정, 삭제 기능을 자주 추가합니다. 일부 솔루션은 동기식(페이지 새로 고침)을 사용하며 비동기식을 사용하면 사용자 경험이 더 좋습니다.

코드는 다음과 같습니다Add function

$(".add").click(function(){
  $.ajax({
  type: "post"
    dataType:"json",
    url: "http://www.jb51.net/",
    data: {name:"csdn博客",dir:"web前端"},
    success: function( result ){
    if ( result.status ) { alert("新增成功！") } else { alert("新增失败") }
  },
    error: function(){
    alert("新增出现异步，请得新增加或联系技术管理员");
  }
  });
});

Delete function

$(".del").click(function(){
  $.ajax({
  type: "post"
    dataType:"json",
    url: "http://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: "http://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: "http://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 );
});

저는 툴 도구 클래스를 만들 때 싱글톤 인스턴스를 자주 사용합니다.

디자인 패턴 사용의 장점: 디커플링, 강력한 가독성, 명확한 코드 구조;

위의 작은 예를 통해 , 클릭 이벤트에서 데이터 획득(클릭 이벤트 기능)과 작업 데이터(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("http://www.jb51.net/", data, function( result ){
    if ( result.status ) { alert("新增成功！") } else { alert("新增失败") }
  });
   }，
  remove: function( data ) {
  this.ajax("http://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(파사드) 모드와 동일합니다. 내부 세부 정보를 숨기고 인터페이스를 외부에 노출합니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트에 있는 다른 관련 기사에 주목하세요.