现在的位置: 首页 > 综合 > 正文

关于JS代码风格(整理+自己的意见)

2017年12月26日 ⁄ 综合 ⁄ 共 4350字 ⁄ 字号 评论关闭

导读:代码风格,不仅仅是个性的体现,更有利于你的成果的传播。是的,如果你甘愿做一个劳动者,而非共享多赢,那么不用管。

可以先看看这2篇文章,阮一峰的日志Crockford's coding style,简单罗列了一下我当前接受的并加入自己的见解:

1 表示区块起首的大括号,不要另起一行。不管是毛语言,我都这么做了。

2 调用函数的时候,函数名与左括号之间没有空格。

3 函数声明时,函数名和参数列表之间,没有空格。以上这2点,至于原因,那是由于() 的作用导致的,没办法,程序员除了踏实,有时很固执。

4 永远略句末的分号,它并不会占用你多少空间。说实话,最看不惯没有;的js代码,每读完一句,都感觉心里欠欠的不完整。

5 不要使用with。而且,with只是好看少写了代码,效率是低的。

6 只是用 === 和 !== ,而不要使用 == 和 !=。似乎有些偏执,但是,由于==的类型自动转换,避免人脑计算的失误。

7 不要多等赋值,乱合并。不要搞基哦,嘻嘻。

8 在使用函数前定义它,变量在函数头部声明。因为js是块级解释语言。这还会和效率有关。

9 new和object.create。在使用OO和效率之间,一种难言的平衡。我还不知道如何取舍。new效率低。

10 吹毛求疵一下,每行代码不要超过4/5你的屏幕——现在程序员的屏幕通常都是17‘、19’(我预计下半年自己配一个22‘的,小愿望)。

11 给自己的js文件(通常做法就是放置在外部单独的js文件)加上版本号,或是时间,或是你自己喜好的做法,方便强制更新客户端。

12 使用单行注释于解释行后。至少这是我现在的做法,自我感觉良好。

13 讨厌使用$在变量命名开始,让我和PHP混淆。当然了,如果是故意这么做,那也没办法。

14 使用 var obj = {}; 不要使用new。(和第9点,反正我是没用那个create)

15 使用 var foo = function () { }; 定义函数,不要使用function foo(){}; 。这和js代码解释器的解释顺序有关,用时前声明、执行。

下面是我上个月加班时候写的一个js文件,

