* JavaScript Advanced 1

その他 2021-04-01 21:00:29 訪問数: null

1.プロセス指向およびオブジェクト指向

1.1プロセス指向

  • プロセス指向とは、問題を解決するために必要なステップを分析し、関数を使用してこれらのステップを段階的に実装し、順番に1つずつ呼び出すことです。

1.2オブジェクト指向

  • オブジェクト指向とは、業務を個々のオブジェクトに分解し、次に分業とオブジェクト間の協力を行うことです。

1.3プロセス指向とオブジェクト指向の比較

プロセス指向 オブジェクト指向
利点 性能はオブジェクト指向よりも高く、シングルチップマイクロコンピュータで使用されるプロセス指向プログラミングなど、ハードウェアに密接に関連するものに適しています。 オブジェクト指向にはカプセル化、継承、およびポリモーフィズムの特性があるため、保守、再利用、拡張が容易です。低結合システムを設計できるため、システムの柔軟性と保守が容易になります。
不利益 メンテナンスが簡単ではなく、再利用も簡単ではなく、拡張も簡単ではありません パフォーマンスはプロセス指向よりも低い

2.オブジェクトとクラス

2.1オブジェクト

オブジェクトは属性とメソッドで構成されています。これは、特定のものを参照する、キーと値のペアの順序付けられていないコレクションです。

  • 属性：オブジェクト（固有名詞）の属性によって表されるものの特性
  • メソッド：オブジェクト内のメソッド（一般的な動詞）で表される、物事の動作

2.1.1オブジェクトの作成

//以下代码是对对象的复习
//字面量创建对象
var ldh = {
    
    
    name: '刘德华',
    age: 18
}
console.log(ldh);

//构造函数创建对象
  function Star(name, age) {
    
    
    this.name = name;
    this.age = age;
 }
var ldh = new Star('刘德华', 18)//实例化对象
console.log(ldh);

ここに画像の説明を挿入

クラス2.2

  • ES6では、クラスの概念が新たに追加されました。classキーワードを使用してクラスを宣言し、このクラスを使用してオブジェクトをインスタンス化できます。クラスはオブジェクトのパブリック部分を抽象化します。通常、特定のクラス（クラス）を参照します。オブジェクトは特定のクラスを具体的に参照し、具体的なオブジェクトはクラスを通じてインスタンス化されます。

2.2.1クラスを作成する

  1. 文法：
//步骤1 使用class关键字
class name {
    
    
  // class body
}     
//步骤2使用定义的类创建实例  注意new关键字
var xx = new name();
  1. 例
 // 1. 创建类 class  创建一个 明星类
 class Star {
    
    
   // 类的共有属性放到 constructor 里面
   constructor(name, age) {
    
    
   this.name = name;
   this.age = age;
   }
 }
   // 2. 利用类创建对象 new
   var ldh = new Star('刘德华', 18);
   console.log(ldh);

上記のコードを実行した結果：
ここに画像の説明を挿入

結果から、操作の結果はコンストラクターを使用した場合と同じであることがわかります。

2.2.2属性とメソッドを追加するためのクラスの作成

 // 1. 创建类 class  创建一个类
class Star {
    
    
    // 类的共有属性放到 constructor 里面 constructor是 构造器或者构造函数
    constructor(uname, age) {
    
    
      this.uname = uname;
      this.age = age;
    }//------------------------------------------->注意,方法与方法之间不需要添加逗号
    sing(song) {
    
    
      console.log(this.uname + '唱' + song);
    }
}
// 2. 利用类创建对象 new
var ldh = new Star('刘德华', 18);
console.log(ldh); // Star {uname: "刘德华", age: 18}
ldh.sing('冰雨'); // 刘德华唱冰雨

上記のコードを実行した結果：
ここに画像の説明を挿入

注意：

  1. classキーワードを使用してクラスを作成しますが、クラス名の最初の文字は引き続き大文字で定義します。
  2. クラスにはコンストラクター関数があり、渡されたパラメーターを受け入れ、同時にインスタンスオブジェクトを返すことができます。
  3. newがインスタンスを生成する限り、コンストラクター関数はこの関数を自動的に呼び出します。この関数を記述しない場合、クラスもこの関数を自動的に生成します。
  4. 複数の関数メソッドの間にコンマを追加する必要はありません
  5. インスタンスの新規生成は省略できません
  6. 構文仕様、作成されたクラスのクラス名の後に括弧を追加しないでください。生成されたインスタンスクラスの名前の後に括弧を追加してください。コンストラクターは関数を追加する必要はありません。

