2018_03-第3周

2018-03-第三周

又到周五了，，今天手头的工作差不多告一段落了，趁着热乎劲儿赶紧把这两天遇到的问题记录一下~

jQuery中$.load()动态加载页面脚本调试

you know，我是一个写前端的Java程序员。。
最近在做后台的数据表格页面时遇到一个问题，，大家应该都见过类似的后台

点击白色框选地方的菜单项，右侧动态加载相应的内容，，每一个菜单项有一个点击事件，像这样👇

<a href="javascript:clickMenu('#(menu.url)')">

// url为相对路径地址，最终指向某个html页面
// #mainContent指向右侧主页面
function clickMenu(url){
    $('#mainContent').load(url);
}

正常来说，如果我们想要调试页面中的JavaScript代码，只需要 Cmd+Alt+I 调出Chrome DevTools，选择 source，找到相应的代码段，添加断点即可。但是，，以$.load()的方式动态加载的页面在Source中根本无法找到。。这 就尴尬了！！！难道只能在页面javaScript代码段中手码debugger？！惨无人道！一点也不优雅！！

一番求索，终于看到了希望，，在Stack Overflow[^1]找到了类似的问题，，顺藤摸瓜，找到了一个唤作sourceURL的东东，,只需要在要载入的页面中javascript代码添加一句//# sourceURL=jsName.js即可，然后就可以在 source 中找到了，接下来就可以愉快的打断点啦~👇

另外，，我们可以再深入挖掘一下下，比如了解下阮一峰老师写的JavaScript Source Map 详解，看到日期着实尴尬了下，2013年就有了，而我2018年才第一次见到，，介，也许就是传说中的差距。。

jqGrid中将导航栏复制到表格上方

在jQuery中$.load()动态加载页面脚本调试中的第一张偏中，主页面表格左下角的导航栏是一些常见的操作，比如添加、删除、编辑、搜索和刷新，，但是放在左下角的话，着实不太方便。控制好表格的高度还好一些，不用像下滑动直接就能在左下角找到这些操作入口。但是，如果控制不好高度的话，还要将页面滑到底部，，这体验，相当不好，，如果用户首次登陆后台的话，可能会懵『卧槽，怎么添加数据？！！咋操作？？？』。我一直觉得不需要产品使用说明的设计才是好设计，，这样，把常用操作放在表格左上角，效果马上不一样了~

在导航栏的设置项中，找到了cloneToTop选项，但是设置为true后，导航栏并没有cloneToTop..
在初始化设置项中找到了toppager，将值改为true之后，呦，的确上去了，，像这样

唯独导航栏没有上去！！！可恶，，于是又是一番求索，有成果~
原来，，设置cloneToTop的前提是toppager的值为true，，所以，接下来变成了这样👇

然后只需将分页和统计相关的div remove()就可以了

$("#merchantTable_toppager_center").remove();
$("#merchantTable_toppager_right").remove();

// 我将这两行代码放在了 loadComplete 回调函数中。

完美~

---

参考链接：

关于Source Map动态调试

1. https://stackoverflow.com/questions/9092125/how-to-debug-dynamically-loaded-javascript-with-jquery-in-the-browsers-debugg
2. https://www.html5rocks.com/en/tutorials/developertools/sourcemaps/#toc-sourceurl
3. http://www.ruanyifeng.com/blog/2013/01/javascript_source_map.html

关于jqGrid导航栏复制到表格上方

1. https://stackoverflow.com/questions/3929896/adding-jqgrid-custom-navigation-to-top-toolbar
2. https://stackoverflow.com/questions/3552855/add-toolbar-in-the-bottom-of-the-header-using-jqgrid/3557663#3557663