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

最新推荐文章于 2024-09-14 18:52:56 发布

__Sususu

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量392

点赞数

分类专栏：技术笔记文章标签：框架 javascript function null 浏览器 url

本文链接：https://blog.csdn.net/shizhong8841/article/details/3282514

版权

技术笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

当前的版本, 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 名称空间的根下只有这些东西；尽管简单，却是十分必要；