1、要加载一个模块,我们需要一个URL作为加载地址,一个script作为加载媒介,但用户在require是都用ID,我们需要一个将ID转换为URL的方法,思路很简单,强加个约定,URL的合成规则是为：

basepath+模块ID+".js"

2、当浏览器自上而下分析DOM,在浏览器解析我们的Javascript文件时(指的是加载器文件)时,他就肯定是DOM树最后一个加入的script标签,因此有下面的方法:

zcLoadJs.js

function getBasePath()

{

    var nodes=document.getElementsByTagName("script");

    var node=nodes[nodes.length-1];//拿到最后一个加载的script标签对象,也就是加载器

    var src=document.querySelector?node.src:node.getAttribute("src",4);

    /*

    getAttribute（strAttributeName，lFlags）

     0

     默认。执行不区分大小写的属性搜索，如果找到该属性，则返回内插值。

     1

     执行区分大小写的属性搜索。为了找到一个匹配，在大写和小写字母strAttributeName必须完全匹配那些在属性名。

     2

     以String形式返回属性值。此标志不适用于事件属性。

     4

     将属性值作为完全展开的网址返回。仅适用于网址属性。

     */

    return src;

}
alert(getBasePath());

demo.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<script>

    document.write('<script src="../../common/jquery1.4.4.js"><\/script>');

    document.write('<script src="../加载器/zcLoadJs.js"><\/script>');

    document.write('<script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"><\/script>');

</script>

</body>

</html>

在IE678中输出:jquery.js的路径

在其它浏览器中输出:zcLoadJs的路径

zcLoadJs为我的加载器,里面执行getBasePath()方法,预期得到zcLoadJs.js的服务器路径,但是在IE678中却返回juqery.js的路径,这个不奇怪,很多的常规方法在IE中都会失效,除了API的差异性外,它本身也存在很多的bug,所以我们需要修改zcLoadJs.js中的getBasePath方法,使其兼容旧版本的IE,代码如下:

//解决了上面的问题

function getBasePath() {

    var nodes = document.getElementsByTagName('script'),

    node=nodes[nodes.length-1];

    if (window.VBArray)//如果是浏览器的IE的情况

    {

        for(var i=nodes.length;node;node=nodes[--i])

        {

            //通过readyChange属性,微软在document、image、xhr、script中都使用了这个属性,用来查看加载情况

            if(node.readyState === "interactive")

            {

                break;

            }

        }

    }

    else

    {

        node=nodes[nodes.length-1];

    }

    var src=document.querySelector? node.src:node.getAttribute('src',4);//一

    return src;

}

在解决IE678中的bug之后,想一下程序能否优化,访问DOM比一般的Javascript代码消耗高很多,这是可以可以利用Error对象,来对代码进行效率上的优化:

function getBasePath()

{

    try

    {

        a.b.c();

    }

    catch(e)

    {

        if(e.fileName)//firfox,当try中代码异常,通过抛出的e.fileName可以得到发生异常的文件名

        {

            return e.fileName;

        }

        else if(e.sourceURL)//safari,当try中代码异常,通过抛出的e.sourceURL可以得到发生异常的文件名

        {

            return e.sourceURL;

        }

    }

    var nodes = document.getElementsByTagName('script'),

        node=nodes[nodes.length-1];

    if (window.VBArray)//如果是浏览器的IE的情况

    {

        //倒序查找更快

        for(var i=nodes.length;node;node=nodes[--i])

        {

            //通过readyChange属性,微软在document、image、xhr、script中都使用了这个属性,用来查看加载情况

            if(node.readyState === "interactive")

            {

                break;

            }

        }

    }

    else

    {

        node=nodes[nodes.length-1];

    }

    var src=document.querySelector? node.src:node.getAttribute('src',4);//一

    return src;

}

