Web前端开发--JavaScript的分层common层

common层

    common层本身依赖base层提供的接口，所以在使用common层组件时，必须先加载base层的代码，如代码清单。

<script type="text/JavaScript" src="base.js"></script>
<script type="text/JavaScript" src="common.js"></script>

     common层和base层供page层调用，二者的区别是common层提供的是相对庞大的组件。例如cookie，原生的JavaScript对设置和读取cookie的方法显得非常笨拙，但是我们可以通过封装一个用于操作cookie的组件提供类似php那样简单易用的操作cookie的接口。

GLOBAL.namespace("Cookie");
GLOBAL.Cookie = {
//读取
read : function(name){
var cookiesStr = ";"+document.cookie+";";
var index = cookieStr.indexOf(";"+name+"=");
if (index != -1){
var s = cookieStr.substrng(index+name.length+3,cookieStr.length);
return unescape(s.substring(0,s.indexOf(";")));
}else{
return null;
}
};
//设置
set : function(name,value,expires){
var expDays = expires*24*60*60*1000;
var expData = new Data();
expData.setTime(expData.getTime()+expDays);
var expString = expires ? "; expires ="+expData.toGMTString() : "";
var pathString = ";path=/";
document.cookie = name+ "=" + escape(value) + expString + pathString;
};
//删除
del : function(){
var exp = new Date(new Date().getTime()-1);
var s = this.red(name);
if(s != null){document.cookie = name+ "=" + s + ";expires =" + expData.toGMTString() + ";path=/"};
}
};

     我们定义的GLOBAL.Cookie组件封装原生JavaScript对cookie进行操作，用户只需要知道GLOBAL.Cookie提供了哪些接口。除了cookie，common层还有Ajax、Drag、Resize、Msg等。

    base层提供的接口和任何具体功能无关，非常底层，非常通用。common层则与具体功能相关。一个易用性、重用性和可扩展性都非常好的组件，代码量很大，所以common层的js需要按功能分成一个个单独文件，比如说common_cookie.js、common_drag.js、common_tab.js。

    common层组件不仅依赖base层接口，有时也依赖common层接口，比如模拟弹出窗口的Msg组件，如果需要拖拽功能就需要依赖Drag组件了，在加载时注意js文件顺序。

<script type="text/JavaScript" src="base.js"></script>
<script type="text/JavaScript" src="common_drag.js"></script>
<script type="text/JavaScript" src="common_msg.js"></script>