VSCode でフロントエンドの再構築を実行するにはどうすればよいですか?メソッドの簡単な分析

フロントエンドの再構築に VSCode を使用する方法は?以下の記事ではVSCodeでフロントエンドを再構築する方法を紹介しますので、ご参考になれば幸いです。

日常の開発では、リファクタリングが必要な場面がよくあります。VS Code の "リファクタリング" メニューは、豊富な操作を提供します。 。それは再建作業をより効率的に完了するのに役立ちます。 [推奨学習：「vscode入門チュートリアル」]

ただし、このメニューで提供される操作は毎回異なり、一時的に使用すると何らかの不具合が発生します。そのため、多くの学生はこの再構成機能にはあえて触れないことが多いです。

ここでは、参考のためによく使用される操作をいくつかまとめます。

まず、一般的な名前変更についてウォーミングアップしてみましょう。

名前の変更

名前を変更する理由: 名前が明確ではなく、理解できません。

操作手順:

• 変数名を選択し、右クリックして シンボル名の変更 を選択するか、ショートカット キー F2 # を使用します。 ##;

• 変更したい名前をポップアップ ボックスに入力します。

##VSCode は、後続の関連する名前をすべて変更します。

#ウォーミングアップは完了しました。本題に入りましょう。

Refactor
• を選択するか、

  Ctrl Shift R を使用してください。 #選択したコンテンツに応じて、選択と再構築のために次のコンテンツが表示される場合があります:

• インポート/エクスポート

  • デフォルトのエクスポートを名前付きエクスポートに変換する

    名前付きエクスポートをデフォルトのエクスポートに変換する
    • 名前空間インポートを名前付きエクスポートに変換する
    • 名前付きインポートを名前空間エクスポートに変換する
    • ##関数/クラス

  • 新しいファイルに移動

    • 変数/式

  • 定数の抽出閉じたスコープ内の定数に抽出します

    モジュール内の定数に抽出しますスコープ
    オプションのチェーン式に変換
    • 未使用の宣言を削除
    • #未使用の宣言の前の文字文字列
  • テンプレート文字列に変換テンプレート文字列に変換
    • 式/関数
  • 関数の抽出

    現在の関数の内部関数を抽出#モジュール スコープで関数を抽出

    #グローバル スコープで関数を抽出
    • #オブジェクト メソッド
    • 「get」および「set」アクセサーを生成する get および set プロセッサーを生成する

  • #クラス

    • 'get' および 'set' アクセサーを生成する get および set プロセッサを生成する
    関数を ES2015 クラスに変換する
  • すべての関数をクラスに変換

    ##メソッドに抽出##クラス 'xxx'読み取り専用フィールドに抽出

    • マジック ナンバー
    • マジック ナンバーを変更する必要があるのはなぜですか?なぜなら、基数を除いて、数字の実際の意味は人間には理解できないからです。
    目的: 定数値を定義し、変更された数値の実際の意味を書き留めます。
  操作:

再構築するマジックナンバーを選択します。ニーズに応じて、以下を選択することをお勧めします。

両方とも定数を定義します。前者は現在の関数で定義され、後者はモジュール/ファイル全体で定義されます。

• コードは次のとおりです。ボックス;
  • 単語をすべて大文字で使用し、単語を区切るには「_」を使用します。
  • 例: 今年のダブル イレブンは、ダブル イレブン プロモーションが終了する時点から数えて 13 日間続きます。

  function promotionEndDate() {
    return new Date(new Date('2022-11-11').getTime() + 13 * 60 * 60 * 24 * 1000);
  }
  
  /**
   * 修改后：
   * 将开始时间 START_DATE，持续的天数 LASTING_DAYS 抽取出来做成变量
   * 如果只有一处使用，则在使用到的函数内定义；
   * 如果多处都有用，可以考虑放在函数外，模块内。
   */
  function promotionEndDate() {
      const START_DATE = '2022-11-11';
      const LASTING_DAYS = 13;
      return new Date(new Date(START_DATE).getTime() + LASTING_DAYS * 60 * 60 * 24 * 1000);
  }

  ログイン後にコピー
• 複雑な論理条件

• 複雑なロジックを変更する必要があるのはなぜですか?複雑なロジックは条件判断が多く、読みにくい場合が多いです。
  操作:

閉じたスコープ定数に抽出します

