$.extend()方法在前端项目中的应用

应用背景

在实际项目的开发中,特别是数据展示较多的前端界面开发中,为了增强用户的体验,对于数据的操作,我们多用到可视化效果类的图表或者数据插件,比如说图表类的有echarts,highcharts,数据类的有easyui的datagrid之类的东西,熟悉这些插件的朋友就会知道,他们的实现是包含了很多的配置项的:
比如说百度的[echarts][1] 参数配置

option = {
    color: ['#3398DB'],
    tooltip : {
        trigger: 'axis',
        axisPointer : {          
            type : 'shadow'
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis : [
        {
            type : 'category',
            data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisTick: {
                alignWithLabel: true
            }
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'直接访问',
            type:'bar',
            barWidth: '60%',
            data:[10, 52, 200, 334, 390, 330, 220]
        }
    ]
};

或者easyui的[datagrid][2]配置参数

$('#magazineGrid').datagrid({
    height: 340,
    url: 'url',
    method: 'POST',
    queryParams: { 'id': id },
    idField: '产品ID',
    striped: true,
    fitColumns: true,
    singleSelect: false,
    rownumbers: true,
    pagination: false,
    nowrap: false,
    pageSize: 10,
    pageList: [10, 20, 50, 100, 150, 200],
    showFooter: true,
    columns: [[
        { field: 'ck', checkbox: true },
        { field: '数量', title: '数量', width: 80, align: 'left',
            editor: {
                type: 'numberbox',
                options: {
                    min: 0,
                    precision: 0
                }
            }
        }
    ]],
    onBeforeLoad: function (param) {
    },
    onLoadSuccess: function (data) {

    },
    onLoadError: function () {

    },
    onClickCell: function (rowIndex, field, value) {

    }
});

只要在项目中正确使用这些配置,在项目中就能得到我们想要的结果,运行界面,得到了我们想要的结果,so easy!
然而这样真的就可以了吗?我们常说,代码在设计中一定要考虑到它的扩展性,而这些配置项通过我们直接写来,当在别的界面或者本界面再次运用到这些组件的时候,我们不得不再写一遍,哪怕是简单的复制粘贴.
但粘贴的到的代码虽然可以实现,但代码的扩展性没有体现,并且会出现大量的冗余代码?如果现在在项目中总共有100个图表展示的地方,还有100个数据列表的展示,怎么办?因此,为解决扩展性和冗余性的问题,在代码设计过程中,我们就应当充分考虑到这些可能出现的问题,并做好解决的方案!

$.extend()方法解析

• $.extend()方法的原型

  extend(result,item1,item2,item3...);

  意思是通过此方法可以将item1,item2,item3等后面若干个配置项合并得到一个新的结果,即第一个参数 result,但是这样会更改result的结构,因此,便有了下面这种方式,(也是我在项目中经常用的方法)!

  var option=$.extend({},src1,src2,src3...)//将空对象"{}"作为结果参数。

  举个栗子

  var result=$.extend({},{name:"天涯123",age:24},{name:"小明",sex:"Boy"});
  //result = {name:"小明",age:24,sex:"Boy"}

  这是一个简单的实例,从上面的结果我们可以得出两个结论:

  1 后面的参数如果和前面的参数存在相同的名称，那么后面的会覆盖前面的参数值.
  2 通过"{}"作为结果参数的方式,其结构不会改变

  ---

  项目中的应用(以实现datagrid为例)

  首先,我们知道当前后两个参数相同的时候,后者会覆盖前者,因此,为满足配置项经可能的根据我们自己定义来实现,我们可以定义第一个item(也就是$.extend()中的非第一个参数):

  var basic = {
      title:'My Title',
      iconCls:'icon-save',
      nowrap: true,       
      striped: true,
      border: true,
      fitColumns: true,
      fit:true,
      pagination:true,
      rownumbers:true,
      singleSelect: false,
      loadMsg: '玩命加载中...'
  }

  接着,在我们要实例化一个datagrid数据表格的地方,根据不同配置,来进行个性化定义:

  var config = {
      url:/test/data.json,
      columns: [[
          {field:'ck',checkbox:true},
          {field: 'datetime', title: '日期', align: "center",width:100},
          {field: 'flows', title: '流量', align: "center",width:100}
      ]],
  }

  得到了我们想要的配置config后,我们就要祭出我们的大熔炉extend()方法啦!

  var myOptions = $.extend({},basic,config);
  $("#datagrid").datagrid(myOptions);

  这样只需要通过配置不同情况下的config,就可以得到不同的datagrid数据列表啦!并且我们可以通过封装basic为一个工具文件,在需要应用它 的地方引入他就可以轻松实现实例化,大功告成!

  ---

  extend()扩展

  1、$.extend(arg),该方法将arg合并到jquery的全局对象中去

  $.extend({
  hello:function(){window.alert("我是通过extend()合并的全局对象")}
  });

  2、$.fn.extend(arg)该方法将arg合并到jquery的实例对象中去

  $.fn.extend({
  hello:function(){window.alert("我是通过extend()合并的实例对象")}
  });

  3、extend方法重载深拷贝原型

  extend(boolean,result,src1,src2,src3...)

  第一个参数boolean代表是否进行深度拷贝，其余参数和前面介绍的一致!深拷贝的意思我用一个栗子来说明:

  
  var result=$.extend( true,  {},  
  { name: "BS", location: {city: "TIANJIN",county:"CHINA"} },  
  { last: "天崖", location: {state: "ZH",county:"ENGLISH"} } ); 

我们可以看出src1中嵌套子对象location:{city:"TIANJIN"},src2中也嵌套子对象location:{state:"ZH"},深拷贝为true,因此结果是:

result={name:"BS",last:"天崖", location{city:"TIANJIN",state:"ZH",county:"ENGLISH"}}

如果深拷贝为False,则结果是:

result={name:"BS",last:"天崖", location{state:"ZH",county:"ENGLISH"}}

好了,extend()方法就整理到这,么么哒 晚安!
  [1]: http://echarts.baidu.com/demo.html#bar-tick-align
  [2]: http://www.jeasyui.net/demo/331.html