如何才能优雅地书写JS代码

Posted W+7

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何才能优雅地书写JS代码相关的知识，希望对你有一定的参考价值。

第一：关于匿名函数的使用

       要避免全局变量泛滥， 可以考虑使用匿名函数， 把不需要在外部访问的变量或者函数限制在一个比较小的范围内。

例如以下代码：

  1. <script>
  2. function func1(){
  3. var list = ["a", "b", "c"];
  4.  
  5. for(var i = 0; i < list.length; i++){
  6. //..
  7. };
  8. }
  9. func1(); //　自动运行
  10. </script>

 上述代码的作用是在页面加载的时候自动执行某些操作， 并不需要被外部调用， 但是它执行过后却留下了一个全局的函数。

像这种情况， 非常有必要使用匿名函数：

如下述代码所示：

  1. <script>
  2. (function func1(){
  3. var list = ["a", "b", "c"];
  4.  
  5. for(var i = 0; i < list.length; i++){
  6. //..
  7. };
  8. })(); //　自动运行
  9. </script>

 匿名函数的书写格式（不带参数的情况下）：

  1. (function(){
  2. // 代码块
  3. })();

如果后面需要添加参数的话，则这样书写：

  1. (function(arg1, arg2, argN){
  2. //..
  3. })(arg1, arg2, argN);

第二：有关命名空间的使用规范：

命名空间可以有效减少全局变量的使用，是个很不错的规范JS代码的方式，在JS中命名空间需要进行如下操作：

“对象-属性”：

  1. window.com = {}
  2.  
  3. window.com.bytter = {}
  4.  
  5. window.com.bytter.hello = function(){
  6. alert("hello");
  7. }

 那么什么情况下才会使用到命名空间呢？

如果您需要给某个已经存在的页面添加一些功能，有可能需要添加好多个函数，而且正好那个页面当中已经存在了好多的全局变量和函数，甚至还存在某些函数和你要新增加的函数同名，这时我们就可以使用命名空间了：

你创建一个命名空间， 把你的新函数都放在那个命名空间之下， 就可以了：

  1. <button type="button" onclick="pg.check.userAcc()">检查用户名</button>
  2. <button type="button" onclick="pg.check.userAcc()">检查帐号</button>
  3.  
  4. <script>
  5. window.pg = {}
  6.  
  7. window.pg.check = {
  8. // 检查用户名
  9. userName: function(){
  10. //..
  11. },
  12. // 检查帐号
  13. userAcc: function(){
  14. //..
  15. }
  16. };
  17. </script>

第三：如何保证多人书写的JS代码互不干扰

我们学习了匿名函数和命名空间，掌握了它们的正确使用方法，接下来我们就可以做到保证JS代码之间互不干扰：

我们把一个页面中自己维护的代码与别人维护的代码或者系统自带的代码分隔开来，做到与外部代码的耦合降低到最小。

  1. <script>
  2. // 页面命名空间
  3. window.pg = {}
  4.  
  5. //命名空间的使用
  6. // 检查用户信息
  7. // 作者：张三
  8. // 最后更新： 2012.12.31
  9. (function(){
  10.  
  11. // 私有变量
  12. var a, b, c;
  13.  
  14. // 检查用户信息的相关方法
  15. window.pg.check = {
  16. // 检查用户名
  17. userName: function(){
  18. //..
  19. },
  20. // 检查帐号
  21. userAcc: function(){
  22. //..
  23. }
  24. };
  25.  
  26. })(); // end 张三的代码
  27.  
  28. //匿名函数的使用
  29. // xxx功能
  30. // 作者：李四
  31. // 最后更新： 2012.1.1
  32. (function(){
  33. window.pg.xxx = {
  34. //..
  35. }
  36. })(); // end 李四的代码
  37.  
  38. </script>

第四：使得变量声明美观易读

1、变量必须在使用前用var进行声明；

2、变量的声明应该放在代码块或者函数的头部；

3、可在一行内声明多个变量，尽可能添加上注释信息。

  1. // 声明变量 银行名称, 银行帐号
  2. var type, acc;
  3.  
  4.  
  5. // 声明变量 银行名称, 银行帐号
  6. var type = "中国银行", acc = "xxxxxx";
  7.  
  8.  
  9. var type = "中国银行", // 银行名称
  10. acc = "xxxxxx"; // 银行帐号
  1. 尽量使用易于理解的变量名，如：
  2. var bankType = "中国银行",
  3. bankAccount = "xxxxxx";

第五：函数和变量的命名

普通变量名和函数名采用"小驼峰式命名法"， 如：firstName、lastName

作为构造函数的函数采用"大驼峰式命名法"， 如以下代码所示：

  1. var Person = function(){
  2. //..
  3. }
  4.  
  5. var me = new Person();
  6. 常量用大写和下划线表示，如：
  7. var ROOT_PATH = "/v10/";
 

第六：正确地使用分号，可保证JS正常压缩

尽量做到每条语句使用分号结尾（特别是需要进行压缩的js，因为省略分号常常会导致压缩失败）；

第七：有关数组的定义

尽量使用简便的方式进行数组的定义：

  1. // 比较好的定义方法
  2. var list = [1, 2, 3];
  3.  
  4. // 不好的定义方法
  5. var list = new Array();
  6. list[0] = 1;
  7. list[1] = 2;
  8. list[2] = 3;
 

摘自：iteye技术博客[有删改]

以上是关于如何才能优雅地书写JS代码的主要内容，如果未能解决你的问题，请参考以下文章

理解js中的异步编程

如何优雅的用js动态添加html代码

一种更优雅书写Python代码的方式

Js不使用try catch，优雅地处理await报错的情况

不依赖 GulpBabelWebPack，还能优雅地写代码吗？

如何优雅地查看 JS 错误堆栈？