seajs学习教程之基础篇


Posted in Javascript onOctober 20, 2016

介绍

众所周知前端开发模块化已经是大势所趋,目前模块化的规范有很多,众所周知的有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的文章,感兴趣的朋友们请继续关注三水点靠木。

Javascript 相关文章推荐
jquery插件制作简单示例说明
Feb 03 Javascript
window.location.reload()方法刷新页面弹出要再次显示该网页对话框
Apr 24 Javascript
动态的绑定事件addEventListener方法的使用
Jan 24 Javascript
浅析JQuery中的html(),text(),val()区别
Sep 01 Javascript
ECMAScript5(ES5)中bind方法使用小结
May 07 Javascript
jQuery多级联动下拉插件chained用法示例
Aug 20 Javascript
浅谈js中StringBuffer类的实现方法及使用
Sep 02 Javascript
JavaScript面试题大全(推荐)
Sep 22 Javascript
微信小程序 循环及嵌套循环的使用总结
Sep 26 Javascript
简单谈谈CommonsChunkPlugin抽取公共模块
Dec 31 Javascript
基于React+Redux的SSR实现方法
Jul 03 Javascript
详解VUE项目中安装和使用vant组件
Apr 28 Javascript
Angular.JS学习之依赖注入$injector详析
Oct 20 #Javascript
Javascript中内建函数reduce的应用详解
Oct 20 #Javascript
基于AngularJS前端云组件最佳实践
Oct 20 #Javascript
分享javascript、jquery实用代码段
Oct 20 #Javascript
基于原生js淡入淡出函数封装(兼容IE)
Oct 20 #Javascript
纯JavaScript手写图片轮播代码
Oct 20 #Javascript
Zabbix添加Node.js监控的方法
Oct 20 #Javascript
You might like
PHP实现变色验证码实例
2014/01/06 PHP
Zend Framework教程之路由功能Zend_Controller_Router详解
2016/03/07 PHP
php单例模式的简单实现方法
2016/06/10 PHP
Extjs TriggerField在弹出窗口显示不出问题的解决方法
2010/01/08 Javascript
javascript function调用时的参数检测常用办法
2010/02/26 Javascript
Json和Jsonp理论实例代码详解
2013/11/15 Javascript
js中的cookie的读写操作示例详解
2014/04/17 Javascript
javascript作用域和闭包使用详解
2014/04/25 Javascript
js调试工具Console命令详解
2014/10/21 Javascript
jquery带下拉菜单和焦点图代码分享
2015/08/24 Javascript
Jquery中map函数的用法
2016/06/03 Javascript
javascript时间差插件分享
2016/07/18 Javascript
Node.js如何实现注册邮箱激活功能 (常见)
2017/07/23 Javascript
vue 中基于html5 drag drap的拖放效果案例分析
2018/11/01 Javascript
koa源码中promise的解读
2018/11/13 Javascript
[10:07]2014DOTA2国际邀请赛 实拍选手现场观战DK对阵Titan
2014/07/12 DOTA
[02:05:03]完美世界DOTA2联赛循环赛 LBZS VS Matador BO2 10.28
2020/10/28 DOTA
python实现倒计时的示例
2014/02/14 Python
pandas将numpy数组写入到csv的实例
2018/07/04 Python
解决python给列表里添加字典时被最后一个覆盖的问题
2019/01/21 Python
浅谈Python中threading join和setDaemon用法及区别说明
2020/05/02 Python
Python3+Flask安装使用教程详解
2021/02/16 Python
HTML5 Canvas 实现圆形进度条并显示数字百分比效果示例
2017/08/18 HTML / CSS
马来西亚最大的电器网站:Senheng
2017/10/13 全球购物
TripAdvisor德国:全球领先的旅游网站
2017/12/07 全球购物
ASOS亚洲:ASOS Asia
2018/03/04 全球购物
鞋类设计与工艺专业销售求职信
2013/11/01 职场文书
会计专业大学生职业生涯规划范文
2014/01/11 职场文书
安全生产汇报材料
2014/02/17 职场文书
服务承诺口号
2014/05/22 职场文书
小学社会实践活动总结
2014/07/03 职场文书
2015元旦家电促销活动策划方案
2014/12/09 职场文书
2015年销售内勤工作总结
2015/04/27 职场文书
公司保洁员管理制度
2015/08/04 职场文书
安全生产培训心得体会
2016/01/18 职场文书
nginx proxy_cache 缓存配置详解
2021/03/31 Servers