bug出处: 前端 js
background:在使用jquery扩展datables时出现错误.
浏览器报错信息
jquery.dataTables-28e78e8c1897d5a8bcf7e18b2f2ba0b6.js:6529 Uncaught TypeError: extender.hasOwnProperty is not a function
at _fnExtend (jquery.dataTables-28e78e8c1897d5a8bcf7e18b2f2ba0b6.js:6529)
at HTMLTableElement.<anonymous> (jquery.dataTables-28e78e8c1897d5a8bcf7e18b2f2ba0b6.js:985)
at Function.each (jquery.min-e40ec2161fe7993196f23c8a07346306.js:2)
at n.fn.init.each (jquery.min-e40ec2161fe7993196f23c8a07346306.js:2)
at n.fn.init.DataTable [as dataTable] (jquery.dataTables-28e78e8c1897d5a8bcf7e18b2f2ba0b6.js:869)
at n.fn.init.$.fn.DataTable (jquery.dataTables-28e78e8c1897d5a8bcf7e18b2f2ba0b6.js:15070)
at initializePage (p0001.min-279739700a0ee06427801b7d4adb7219.js:61)
at onPageLoad (p0001.min-279739700a0ee06427801b7d4adb7219.js:96)
at HTMLDocument.<anonymous> (p0001.min-279739700a0ee06427801b7d4adb7219.js:101)
at j (jquery.min-e40ec2161fe7993196f23c8a07346306.js:2)
报错截图:
涉及代码:
jquery.dataTables.js
_fnExtend( out, extender, breakRefs ) 中 参数extender 即options出错
function _fnExtend( out, extender, breakRefs )
{
var val;
for ( var prop in extender ) {
if ( extender.hasOwnProperty(prop) ) {
val = extender[prop];
if ( $.isPlainObject( val ) ) {
if ( ! $.isPlainObject( out[prop] ) ) {
out[prop] = {};
}
$.extend( true, out[prop], val );
}
else if ( breakRefs && prop !== 'data' && prop !== 'aaData' && $.isArray(val) ) {
out[prop] = val.slice();
}
else {
out[prop] = val;
}
}
}
return out;
}
_fnExtend 函数的使用处
oInit = _fnExtend( $.extend( true, {}, defaults ), oInit );
var oInit = len > 1 ? // optimisation for single table case
_fnExtend( o, options, true ) :
options;
p0001.js
var oDataTableOption = _.DATATABLES_OPTIONS;
oDataTableOption.ajax = {
url : sContextPath + '/api/personPage',
data : function(oData) {
// 过滤模态参数
$.extend(oData, $('#app').serializeObject());
}
};
//省略
oDataTable = $('#persons').DataTable(oDataTableOption);
相对应 公司框架中 option 的创建方式为 Object.create(null)
前端框架
/**
* A method that creates default options for jQuery DataTables Plugin.
*
* @returns {Object} The default options for DataTables.
* @example
*
* _.DATATABLES_OPTIONS
* // => Object {autoWidth: false, ordering: false, processing: true, serverSide: true, stateSave: false…}
*/
function getDataTablesOptions() {
springfield.require('getMessage');
var getMessage = springfield.getMessage;
return Object.create(null, {
// features
'autoWidth': {
value: false,
enumerable: true,
writable: true,
}
//省略部分代码
}
修改方式为两种:
1.将jqeury框架中代码修改成
Object.property.hasOwnProperty.call(extender,prop)
//详细知识点参看原型链 及 call (apply) 函数的使用
2.将公司框架修改为
Object,create(Object.property)