项目前端常见需求和常用技术

js常用组件和技术：
1、向后台传递参数：（1）通过id、name、class获取标签值（2）form序列化，serializeArray，可以转换成serializeObject。序列化后的map，key为name，value为字符串或者数组，这个需要区分。这里整理的解决方案如下：

//序列化为serializeObject
$.fn.serializeObject = function() {
      var o = {};
      var a = this.serializeArray();
      $.each(a, function() {
          if (o[this.name] !== undefined) {
              if (!o[this.name].push) {
                  o[this.name] = [o[this.name]];
              }
              o[this.name].push(this.value || '');
          } else {
              o[this.name] = this.value || '';
          }
      });
      return o;
    };

//区分序列化后的数据为数组还是字符串，做不同的处理
let object = $("#id").serializeObject;
if (typeof(object.userName) === 'object' && object.userName.constructor == Array) {
	
} else if(typeof(object.userName) === 'string' && object.userName.constructor == String){

}

2、表单校验validate：可以在标签上加required，也可以自定义validate方法。

//自定义表单校验validate
$("#formId").validate({ //#formId form表单id
	rules:{
			//字段的name属性:"校验器"
			userName:"required",//required在此含义是必填
			//字段的name属性:{校验器:值,校验器:值}
			passWord:{
				required:true,
				digits:true //digits是整数校验器,后面写true表示启动此校验器
			}
		},
		messages: {
			userName:"必填",//required在此含义是必填
			passWord:{
				required:"必填"
			}
		}
	});
	
//触发表单验证
$("#formId").valid();
//验证单个元素
$("#formId").validate().element($(this));

3、下拉框select2：有自带的selecting，selected方法，替代了select的change等方法，较为实用。特别注意：select2的基础标签不要使用select，推荐使用input，因此select会导致change事件触发两次，导致事件错乱。

//select选中事件
$(document).off('select2:select','[name=roleName]').on('select2:select','[name=roleName]',function(){})
//设置空值
$(obj).select2('val','空格');

4、日期控件laydate，有选中事件方法提供。

laydate.render({
            elem: dom,
            type: 'date',
            position: 'absolute',
            theme: '#ff5d49',
            istime: true,
            done: function(value, date, endDate){
                that.updateCardInfo()
               // console.log(value); //得到日期生成的值，如：2017-08-18
               // console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
                // console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
            }
        })

5、表格datatable：可以自定义表格中显示的样式。

总体来说：
（1）页面上标签需要触发事件传参时，最好在显示的时候设置到标签中，避免去寻找dom。
（2）后台能够校验的，尽量后台校验，减少前台的逻辑处理。