JavaScript 框架开发笔记 [二] 环境、兼容、简单的工具

 

当前的版本, xSystem Framework 1.0.32

前一篇里,确定了名称空间的实现,组建最根本的空间, xSystem 空间,在这个空间里,我还添加了其它的一些属性与小的使用频率非常高的方法.

网页编程里两大头痛，第一，兼容；第二，调试；
IE下尚有vs.net这彪旱的东西可以用，Firefox 下面怎么调试，一直没搞定，不然不排除自己水平问题； 面对框架里巨量的自定义对像，实在无逐个用alert 这种输出调试 ，前期在命令行的cscript 下运行时到是可以用wscript.echo 这种东西做输出追踪用，但是能力有限；下面这小段脚本，是利用 for....in....来获取对像内方法和属性的一个工具脚本，我把它放在了框架的最开始；返回后使用alert或wscript.echo输出，可以省力不少。

// 获取对像的所有信息，并拼成字符串返回var tracert = function(a){    var s="";    for(var key in a){     s += key +":" + a[key] + "　　|　　/n";    }    return(s);}

其次，为了在运行时让脚本知道当前的运行环境，有一些属性是必不可少的。

//=============== 常用浏览器识别 ==================// xSystem.isIE=(document.all&&document.getElementById&&!window.opera)?true:false;  xSystem.isMozilla=(!document.all&&document.getElementById&&!window.opera)?true:false;  xSystem.isOpera=(window.opera)?true:false;    //=============== 基础环境变量 ==================/// 完整访问域名xSystem.domainName = window.location.protocol+"//"+window.location.host;// 路径xSystem.nowPath = (/^.*:////.*?(//.*//).*$/ig.exec(window.location.href)==null)?"/":/^.*:////.*?(//.*//).*$/ig.exec(window.location.href)[1];// 完整路径，不含资源名xSystem.fullPath = xSystem.domainName + xSystem.nowPath;// 框架存放根目录xSystem.xRoot = "";xSystem.setXRoot = function(x){ if(x == null || x == "" || x == undefined) // 若参数为空，则默认位置认为在当前根目录的xSystem目录下  xSystem.xRoot = xSystem.util.getfullPath("/xSystem/"); else  xSystem.xRoot = xSystem.util.getfullPath(x);  if(xSystem.xRoot.substr(xSystem.xRoot.length-1,1)!="/") xSystem.xRoot += "/";  return xSystem.xRoot;}

除了变量，还有一些常用的方法，因为打起来觉的太长了，所以做了封装，解决懒惰的方法，就是勤劳的创新........

 // 根据标签创建一个元素并返回该元素 xSystem.dc = function(name){return document.createElement(name);} // 根据参数获取一个以经在页面上的元素并返回该素，即封装了 document.getElementById,document.getElementsByTagName,document.getElementsByName 这三个方法 xSystem.dg = function(name,type){  switch(type){   case "name":    return document.getElementsByName(name);   case "tagName":    return document.getElementsByTagName(name);   default:    return document.getElementById(name);  } }  // 重定向到指定URL xSystem.r = function(url){window.location = url;}  // 消息对话框或提示跳转 xSystem.ar = function(msg,url){  alert(msg);  if(url!="" && url != null)   xSystem.r(url); }

对于浏览器的识别，网上的方法不少，个人比较倾向于内核测试的方法；环境变量方面，当前仅把常用的路径和资源位置做了设置。框架存放根目录没有找到好的自动处理办法只好设置了手工的setter()方法，各位看客，若是有好的方法也可以诉我，感激涕泠；至于里面用依赖的xSystem.util.getfullPath()这个方法，是用来把当前的路径位置，转换成绝对资源URL的一个方法，后面将会大量用到，由其在后面处理外部JS与CSS资源载入时重复载入和文件引用记数的问题时，更是必不可少；具体实现并不复杂，将在稍后面的章节里介绍；

对于浏览器兼容处理的处理，个人认为，因为必竟还有W3C标准的存在，无论什么浏器，除个别的方法和属性外，如果对运行环境熟悉，不做特殊处理也是可以的实现浏览器的兼容的，但是用习惯于了IE环境的人一定还是会觉的IE里的一些特有方法和属性用起来的确很方便，比如HTMLDOM下的insertAdjacentElement()这个方法，XMLDOM 的 selectNode()、selectSingleNode()及xml属性;
下面的一段脚本，仅实现了几个我个人常用的方法。XML的几个方法是从网上抄来的，感谢作者，特此声明

//===============简单用浏览器兼容处理 ==================//if (!xSystem.isIE) {    window.HTMLElement.prototype.insertAdjacentElement=function(s,o){        try{            switch(s){                case "beforeBegin" :  //插在当前元素开始标签的前面                    this.parentNode.insertBefore(o,this);                    break;                case "afterBegin":   //插在当前元素开始标签的后面                    this.insertBefore(o,this.firstChild);                    break;                case "beforeEnd" :   //插在当前元素结束标签的前面                    this.appendChild(o);                    break;                case "afterEnd" :   //插在当前元素结束标签的后面                    (this.nextSibling)&&this.parentNode.insertBefore(o,this.nextSibling)||this.parentNode.appendChild(o);                    break;                default:     //异常.                    throw "none";            }            return o;        }catch(e){            return null;        }    }            XMLDocument.prototype.selectSingleNode = Element.prototype.selectSingleNode = function (sXPath) {        var oEvaluator = new XPathEvaluator();        var oResult = oEvaluator.evaluate(sXPath, this, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);        if (null != oResult) {            return oResult.singleNodeValue;        }        return null;    };        XMLDocument.prototype.selectNodes = Element.prototype.selectNodes = function (sXPath) {        var oEvaluator = new XPathEvaluator();        var oResult = oEvaluator.evaluate(sXPath, this, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null);        var aNodes = new Array();        if (null != oResult) {            var oElement = oResult.iterateNext();            while (oElement) {                aNodes.push(oElement);                oElement = oResult.iterateNext();            }        }        return aNodes;    }        XMLDocument.prototype.__proto__.__defineGetter__("xml", function () {        try {            return new XMLSerializer().serializeToString(this);        }        catch (e) {            return document.createElement("div").appendChild(this.cloneNode(true)).innerHTML;        }    });}

xSystem 名称空间的根下只有这些东西；尽管简单，却是十分必要；