寫在前面
1, 開發者在發的時候進行了copy ,copy後沒有進行更改。COPY的坑真的很大,要注意啊。
2, 對於變量的聲明 沒有搞清楚他的作用域,這個是開發者的水平的問題,需要加快學習,完善自己。
3,我們自己的變量,方法的命名,不僅僅要和JavaScript的 關鍵字躲避開,也要躲開我們用的各種js框架的插件的關鍵字等等。
4 ,關鍵的問題,開發者的開發的水平參差不齊,需求的不定性,管理跟不上。
革命尚未成功,同志仍需努力!
點擊菜單A 出現如下效果圖, 沒有構造出來datagrid,當然這是因爲找不到_tollbar 這個變量的問題,這個問題彆着急,往下看
點B的效果圖 如下,有工具欄,注意看title “這是B頁面”
好了,然後我們再點回A 看看,效果如下如所示
<%--
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>
<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>
<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>
<script >
</script> 中聲明的 ,那麼說這個 _toobar 的作用域 是多大呢, 咱們用debugger 來看一下, 我們在聲明_toolbar的下面加上debugger 看看
在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 ,關鍵的問題,開發者的開發的水平參差不齊,需求的不定性,管理跟不上。
革命尚未成功,同志仍需努力!
預知後事如何,且聽下回分解!