2018_03-第3周

2018-03-第三周

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

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


you know,我是一个写前端的Java程序员。。
最近在做后台的数据表格页面时遇到一个问题,,大家应该都见过类似的后台
后台页面
点击白色框选地方的菜单项,右侧动态加载相应的内容,,每一个菜单项有一个点击事件,像这样👇

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

1
2
3
4
5
// 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 中找到了,接下来就可以愉快的打断点啦~👇
sourceURL

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

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

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

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

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

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

1
2
3
4
$("#merchantTable_toppager_center").remove();
$("#merchantTable_toppager_right").remove();

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

jqgrid-toolbar-3

完美~


参考链接:

关于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