$(function() {
  (function() {
    var mkey_login = {
      check: function(eid) {
        var ret = true;
        if ("" == $("#" + eid).val()) {
          mkey_login._show_err(eid, "blank");
          ret = false;
        }
        return ret;
      },
      _show_err: function(who, type) {
        var err = $("#msg");
        if ("blank" == type) {
          switch (who) {
          case "ppt":
            err.html("").html("通行证不能为空");
            break;
          case "pwd":
            err.html("").html("密码不能为空");
            break;
          case "xyz":
            err.html("").html("验证码不能为空");
            break;
          }
        } else if ("fuckyou" == type) {
          err.html("").html("抱歉,绑定功能暂停!");
        } else if ("wrong" == type) {
          err.html("").html("用户名或密码错误");
        } else if ("record" == type) {
          err.html("").html("(*^__^*) 您已经绑定了");
        } else if ("xyz_err" == type) {
          err.html("").html("验证码错误");
        } else if ("not_b_m" == type) {
          err.html("").html("您还未绑定手机");
        } else if ("no_right" == type) {
          err.html("").html("您无此次体验资格");
        } else {
          err.html("");
        }
      },
      success: function(ret) {
        $("#before_login").hide(100);
        $("#after_login").show(100);
        $("#mkey").html("").html(ret['mkey']);
        $("#p2a").removeClass("p2bg").addClass("p2bg3");
        $("#p2a2").removeClass("p2bg2").addClass("p2bg4");
      },
      change_code: function() {
        $("#_code").attr('src', 'http://zt.xoyo.com/jx3/mkey/check_login.php?type=xyz&' + Math.random());
      },
      submit: function() {
        if (mkey_login.check("ppt") && mkey_login.check("pwd") && mkey_login.check("xyz")) {
          var ppt = $("#ppt").val();
          var pwd = $("#pwd").val();
          var xyz = $("#xyz").val();
          $.ajax({
            type: "POST",
            url: "check_login.php?type=login",
            data: "ppt=" + ppt + "&pwd=" + pwd + "&xyz=" + xyz,
            dataType: "json",
            success: function(ret) {
              if ("s" == ret['flag']) {
                mkey_login._show_err("", ""); // 置空错误信息提示
                mkey_login.success(ret);
              } else if ("fuckyou" == ret['flag']) {
                mkey_login._show_err("", "fuckyou");
                mkey_login.change_code();
              } else if ("x" == ret['flag']) {
                mkey_login._show_err("", "xyz_err");
                mkey_login.change_code();
              } else if ("n" == ret['flag']) {
                mkey_login._show_err("", "not_b_m");
                mkey_login.change_code();
              } else if ("a" == ret['flag']) {
                mkey_login._show_err("", "record");
                mkey_login.change_code();
              } else if ("w" == ret['flag']) {
                mkey_login._show_err("", "wrong");
                mkey_login.change_code();
              } else if ("f" == ret['flag']) {
                mkey_login._show_err("", "no_right");
                mkey_login.change_code();
              } else {
                mkey_login._show_err("", "");
                mkey_login.change_code();
              }

            }
          });
        }
      }
    };
    var mkey_bind = {
      check: function() {
        var ret = true;
        var code = $(".c-code").val();
        var sn = $(".c-sn").val();
        var ua = confirm("请您确认:\n您所填写的“序列号“:玲珑密保锁(客户端)显示的不会随时间更换的“7”位数字串(在客户端底部的小号字体),“动态密码”:玲珑密保锁(客户端)显示的随时间每30秒更换一次的大号字体的“6”位数字串(在客户端中部的大号字体)。\n确认无误后点击【确认】按钮,重填点击【取消】按钮。");
        if (ua) {
          if (sn.length < 7 || sn.length > 12 || code.length != 6) {
            alert("温馨提示:\n请正确填写客户端显示的动态密码(6位数字,左边输入框)和序列号(7位数字,右边输入框)");
            ret = false;
          }
        }
        return ret;
      },
      success: function() {
        $('form').remove();
        $(".bind").append("<p style='font-size:16px;font-weight:bolder;color:#D7FB19; margin-top:6px'>(*^__^*) 恭喜您,绑定成功!</p>");
      },
      bind: function() {
        if (mkey_bind.check()) {
          var code = $(".c-code").val();
          var sn = $(".c-sn").val();
          var mkey = $("#mkey").text();
          $.ajax({
            type: "POST",
            url: "do_bind.php?mkey=" + mkey,
            data: "sn=" + sn + "&code=" + code,
            success: function(ret) {
              console.log(ret);
              if ("s" == ret) {
                mkey_bind.success();
              } else if ("b" == ret) {
                alert("温馨提示:\n请重新输入正确的动态密码,然后重新点击按钮【绑定】");
              } else if ("r" == ret) {
                alert("温馨提示:\n绑定失败,请重新点击按钮【绑定】");
              } else if ("i" == ret) {
                alert("温馨提示:\n请重新输入正确的序列号,然后重新点击按钮【绑定】");
              } else if ("h" == ret) {
                alert("温馨提示:\n您已经绑定过了");
              } else {
                alert("温馨提示:\n绑定失败,请重新点击按钮【绑定】");
              }
            }
          });
        }
      }
    };
    $("#s_btn").bind("click", function() {
      mkey_login.submit();
    });
    $(".b-sub").bind("click", function() {
      mkey_bind.bind();
    });
    $("#_code").bind("click", function() {
      $(this).attr('src', 'http://zt.xoyo.com/jx3/mkey/check_login.php?type=xyz&' + Math.random());
    });
    $("#change_code").bind("click", function() {
      $("#_code").attr('src', 'http://zt.xoyo.com/jx3/mkey/check_login.php?type=xyz&' + Math.random());
    });
  })();
});

唉,不堪回首:如何改进呢?

抱歉!评论已关闭.