• 関数をモジュール/グローバル スコープに抽出
  • コードが新しい変数/関数に抽出され、名前が変更された入力ボックスが表示されます ;
  • キャメルケースの名前を使用し、
  is/has
  • で始まり、各単語の最初の文字を大文字にします。

  例子：返回指定的某个月有多少天

  function monthDay(year, month) {
      var day31 = [1, 3, 5, 7, 8, 10, 12];
      var day30 = [4, 6, 9, 11];
      if (day31.indexOf(month) > -1) {
          return 31;
      } else if (day30.indexOf(month) > -1) {
          return 30;
      } else {
          if ((year % 4 == 0) && (year % 100 != 0 || year % 400 == 0)) {
              return 29;
          } else {
              return 28;
          }
      }
  }
  
  /**
   * 修改后
   * 是否闰年在日期处理函数中会经常使用，所以将其提取到当前模块的最外层了
   */
  function monthDay(year, month) {
      ...
      if (day31.indexOf(month) > -1) {
          return 31;
      } else if (day30.indexOf(month) > -1) {
          return 30;
      } else {
          if (isLeapYear(year)) {
              return 29;
          } else {
              return 28;
          }
      }
  }
  
  function isLeapYear(year) {
      return (year % 4 == 0) && (year % 100 != 0 || year % 400 == 0);
  }

  ログイン後にコピー

  写了注释的代码片段

  更推荐代码即注释的理念。我们写注释之前要想明白为什么需要注释？

  • 如果代码本身已经很清晰，应该删除注释。
  • 如果抽取代码片段，取个合适的名字，能让代码易于阅读，也可以删除注释。

  目标：将代码片段抽取出来做成函数，函数以此代码块的具体功能做命名。

  操作：

  • 选择代码块，重构（Refactor）。选择：

    • 提取到当前函数里的 inner function

  例子：ajax 请求

  function ajax(options) {
    options = options || {};
    options.type = (options.type || 'GET').toUpperCase();
    options.dataType = options.dataType || 'json';
    const READY_STATE = 4;
    const NET_STATUS = {
      OK: 200,
      RIDERCT: 300
    };
    const params = this.formatAjaxParams(options.data);
    let xhr;
  
    // 创建 - 非IE6 - 第一步
    if (window.XMLHttpRequest) {
      xhr = new window.XMLHttpRequest();
    } else { // IE6及其以下版本浏览器
      xhr = new window.ActiveXObject('Microsoft.XMLHTTP');
    }
  
    // 连接 和 发送 - 第二步
    if (options.type === 'GET') {
      ...
    } else if (options.type === 'POST') {
      ...
    }
    
    // 接收 - 第三步
    xhr.onreadystatechange = function () {
      if (xhr.readyState === READY_STATE) {
        ...
      }
    };
  }
  
  // 修改后
  function ajax(options) {
    ...
    let xhr;
  
    create();
    connectAndSend();
    recieve();
  
    function create() {...}
    function connectAndSend() {...}
    function recieve() {...}
  }

  ログイン後にコピー

  过长的函数

  功能拆分做成外部函数，再在内部调用。

  操作：

  • 选择代码块重构，选择：

    • 提取到 Module/Global 范围的 function

  • 代码块会生成一个函数，并携带必要的参数

  例子：上个例子中，可以将 ajax 的接收模块独立成模块的function

  function ajax(options) {
    ...
  
    create();
    recieve();
    connectAndSend(options, xhr, params);
  }
  function connectAndSend(options, xhr, params) {
    if (options.type === 'GET') {
      ...
    } else if (options.type === 'POST') {
      ...
    }
  }

  ログイン後にコピー

  重复的代码/过长的文件

  操作：

  • 选择代码块重构，选择 Move to a new file；

  • 代码会迁移到以当前函数/类作为文件名的文件中；如果有多个类/函数，会以第一个类/函数做命明

  • 将函数/类使用 export 暴露出去；

  • 在原文件中用 import 引入函数/类。

  例子：日期处理函数：

  

  移动到新文件后：

  

  index.js 中，还能跳转到定义的代码，但是实际上并没有引入。

  

  重命名，修复 import/export；

  

  import/export

  default 和命名、命名空间和命名的转换。

  // named
  export function nextMonthDay(year, month) {}
  
  // default
  export default function nextMonthDay(year, month) {}
  
  // namepace 
  import * as refactor from './refactor';
  
  // named
  import { nextMonthDay } from './refactor';

  ログイン後にコピー

  对象方法

  生成get、set处理器

  const person = {
    age: 32
  };
  
  // 生成get、set处理器
  const person = {
    _age: 32,
    get age() {
      return this._age;
    },
    set age(value) {
      this._age = value;
    },
  };

  ログイン後にコピー

  模板字符串

  字符串拼接，快速转换成模板字符串：

  class Person{
    constructor(firstName, lastName) {
      this.firstName = firstName;
      this.lastName = lastName;
    }
    getFullName() {
      return this.firstName + ' ' + this.lastName;
    }
  }
  
  // 模板字符串
  class Person{
    constructor(firstName, lastName) {
      this.firstName = firstName;
      this.lastName = lastName;
    }
    getFullName() {
      return `${this.firstName} ${this.lastName}`;
    }
  }

  ログイン後にコピー

  类

  生成get、set处理器，与对象方法的结果类似。

  提取到 class xxx 的 Method， 与上面写注释的代码、重复代码提取的类似。

  在此不再复述。

  提供 ES 2015 类转换，支持原型方法转换。

  const Person = function() {
    this.age = 32;
  };
  Person.prototype.getAge = function() {
    return this.age;
  }
  Person.prototype.setAge = function(value) {
    return this.age = value;
  }
  
  // ES 2015 类
  class Person {
    constructor() {
      this.age = 32;
    }
    getAge() {
      return this.age;
    }
    setAge(value) {
      return this.age = value;
    }
  }

  ログイン後にコピー

  总结

  重构代码的方法还有很多，这里暂时列了一些。希望对大家有所帮助。

  剩下的内容，大家可以在重构代码时，多点点这个重构菜单，看看是否有惊喜。

  更多关于VSCode的相关知识，请访问：vscode教程！！