javascript - 希望大家进来帮我看看代码，给些建议

问题描述

问 题

前端入门坑一个，下面是我平时工作写的代码，自我感觉写的好low，很乱，但又不知道怎么去写才能更好的优化代码，还望各位指点，给些宝贵的建议（主要从代码的书写格式，给些建议）；

var moduleId = wrapNode.find(".moduleId").val();

  console.log(moduleId);
  $.ajax({

    dataType: 'jsonp',
    url: "/api/data.htm?ids=" + moduleId,
    cache: true,
    type: 'GET',
    jsonpCallback: "tce_" + moduleId,
    success: function(data) {
      console.log(data);
      var meg = data[moduleId].value.list;
      wrapNode.find('.bannerScroll').html(listTpl({
        items: meg
      }));

      var scrollLeft = parseInt(wrapNode.find(".bannerScroll").position().left);
      console.log(scrollLeft);
      var index = 1;
      var num, arr, currentWidth, count = 1;
      var go = true;
      setElements();
      renderLi();
      clickTab(".po");

      function setElements() {
        currentWidth = parseInt(wrapNode.find(".bannerFrame").width());
        arr = wrapNode.find(".list");
        var wrapWidth = parseInt(currentWidth) * arr.length;
        wrapNode.find(".list").css("width", currentWidth);
        wrapNode.find(".bannerScroll").css("width", wrapWidth);
        num = currentWidth;

      }


      function renderLi() {
        for (var i = 0; i < arr.length; i++) {
          if (i === 0) {
            wrapNode.find("ul").append("<li aimIndex =" + (i + 1) + " class = 'po on'></li>");
          } else {
            wrapNode.find("ul").append("<li aimIndex =" + (i + 1) + " class = 'po '></li>");
          }
        }
        console.log("li渲染了");
      }

      function tabLight(tabIndex) {

        var list = wrapNode.find("li");

        for (var i = 0; i < list.length; i++) {
          var aimIndex = list.eq(i).attr("aimIndex");
          if (parseInt(aimIndex) == tabIndex) {
            console.log("aimIndex:" + aimIndex);
            console.log("tabIndex:" + tabIndex);
            console.log("匹配了");
            for (var a = 0; a < list.length; a++) {
              list.eq(a).removeClass("on");
            }
            list.eq(i).addClass("on");
          }
        }

      }

      

      function clickTab(obj) {
        // alert(1111);
        $(obj).on("click", function() {
          var needAim = parseInt(wrapNode.find(this).attr("aimIndex"));
          if (needAim != index) {
            var moveDis = (needAim - index) * currentWidth;
            console.log("needAim:" + needAim);
            console.log(needAim - index);

            console.log("newIndex:" + index);

            console.log("moveDis:" + moveDis);;
            tabLight(needAim);
            index = needAim;
            count = needAim;
            move(-moveDis);
          }
        });
      }

      function animateN(obj, json, interval, sp, fn) {
        clearInterval(obj.timer);
        //var k = 0;
        //var j = 0;
        function getStyle(obj, arr) {
          if (obj.currentStyle) {
            return obj.currentStyle[arr]; //针对ie
          } else {
            return document.defaultView.getComputedStyle(obj, null)[arr];
          }
        }
        obj.timer = setInterval(function() {
          //j ++;
          var flag = true;
          for (var arr in json) {
            var icur = 0;
            //k++;
            if (arr == "opacity") {
              icur = Math.round(parseFloat(getStyle(obj, arr)) * 100);
            } else {
              icur = parseInt(getStyle(obj, arr));
            }
            var speed = (json[arr] - icur) * sp;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
            if (icur != json[arr]) {
              flag = false;
            }
            if (arr == "opacity") {
              obj.style.filter = "alpha(opacity : '+(icur + speed)+' )";
              obj.style.opacity = (icur + speed) / 100;
            } else {
              obj.style[arr] = icur + speed + "px";
            }
            //console.log(j + "," + arr +":"+ flag);
          }

          if (flag) {
            clearInterval(obj.timer);
            //console.log(j + ":" + flag);  
            //console.log("k = " + k);
            //console.log("j = " + j);
            //console.log("DONE");
            if (fn) {
              fn();
            }
          }
        }, interval);
      }

      function move(ele) {


        if (index > (arr.length)) {
          scrollLeft = num;
          index = 1;
        }

        scrollLeft = scrollLeft + ele;
        // $(".bannerScroll").animate({
        //   left: scrollLeft
        // }, 500);
        var obj = document.getElementById("scrollFrame");
        animateN(obj, {
          left: scrollLeft
        }, 5, 0.03, function() {

        });
        // func.animate(obj,{"left":scrollLeft},500);
        // obj.style.transform = "translateX("+scrollLeft+")";
        // $(".bannerScroll").css("transform", "translateX(" + scrollLeft + "px)");
        // animateN(obj,{left:200},500,0.01);
        console.log(scrollLeft);
        console.log(index);
        // index = index + 1;

      }
      
      function
      function simulationClick() {

        var list = wrapNode.find("li");
        for (var b = 0; b < list.length; b++) {
          if (parseInt(list.eq(b).attr("aimIndex")) == count) {
            console.log(22);

            list.eq(b).trigger("click");
            // index = parseInt(list.eq(b).attr("aimIndex"));
          }
        }

        count++;
        if (count === 5) {
          count = 1;
        }

      }

      // function move(ele) {

      //   go = false;
      //   if (!go) {
      //     console.log(scrollLeft);
      //     console.log(index);
      //     index = index + 1;
      //     if (index >= (arr.length)) {
      //       scrollLeft = num;
      //       index = 0;
      //     }
      //     scrollLeft = parseInt(scrollLeft) - ele;
      //     tabLight();
      //     wrapNode.find(".bannerScroll").animate({
      //       "left": scrollLeft
      //     }, 500);
      //   }
      //   go = true;
      // }

      // setInterval(simulationClick, 3000);


    }
  });

这个问题已被关闭，原因：偏离社区主题，与技术无关、讨论类、对他人无用

解决方案

说四点吧。

第一点，是代码结构的组件问题。

success 回调函数中的内容太长，而且里面太多定义。这些定义应该抽到外层去组织。

第二点，页面结构控制问题。

总的来说，手动拼 html 的方式尽量避免，虽然它简单直接，但是一方面是丑，另一方面字段的拼接很累。这部分，可以引入一些模板工具，或者自己单独做一些抽象。

第三点，命名。

比如：

function clickTab(obj) {
   $(obj).on("click", function() {
     var needAim = parseInt(wrapNode.find(this).attr("aimIndex"));
     ...
     }
   });
}

这里函数名，明显应该是 bindTab ，即绑定TAB事件的意思嘛，而不是点击TAB的意思啊。

第四点，习惯。

代码中遗留了大量的 console.log ，一方面你要学习如何调试你的代码，另一方面，这种坏习惯要改掉。大量的遗留 ，也说明你对你的代码控制度不够，对于代码运行的状态没有把握。

这篇关于javascript - 希望大家进来帮我看看代码，给些建议的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！