ES6 を用いて fullpage-light.js をリライトしました。 主な変更点は以下の通りです。

• モジュール化: ファイル全体を複数の独立したモジュールに分割し、各モジュールがそれぞれ一つの機能を担当するようにしました。
• 新しい構文: let、const といった変数宣言や Object.assign など、新しい構文に置き換えました。
• トランスパイル: 現在のブラウザはまだ ES2015 をサポートしていないため、Babel を用いてトランスパイルする必要があります。

モジュール化#

機能に応じて、ファイル全体を5つのモジュールに分割しました。

-bootstrap.js   //方法和功能
-constant.js    //一些常量
-event.js       //绑定的事件
-index.js       //入口
-utils.js       //工具函数

これにより、元々一つの大きなファイルだったものが5つの独立したモジュールに分割され、各モジュールが自身の機能のみを担当するようになったため、メンテナンスが非常に容易になりました。

新しい構文#

let、const といった変数宣言のキーワードを使用しただけでなく、主に Object.assign メソッドで以下の関数を置き換えました。

/**
 * 扩展 Option 对象
 * @param {Object} Default 默认设置
 * @param {Object} Customize 自定义设置
 * @returns {Object} Default 扩展后的设置
 */
function extendOption(Default, Customize) {
  if (typeof Customize !== "object") {
    Customize = {};
  }
  for (var i in Customize) {
    if (Default.hasOwnProperty(i)) {
      Default[i] = Customize[i];
    }
  }
  return Default;
}

options = extendOption(defaults, Customize);

//现在
options = Object.assign({}, defaults, Customize);

Object.assign を使ったので、それについて説明しましょう。MDN の定義を参照すると：

Object.assign() メソッドは、一つ以上のソースオブジェクトから、自身が所有する列挙可能なプロパティをすべてターゲットオブジェクトにコピーし、ターゲットオブジェクトを返します。 Object.assign(target, ...sources)

つまり、...sources に含まれるオブジェクトのすべての列挙可能なプロパティをターゲットオブジェクトにコピーできます。これにより、オブジェクトのシャローコピーが簡単に行えます。

var obj = { a: 1, b: 2 };
var copy = Object.assign({}, obj);
//
console.log(copy); //Object {a: 1, b: 2}

同時に、複数のオブジェクトをマージするためにも使用できます。

var a = {a:1}
var b = {b:1}
var c = {c:1}
var copy = Object.assign({},a,b,c)
copy
Object {a: 1, b: 1, c: 1}

ただし、継承されたプロパティや列挙不可能なプロパティはコピーできない点に注意が必要です。もし試してみると、エラーは発生しないものの、それらのプロパティはコピーされていないことがわかります。 互換性については、現在 Chrome はこのプロパティをサポートしており、上記の例はすべて Chrome のコンソールで試したものです。

トランスパイル#

現在のほとんどのブラウザはまだ ES2015 の構文をサポートしていないため、webpack と Babel を使用してコードを ES5 の構文に変換します。これにより、現代のブラウザで直接使用できるようになります。

まとめ#

ES6 は大きな改善をもたらしました。例えば、let や const のブロックスコープはいくつかの落とし穴を回避でき、アロー関数を適切に使用することでコードの可読性も向上します。また、class、Promise、module などの新機能は、プログラミングの楽しさを大いに高めてくれます。 現在のところ互換性にはまだ多くの問題がありますが、Babel トランスパイラが存在するため、ES3 や ES5 から ES2015 へと段階的に移行できるようになりました。特に最近 React を試しているのですが、ES2015 を使うと非常に快適だと感じています。