GIS Web前端设计规则

1.程序员在设计一套前端功能的时候，先不考虑样式！等先把交互功能实现后再讲样式加上去

2.页面先初始化，初始化完页面后再为页面表单元素绑定事件，每个模块的事件在各自的init方法中绑定，

3.程序在初始化的过程中，应该按照优先级，基础的模块先初始化，被依赖的模块先初始化，比如说，配置文件先初始化，然后再初始化UI模块，Ui模块初始化后，再初始化地图对象模块，并且注释后面的模块不会影响前面的模块（注释地图对象模块，不会影响Ui，注释ui和地图模块,不会影响配置文件），所以初始化要有先后顺序。

4.在应用模块中，业务上不相干的两个模块之间，注释其中一个模块，不应该对另一个模块产生影响，比如说，注释地名查询模块，不应该对公交模块产生任何影响，因为他们之间没有业务关系的；

5.对于有关系的两个模块之间，如果注释其中一个模块，对另一个模块可能会产生影响，比如说公交模块，和最短路径模块，他们之间有共用的组件，并且该组件在其中一个模块中

6.列表显示，或菜单显示，可以使用html中的有序列表，或无需列表（必杀技）.

7.在css中引入reset.css，是为了让所有的浏览器都引用默认的reset.css中的默认样式，而不是使用浏览器中标签的默认样式,比如说p标签，IE给的默认样式，和火狐给的默认样式可能不一样，那么，我们就需要使用reset.css统一其样式。让默认样式以reset.css为准

8.html元素中，除了表单元素，其他的<label> <p><span>等都是容器，他们的默认样式是不一样的，但是完全可以通过css让他们都具备一样的样式效果，所以他们本质上都是一样的，只是浏览器赋予他们的默认样式不一样罢了！

 

9.在显示结果集时，统一使用模板，这样方面维护，如图层管理的结果列表显示：

 var result = {

      item: "<li class='m1'>" +
            " <a href='javascript:void(0);' onclick='gotoLayer(\"${layerid}\")'>定位</a></li>" +
            " <li class='m2 hasBorder'><a href='javascript:void(0);'  onclick='opacityWin(\"${layerid}\")'>透明度</a></li>" +
            " <li class='m3 hasBorder'><a href='javascript:void(0);'  onclick='removeLayer(\"${layerid}\")'>移除</a></li>" +
            " <li class='m4'>${moveTop}</li> " +
            " <li class='m5'>${moveUp}</li> " +
            " <li class='m6'>${moveDown}</li> " +
            " <li class='m7'>${moveBottom} " +
            "</li>"

 }

 

10.结果显示，统一使用<ul><li>配合css控制格式