专栏首页前端杂货铺深入seajs源码系列一

深入seajs源码系列一

简述

        前端开发模块化已经是大势所趋,目前模块化的规范有很多,众所周知的有commonJS,Module/Wrappings和AMD等,而且ES6也着手开始制定模块化机制的实现。类似于c/c++的include,java中的import关键字,在js中也定义了require关键字,用以引进依赖模块。

        由于规范的多样性,模块化的实现也是各有各的不同。nodejs遵从的就是commonJS规范,它有着一些形式上的约定:  

  1. require为函数,该函数接受一个字符串作为模块标示符
  2. require函数返回值为该模块API
  3. require函数出错,则抛出异常
  4. exports导出模块API
  5. 如果有多个require,则依次加载依赖

        但是浏览器端加载的模块却不像服务器端,依赖模块不在本地,需要通过http请求获取文件,这就涉及到异步加载。但是异步加载并不阻塞代码的运行,如果函数上下文中应用了加载的依赖模块,而此时依赖模块并未加载或者解析完毕,就会抛出undefined错误,避免该错误的发生可以使用回调模式。当所有依赖模块均加载完毕,后执行代码。这也就是Module/Wrappings规范,而seajs基本实现了该规范。

剖析

阅读seajs官网的入门demo,首先在主页面引入seajs文件,并设置入口

// seajs 的简单配置
seajs.config({
  base: "../sea-modules/",
  alias: {
    "jquery": "jquery/jquery/1.10.1/jquery.js"
  }
})

// 加载入口模块
seajs.use("../static/hello/src/main")

其次定义模块(main.js)

// 所有模块都通过 define 来定义
define(function(require, exports, module) {

  // 通过 require 引入依赖
  var $ = require('jquery');
  var Spinning = require('./spinning');

  // 通过 exports 对外提供接口
  exports.doSomething = ...

  // 或者通过 module.exports 提供整个接口
  module.exports = ...

});

这样,当打开页面时,会调用seajs.use函数并加载main.js文件,此时解析main模块的依赖,并加载jquery和spining模块,待这两个模块加载完毕,执行回调函数。具体执行细节将会在分析源码时提到。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 深入seajs源码系列二

    模块类和状态类 参照上文的demo,我们结合源码分析在简单的API调用的背后,到底使用了什么技巧来实现各个模块的依赖加载以及模块API的导出。        ...

    欲休
  • iframe编程的一些问题

    前几天做一个用iframe显示曲线图的demo,发现对iframe的contentDocument绑定 onclick事件都无效,而在页面中对iframe.co...

    欲休
  • 3d效果的图片轮播

    CSS3的3d变换 CSS3给我们提供了一个新的功能,那就是3d变换。3d变换和2d变换的基本API函数类似,只不过多了些在Z轴上的操作,不难使用。     ...

    欲休
  • 适配器模式

    适配器模式(Adapter Pattern)是作为两个不兼容的接口之间的桥梁。这种类型的设计模式属于结构型模式,它结合了两个独立接口的功能。 适配器模式将一...

    卡尔曼和玻尔兹曼谁曼
  • 使用pandas进行数据快捷加载

    导读:在已经准备好工具箱的情况下,我们来学习怎样使用pandas对数据进行加载、操作、预处理与打磨。

    华章科技
  • 剑圣的苦恼 CDQ分治入门

    剑圣非常在意自己的实力排名,所以剑圣想知道力量, 敏捷, 智力皆在自己之下的英雄有多少个? 你能帮帮他吗?

    ACM算法日常
  • 汉诺塔——各种编程范式的解决

      理解递归,汉诺塔(Tower of Hanoi)是个很适合的工具,不大不小,作为最开始递归的理解正合适。从而学习各种计算机语言乃至各种编程范式的时候,汉诺塔...

    窗户
  • 今日常识21

    豆浆的妙用:除了用来喝外,可以给杯子去茶渍,喝茶比较多的人,不管怎么洗杯子,总还是留有茶锈,用茶杯装1杯热的或温的豆浆,泡上2-3小时后就可以去掉茶渍了。

    也@1211917
  • HDUOJ------Daydream字符查找-并求其始末位置

    2013-07-17  10:50:38 Daydream Time Limit: 2000/1000 MS (Java/Others)    Memory L...

    Gxjun
  • Android开发实现去除bitmap无用白色边框的方法示例

    本文实例讲述了Android开发实现去除bitmap无用白色边框的方法。分享给大家供大家参考,具体如下:

    砸漏

扫码关注云+社区

领取腾讯云代金券