zoukankan      html  css  js  c++  java
  • Angular2 前端代码规范

    1. 不要重置对象的引用!(重置只应该在组件或服务的初始化时) why:会使页面产生闪烁
    2. 不要给图片绑定一个空的值或空的图片引用(如果值从服务器异步过来,那应该在初始化时给它一个默认值)why:会触发一个404的请求 (如:img src=http://xxxx/null)
    3. 页面全部使用最新的angular2写法,on-click=>(click) bind-src=>[src] bind-html=>[innerHtml]

    规范:

    • 拆分模型和控制器(保持“瘦”控制器,“胖”模型的原则【界面交互在控制器里,业务逻辑都封装在模型里】)
    •  

    代码写法技巧:

    • if else 嵌套最多两级,减少代码逻辑层级【优化阅读】。  
      例子:
              queryCard.success = function (data) {
                  console.log(data);
                  that.pageInfo.bindCardList = JSON.parse(data);
                  if (that.pageInfo.bindCardList == null || that.pageInfo.bindCardList.length <= 0) {
                      that.viewInfo.isbindedCard = false;
                  }
                  else {
                      that.viewInfo.isbindedCard = true;
                      for (let entry of that.pageInfo.bindCardList) {
                          var cardStr = entry.card_no.split(' ').join('');
                          if (cardStr.length != 20 && cardStr.length != 13) {
                              continue;
                          }
      
                          if (cardStr.length == 20) {
                              entry.card_no = cardStr.substr(0, 5) + " " + cardStr.substr(5, 5) + " " + cardStr.substr(10, 5) + " " + cardStr.substr(15, 5);
                          } else {
                              entry.card_no = cardStr.substr(0, 5) + " " + cardStr.substr(5, 5) + " " + cardStr.substr(10, 3);
                          }
                          //构造弹窗信息
                          if (entry.is_default == 0) {
                              entry["isSelect"] = 0;
                              that.pageInfo.inputCardNo = entry.card_no;
                              that.getCardLLInfo();
                          } else {
                              entry["isSelect"] = 1;
                          }
                      }
                  }
              };

      =>

      queryCard.success = function (data) {
          console.log(data);
          that.pageInfo.bindCardList = JSON.parse(data);
          if (that.pageInfo.bindCardList == null || that.pageInfo.bindCardList.length <= 0) {
              that.viewInfo.isbindedCard = false;
              return;
          }
          that.viewInfo.isbindedCard = true;
          for (let entry of that.pageInfo.bindCardList) {
              var cardStr = entry.card_no.replace(" ",""); // <= split(' ').join(''); 其实应该把没有空格的值单独保存,很多地方都在使用它
              if (cardStr.length != 20 && cardStr.length != 13) {
                  continue;
              }
      ......

        

    • 尽量杜绝常量的使用【优化阅读】
      例子:
      <button *ngIf="item.activity_status == 2" class="btn btn-locate baidu" opt="N-去领取"
      => 
      <button *ngIf="item.activity_status == PKGActivityStatus.normal" class="btn btn-locate baidu" opt="N-去领取"
    • 变量和函数命名清晰,不含糊或生僻(不用太在意名字长度,如果含义清楚,可以接收)
    • 尽量消除重复代码(又在埋坑)
      如: entry.card_no.split(' ').join('');  或者  cookieService.get("abc");
    • 没用的代码、变量尽早删除
    • 冗余的代码必须精简:

      直接改写成:

          isShowCardListAlert() {
              return !this.viewInfo.isShowCardList
          }
      

      简化之后,发现,连这个函数都是冗余的:

      再分析,发现连变量【viewInfo.isShowCardList】都是多余的:

      <div class="win-box align-center" [hidden]="true" #winBox>
        <div class="bottom-box">
          <div class="tc-title"><span>切换其他卡</span><span class="close-plan" (click)="winBox.hidden=false">关闭</span></div>
          <div *ngFor="let item of pageInfo.bindCardList">
          ......
      

      最终控制器代码省掉了一个变量的操作,一整块儿函数!  

    • 定义对象的属性 entry["isSelect"] = 0 改成 entry.isSelect = 0
      还有 

      为什么要用“双引号”,这样连智能感知都被屏蔽了!而且审核代码的人,无法看出你到底是哪个字母写错了,还是多了个空格(巨坑!这个不仅仅是js代码的问题

    •  写代码时,请多为接手你代码的人想想!这种代码(已经无法表达此时的感受):

         =》 

      这段代码.......(不想说话)  还有下面这个:

      请尽量消除重复!!消除重复!消除重复!

    • 为了删除一个
      activity.warningCount 我必须小心翼翼,不知道哪里在使用,不知道,它用来干什么?!
    •  

       
  • 相关阅读:
    【转+补充】在OpenCV for Android 2.4.5中使用SURF(nonfree module)
    Delphi StarOffice Framework Beta 1.0 发布
    Angular ngIf相关问题
    angularjs文档下载
    公众号微信支付开发
    公众号第三方平台开发 教程六 代公众号使用JS SDK说明
    公众号第三方平台开发 教程五 代公众号处理消息和事件
    公众号第三方平台开发 教程四 代公众号发起网页授权说明
    公众号第三方平台开发 教程三 微信公众号授权第三方平台
    公众号第三方平台开发 教程二 component_verify_ticket和accessToken的获取
  • 原文地址:https://www.cnblogs.com/Denny_Yang/p/7251137.html
Copyright © 2011-2022 走看看