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 是一个模块加载器,模块加载器需要实现两个基本功能:

      1、实现模块定义规范,这是模块系统的基础。

      2、模块系统的启动与运行。

剖析

阅读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模块,待这两个模块加载完毕,执行回调函数。具体执行细节将会在分析源码时提到。

总结

以上就是关于seajs介绍与剖析的全部内容,希望本文的内容对大家学习或者使用seajs能有所帮助,如果有疑问大家可以留言交流。小编还会陆续更新关于seajs的文章,感兴趣的朋友们请继续关注。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索jquery
, seajs
seajs教程
,以便于您获取更多的相关知识。

时间: 2024-10-29 05:48:48

seajs学习教程之基础篇_Seajs的相关文章

Discuz! 防水墙使用教程之基础篇(1)

中介交易 SEO诊断 淘宝客 云主机 技术大厅 Discuz! 防水墙于今年5月正式上线,截至9月底,已经为数十万社区网站提供垃圾信息处理服务,不论是广告帖.垃圾帖.水帖.违规帖等不良信息,Discuz! 防水墙均可快速.高效的进行过滤. 为了让更多站长了解.熟悉Discuz! 防水墙产品,我们特别推出系列Discuz! 防水墙使用教程,共分为基础篇.晋级篇与运营篇,分别侧重介绍Discuz! 防水墙的基础使用.疑难FAQ与运营技巧等.现在就让我们看看Discuz! 防水墙使用教程之基础篇吧.

kotlin 官方学习教程之基础语法详解

kotlin 官方学习教程之基础语法详解 Google 在今天的举行了 I/O 大会,大会主要主要展示内有容 Android O(Android 8.0)系统.Google Assistant 语音助手.Google 智能音箱.人工智能.机器学习.虚拟现实等.作为一个 Android 开发者,我关心的当然是 Android O(Android 8.0)系统了,那么关于 Android O 系统的一个重要消息是全面支持 Kotlin 编程语言,使得 Kotlin 成为了 Android 开发的官方

PHP正则表达式完全教程之基础篇_正则表达式

目前,正则表达式已经在很多软件中得到广泛的应用,包括*nix(Linux, Unix等),HP等操作系统,PHP,C#,Java等开发环境,以及很多的应用软件中,都可以看到正则表达式的影子. 正则表达式的使用,可以通过简单的办法来实现强大的功能. 为了简单有效而又不失强大,造成了正则表达式代码的难度较大,学习起来也不是很容易. 例子: ^.+@.+..+$ 这样的代码曾经多次把我自己给吓退过.可能很多人也是被这样的代码给吓跑的吧. 学习完本教程将让你也可以自由应用这样的代码. 正则表达式的历史

PHP正则表达式完全教程之基础篇

目前,正则表达式已经在很多软件中得到广泛的应用,包括*nix(Linux, Unix等),HP等操作系统,PHP,C#,Java等开发环境,以及很多的应用软件中,都可以看到正则表达式的影子. 正则表达式的使用,可以通过简单的办法来实现强大的功能. 为了简单有效而又不失强大,造成了正则表达式代码的难度较大,学习起来也不是很容易. 例子: ^.+@.+..+$ 这样的代码曾经多次把我自己给吓退过.可能很多人也是被这样的代码给吓跑的吧. 学习完本教程将让你也可以自由应用这样的代码. 正则表达式的历史

讲解ASP方面的知识比较全的asp学习教程_ASP基础

讲解ASP方面的知识比较全!适合 刚开始学习ASP的朋友们 给我加分!!!!   第一部分  安装Active Server  Page的准备工作   .第一章 安装和使用   WINDOWS NT Server    ............  .第二章 安装和使用   IIS    ............  .第三章 安装和使用   SQL Server    ............  .第四章 Exchage   Active Server,    Index Server和   Ne

Qt快速入门学习笔记(基础篇)

本文基于Qter开源社区论坛版主yafeilinux编写的<Qt快速入门系列教程目录>,网址:http://bbs.qter.org/forum.php?mod=viewthread&tid=193.参考书为基于该系列教程<Qt Creator快速入门>和<Qt及Qt Quick开发实战精解> 1.关联Qt库.如果是分别安装的Qt Creator和Qt库,而不是安装集成Qt Creator和Qt库的SDK,则需要手动关联Qt库.打开工具→选项菜单,然后选择&qu

Google Dart编程语法和基本类型学习教程_基础知识

1. 变量声明 如何定义变量 复制代码 代码如下: var name = 'Bob'; 变量的初始值 复制代码 代码如下: int lineCount;assert(lineCount == null); // Variables (even numbers) are initially null. 可以使用var,也可以直接指定类型.final, 定义为final的变量,值不能够被更改 复制代码 代码如下: final name = 'Bob'; // Or: final String nam

JavaScript中的Object对象学习教程_基础知识

参数:(1)obj 必需.Object 对象分配到的变量名称.  (2)值 可选.任一 JavaScript 基元数据类型(数字.布尔值或字符串).  如果值是一个对象,则返回的对象是未修改的.  如果值是 null."未定义"或"未提供",则创建无内容的对象.  Object对象的方法 Object作为构造函数使用时,可以接受一个参数.如果该参数是一个对象,则直接返回这个对象:如果是一个原始类型的值,则返回该值对应的包装对象.利用这一点,可以写一个判断变量是否为对

windows安装TortoiseGit详细使用教程【基础篇】

标签:tortoisegit 环境:win8.1 64bit 安装准备: 首先你得安装windows下的git msysgit1.9.5 安装版本控制器客户端tortoisegit  tortoisegit1.8.12.0 [32和64别下载错,不习惯英文的朋友,也可以下个语言包] 一.安装图解: 先安装GIT[一路默认即可] 安装好git以后,右键,会发现菜单多了几项关于GIT的选项 2.安装tortoisegit[一路默认即可] 安装好以后,右键,会发现菜单多了几项关于tortoisegit