집 >웹 프론트엔드 >JS 튜토리얼 >JS의 싱글톤 모드는 데이터 추가, 삭제, 수정 및 쿼리를 구현합니다.

JS의 싱글톤 모드는 데이터 추가, 삭제, 수정 및 쿼리를 구현합니다.

亚连원래의: 2018-06-07 15:31:281965검색

이 글에서는 데이터 추가, 삭제, 수정, 확인 기능을 캡슐화하기 위해 디자인 패턴에서 싱글턴 모드 기반의 JS 구현을 주로 소개하고, 예제 폼과 결합하여 싱글턴 기반의 자바스크립트 관련 운용 기술을 분석합니다. 데이터베이스의 추가, 삭제, 수정, 확인을 위한 모드와 ajax가 필요하신 분들은 참고하시면 됩니다

이 글의 예시에서는 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;
   }
  }
 }
})();

위는 모두를 위해 컴파일한 것입니다. 앞으로는 모두에게 도움이 될 것입니다.

JS의 싱글톤 모드는 데이터 추가, 삭제, 수정 및 쿼리를 구현합니다.

관련 기사