从一个时隐时现的工具栏说起（由一个工具栏引起的思（血）考（案））

最新推荐文章于 2023-05-20 16:26:35 发布

我是老孙

最新推荐文章于 2023-05-20 16:26:35 发布

阅读量647

点赞数 3

分类专栏： js 文章标签：作用域开发 jquery

本文链接：https://blog.csdn.net/sunjiyun26/article/details/50771944

版权

js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

写在前面

1，开发者在发的时候进行了copy ，copy后没有进行更改。COPY的坑真的很大，要注意啊。
2，对于变量的声明没有搞清楚他的作用域，这个是开发者的水平的问题，需要加快学习，完善自己。
3，我们自己的变量，方法的命名，不仅仅要和JavaScript的关键字躲避开，也要躲开我们用的各种js框架的插件的关键字等等。
4 ，关键的问题，开发者的开发的水平参差不齐，需求的不定性，管理跟不上。
革命尚未成功，同志仍需努力！

在这个图片中有一个标红的工具栏，这个工具栏是常规的列表中所用到的用来增删改的工具栏。

这个是在测试的额时候提交上来的bug ，可是开发者在本机点击的时候总是看不到这个工具栏，怎么看都看不到，切换浏览器也看不到，然后找到测试人员进行查看，当查看的时候确实没有了该工具栏。在另外一个开发者的机器上查看其它功能的时候，当点到这个功能的时候发现这个工具栏又出来了。

这到（ta）底（ma）遇见鬼了吗，神出鬼没的。

当第一次开发人员提出来这个问题的时候，我没在意，因为我知道我写的页面中是没有定义工具栏的，即使有那个配置项，我觉得他不会出现的，是测试人员的问题。从我本机看，确确实实也是看不到这个工具栏，确确实实看不到这个工具栏。确确实实看不到这个工具栏。重要的事情要说三遍。

到底是为什么呢？后来我想起来了一个东西，这个破玩意和人的操作顺序有关系，开发人员测试自己的功能的时候是直接点击自己的功能菜单，就是说直奔主题，直接点击他的功能项的菜单项，而测试人员并不是和开发人员一样，他测试的时候对于菜单的点击的顺序不同，而就是这个顺序不同造成了这个神出鬼没的工具栏。

难道说真的是操作顺序的问题？难道说真的是操作顺序的问题？难道说真的是操作顺序的问题？

当然不是了，对不对！（如果你认为是，那我也没办法）

那到底是什么东西导致了这个工具栏的神出鬼没呢。

All is JavaScript！now，our datagrid is build with easyui which is a collection of user-interface plugin based on jQuery。What is jQuery ?Sorry ，I really don't know！

刚才喝多了，怎么成英文了！

有一个东西叫做作用域的东西在作怪，具体的一些基础的概念，在这里不再进行阐述。自行脑补。

情景一：不会出现工具栏，

操作步骤从菜单直接进入该页面（功能项）A,假定为页面A吧，不会出现该工具栏。

情景二：出现工具栏

操作步骤，先点击页面(功能项)B，然后点击页面A，会出现工具栏。

页面A 和页面B 有很多的相同的地方，开发人员在进行开发功能A的时候进行了页面复制（COPY），复制页面B，然后进行了改动形成了页面A。

可恶的copy，开发过程中没少被它坑吧。我相信不少人被copy 坑！好了，这个不是我们说的重点。

说到作用域，先说一个东西叫做 window ，在所有的页面中，都默认有这样一个玩意。具体的我不做解释，你知道有这样一个东西就好。假设了，你已经知道这个东西和基础的js的基础。

在传统的，中规中矩的web系统中都有一个主页面，然后其他的一些内容通过各种方式在主页面中进行填充，变换。

为了说明这个问题，我们有三个页面，Main.jsp ,A.jsp ,B.jsp

Main.jsp 是主页面，模仿系统的最初的页面，

A.jsp 是包含那个时隐时现的工具栏的页面。

B.jsp 是包含 B 功能的页面

下图是 main.jsp 的页面

点击菜单A 出现如下效果图，没有构造出来datagrid，当然这是因为找不到_tollbar 这个变量的问题，这个问题别着急，往下看

点B的效果图如下，有工具栏，注意看title “这是B页面”

