工作笔记——js前端规范

　　去年年末做了一个项目，因为第一次做前端管理职位，第一次做整个项目的前端架构很多东西都不熟悉，作为一次大胆的尝试。

　　js方面的只有一个坑，那就是前端与后端的网络层封装，这一块是在后端的协助下开发的。网络层封装的过程中学到一点就是参数写成对象的形式是最佳实践，类似的还有消息提示框组件同理。

　　项目开发过程中遇到一个比较麻烦的问题，由于项目周期比较短，为了促进开发进度，我提议让UI和前端同时进行，其实现在想一下，这是一个错误的决定，因为这导致后期项目修改bug的时候有相当一段时间内都是在修改UI层面的东西，需求一直修改也导致项目后期不停地修改ui。最主要是项目周期太短，团队协作没有经验，导致后期花费太多时间在一些细节上，而这些细节应该在项目初期解决，不是在项目完成之后里面改来改去。

　　所以这次项目结束之后就和UI探讨项目开发的规范设计。后期讨论的结果是最好以组件的形式来设计ui　　

　　a:模态对话框的ui设计稿

　　b:选项卡的ui设计稿

c:表格的ui设计稿

d:常用组件的ui设计稿

e:文字层面设计到正文字体，正文大小，正文文字颜色；一级标题字体大小，字体颜色；二级标题字体大小，字体颜色；

f:表单ui设计，表单中还设计到左侧的描述文字的字体大小，文字颜色，与右侧input的距离，以及input的边框颜色，边框圆角是多少。

h:font-family: "Microsoft YaHei","微软雅黑",Tahoma,Arial,Helvetica,STHeiti;其中，后面两张字体是苹果默认的字体，最佳实践应该是：font-family: "Microsoft YaHei","微软雅黑"；因为不同的字体会产生不同的行间距和布局。

　　

属性	属性值
字体	整站字体、正文、标题、字体颜色、字体大小、高亮字体(正常时的颜色，hover时的颜色)
modal	title、body、footer、timer(定时器)
tab	活动的时候的样式、正常的时候的样式
table	表格的高度、对齐方式、hover时候的行颜色、无内容时的UI
无内容	无内容时的UI
分页组件	上一页、下一页、翻页
根据业务提取的组件	业务逻辑一定要清晰

编写js组件时，需要编写输入和输出都比较灵活的函数，比如模态对话框有可能需要定时器，有可能只需要一个按钮，有可能需要多个按钮，这些情况都需要考虑到。

以下是需要注意的几点

1、网络层封装，网络层应该封装在一个单例里面，单例名称定位HttpUtils;

