집 >웹 프론트엔드 >JS 튜토리얼 >javaScript 캡슐화의 다양한 작성 방법

javaScript 캡슐화의 다양한 작성 방법

韦小宝원래의: 2018-01-22 10:00:363013검색

이 글에서는 주로 javaScript 캡슐화의 다양한 작성 방법을 소개하며, 여러 가지 JavaScript 캡슐화 형식을 장점, 단점, 사용 시나리오를 나열하여 자세히 소개합니다. JavaScript에 관심이 있는 친구는 이 글을

in javascript에서 참조할 수 있습니다. 세상에서 글쓰기는 마법 같은 현상입니다. 모든 학파에 열려있습니다! 외국인이 작성한 js 컴포넌트를 볼 때마다 발상이나 작성 방법이 이상한데, 기본적으로 동일한 js 구조를 가진 코드는 본 적이 없습니다. 오늘은 js를 작성하는 방법에 대해 이야기하겠습니다. 저도 개발 과정에서 여러 메소드를 작성했습니다. 성능 측면에서 보면, 코드 구조나 로직이 제대로 작성되지 않으면 컴퓨터 CPU의 연산량이 늘어나 실행 성능이 저하되는 원인이 됩니다.

일반적으로 js 구성 요소를 작성하는 사람들은 익명 기능을 사용하여 객체를 캡슐화하고 외부 세계와의 폐쇄 범위를 형성합니다. (여기서 js의 상속과 다형성에 대해서는 많이 언급하지 않겠습니다. 수석 프로그래머라면 이 지식을 가지고 있어야 합니다. Java 개발도 했다면 이 개념은 너무 익숙합니다.)

주로 캡슐화에 대해 연구합니다. 캡슐화, 캡슐화 방법, 캡슐화 성능 등에 매우 중요한 객체 지향 개념을 포함합니다. 캡슐화(개인적으로 생각하기에 프로그래밍 세계의 첫 번째 개념)는 JQuery, EXT 및 Prototype.js가 javascript를 캡슐화하고, jQuery uI 및 jQuery mobile이 jQuery를 캡슐화하며, java의 JDBC는 spirng, Hibernate 및 기타 프레임워크에 있습니다. 여기에 몇 가지 예가 있지만, 그 외에도 하나씩 소개하지는 않겠습니다.

자바스크립트 캡슐화 작성 주제로 돌아가서 먼저 간단한

function hello(){
 var a = 'hello';
 alert(a);
}

js 함수를 살펴보겠습니다. 가장 원시적이고 기본적인 캡슐화는 페이지에 많은 것이 필요하지 않으면 한눈에 이해하기 쉽습니다. JQuery를 사용하려면 다음과 같이 작성해야 합니다.

$(function(){
 $('#id').click(function(){
 alert('hello');
 })
});

Node.js를 사용하면 Node.js가 로드해야 하기 때문에 더 복잡합니다. HTTP 모듈의 작성은 다음과 같습니다

var http = require('http');
http.createServer(function(req,res){
 res.writeHead(200,{'Content-Type':'text/html'});
 res.write('<p>hello</p>');
}).listen(8080);

그런 다음 작성을 더 깊은 수준으로 캡슐화합니다. 많은 수의 js 작업이 발생하면 각각의 작은 함수만으로는 이를 만족할 수 없습니다. 왜냐하면 공통 도메인에 존재하고 여러 및 흩어진 작성 방법은 버그 요인이 많이 발생하기 쉬우므로 규제가 필요합니다. js의 작성자는 이름에서 알 수 있듯이 익명 함수는 실제 이름이 없는 함수입니다. function(){}(),(function(){})(),(function(){}()),new function(){},void function(){}();JQuery.js는 익명입니다. 함수 캡슐화, 가장 일반적으로 사용되는

 (function(){
 star.init = (function(name){
 var e = new Editor(name, Data.toolbarData);
 });
 })();

를 먼저 살펴보겠습니다. js 구성 요소를 개발하는 경우 먼저 객체를 만들고 이 객체에 속성 및 메서드를 부여하면 이 객체가 단독으로 작동하고 협력할 수 있습니다. with other object

var klm = klm || {};
 klm = (function(){
 //第一个写法
 klm.init = function(){
  alert('hello');
 }

 //第二个写法
  klm.browser = (function(ua){
  var b = {
  msie:/msie/.test(ua) && !/opera/.test(ua),
  opera:/opera/.test(ua),
  safari:/webkit/.test(ua) && !/chrome/.test(ua),
  firefox:/firefox/.test(ua),
  chrome:/chrome/.test(ua)
  };
  })(window.navigator.userAgent.toLowerCase());
  //将其定义方法以接口方式返回给外界引用
  return{
  init: klm.init,
  browser:klm.browser 
  }
 })();

S 다음으로, 이 JS 패키징은 제가 좋아하는 방식입니다

var myOpinion = myOpinion || {};
 myOpinion.prototype={
 init:function(obj,i){
  alert('hello');
  },
  closeWindow:function(obj,d){
  obj.click(function(){
  d.hide();
  });
  }
 }
 $(function(){
  var my = myOpinion.prototype;
  my.init($(".z-sidebar li em"),$("#contact")); 
  $("#contact").add(my.closeWindow($(".z-sidebar li em"),$("#contact")));
 });

이 방법은 프로토타입에 의해 상속되어 각각의 작은 작업을 속성으로 캡슐화하는 것입니다. ); "#contact").add(my.closeWindow()); 이는 한 번에 캡슐화됩니다.

단일 속성 캡슐화에 대한 정의도 있습니다

 WinShow.create = function(c,body){ 
  var _head = '<p class="+ c.heacss +"><span class="+ c.concss +">' + c.title + '</span></p>';
  this.container.innerHTML = _head;
  return this.container;
  this.container.onclick = function(e){
  alert('hello');
  }
 }

여기서 HTML 코드 조각을 익명 함수 형식으로 캡슐화하는 create 속성을 만들고 클릭 이벤트를 이 HTML 코드에 바인딩합니다.

위의 여러 js 캡슐화 형식을 나열했지만 Xiaosheng은 여전히 동일한 작업을 수행할 수 있지만 작성 방법이 다소 다릅니다.

javaScript 캡슐화의 다양한 작성 방법

관련 기사