好了，然后我们再点回A 看看，效果如下如所示

这个时候A页面中的工具栏出现了，datagrid的也出现了。

好了，表面的现象咱们都看到了，废话说了一大桶，跟作用域毛关系呢，你倒底想说什么呢，想说清楚一个东西就需要先说这么一大堆废话，废话说完了。咱们来看一下代码。

main.jsp

<%--
  Created by IntelliJ IDEA.
  User: sunjiyun
  Date: 2016/3/1
  Time: 8:59
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title></title>
  <link rel="stylesheet" type="text/css" href="../js/jslibs/jquery-easyui-1.4.4/themes/default/easyui.css">

  <link rel="stylesheet" type="text/css" href="../js/jslibs/jquery-easyui-1.4.4/themes/icon.css">
  <%--<link rel="stylesheet" type="text/css" href="../demo.css">--%>
  <script type="text/javascript" src="../js/jslibs/jquery-easyui-1.4.4/jquery.min.js"></script>
  <script type="text/javascript" src="../js/jslibs/jquery-easyui-1.4.4/jquery.easyui.min.js"></script>
</head>
<body>
<h2>Basic Layout</h2>
<p>The layout contains north,south,west,east and center regions.</p>
<div style="margin:20px 0;"></div>
<div class="easyui-layout" style="width:700px;height:350px;">
  <div data-options="region:'north'" style="height:50px"></div>
  <div data-options="region:'south',split:true" style="height:50px;"></div>
  <div data-options="region:'east',split:true" title="East" style="width:100px;"></div>
  <div data-options="region:'west',split:true" title="West" style="width:100px;">
      <ul id="menu">
        <li id="A">菜单1-A</li>
        <li id="B">菜单2-B</li>
      </ul>
  </div>
  <div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'">
    <div class="easyui-panel"  id="centerTab"
         data-options="border:false,fit:true" style="background:#eee;display:block;">
    </div>
  </div>
</div>

<script type="text/javascript">
  $(document).ready(function(){
    $("#menu li").click(function(){
      var _id = $(this).attr("id");
      $('#centerTab').panel({
        href:getRootPath()+'/blogs/jsscope/'+_id+".jsp"
      });

    });

    function getRootPath() {
      //获取当前网址，如： http://localhost:8083/uimcardprj/share/meun.jsp
      var curWwwPath = window.document.location.href;
      //获取主机地址之后的目录，如： uimcardprj/share/meun.jsp
      var pathName = window.document.location.pathname;
      var pos = curWwwPath.indexOf(pathName);
      //获取主机地址，如： http://localhost:8083
      var localhostPaht = curWwwPath.substring(0, pos);
      //获取带"/"的项目名，如：/uimcardprj
      var projectName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1);
      return (localhostPaht + projectName+"/");
    }
  })
</script>
</body>
</html>

在 main.jsp中的代码我就不一行一行的解释了，只是个菜单的链接，在center中有一个div 作为panel ，这个panel作为系统内容的初始化的地方，点击菜单A 和B 的时候在这个地方显示A 和B 的内容

A.jsp的代码如下

<table class="easyui-datagrid" title="这是A页面" style="width:700px;height:250px"
       data-options="singleSelect:true,collapsible:true,url:'datagrid_data1.json',method:'get',toolbar:_toolbar">
  <thead>
  <tr>
    <th data-options="field:'itemid',width:80">Item ID</th>
    <th data-options="field:'productid',width:100">Product</th>
    <th data-options="field:'listprice',width:80,align:'right'">List Price</th>
    <th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
    <th data-options="field:'attr1',width:250">Attribute</th>
    <th data-options="field:'status',width:60,align:'center'">Status</th>
  </tr>
  </thead>
</table>

B.jsp的代码

<body>

<table class="easyui-datagrid" title="这是B页面" style="width:700px;height:250px"
       data-options="rownumbers:true,singleSelect:true,url:'datagrid_data1.json',method:'get',toolbar:_toolbar,">
  <thead>
  <tr>
    <th data-options="field:'itemid',width:80">Item ID</th>
    <th data-options="field:'productid',width:100">Product</th>
    <th data-options="field:'listprice',width:80,align:'right'">List Price</th>
    <th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
    <th data-options="field:'attr1',width:240">Attribute</th>
    <th data-options="field:'status',width:60,align:'center'">Status</th>
  </tr>
  </thead>
