不唐突的JavaScript的七条准则整理收集

针对“不唐突的JavaScript的七条准则整理收集”的完整攻略，我将按照以下步骤进行讲解：

1. 简介
2. 准则一：使用模块化编程
3. 准则二：避免使用全局变量
4. 准则三：显式声明变量类型
5. 准则四：封装重用的代码
6. 准则五：使用 API 和库
7. 准则六：舍弃 eval() 函数
8. 准则七：使用立即执行函数表达式
9. 示例说明
10. 总结

1. 简介

该攻略旨在探讨如何写出不唐突的 JavaScript 代码。通过使用这些准则，你可以提高代码的可读性、可维护性以及可重用性，最终获得更好的编程体验。

2. 准则一：使用模块化编程

模块化编程可将代码模块化，减少全局变量的数量，避免命名冲突，提高代码的可维护性。你可以使用 CommonJS、AMD、ES6 等模块化方案来实现模块化编程。

// CommonJS 方案
// moduleOne.js
module.exports = {
  func1: function() {
    console.log('Module One Function One');
  },
  func2: function() {
    console.log('Module One Function Two');
  }
}

// moduleTwo.js
var moduleOne = require('./moduleOne');

moduleOne.func1();
moduleOne.func2();

3. 准则二：避免使用全局变量

全局变量容易污染全局作用域，导致代码的可维护性下降，因此应尽量避免使用全局变量。如果需要使用全局变量，可以考虑将它们放在一个命名空间下。

// bad example
var x = 10;

function foo() {
  console.log(x);
}

foo();

// good example
var myApp = {};
myApp.x = 10;

myApp.foo = function() {
  console.log(myApp.x);
}

myApp.foo();

4. 准则三：显式声明变量类型

JavaScript 是一种动态语言，变量的类型通常是由值决定的。为了让代码更加明确和严谨，应该显式声明变量类型，这有助于检测错误并提供更好的代码提示。

// bad example
var x = 10;
var y = 'Hello';
var z = true;

// good example
var x = 10;
var y = 'Hello';
var z = true;

console.log(typeof x);
console.log(typeof y);
console.log(typeof z);

5. 准则四：封装重用的代码

封装重用的代码，可以减少代码的冗余，提高代码的可维护性。可以将常用的功能封装为函数或类，以便复用。

// bad example
function sum(a, b) {
  return a + b;
}

function subtract(a, b) {
  return a - b;
}

console.log(sum(10, 5));
console.log(subtract(10, 5));

// good example
function MathUtils() {}

MathUtils.prototype.sum = function(a, b) {
  return a + b;
}

MathUtils.prototype.subtract = function(a, b) {
  return a - b;
}

var math = new MathUtils();
console.log(math.sum(10, 5));
console.log(math.subtract(10, 5));

6. 准则五：使用 API 和库

JavaScript 有很多内置的 API 和第三方库，可以大大减少编写代码的时间和工作量。在选择使用 API 和库时，应该评估其性能、安全性和可维护性。

// bad example
var arr = [10,5,7,2,8];
var max = arr[0];

for (var i = 1; i < arr.length; i++) {
  if (arr[i] > max) {
    max = arr[i];
  }
}

console.log(max);

// good example
var arr = [10,5,7,2,8];
var max = Math.max.apply(null, arr);

console.log(max);

7. 准则六：舍弃 eval() 函数

eval() 函数可以执行任意 JavaScript 代码，但是它很容易导致安全漏洞，应该尽量避免使用。如果必须使用 eval() 函数，一定要对参数进行严格的过滤和验证。

// bad example
var x = 10;
var y = 20;
var code = 'console.log(x + y)';

eval(code);

// good example
var x = 10;
var y = 20;
var code = 'console.log(x + y)';

if (typeof code === 'string') {
  code = code.trim();
}

if (code.indexOf('console.log') === -1) {
  throw new Error('Invalid code!');
}

var fn = new Function(code);
fn();

8. 准则七：使用立即执行函数表达式

立即执行函数表达式可以创建一个私有作用域，避免命名冲突，提高代码的可维护性。可以将常量、变量、函数等封装在立即执行函数表达式中。

// bad example
var x = 10;

function foo() {
  var x = 20;
  console.log(x);
}

foo();
console.log(x);

// good example
(function() {
  var x = 10;

  function foo() {
    var x = 20;
    console.log(x);
  }

  foo();
})();

console.log(typeof x === 'undefined');

9. 示例说明

下面是一个使用上述准则编写的示例代码，它包含了模块化编程、使用 API 和库、封装重用的代码、使用立即执行函数表达式等。该代码可以实现一个简单的倒计时功能。

// CountDown module
var CountDown = (function() {
  var timer = null;

  function start(seconds, callback) {
    var totalTime = seconds;
    timer = setInterval(function() {
      var remainTime = totalTime--;

      if (remainTime === 0) {
        clearInterval(timer);
        callback();
      } else {
        console.log(remainTime + ' seconds left');
      }
    }, 1000);
  }

  function stop() {
    clearInterval(timer);
  }

  return {
    start: start,
    stop: stop
  }
})();

// UI module
var UI = (function() {
  var startBtn = document.getElementById('start-btn');
  var stopBtn = document.getElementById('stop-btn');

  startBtn.addEventListener('click', function() {
    CountDown.start(10, function() {
      alert('Time up!');
    });
  });

  stopBtn.addEventListener('click', function() {
    CountDown.stop();
  });
})();

10. 总结

通过遵循上述七条准则，我们可以编写出更加健壮、可维护、可重用、高效的 JavaScript 代码。在实际开发中，应该根据具体情况进行合理的选取和调整，最终达到提升开发效率、降低开发成本、提高代码质量的目的。