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 相关文章推荐
javascript入门·图片对象(无刷新变换图片)\滚动图像
Oct 01 Javascript
比较详细的关于javascript 解析json的代码
Dec 16 Javascript
关于COOKIE个数与大小的问题
Jan 17 Javascript
JavaScript高级程序设计 读书笔记之九 本地对象Array
Feb 27 Javascript
有关于eclipse配置spket需要注意的一些地方
Apr 07 Javascript
toggle一个div显示或隐藏且可扩展成自定义下拉框
Sep 12 Javascript
div浮层,滚动条移动,位置保持不变的4种方法汇总
Dec 11 Javascript
jQuery选择器总结之常用元素查找方法
Aug 04 Javascript
关于angularJs指令的Scope(作用域)介绍
Oct 25 Javascript
vue的props实现子组件随父组件一起变化
Oct 27 Javascript
详解用webpack把我们的业务模块分开打包的方法
Jul 20 Javascript
Jquery实现获取子元素的方法分析
Aug 24 jQuery
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实现的生成静态HTML速度快类库
2007/03/31 PHP
php中++i 与 i++ 的区别
2012/08/08 PHP
php之curl设置超时实例
2014/11/03 PHP
php和C#的yield迭代器实现方法对比分析
2019/07/17 PHP
innerText和textContent对比及使用介绍
2013/02/27 Javascript
JS文本框不能输入空格验证方法
2013/03/19 Javascript
js在输入框屏蔽按键,只能键入数字的示例代码
2014/01/03 Javascript
使用script的src实现跨域和类似ajax效果
2014/11/10 Javascript
JS实现兼容火狐及IE iframe onload属性的遮罩层隐藏及显示效果
2016/08/23 Javascript
获取JavaScript异步函数的返回值
2016/12/21 Javascript
详解微信小程序中的页面代码中的模板的封装
2017/10/12 Javascript
webpack4之SplitChunksPlugin使用指南
2018/06/12 Javascript
利用chrome浏览器进行js调试并找出元素绑定的点击事件详解
2021/01/30 Javascript
SSM+layUI 根据登录信息显示不同的页面方法
2019/09/20 Javascript
原生JS实现天气预报
2020/06/16 Javascript
Vue通过provide inject实现组件通信
2020/09/03 Javascript
Vue中登录验证成功后保存token,并每次请求携带并验证token操作
2020/09/08 Javascript
python下如何查询CS反恐精英的服务器信息
2017/01/17 Python
使用python生成目录树
2018/03/29 Python
Python实现删除时保留特定文件夹和文件的示例
2018/04/27 Python
Python中实现变量赋值传递时的引用和拷贝方法
2018/04/29 Python
pandas基于时间序列的固定时间间隔求均值的方法
2019/07/04 Python
Python如何通过Flask-Mail发送电子邮件
2020/01/29 Python
python手写均值滤波
2020/02/19 Python
如何打包Python Web项目实现免安装一键启动的方法
2020/05/21 Python
python 解决pycharm运行py文件只有unittest选项的问题
2020/09/01 Python
Elasticsearch py客户端库安装及使用方法解析
2020/09/14 Python
伦敦一家非常流行的时尚精品店:Oxygen Boutique
2017/01/15 全球购物
设计师大码女装:11 Honoré
2020/05/03 全球购物
在C#中如何实现多态
2014/07/02 面试题
介绍一下except的用法和作用
2015/01/22 面试题
致长跑运动员广播稿
2014/01/31 职场文书
大学生个人年度总结范文
2015/02/15 职场文书
酒店财务经理岗位职责
2015/04/08 职场文书
《索溪峪的野》教学反思
2016/02/19 职场文书
2016年庆“七一”主题党日活动总结
2016/04/05 职场文书