</table>
<script >
  var _toolbar = [{
    text:'增加',
    iconCls:'icon-add',
    handler:function()
    {    }
  },{
    text:'删除',
    iconCls:'icon-remove',
    handler:function()
    {   }
  },{
    text:'修改',
    iconCls:'icon-edit',
    handler:function()
    { }
  }];
</script>
</body>

在B.jsp的页面中多了一点东西是 _toolbar

注意看这个东西生命的地方是直接在

在chrome 浏览器中 F12 打开控制台看

在debugger 窗口中我们看到 watch ，call back ，scope 等选项卡，我们点开scope 选项卡，选项卡下面有global选项，（你可以用var 声明个其他的东西看看会不会出来个local选项）

而global 后面对着的是window ，那么说global下面包含哪些东西呢，我们点开看看，global下面的东西就是Window下面的东西
点开global 之后看到里面有好多东西，那么多，有的我能看懂，有的我也看不懂，不过没关系，找咱们关心的东西 _toolbar 到底在不在这儿，向下翻，很不幸，我们真的在Window下找到了它

也就是说 _toobar的有效范围是Window 那么说这个Window到底指的是谁呢，那我们继续向下找，找什么呢，
找Window.location.href 这个的值就是这个Window 的页面地址

很明显这个window 是main.jsp 这个页面，也就是说当_toolbar初始化的时候,他就在Window（main.jsp）中有效了。
A.jsp/B.jsp 作为main.jsp的一部分，在main.jsp中的js中声明的变量啊，函数啊，在A.jsp/B.jsp中是有效的，能够访问到的。
为什么情景一不出现工具栏而且datagrid出不来呢 ? 因为当你初始化Main.jsp以后你直接点击菜单A 这时候 A中的js 就会查找声明的变量，他找啊找，发现在A.jsp中找不到，然后他就向上找找mian.jsp找，因为你main.jsp包含着我(A.jsp),你不能不管啊，就给main.jsp要，找啊找啊，还是没找到，找不到了，哎！

最后找吐血了，没办法，你也没有，我只能给你报个错，不让你正常了！只能看到上面的那个出不来的datagrid 的图片了。

这个时候点击B.jsp B.JSP中声明了_toolbar，当然没问题了所以B 页面能够正常显示。这个时候main.jsp 也很高兴啊，刚才A。jsp给我要_toobar，都要吐血了，我都没有没法给他，现在B.jsp页面你给我了，太好了，这个时候Main.jsp非常高兴，那个嘚瑟啊

这个时候A回来了点击A 。jsp ，A.jsp不高兴，但是既然点击我了，我就得给你工作，他没有_toolbar，还是给main.jsp要，这次main.jsp吧别人给他的_toobar偷偷地给了A 。A不温不火的走了，你给了我就好好给你干活，上次都不给我，

既然Main.jsp把_toolBar 给他了，他也没理由不好好工作了，所以这时候能够正常显示datagrid了，并且把工具栏带来了。

不知道大概你明白为什么了吗？
关于作用域的问题，网上有一大推的材料，我也解释不了。

下面说说这个问题出现的原因
1，开发者在发的时候进行了copy ，copy后没有进行更改。COPY的坑真的很大，要注意啊。
2，对于变量的声明没有搞清楚他的作用域，这个是开发者的水平的问题，需要加快学习，完善自己。
3，关于变量的命名的问题，为什么我们的页面在测试的时候没出现datagrid的出不来的现象呢，因为我们的代码是这样的

因为<在options 中key 和value 都是一样的，也就是说后面的这个toolbar 是本来开发者自己定义的。但是这里也是被叫做toolbar，由于js的特殊性，这个toolbar 和key 的toolbar 是一个东西呗。
也就是说我们自己的变量，方法的命名，不仅仅要和JavaScript的关键字躲避开，也要躲开我们用的各种js框架的插件的关键字等等。
4 ，关键的问题，开发者的开发的水平参差不齐，需求的不定性，管理跟不上。
革命尚未成功，同志仍需努力！