2.2.3クラスの継承

  1. 文法
// 父类
class Father{
    
       
} 

// 子类继承父类
class  Son  extends Father {
    
      
}
  1. 例
class Father {
    
    
      constructor(surname) {
    
    
        this.surname= surname;
      }
      say() {
    
    
        console.log('你的姓是' + this.surname);
       }
}

class Son extends Father{
    
      // 这样子类就继承了父类的属性和方法
}
var damao= new Son('刘');
damao.say();      //结果为 你的姓是刘

上記のコードを実行した結果：
ここに画像の説明を挿入

  • サブクラスはsuperキーワードを使用して、親クラスのメソッドにアクセスします

    //定义了父类
class Father {
      
      
   constructor(x, y) {
      
      
   this.x = x;
   this.y = y;
   }
   sum() {
      
      
   console.log(this.x + this.y);
	}
 }
//子元素继承父类
    class Son extends Father {
      
      
   		 constructor(x, y) {
      
      
    		super(x, y); //使用super调用了父类中的构造函数
    	}
    }
    var son = new Son(1, 2);
    son.sum(); //结果为3

    注意：

    1. 継承では、サブクラスをインスタンス化してメソッドを出力する場合は、最初にサブクラスにこのメソッドがあるかどうかを確認し、ある場合は最初にサブクラスを実行します

    2. 継承では、サブクラスにそのようなメソッドがない場合は、親クラスにこのメソッドがあるかどうかを確認し、ある場合は、親クラスのメソッドを実行します（近接の原則）

    3. サブクラスが親クラスのメソッドを継承し、同時にそれ自体のメソッドを拡張する場合は、superを使用して親クラスのコンストラクターを呼び出し、サブクラスの前にsuperを呼び出す必要があります。

       // 父类有加法方法
 class Father {
        
        
   constructor(x, y) {
        
        
   this.x = x;
   this.y = y;
   }
   sum() {
        
        
   console.log(this.x + this.y);
   }
 }
 // 子类继承父类加法方法 同时 扩展减法方法
 class Son extends Father {
        
        
   constructor(x, y) {
        
        
   // 利用super 调用父类的构造函数 super 必须在子类this之前调用,放到this之后会报错
   super(x, y);
   this.x = x;
   this.y = y;

  }
  subtract() {
        
        
  console.log(this.x - this.y);
  }
}
var son = new Son(5, 3);
son.subtract(); //2
son.sum();//8

      上記のコードを実行した結果は次のとおりです。

ここに画像の説明を挿入

  1. この点に常に注意を払ってください。クラス内の共通の属性とメソッドをこれとともに使用する必要があります。

    1. コンストラクターのthisは、新しいインスタンスオブジェクトを指します
    2. カスタムメソッドは、通常、新しいインスタンスオブジェクトも指します
    3. イベントをバインドした後、これはイベントをトリガーしたイベントソースを指します

  2. ES6では、クラスに変数プロモーションがないため、クラスを介してオブジェクトをインスタンス化する前にクラスを定義する必要があります[外部リンク画像の転送に失敗しました。元のサイトに盗難防止リンクメカニズムがある可能性があります。保存することをお勧めします。画像を直接アップロードします（img-qBoIoO9X-1598259736549）（images / img2.png）]
    ここに画像の説明を挿入
    ここに画像の説明を挿入

3.オブジェクト指向バージョンのタブバーの切り替え

3.1機能要件

  1. タブバーをクリックして効果を切り替えます。
  2. +記号をクリックして、タブアイテムとコンテンツアイテムを追加します。
  3. x番号をクリックして、現在のタブ項目とコンテンツ項目を削除します。
  4. タブアイテムのテキストまたはコンテンツアイテムのテキストをダブルクリックして、内部のテキストコンテンツを変更します

3.2ケースの準備

  1. タイトル要素を取得する
  2. コンテンツ要素を取得する
  3. 削除されたボタンのx番号を取得します
  4. 新しいjsファイルを作成し、クラスを定義し、必要な属性メソッドを追加します（switch、delete、add、modify）
  5. この点に常に注意を払ってください

