解释一个javascript代码片段

Question

下面这个片段只是整篇复杂JS代码的一小段，感觉读起来难于理解，希望高手帮忙逐行解释。另外问一下，这种json格式里嵌套大段javascript的写法是纯手工写的还是借助了什么工具呢，如果纯手工写的，在下实在佩服，并且里面几乎都是jquery的脚本库写法啊
            addToolbarButton: function($grid, btn, obj) {
                $grid.jqGrid('navButtonAdd', '#' + obj.pagerId, {
                    caption: btn.caption,
                    title: btn.toolTip,
                    buttonicon: (btn.icon === undefined || btn.icon === "") ? "ui-icon-newwin" : btn.icon,
                    cursor: "pointer",
                    position: 'last',
                    onClickButton: function(btn) {
                        //利用闭包在循环中作事件绑定
                        return function() {                            //如果调用时传入了事件处理函数,则优先执行,否则使用配置文件中的处理
                            if (!!obj.events && !!obj.events.onToolbarButtonClick
                                            && $.isFunction(obj.events.onToolbarButtonClick)) {
                                //调用绑定的事件 这里的this是grid的dom对象
                                obj.events.onToolbarButtonClick.call(Etrans.UI.Grid.jqGrid.getEventObject($grid, btn, obj));
                            }
                            else {
                                if (btn.clientMethod !== '') {
                                    Etrans.Function.getFunction(btn.clientMethod).call(Etrans.UI.Grid.jqGrid.getEventObject($grid, btn, obj));
                                }
                            }
                        };
                    } (btn)
                });
            },

Answer 1

/**
 * 功能：点击“添加工具栏”按钮 添加导航子菜单
 */
addToolbarButton: function($grid, btn, obj) 
{
$grid.jqGrid('navButtonAdd', '#' + obj.pagerId, {
caption: btn.caption,  //标题1
title: btn.toolTip,    //标题2
buttonicon: (btn.icon === undefined || btn.icon === "") ? "ui-icon-newwin" : btn.icon, //子菜单前面跟的图标
cursor: "pointer",//鼠标放上去时显示指针（如果是hand的话，应该是显示的手）
position: 'last',//这个子菜单添加在菜单列表的末尾
onClickButton: function(btn) {//添加这个子菜单被点击时触发的事件
//利用闭包在循环中作事件绑定
return function() { //如果调用时传入了事件处理函数,则优先执行,否则使用配置文件中的处理
if (!!obj.events && !!obj.events.onToolbarButtonClick
&& $.isFunction(obj.events.onToolbarButtonClick)) {
//调用绑定的事件 这里的this是grid的dom对象
obj.events.onToolbarButtonClick.call(Etrans.UI.Grid.jqGrid.getEventObject($grid, btn, obj));
}
else {
if (btn.clientMethod !== '') {
Etrans.Function.getFunction(btn.clientMethod).call(Etrans.UI.Grid.jqGrid.getEventObject($grid, btn, obj));
}
}
};
} (btn)
});
}

Answer 2

首先，你需要搞懂什么是json，一句话也说不清楚，而且是js最基础的知识之一，解释它就好比在学高等数学的时候解释9*9乘法表一样没有意义， 先google一下了解一下基本概练吧。然后接着朝下看:
第一行其实定义了一个function addToolbarButton.
这样写你可能看得更明白一些:
var addToolbarButton = function($grid, btn, obj){
    $grid.jqGrid('navButtonAdd', '#' + obj.pagerId, {......});
}
$grid.jqGrid()有3个参数, 第一个'navButtonAdd',第二个'#' + obj.pagerId, 第三个有点特殊:它是一个json对象,有很多属性,包括:caption, title, buttonicon, cursor, position, onClickButton. 其中onClickButton是一个function, 它返回一个闭包(关于闭包,又要你自己学习一下了,很重要的概念).so, over...

Answer 3

不是每个人都学jquery,而且jquery那么多插件， 学都学不完。所以回答的人少。

Answer 4

我对jquery 不怎么感兴趣 几乎都是手写脚本 主要原因也是最懒的看别人代码 做代码这行的人感觉都应该有这样的体会 看别人的代码 尤其是很长没有注释的那种 简直是一种折磨 而且现在好多公司 也都自己写脚本框架  

Answer 5

如上的代码和json无关，{a:"a",b:"b"}，这种格式是literal方式的定义javascript的方法。就和var obj={};类似。

Answer 6

定义javascript对象，少写了两个字。