Sea.js加载原理

CMD规范

要想了解Sea.js的运作机制,就不得不先了解其CMD规范。

Sea.js采用了和Node相似的CMD规范,我觉得它们应该是一样的。使用require、exports和module来组织模块。但Sea.js比起Node的不同点在于,前者的运行环境是在浏览器中,这就导致A依赖的B模块不能同步地读取过来,所以Sea.js比起Node,除了运行之外,还提供了两个额外的东西:

  1. 模块的管理
  2. 模块从服务端的同步

即Sea.js必须分为模块加载期和执行期。加载期需要将执行期所有用到的模块从服务端同步过来,在再执行期按照代码的逻辑顺序解析执行模块。本身执行期与node的运行期没什么区别。

所以Sea.js需要三个接口:

  1. define用来wrapper模块,指明依赖,同步依赖;
  2. use用来启动加载期;
  3. require关键字,实际上是执行期的桥梁。

并不太喜欢Sea.js的use API,因为其回调函数并没有使用与Define一样的参数列表。

模块标识(id)

模块id的标准参考Module Identifiers,简单说来就是作为一个模块的唯一标识。

出于学习的目的,我将它们翻译引用在这里:

  1. 模块标识由数个被斜杠(/)隔开的词项组成;
  2. 每次词项必须是小写的标识、“.”或“..”;
  3. 模块标识并不是必须有像“.js”这样的文件扩展名;
  4. 模块标识不是相对的,就是顶级的。相对的模块标识开头要么是“.”,要么是“..”;
  5. 顶级标识根据模块系统的基础路径来解析;
  6. 相对的模块标识被解释为相对于某模块的标识,“require”语句是写在这个模块中,并在这个模块中调用的。

模块(factory)

顾名思义,factory就是工厂,一个可以产生模块的工厂。node中的工厂就是新的运行时,而在Sea.js中(Tea.js中也同样),factory就是一个函数。这个函数接受三个参数。

function (require, exports, module) {
    // here is module body
}

在整个运行时中只有模块,即只有factory。

依赖(dependencies)

依赖就是一个id的数组,即模块所依赖模块的标识。

node的方式-同步的require

想要解释这个问题,我们还是从Node模块说起,node于Ruby类似,用我们之前使用过的一个模块作为例子:

// File: usegreet.js
var greet = require("./greet");
greet.helloJavaScript();

当我们使用node usegreet.js来运行这个模块时,实际上node会构建一个运行的上下文,在这个上下文中运行这个模块。运行到require(‘./greet‘)这句话时,会通过注入的API,在新的上下文中解析greet.js这个模块,然后通过注入的exportsmodule这两个关键字获取该模块的接口,将接口暴露出来给usegreet.js使用,即通过greet这个对象来引用这些接口。例如,helloJavaScript这个函数。详细细节可以参看node源码中的module.js

node的模块方案的特点如下:

  1. 使用require、exports和module作为模块化组织的关键字;
  2. 每个模块只加载一次,作为单例存在于内存中,每次require时使用的是它的接口;
  3. require是同步的,通俗地讲,就是node运行A模块,发现需要B模块,会停止运行A模块,把B模块加载好,获取的B的接口,才继续运行A模块。如果B模块已经加载到内存中了,当然require B可以直接使用B的接口,否则会通过fs模块化同步地将B文件内存,开启新的上下文解析B模块,获取B的API。

实际上node如果通过fs异步的读取文件的话,require也可以是异步的,所以曾经node中有require.async这个API。

时间: 2025-01-01 05:39:35

Sea.js加载原理的相关文章

Sea.Js的运行原理

1.CMD(Common Module Definition)规范 Sea.js采用了和Node相似的CMD规范,使用require.exports和module来组织模块.但Sea.js比起Node的不同点在于,前者的运行环境是在浏览器中,这就导致A依赖的B模块不能同步地读取过来,所以Sea.js比起Node,除了运行之外,还提供了两个额外的东西: a.模块的管理 b.模块从服务端的同步 即Sea.js必须分为模块加载期和执行期.加载期需要将执行期所有用到的模块从服务端同步过来,在再执行期按照

原生js实现图片懒加载原理

