项目总结

项目从两块分析

流程分析

盲目：从拿到页面开始没有仔细的评估项目难度。一开始以为自己可以包揽项目的三个页面，最后中途，将一个页面丢个同事。盲目，没有认真分析。
方式：项目开发的时候，没有仔细的观察项目，给出合理的开发时间和安排，所以导致在开发期间有大量的事件浪费。
被动：开发过程中，过于依赖后台的数据，是的开发过程特别的被动。
不独立：开发的时候，有很强的依赖心，没有自己认真的去解决问题。解决问题的能力有待提高。
沟通：在开发过程中，跟后台的配合，和同事的配合，不够熟练。沟通成本很大，同时浪费很大的成本。
测试：大部分情况，都是好多的小细节都没有注意到，是的花费很长的时间，寻找bug。线上的代码也是各种胡乱的改。是的代码有很大问题。
格式：代码书写的格式，有比较大的问题，使得代码和乱。没有规律。

登录页面

具体分析

首先是没有做好用户的友好：5s消失。页面搭的也有一定问题，就是结构没有提前做好导致后来还要该结构代码。
代码处理，没有提前做好，过于被动，气场过低。好多东西不主动去写，遗留下来很多问题。如，手机号码都没有提前做好判断。
页面优化。对于安卓和ios的差异还是需要仔细调节。事件绑定的跳转出现很大的问题，zepto的点击现在一直没有用好，还是用的是原生的代码。页面与前端的配合，没有提前沟通号，导致最后对样式有很大的改动。

经验吸收

治疗ios闪屏的。

*{
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        -webkit-tap-highlight-color: transparent;
    }

手机端开发的常用mate标签

<meta name="viewport"
   content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta charset="utf-8">
<meta content="no-cache,must-revalidate" http-equiv="Cache-Control">
<meta content="no-cache" http-equiv="pragma">
<meta content="0" http-equiv="expires">
<meta content="telephone=no, address=no" name="format-detection">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

模拟回退

function pushHistory(){
  var state = {
      title: 'title',
      url: '#'
  };
  window.history.pushState(state, 'title', '#');
}
window.addEventListener('popstate', function(evt) {
  if($('.forget_password').css("display") == 'block'){
    $('.item').hide();
    $('.login').show();
  } else if($('.new_password').css("display") == 'block'){
    $('.item').hide();
    $('.login').show();
  }
})

手机号判断

var telReg_1 =
(/^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/).test(username_1);


5. 密码格式判断

     ```
    var password1 = $('.new_password .password1').val().replace(/\s+/g,"");
    var password2 = $('.new_password .password1').val().replace(/\s+/g,"");
      ```
      ```
   字符，数字，字母，十到十六位：((?=.*\d)(?=.*\D)|(?=.*[a-zA-Z])(?=.*[^a-zA-Z]))^.{8,16}
$解释：
^.{8,16}$ # 密码长度为8~16位
((?=.*\d)(?=.*\D)|(?=.*[a-zA-Z])(?=.*[^a-zA-Z])) # 数字、字母、符号至少包含两种。
数字、字母、字符至少包含两种，可分为4种情况：
数字字母，数字符号，字母符号，数字字母符号
(?=.*\d)(?=.*\D) #必须包含数字和非数字（包括：数字字母，数字符号，数字字母符号）
|(?=.*[a-zA-Z])(?=.*[^a-zA-Z]) #或者必须包含字母和非字母（包括：符号数字，符号字母，符号数字字母）

账单页面

插件：在使用日历的时候，是用的时间和简历都是比较大的。但是最后还是没有用的很好，没有达到很有用的效果。
蒙板：在写页面的时候，用到了，蒙板的功能。但是在结构上没有做好处理，就是灰色背景的问题。
插件的封装功能还是有待提高。

经验吸收

时间戳判断

  function exDateRange(sDate1,sDate2){
    var iDateRange;
    if(sDate1!=""&&sDate2!=""){
          var startDate=sDate1.replace(/-/g,"/");
          var endDate=sDate2.replace(/-/g,"/");
          var S_Date=new Date(Date.parse(startDate));
          var E_Date=new Date(Date.parse(endDate));
          iDateRange=(S_Date-E_Date)/86400000;
    }
  return iDateRange;
  }

平年闰年判断

 function getDate(count) {
 var d = new Date();
 var year = d.getFullYear();
 var month = d.getMonth();
 var date = d.getDate();

 function alldays(year, month) {
     if(isLeapYear(year)) { //闰年
         switch(month) {
             case 0:
                 return "31";
                 break;
             case 1:   //2月
                 return "29";
                 break;
             case 2:
                 return "31";
                 break;
             case 3:
                 return "30";
                 break;
             case 4:
                 return "31";
                 break;
             case 5:
                 return "30";
                 break;
             case 6:
                 return "31";
                 break;
             case 7:
                 return "31";
                 break;
             case 8:
                 return "30";
                 break;
             case 9:
                 return "31";
                 break;
             case 10:
                 return "30";
                 break;
             case 11:
                 return "31";
                 break;
             default:
         };
     } else { //平年
         switch(month) {
             case 0:
                 return "31";
                 break;
             case 1:
                 return "28";
                 break; //2月
             case 2:
                 return "31";
                 break;
             case 3:
                 return "30";
                 break;
             case 4:
                 return "31";
                 break;
             case 5:
                 return "30";
                 break;
             case 6:
                 return "31";
                 break;
             case 7:
                 return "31";
                 break;
             case 8:
                 return "30";
                 break;
             case 9:
                 return "31";
                 break;
             case 10:
                 return "30";
                 break;
             case 11:
                 return "31";
                 break;
             default:
         };
     };
 };

 function isLeapYear(year) {
     if((year % 4 == 0) && (year % 100 != 0 || year % 400 == 0)) {
         return true;
     } else {
         return false;
     };
 };

模版：公司的模版是tonador，基于python的模版。后期需要加强学习。

项目从两块分析

流程分析

登录页面

经验吸收

账单页面

经验吸收

推荐阅读更多精彩内容