seajs 源码分析二

继续接上一篇来分享剩下的seajs源码，计划这一篇写完以后再来一篇就结束了。这一篇就是分析moudle之前的部分

首先是前面的一些变量声明

var doc = document
var cwd = dirname(doc.URL)
var scripts = doc.scripts

// 默认的是seajsnode作为id添加到dom中，或者作为script里最后一个项添加到dom中
var loaderScript = doc.getElementById("seajsnode") ||
    scripts[scripts.length - 1]

// 如果seajs正在工作时，取得正在执行的script的路径，或者取得cwd
var loaderDir = dirname(getScriptAbsoluteSrc(loaderScript) || cwd)

function getScriptAbsoluteSrc(node) {
  return node.hasAttribute ? // IE6/7下没有
      node.src :
    // 详细属性见 http://msdn.microsoft.com/en-us/library/ms536429(VS.85).aspx
      node.getAttribute("src", 4)
}


// 开发测试用
seajs.resolve = id2Uri

下面这段开始是在util-request.js中

var head = doc.head || doc.getElementsByTagName("head")[0] || doc.documentElement
var baseElement = head.getElementsByTagName("base")[0]

var IS_CSS_RE = /.css(?:?|$)/i
var currentlyAddingScript
var interactiveScript

由于onload在webkit小于535.23和firefox小于9.0版本下是不支持onload事件的，所以要做一些额外处理。

var isOldWebKit = +navigator.userAgent
    .replace(/.*(?:AppleWebKit|AndroidWebKit)/(d+)..*/, "$1") < 536

isOldWebkit 是用来确定webkit的版本号是否过于陈旧，这样用这个变量就可以额外在最后onload事件设置中做一些额外处理。

接下去的源码如下：

function request(url, callback, charset) {
  var isCSS = IS_CSS_RE.test(url)
  var node = doc.createElement(isCSS ? "link" : "script")

  if (charset) {
    var cs = isFunction(charset) ? charset(url) : charset
    if (cs) {
      node.charset = cs
    }
  }
  
  // 添加onload
  addOnload(node, callback, isCSS, url)
  
  // 根据添加类型不同，增加不同属性
  if (isCSS) {
    node.rel = "stylesheet"
    node.href = url
  }
  else {
    node.async = true
    node.src = url
  }

  // 在IE6-8中，在insert以后script会立刻执行
  // 所以用currentlyAddingScript来维持住，用于在define中取得url

  // ref: #185 & http://dev.jquery.com/ticket/2709
  baseElement ?
      head.insertBefore(node, baseElement) :
      head.appendChild(node)

  currentlyAddingScript = null
}

上面讲到的addOnload函数在下面分析，其中有node=null，这是考虑到IE下的变量销毁机制而设置的，可以有效减少内存使用

function addOnload(node, callback, isCSS, url) {
  var supportOnload = "onload" in node

  // 在webkit和firefox的老版本中
  if (isCSS && (isOldWebKit || !supportOnload)) {
    setTimeout(function() {
      pollCss(node, callback)
    }, 1) // 在node加入之后就开始执行
    return
  }

  if (supportOnload) {
    node.onload = onload
    node.onerror = function() {
      emit("error", { uri: url, node: node })    // 触发error自定义事件
      onload()
    }
  }
  else {
    // 不支持onload的情况下，借助onreadystatechange
    node.onreadystatechange = function() {
      if (/loaded|complete/.test(node.readyState)) {
        onload()
      }
    }
  }

  function onload() {
    // 确保只运行一次，防止内存泄露
    node.onload = node.onerror = node.onreadystatechange = null

    // 移除script
    if (!isCSS && !data.debug) {
      head.removeChild(node)
    }

    node = null

    callback()
  }
}

对于是css的情况，通过检测sheet来辨别是否成功加载

function pollCss(node, callback) {
  var sheet = node.sheet
  var isLoaded

  // 对于WebKit < 536
  if (isOldWebKit) {
    if (sheet) {
      isLoaded = true
    }
  }

  else if (sheet) {
    try {
      if (sheet.cssRules) {
        isLoaded = true
      }
    } catch (ex) {
      // 在 Firefox 13.0 以后`ex.name`的值从 "NS_ERROR_DOM_SECURITY_ERR"
      // 变为 "SecurityError" 但是我们这里只要测试小于9.0版本，所以不要紧
      if (ex.name === "NS_ERROR_DOM_SECURITY_ERR") {
        isLoaded = true
      }
    }
  }

  setTimeout(function() {
    if (isLoaded) {
      // 在这里执行callback 让css有够的时间运行
      callback()
    }
    else {
      pollCss(node, callback)
    }
  }, 20)
}

关于下面的require的正则匹配，太长了。。。没有好好读，待我研究一番

// 取得正在操作的script
function getCurrentScript() {
  if (currentlyAddingScript) {
    return currentlyAddingScript
  }

  // 在 IE6-9 的浏览器中，onload事件可能不会正确运行
  // 但是，我们可以认为，在script node中属性是interactive的状态时，就是正在运行的script
  // interactive在前面有声明，是seajs闭包中的全局变量
  if (interactiveScript && interactiveScript.readyState === "interactive") {
    return interactiveScript
  }

  var scripts = head.getElementsByTagName("script")

  for (var i = scripts.length - 1; i >= 0; i--) {
    var script = scripts[i]
    if (script.readyState === "interactive") {
      interactiveScript = script
      return interactiveScript
    }
  }
}


// 测试用
seajs.request = request


/**
 * util-deps.js - The parser for dependencies
 */

// require的正则判断
var REQUIRE_RE = /"(?:\"|[^"])*"|'(?:\'|[^'])*'|/*[Ss]*?*/|/(?:\/|[^/
])+/(?=[^/])|//.*|.s*require|(?:^|[^$])requires*(s*(["'])(.+?)1s*)/g
var SLASH_RE = /\\/g

function parseDependencies(code) {
  var ret = []
  // 首先搞定多个连在一起的情况，接下来就是require的匹配
  code.replace(SLASH_RE, "")
      .replace(REQUIRE_RE, function(m, m1, m2) {
        if (m2) {
          ret.push(m2)
        }
      })

  return ret
}

后面三到四天要出去旅游了（毕业旅行呦！），回来以后把最后一篇补上。最后一篇计划是写完上面类似的分析后，整理一个运行的步骤，不然会感觉好混乱好混乱。。。。

呦，出去踏青喽！