3.3スイッチ

  • クリックイベントを取得したタイトルにバインドし、対応するコンテンツ領域を表示して、対応するインデックスを保存します

     this.lis[i].index = i;
 this.lis[i].onclick = this.toggleTab;

  • 排他性を使用して、1つの要素のみの表示を実現します

     toggleTab() {
      
      
   //将所有的标题与内容类样式全部移除
     for (var i = 0; i < this.lis.length; i++) {
      
      
     this.lis[i].className = '';
     this.sections[i].className = '';
     }
   //为当前的标题添加激活样式
     this.className = 'liactive';
    //为当前的内容添加激活样式
     that.sections[this.index].className = 'conactive';
  }

3.4追加

  • ボタンの追加+クリックイベントのバインド

     this.add.onclick = this.addTab;

  • タイトルとコンテンツの追加を実現し、排他的な処理の良い仕事をします

    addTab() {
      
      
    that.clearClass();
    // (1) 创建li元素和section元素 
    var random = Math.random();
    var li = '<li class="liactive"><span>新选项卡</span><span class="iconfont icon-guanbi">				</span></li>';
    var section = '<section class="conactive">测试 ' + random + '</section>';
    // (2) 把这两个元素追加到对应的父元素里面
    that.ul.insertAdjacentHTML('beforeend', li);
    that.fsection.insertAdjacentHTML('beforeend', section);
    that.init();
    }

3.5削除

  • クリックイベントを要素の削除ボタンxにバインドします

     this.remove[i].onclick = this.removeTab;

  • クリックされた削除ボタンが配置されているすべての親要素を取得し、対応するタイトルとコンテンツを削除します

     removeTab(e) {
      
      
     e.stopPropagation(); // 阻止冒泡 防止触发li 的切换点击事件
     var index = this.parentNode.index;
     console.log(index);
     // 根据索引号删除对应的li 和section   remove()方法可以直接删除指定的元素
     that.lis[index].remove();
     that.sections[index].remove();
     that.init();
     // 当我们删除的不是选中状态的li 的时候,原来的选中状态li保持不变
     if (document.querySelector('.liactive')) return;
     // 当我们删除了选中状态的这个li 的时候, 让它的前一个li 处于选定状态
     index--;
     // 手动调用我们的点击事件  不需要鼠标触发
     that.lis[index] && that.lis[index].click();
 }

3.6編集

  • ダブルクリックイベントを要素（タイトルとコンテンツ）にバインドする

     this.spans[i].ondblclick = this.editTab;
 this.sections[i].ondblclick = this.editTab;

  • ダブルクリックイベントでは、テキスト選択状態を処理し、内部DOMノードを変更して、古い値と新しい値の値の転送を実現します。

    editTab() {
      
      
    var str = this.innerHTML;
    // 双击禁止选定文字
    window.getSelection ? window.getSelection().removeAllRanges() : 				    document.selection.empty();
    // alert(11);
      this.innerHTML = '<input type="text" />';
      var input = this.children[0];
      input.value = str;
      input.select(); // 文本框里面的文字处于选定状态
      // 当我们离开文本框就把文本框里面的值给span 
      input.onblur = function() {
      
      
      this.parentNode.innerHTML = this.value;
      };
      // 按下回车也可以把文本框里面的值给span
      input.onkeyup = function(e) {
      
      
      if (e.keyCode === 13) {
      
      
      // 手动调用表单失去焦点事件  不需要鼠标离开操作
      this.blur();
      }
    }
}

おすすめ

転載: blog.csdn.net/weixin_48116269/article/details/108203071
おすすめ
ランキング
uni.request在接口状态码403等还是走success
Springboot は mybatisplus を統合しており、ページング クエリによって返される Page オブジェクトの合計は常に 0 です。
System.InvalidOperationExceptionが：「BuildWindowCoreは、子ウィンドウのハンドル搭乗を返しません。」
[Example 08] IPD system advancement: version naming rules for version management
カスタム NavigationBar -- UIView による描画
データとデータの移行を復元します（個人的なメモ、無用リーダー）
4. 2次元配列で検索する
vim的私人订制
Flutterのカスタムルーティング切り替えアニメーション
Javaコンテナの方法の簡単なアプリケーションのArrayList
アーカイブ
もっと
2024-05-12(27)
2024-05-11(31)
2024-05-10(33)
2024-05-09(30)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)
2024-05-03(8)

コードワールド

© 2018 codetd.com