JS框架设计之加载器所在路径的探知一模块加载系统的更多相关文章

  1. js框架设计1.1命名空间笔记

    借到了司徒正美的写的js框架设计一书,司徒大神所著有些看不太懂,果然尚需循序渐进,稳扎js基础之中. 第一张开篇司徒阐述了种子模块的概念 种子模块亦为核心模块,框架最先执行模块,司徒见解应包含:对象扩 ...

  2. JS框架设计之模块加载系统

    任何语言一到大规模应用阶段,必然要拆封模块,有利于维护和团队协作,与Java走得最近的dojo率先引进了加载器,使用document.write与同步Ajax请求实现,后台dojo以JSONP的方法来 ...

  3. JS框架设计读书笔记之-核心模块

    随笔记录一下读书心得 1. 框架模块-核心模块 该模块是框架最先执行的部分,jQuery与vue中都有初始化的代码. 模块的功能主要是:对象扩展.数组化.类型判定.事件绑定和解绑.无冲突处理.模块加载 ...

  4. JS框架设计之对象数组化一种子模块

    类数组对象是一个很好的存储结构,但是功能太弱了,为了享受纯数组的哪些便捷的方法,使用前可以做下转换,通常可以使用$.slice.call()方法做转换,但是旧版本的IE下的HTMLCollection ...

  5. Js框架设计之DomReady

    一.在介绍DomReady之前,先了解下相关的知识 1.HTML是一种标记语言,告诉我们这页面里面有什么内容,但是行为交互则要通过DOM操作来实现,但是注意:不要把尖括号里面的内容看作是DOM! 2. ...

  6. js框架设计1.4类型判断

    这篇司徒大神介绍了很多js的 不靠谱类型判断.篇幅也是第一篇中最常的 ,经阅读后,以后一定要用框架的自带的类型判断,万万不可随便乱用js原生判断.

  7. JS框架设计读书笔记之-异步

    setTimeout/setInterval 1. 如果回调执行时间大于间隔时间,真正的间隔时间会大一些. 2. 存在一个最小的时间间隔,即使seTimeout(fn,0),在IE6-IE8中大概为1 ...

  8. JS框架设计读书笔记之-节点模块

    节点的创建 浏览器提供了多种手段创建API,从流行程度依次是document.createElement.innerHTML.insertAdjacentHTML.createContextualFr ...

  9. JS框架设计读书笔记之-选择器引擎01

    选择符 选择符是指CSS样式规则最左边的部分,例如 p{},#id{},.class{},p.class{} 等等 总共可以分为四大类: 并联选择器 => 逗号 => $('div,spa ...

随机推荐

  1. 编写高质量代码改善C#程序的157个建议——建议144：一个方法只做一件事

    建议144:一个方法只做一件事 “单一职责原则”(SRP)要求每一个类型只负责一件事情.我们将此概念扩展到方法上,就变成了:一个方法只做一件事. 回顾上一建议的代码,LocalInit和RemoteI ...

  2. python-接口测试（思路）

    案例:接口发送post请求 步骤1:编写方法,用于提交post请求 步骤2:编写测试数据对象,用户提交测试数据 步骤3:调用方法和数据,进行测试 实例展示: 步骤1:编写方法checkapi_post ...

  3. HTML5+CSS3+jQuery Mobile轻松构造APP与移动网站 (陈婉凌) 中文pdf扫描版

    <HTML5+CSS3+jQuery Mobile轻松构造APP与移动网站>以HTML与CSS为主,配合jQuery制作网页,并搭配jQueryMobile制作移动网页,通过具体的范例从基 ...

  4. [Erlang10]为什么热更新时，Shell执行2次l(Module)后会把原来用到Module的进程 kill？

    0. 问题引入: -module(hot_code_server). -compile(export_all). start() –> erlang:register(?MODULE, erla ...

  5. django+echarts

    思路: 统一返回数据类型为json,然后前端发起Ajax请求后台数据接口 views.py def count_blog(request): # 下面等价于:select distinct auth, ...

  6. C#中Attribute/特性的使用

    类似Java的注解/Annotation 特性是用于在运行时传递程序中各种元素(比如类.方法.结构.枚举.组件等)的行为信息的声明性标签,这个标签可以有多个.您可以通过使用特性向程序添加声明性信息.一 ...

  7. python学习之路 四 ：文件处理

    本节重点 掌握文件的读.写.修改方法 掌握文件的处理模式的区别 一.文件读取 ​    ​1.读取全部内容 # 一次性读取文件 f = open("test.txt",'r',en ...

  8. 使用InstallUtil安装或卸载服务

    使用InstallUtil安装或卸载服务 一.安装服务: C:\Windows\Microsoft.NET\Framework\v4.0.30319\InstallUtil.exe D:\MyServ ...

  9. DAY31、socket套接字

    一.复习1.网络编程 软件开发架构 b/s架构 c/s架构 本质都是c/s架构2.互联网协议 OSI七层协议 应用层 表示层 会话层 传输层 网络层 数据链路层 物理连接层3. 物理连接层:建立物理连 ...

  10. 解决$ git clone fatal: Authentication failed

    今天在使用git clone克隆项目的时候报如下错误: $ git clone XXXXXX Cloning into 'XXXX'... fatal: Authentication failed f ...