ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScriptカプセル化のさまざまな書き方

JavaScriptカプセル化のさまざまな書き方

韦小宝オリジナル: 2018-01-22 10:00:363013ブラウズ

この記事では、主に JavaScript カプセル化のさまざまな記述方法を紹介します。利点、欠点、および使用シナリオをリストして、いくつかの JavaScript カプセル化形式を詳しく紹介します。JavaScript に興味のある方は、この記事を参照してください。世界では、書くことは魔法のような現象であり、あらゆる考え方に開かれています。外国人が書いたjsコンポーネントを見るたびに考え方や書き方がおかしいのですが、基本的に同じjs構造を持つコードは見たことがありません。今日はjsの書き方についてお話します。私も開発中にいくつかメソッドを書きました。パフォーマンスの面では、コードの構造やロジックが適切に記述されていないと、コンピューターの CPU による計算量が増加し、実行パフォーマンスが低下します。js の記述方法もパフォーマンスに大きく影響します。

通常、JS コンポーネントを作成する人は、

匿名関数

を使用してオブジェクトをカプセル化し、外部とのクロージャスコープを形成します。 (ここでは、js の継承とポリモーフィズムについては多くは言いません。上級プログラマーはこの知識を持っているはずです。Java 開発も行ったことがある人なら、この概念は馴染み深いでしょう。) 主にカプセル化に関する研究を行っています。カプセル化の重要な概念である

オブジェクト指向

の概念、カプセル化の方法、カプセル化のパフォーマンスなどが含まれます。カプセル化 (個人的には、プログラミングの世界における最初の概念だと思います) は世界中のどこにでもあり、EXT と Prototype.js は JavaScript をカプセル化し、jQuery uI と jQuery mobile は jQuery をカプセル化し、Java の JDBC は spirng、Hibernate およびその他のフレームワークに組み込まれています。ここではいくつかの例を紹介しますが、1 つずつ紹介することはしません。 JavaScript のカプセル化の記述の話題に戻り、まず簡単な

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

js 関数を見てみましょう。ページに多くの機能が必要ない場合は、js を一目で理解するのが簡単です。 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 コンポーネントを開発している場合は、まず

オブジェクトを作成

し、このオブジェクトにプロパティとメソッドを与えることで、このオブジェクトが単独で動作できるようになります。他のオブジェクトと連携する

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")));
 });

このメソッドは、Prototype の継承を継承することで、各小さな操作を属性にカプセル化するもので、次のような操作イベントにバインドすることもできます。 as $("#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カプセル化のさまざまな書き方

関連記事