项目总结

项目从两块分析

流程分析

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

登录页面

• 具体分析

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

经验吸收

1. 治疗ios闪屏的。

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

2. 手机端开发的常用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">
   

3. 模拟回退

   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();
     }
   })
   

4. 手机号判断

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]) #或者必须包含字母和非字母（包括：符号数字，符号字母，符号数字字母）

账单页面

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

经验吸收

1. 时间戳判断

     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;
     }
   

2. 平年闰年判断

    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;
        };
    };
   

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