EasyUI所遇到的坑

本文主要记录使用EasyUI时所遇到的坑。

主要记录以下问题：

• EasyUI样式显示不出来
• 如何调用全局变量进行解耦合，让页面整合有序
• 为什么一些嵌套页面的EasyUI样式显示不出来

EasyUI的样式显示不出来

---

JS语法错误
EasyUI是用来开发后台管理系统的，是用jquery发开的，所以java script语言要懂一点，但是我之前并没什么相关的经验，所以遇到很多不必要的错误，比如说少一个逗号，少一个右括号，浪费了很多时间，因为js是弱类型的语言，所以只有在运行时才能发现错误，所以，只能细心一点了。

引用文件的顺序
引用文件的顺序很重要，否则一些EasyUI样式可能会显示不出来，所以要严格按照官方给出的顺序写：

<script type="text/javascript" src="Plug/jquery.min.js"></script>
<script type="text/javascript" src="Plug/jquery.easyui.min.js"></script>
<script type="text/javascript" src="Plug/locale/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" type="text/css" href="Plug/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="Plug/themes/icon.css"/>

如何调用全局变量进行解耦合，让页面整合有序

---

关于JS定义命名空间的具体细节可以看这里（不同浏览器的内核不同会导致easyui，或js命名空间失效，使用firefox，尽量别用chrome）

首先我们要写一个js文件，然后在里面定义一个变量，将它当做全局变量，并且定义一个方法，用于创建新的命名空间：

//定义一个全局变量
//var ryj = $.extend({}, ryj)
var ryj = ryj || {}

// 创建命名空间
ryj.createNS = function(namespace) {
    var nsparts = namespace.split(".");
    var parent = ryj;

    // we want to be able to include or exclude the root namespace so we strip
    // it if it's in the namespace
    if (nsparts[0] === "ryj") {
        nsparts = nsparts.slice(1);
    }

    // loop through the parts and create a nested namespace if necessary
    for (var i = 0; i < nsparts.length; i++) {
        var partname = nsparts[i];
        // check if the current parent already has the namespace declared
        // if it isn't, then create it
        if (typeof parent[partname] === "undefined") {
            parent[partname] = {};
        }
        // get a reference to the deepest element in the hierarchy so far
        parent = parent[partname];
    }
    // the parent is now constructed with empty namespaces and can be used.
    // we return the outermost namespace
    return parent;
}

然后在JSP文件中把这个文件引入：

    <script type="text/javascript" src="Js/libs.js"></script>

接下来我们就可以调用这个文件中的方法，为每一个页面定义命名空间了：

    <!-- 引入自定义函数文件 -->
    <script type="text/javascript" src="Js/libs.js"></script>
    <script type="text/javascript">
        ryj.createNS("ryj")
        ryj.createNS("ryj.layout")
        ryj.layout.centerPanel = $("#centerPanel")

在layout.jsp页面中我调用libs.js文件中的ryj.createNS()方法，传入一个字符串，于是一个专属于这个页面的命名空间就创建好了。接下来我们就可以创建专属于这个空间的变量了。

为什么说可以解耦合呢，就是因为有了命名空间，我们可以引用其他的页面的变量，这样就不用把代码都写在JS文件中了，那样会显得很臃肿，而且有了全局变量，我们也可以把一些通用的操作写在一个js文件里，然后就可以方便的在其他的页面调度。一个好的程序员是不会让一段代码重复多次的。

为什么一些嵌套页面的EasyUI样式显示不出来

---

比如说这样一个页面：
。。。服务器在维护，我一会在加上。

中央面板中有很多tab组成，每一个tab都是一个独立的页面，而每一个独立的页面中都包含有EasyUI中的一些组件，首先中央面板已经是一个嵌套的页面，嵌套在总的面板中，其次中央面板还要再起嵌套其他的页面，然后其他页面的样式就显示不出来了，只是一些很简单的HTML样式了。

中央面板可以显示，再嵌套就不行了，我确实很头疼。后来在痛苦中反复摸索出来的解决方法是在二次嵌套的页面里重新引入EasyUI的样式库，而且引用的文件一定要放在body里面，因为EasyUI只会读取body，其他部分会被忽略