jsオブジェクト向けプログラミング体験

オブジェクト向けプログラミングは,現在のサービス側では広く応用されているプログラミング思想であるべきであり,オブジェクト呼び出し属性や方法をインスタンス化することで,コードの冗長性を低減し,構造も比較的明確である.フロントエンドjsのオブジェクト向けプログラミングに対するいくつかの理解についてお話しします.
私たちは今ウェブアプリケーションをしています.フロントエンドの業務処理はほとんどjsに基づいて行われています.1つのプロジェクトには多くの開発者が作成したjsファイルが含まれている可能性があります.関数名の一意性とグローバル変数の使用に注意し、自分が書いた関数や宣言した変数が他の同僚が作成したjsファイルと衝突することを防止しなければなりません.思わぬバグが発生する.解決策は匿名関数を書いたり、プラグインにカプセル化したりするなど、さまざまです.ここで紹介したいjsはオブジェクト向けにプログラミングされています.これはjs言語のプログラミングモードですが、オブジェクト向けは異なるjsファイル内の関数と変数の衝突をある程度解決しています.
まず、いくつかの基本的な概念を紹介します.
基本概念ECMAオブジェクトの定義は、基本値、オブジェクト、または関数を含む無秩序属性のセットです.「オブジェクトの各プロパティまたはメソッドには名前があり、各名前は
1つの値.
クラス#クラス#
現実生活では、似たような対象の間には共通の構成特徴があることが多い.クラスは、実際にはオブジェクトの設計図やレシピを作成します.同じクラスに基づいて多くの異なるクラスを作成することができます
オブジェクト.これらのオブジェクトには、それぞれのプロパティとメソッドが含まれます.
パッヶージ
パッケージングは、主にオブジェクトに含まれる(またはパッケージングされた内容)を説明するために使用されます.通常、2つの部分から構成されます.

関連データ(属性格納用)

これらのデータに基づいてできること(呼び出せる方法)

実践1:オブジェクト定義とオブジェクト属性の付与
もし私たちが今jsのクラスをカプセル化したいとしたら、機能は私がクラス名で選択した要素を通じてデータをキャッシュすることができて、私が後で呼び出すのに便利で、このクラス名はcacheDomと呼ばれて、最も基本的なことから始めましょう.
第一歩オブジェクトの定義:

    var cacheDom = function(clsname){};

オブジェクトが作成された後、機能に基づいて、このクラスを使用するときにデータをキャッシュする必要があるdom要素のクラス名を入力する必要があります.function内のパラメータにはクラス名のパラメータが必要です.

    var cacheDom = function(clsname){};

ベースのオブジェクトが宣言されたら、次にクラス内部の変数を定義します.まず、クラス名を取得し、クラス名でフィルタリングしてjqueryまたはdomオブジェクトを取得し、得られたオブジェクトにデータをキャッシュする必要があります.
第二歩属性値の定義:
機能に基づいて、属性値の定義は主にクラスに共通するいくつかのデータを説明し、この例ではcacheDomクラスに必要な属性は:1.選択したjqueryオブジェクトまたはdomオブジェクトは、クラス名に基づいて取得されます.機能が簡単なのでこの属性だけobjと書きます

var cacheDom = function(clsname){
    this.obj = $( '.'+claname );//             jquery  ，dom          ，    jquery     
};

ステップ3.クラス内のメソッドを定義するには、次の手順に従います.
このクラスのメソッドはデータをキャッシュすることです.ここでは知識点、jsのfunctionもプロパティです.この例ではcacheDomというオブジェクトのプロパティを定義し、キャッシュメソッドにtocacheという名前を付けます.

var cacheDom = function(clsname){
    this.obj = $( '.'+claname );//             jquery  ，dom          ，    jquery     
};
cacheDom.prototype{//       ，         
    tocache:function(obj){//tochche     ，        
    }
};

ステップ4.メソッドの実装:
実行順序、1.クラス名を取得する.2.クラス名でオブジェクトを取得する.3.オブジェクトを関数に入力してデータをキャッシュし、引き続きキャッシュ方法を完全に補充する

var cacheDom = function(clsname){
    this.obj = $( '.'+claname );//             jquery  ，dom          ，    jquery     
    this.tocache(this.obj);//                ，                 ，                       
};
cacheDom.prototype{//       ，         
    tocache:function(obj){//tochche     ，        
         $.data(obj.get(0),'data','123456');//$.data() jquery dom         ，        dom  ，        jquery  ，    don  
    }
};

手順5.クラスのインスタンス化:

var cacheobj=new cacheDom('classname');//    cacheDom      cacheobj  ，      ，  cacheDom