e.g

 /**
 * @Author Mona
 * @Date 2016-12-08
 * @description 网络层封装
 */

 /**
  * 封装基本请求方式
  */
 window.BaseRequest = (function () {
     //发送请求的所有方式
     var request = {};

     /**
      * 基本请求
      */
     function baseRequestFunc(type,param,url,async,contentType,dataType,processData,opt_suc,paramType,opt_error) {
         var cur_url = contextPath+url;
         var now_url = '';
         //当把参数作为路由的一部分时此时的参数为字符串;
         (paramType&&paramType=='url')?(now_url=cur_url+'/'+param+'.json'):(now_url=cur_url+'.json');
         //这个里面是最基本的ajax
         $.ajax({
             type:type,
             data:param,
             url:now_url,
             async:async,//默认为true
             contentType:contentType,//默认为application/x-www-form-urlencoded
             dataType:dataType,//默认为预期服务器返回的数据类型
             processData:processData,//默认为true
             success:function(data,textStatus,jqXHR){
                 if($.isFunction(opt_suc)){
                     opt_suc(data,textStatus,jqXHR);
                 }
             },
             error:function(jqXHR,textStatus,errorThrown){
　　　　　　　　　　　　//其实，这里应该处理的更加灵活，比如说可以配置为可以选择使用默认的后端错误提示，或者是使用自己写的错误提示方式
                 renderErrorMsg(jqXHR,textStatus,errorThrown);
                 if($.isFunction(opt_error)){
                     opt_error();
                 }
             }
         })

     }

     /**
      * get异步请求方式
      */
     request.get = function (param,url,callback,paramType) {
         baseRequestFunc('get',param,url,true,'application/x-www-form-urlencoded','json',true,callback,paramType);
     }

     /**
      * get同步请求方式
      * param {param} object
      */
     request.sync_get = function (param,url,callback,paramType) {
         baseRequestFunc('get',param,url,false,'application/x-www-form-urlencoded','json',true,callback,paramType);
     }

     /**
      * post异步请求方式
      * param {param} object
      */
     request.post = function (param,url,callback,paramType) {
         baseRequestFunc('post',param,url,true,'application/json','json',true,callback,paramType);
     }

     /**
      * post的requestBean请求方式 这种请求方式适用于字段较多，且需要formdata方式上传文件
      * param {param} object  {param.files} array {param.fileNames} array {param.inputData} object
      */
     request.post_multipart_form_data = function (param,url,callback,paramType,formData,opt_error) {
         var form_data = new FormData();
         if(param.files && param.files.length>0){
            $.each(param.files,function(k,info_name){
                 //if(document.getElementById(info_name).files[0] !== undefined){
                     form_data.append('files',document.getElementById(info_name).files[0])
                 //}
             })
         }

         if(param.fileNames && param.fileNames.length>0){
             $.each(param.fileNames,function(i,item){
                 form_data.append('fileNames',item);
             })
         }
         if(formData && formData=='formdata'){
             $.each(param.inputData,function(i,item){
                 form_data.append(i,item);
             })
         }else{
            form_data.append('requestBean', new Blob([JSON.stringify(param.inputData)], {
                 type: "application/json"
             }));
         }
         baseRequestFunc('post',form_data,url,true,false,'json',false,callback,paramType,opt_error);
     }

     /**
      * post的formdata请求方式
      * param {param} object
      */
     request.post_form_data = function(param,url,callback,paramType,opt_error){
         var form_data = new FormData();
         $.each(param,function(i,item){
             form_data.append(i,item);
         })
         baseRequestFunc('post',form_data,url,true,false,'json',false,callback,opt_error);
     }

     /**
      * post的JSON.stringify(param)请求方式
      * param {param} object
      */
      request.post_string_data = function(param,url,callback,paramType,opt_error){
         var cur_data = JSON.stringify(param);
         baseRequestFunc('post',cur_data,url,true,'application/json','json',false,callback,paramType,opt_error);
      }
     return request;
 })();

 var HttpUtils = (function () {

 //融资申请流程所有请求接口对象
 var application = {};

 /**
 * 获取融资申请回显信息
 */
 application.get_finance_info_echo_data = function(param,callback){
 var url = '/finance/finance_info';
 BaseRequest.get(param,url,callback);
 }());

2、数据列表渲染等基础的常用的组件封装；

e.g:

 /**
  * @Author Mona
  * @date 2016-11-04
  * @description 审核结束提交组件
  * @param selector {string} 组件最大的容器名称
  * @param maxLength {int} 组件中文字输入的最大长度
  */

 function controlBtn(type,selector,curValLen){
     var _this = this;
     _this.selector = selector;
     _this.maxlength = 140;
     _this.curValLen = curValLen;
     _this.type = type;

     _this.select_dom = $(_this.selector).find('select[data-role="control-btn"]');
     _this.textarea_dom = $(_this.selector).find('textarea[data-role="control-btn"]');
     _this.btn_dom = $(_this.selector).find('[data-role="target-btn"]');
     _this.b_dom = $(_this.selector).find('[data-role="font-length"]>b');

     _this.selectVal = $.trim(_this.select_dom.val());
     _this.textareaVal = $.trim(_this.textarea_dom.val());

     _this.setOn = function(){
         _this.btn_dom.removeAttr('disabled');
     }

     _this.setOff = function(){
         _this.btn_dom.attr('disabled','');
     }

     if(_this.selectVal!==''){
         (_this.selectVal=='agree'||_this.type=='1' || _this.textareaVal.length>0)?_this.setOn():_this.setOff()
     } else{
         _this.setOff()
     }
     _this.init();

     curValLen?_this.b_dom.text(_this.maxlength-curValLen):_this.b_dom.text(_this.maxlength);
 }

 controlBtn.prototype = {
     init:function(){
         var _this = this;
         var curSelectVal = _this.selectVal || '';
         var curTextareaVal = _this.textareaVal || '';

         _this.b_dom.text(_this.maxlength-_this.curValLen); 

         _this.select_dom.on('change',function(){
             curSelectVal = $.trim($(this).val());
             console.debug('意见内容==='+curTextareaVal)
             if(curSelectVal!==''){
                 (curSelectVal=='agree'||_this.type=='1' || curTextareaVal.length>0)?_this.setOn():_this.setOff()
             } else{
                 _this.setOff()
             }
         })

         _this.textarea_dom.bind('input propertychange',function(){
             curTextareaVal = $.trim($(this).val()); 

             if(curSelectVal!==''){
                 (curSelectVal=='agree'||_this.type=='1' || curTextareaVal.length>0)?_this.setOn():_this.setOff()
             } else{
                 _this.setOff()
             }
             if(curTextareaVal.length>0){
                 if(curTextareaVal.length>_this.maxlength){
                     _this.b_dom.text(0);
                     $(this).val($(this).val().substring(0,140));
                 }else{
                     _this.b_dom.text(_this.maxlength-$(this).val().length);
                 }
             }else{
                 _this.b_dom.text('140');
             }

         })

     }
 }

 /**
 * @param {option} object
 * option.type tip| operableModal
 * option.title 提示的标题 string
 * option.info 提示的内容 string/dom
 * option.historyRef 从哪里来回哪里去 string
 * option.timer 停留的时间 int
 * option.cancelText 左侧取消按钮的文案
 * option.successText 右侧成功按钮的文案
 * option.cancelCallback 取消的回调函数
 * option.successCallback 成功的回调函数
 */
 function whaleModal(option){
     if($('#whale-modal-form').length>0){
         $('#whale-modal-form').detach();
     }

     if(option && typeof option !=='object'){//如果存在
         alert('请传入正确的参数！');
     }

     var type = (option&&option.type) || 'tip';
     var title = (option&&option.title) || '提示';
     var info = (option&&option.info) || '办理成功！';
     var removeStore = (option&&option.is_remove_store)||false;

     var historyRef = '';
     if(option&&option.historyRef){
        historyRef = contextPath+option.historyRef;
     }else if(window.sessionStorage["historyRef"]){
        historyRef = window.sessionStorage["historyRef"]
     }else{
        historyRef = contextPath+'/anagement_page';
     }

     var timer = (option&&option.timer) || 2000;
     var cancelText = (option&&option.cancelText) || '取消';
     var successText = (option&&option.successText) || '成功';
     var cancelCallback = option&&option.cancelCallback;
     var successCallback = option&&option.successCallback;
     var is_operable_modal = (type == 'operableModal');
     var cancel_able = (option&&option.cancelAble) || false;

     var h = '';
     h+='<div id="whale-modal-form" class="modal fade" tabindex="-1" style="display: none;" aria-hidden="true" data-role="whale-modal">';
    // h+='<div class="modal-backdrop"></div>';
     h+='<div class="modal-dialog">';
     h+='<div class="modal-content">';
     h+='<div class="modal-header">';
     h+='<span  class="close" data-dismiss="modal">×</span>';
     h+='<h4 class="blue bigger">'+title+'</h4>';
     h+='</div>';
     h+='<div class="modal-body">'+info+'</div>';
     if(is_operable_modal){
         h+='<div class="modal-footer">';
         cancel_able?(h+='<button class="btn btn-sm btn-default" data-dismiss="modal" data-role="cancel">'+cancelText+'</button>'):'';
         h+='<button class="btn btn-sm btn-primary" data-role="success">'+successText+'</button>';
         h+='</div>';
     }
     h+='</div>';
     h+='</div>';
     h+='</div>';
     $('body').append(h);
     var cur_modal = $('#whale-modal-form');
     var cancel_btn_dom = cur_modal.find('[data-role="cancel"]');
     var success_btn_dom = cur_modal.find('[data-role="success"]');
     cur_modal.modal('show');

     //以下是给取消确定按钮注册点击事件
     if(is_operable_modal){//如果不是需要自己去操作的modal 那么是不需要注册按钮的交互事件的
         cancel_btn_dom.on('click',function(){
             if($.isFunction(cancelCallback)){
                 cancelCallback();
             }
         });
         success_btn_dom.on('click',function(){
             if($.isFunction(successCallback)){
                 successCallback();
             }
         });

         $('[id="whale-modal-form"] [data-dismiss="modal"]').on('click',function(){
             window.location.href = historyRef;
         })
     }

     //以下是设置自动跳转的逻辑
     if(!is_operable_modal){//如果是需要自己去操作的modal那么就不用自动跳转
         setTimeout(function(){
             cur_modal.modal('hide');
             removeStore?window.sessionStorage.clear():'';
             window.location.href = historyRef;
         },timer);
     }

 }

3、【js命名】为了更好的维护后期代码，变量命名以下面的规则命名

代表dom对象的js变量命名为 xx_dom；

后端返回的参数为data；

前端发送给后端的参数为param；

构造函数的命名首字母大写后面驼峰形式；

拿到回显数据方法名为 get_echo_data

设置XX以'set'开头命名方法

得到XX以'get'开头命名方法

sessionStorage，localStorage中存储的数据都以驼峰形式设置key

4、【css命名】ui层面的东西和数据交互层面的东西分开，方便维护

在dom中不要经常使用id属性以免系统会产生重复，如果一定要使用id那么请加上前缀，比如container-head ,container-body , container-footer

css样式表中不使用id作为选择器书写样式，一律使用class

有数据交互功能的dom结构都是用data-role-XX的形式增加属性，方便在js中使用，且css中不使用data-role开头的属性书写样式。

5、【函数】

前端开发过程中函数经常用到，这个时候函数的命名以及函数的通用性非常重要

多人合作开发时函数命名尤其重要【涉及全局（通用）函数和各自使用的函数】普通函数的命名以驼峰形式书写

通用函数以g开头，比如gModal,gGetRoleInfo

构造函数首字母大写，后面使用驼峰形式书写

与网络层相关的方法命名以下划线的方式书写比如 HttpUtils.get_finance_echo_data

功能	函数名称
拿到后端返回的回显数据	get_finance_echo_data
拿到机构信息	get_institution_info_data

复用性比较高的函数使用对象的形式来传入参数，这样方便后期维护，如果参数不是以对象的形式出现，那么后期方法的改造会出现非常大的问题，比如说，网络层封装的函数又可能有其他的业务需求，那么再传参数，就有可能影响其他地方的调用，这个时候使用对象的形式传入参数，会给开发带来极大的便利。