Rewrote fullpage-light.js using ES6. Key modifications include:

• Modularization: Split the entire file into multiple independent modules, with each module responsible for a single function.
• New Syntax: Replaced with new syntax features, such as let, const for variable declarations, Object.assign, etc.
• Transpilation: Since current browsers do not yet support ES2015, Babel is still needed for transpilation.

Modularization#

Based on functionality, the entire file was split into five modules.

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

This way, what was originally a single large file has been divided into five independent modules. Each module is only responsible for its own function, making maintenance much easier.

New Syntax#

In addition to using let and const for variable declarations, the primary change was replacing the following function with the Object.assign method:

/**
 * 扩展 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);

Since we’re using Object.assign, let’s talk about it. According to the MDN definition:

The Object.assign() method copies all enumerable own properties from one or more source objects to a target object. It returns the target object. Object.assign(target, ...sources)

In other words, it can copy all enumerable properties from the ...sources objects to the target object. This makes shallow-copying an object very easy.

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

It can also be used to merge several objects:

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}

However, it’s important to note that inherited properties and non-enumerable properties cannot be copied. If you try to do so, you’ll find that although the statement won’t throw an error, the inherited and non-enumerable properties will not be successfully copied. Regarding compatibility, Chrome currently supports this property, and the examples above were all tested in the Chrome console.

Transpilation#

Since most browsers currently do not support ES2015 syntax, webpack + Babel are used to transpile the code into ES5 syntax. This allows it to be used directly in modern browsers.

Summary#

ES6 brings significant improvements. For example, let and const with block-level scope can help avoid common pitfalls, proper use of arrow functions can improve code readability, and new features like class, promise, and module can greatly enhance the programming experience. While there are still many compatibility issues, the existence of Babel as a transpiler allows for a gradual transition from ES3 and ES5 to ES2015. Especially recently, while experimenting with React, I’ve found using ES2015 to be an incredibly enjoyable experience.