背景:页面图片多,加载的图片就多.服务器压力就会很大.不仅影响渲染速度还会浪费带宽.比如一个1M大小的图片,并发情况下,达到1000并发,即同时有1000个人访问,就会产生1个G的带宽.为了解决以上问题,提高用户体验,就出现了懒加载方式来减轻服务器的压力,优先加载可视区域的内容,其他部分等进入了可视区域再加载,从而提高性能. 1.懒加载原理一张图片就是一个<img>标签,浏览器是否发起请求图片是根据<img>的src属性,所以实现懒加载的关键就是: 在图片没有进入可视区域时,先不给

javascript不依赖JS加载顺序事件对象实现

背景: 在现在WEB开发中,稍复杂一点的页面,都会涉及到多个模块,尤其是类似seajs.LABjs.requireJS等模块工具出来后,前端开发者分模块开发已经慢慢变成一种习惯了,但是多个模块间的常常有各种交集,需要通信.需要互相调用,这时监听者模式便是必不可少的一种设计模式了,在前端表现事件操作.backbone和jquery都有提供了很好的事件处理方式. 但是,真正开发需求的时候我们常常会遇到文件加载顺序跟事件监听与更新不一致的需求,比如说:在一个视频网站里面,有一个视频处理的JS模块和用户

浏览器的加载原理

1.  做前端的话  与浏览器一直在打交道,所以说 首先的弄明白 浏览器的加载渲染原理: —— 页面渲染是什么东西呢------个人通过学习总结为:html代码根据我们写好的css的规则规范显示在浏览器窗口中. 页面加载-直观影响: 用户界面,浏览器引擎,渲染引擎,网络,UI后端,JS解释器,数据存储 webkit渲染主流程:解析html以构件dom树,构建render树,布局render树,绘制render树. ——— 浏览器要显示html结构:首先,必须的从客户端到服务器发送请求,服务器响应

thinksns系统的js加载顺序整理

thinksns系统的js加载顺序整理 1.jQuery.js 2.jquery.form.js 3.common.js 4.core.js   //thinksns的核心js对象 5.module.js   //thinksns独有的HTML标签关联模型 6.module.common.js ................................................希望资深的前端大牛能给讲解一下内部的工作原理

【随笔】js加载

有时候,当发现js操作一个dom的时候,发现dom没有找到,这是由于html没有加载完就开始操作该dom的缘故,所以需要在html文档加载完后再加载js,于是我们可以这么做: js方法:window.onload 当一个文档完全下载到浏览器中时,才会触发window.onload事件.这意味着页面上的全部元素对js而言都是可以操作的,也就是说页面上的所有元素加载完毕才会执行.这种情况对编写功能性代码非常有利,因为无需考虑加载的次序. window.onload=function(){ alert

老调重弹:JDBC系列 之 &lt;驱动加载原理全面解析&gt;

前言 最近在研究Mybatis框架,由于该框架基于JDBC,想要很好地理解和学习Mybatis,必须要对JDBC有较深入的了解.所以便把JDBC 这个东东翻出来,好好总结一番,作为自己的笔记,也是给读者一个参考---以下是本文的组织结构,读者可以点击上面的目录查看: 概述 一般情况下,在应用程序中进行数据库连接,调用JDBC接口,首先要将特定厂商的JDBC驱动实现加载到系统内存中,然后供系统使用.基本结构图如下: 驱动加载入内存的过程 这里所谓的驱动,其实就是实现了java.sql.Driver

(转)JS加载顺序

原文:http://blog.csdn.net/dannywj1371/article/details/7048076 JS加载顺序 做一名合格的前端开发工程师(12篇)--第一篇 Javascript加载执行问题探索 楼主做前端开发一年多了,对前端的见解还是多多少少有一点的,今天特拿出来跟大家分享分享. 做前端开发少不了各种利器.比如我习惯用的还是Google浏览器和重型武器Fiddller. 一: 原始情况 首先大家看看如下的代码: 1 <%@ Page Language="C#&qu

js加载xml文件xin

js加载xml文件 作为刚进入软件开发大军的我,以一个水军的资格开始做梦,以一个画者的资格在'一张白纸'上开始涂抹.工作在哪里??工作在哪里呢??? 今天发现一道面试题: 附件中有一个城市列表的city.xml文件,现在需要您通过Javascript脚本对该文件进行解析,然后将城市列表还原到下拉列表框中:当选择下拉列表框时,在对应的文本框中显示该城市信息(界面布局请参考test1.html文件,也可以自行定义). 上网查了一天的资料,绞尽脑汁的试着网上前辈的各种方法,为什么一个个别人成功的案例,