当前位置: 首页 > 编程笔记 >

seajs学习教程之基础篇

闻人伟
2023-03-14
本文向大家介绍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的文章,感兴趣的朋友们请继续关注小牛知识库。

 类似资料:
  • 本文向大家介绍Three.js基础学习教程,包括了Three.js基础学习教程的使用技巧和注意事项,需要的朋友参考一下 一、Three.js官网及使用Three.js必备的三个条件 1.Three.js 官网 https://threejs.org/ 2.使用Three.js必备的三个条件 (To actually be able to display anything with Three.js

  • 本文向大家介绍Django学习笔记之ORM基础教程,包括了Django学习笔记之ORM基础教程的使用技巧和注意事项,需要的朋友参考一下 ORM简介 ORM概念 对象关系映射(Object Relational Mapping,简称ORM)模式是一种为了解决面向对象与关系数据库存在的互不匹配的现象的技术。 简单的说,ORM是通过使用描述对象和数据库之间映射的元数据,将程序中的对象自动持久化到关系数据

  • 本文向大家介绍socket.io学习教程之基础介绍(一),包括了socket.io学习教程之基础介绍(一)的使用技巧和注意事项,需要的朋友参考一下 前言 Web端与服务器间的实时数据传输的是一个很重要的需求,但最早只能通过AJAX轮询询实现。在WebSocket标准没有推出之前,AJAX轮询是唯一可行的方式(通过Flash浏览器也可以,但这里不做讨论)。AJAX轮询原理是设置定时器,定时通过AJA

  • 本文向大家介绍Laravel学习基础之migrate的使用教程,包括了Laravel学习基础之migrate的使用教程的使用技巧和注意事项,需要的朋友参考一下 前言 大家都知道,现在的开发测试都是讲究多人团队协作完成,每个人都有本地环境,在以前我们一般是手动的添加数据,比如在数据库查询器中使用sql语句进行数据插入。如果数据较少,那还是蛮轻松的,但是如果数据过大,那就很蛋疼了,但是这在Larave

  • 本文向大家介绍Lua基础教程之表(Table)学习笔记,包括了Lua基础教程之表(Table)学习笔记的使用技巧和注意事项,需要的朋友参考一下 表 定义表(Table)的方式:a = {}, b = {…} 访问表的成员:通过“.”或者“[]”运算符来访问表的成员。注意:表达式a.b等价于a[“b”],但不等价于a[b] 表项的键和值:任何类型的变量,除了nil,都可以做为表项的键。从简单的数值、

  • 本文向大家介绍Swift学习教程之SQLite的基础使用,包括了Swift学习教程之SQLite的基础使用的使用技巧和注意事项,需要的朋友参考一下 前言 在我们的日常开发中,经常会遇到用户断网或者网络较慢的情况,这样用户在一进入页面的时候会显示空白的页面,那么如何避免没网显示空白页面的尴尬呢?答案就是:先在网络好的时候缓存一部分数据,这样当下次网络情况不好的时候,至少用户可以先看到之前缓存的内容,