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 Distilled 基础知识与函数
Apr 07 Javascript
javascript中使用未定义变量或值的情况分析
Jul 19 Javascript
使用bootstrap插件实现模态框效果
May 10 Javascript
Bootstrap 模态框(Modal)带参数传值实例
Aug 20 Javascript
微信小程序数字滚动插件使用详解
Feb 02 Javascript
详解Vue单元测试case写法
May 24 Javascript
react-native动态切换tab组件的方法
Jul 07 Javascript
详解Vue Elementui中的Tag与页面其它元素相互交互的两三事
Sep 25 Javascript
VUE 配置vue-devtools调试工具及安装方法
Sep 30 Javascript
如何实现一个简易版的vuex持久化工具
Sep 11 Javascript
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
Jul 19 Javascript
vue element-ui中table合计指定列求和实例
Nov 02 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中static,const与define的使用区别
2013/06/18 PHP
迪菲-赫尔曼密钥交换(Diffie?Hellman)算法原理和PHP实现版
2015/05/12 PHP
php获取从百度、谷歌等搜索引擎进入网站关键词的方法
2015/07/08 PHP
php中实现字符串翻转的方法
2017/02/22 PHP
超级强大的表单验证
2006/06/26 Javascript
Asp.net下利用Jquery Ajax实现用户注册检测(验证用户名是否存)
2010/09/12 Javascript
获取内联和链接中的样式(js代码)
2013/04/11 Javascript
HTML长文本截取含有HTML代码同样适用的两种方法
2013/07/31 Javascript
如何学习Javascript入门指导
2013/11/01 Javascript
Angularjs 基础入门
2014/12/26 Javascript
Jquery动态替换div内容及动态展示的方法
2015/01/23 Javascript
原生js和jQuery实现淡入淡出轮播效果
2015/12/25 Javascript
一起学写js Calender日历控件
2016/04/14 Javascript
javascript对象的相关操作小结
2016/05/16 Javascript
Javascript实现图片不间断滚动的代码
2016/06/22 Javascript
jquery插件canvaspercent.js实现百分比圆饼效果
2017/07/18 jQuery
基于Vue实例生命周期(全面解析)
2017/08/16 Javascript
纯html+css+javascript实现楼层跳跃式的页面布局(实例代码)
2017/10/25 Javascript
vue-cli webpack配置文件分析
2019/05/20 Javascript
[00:43]FTP典藏礼包 DOTA2三大英雄霸气新套装
2014/03/21 DOTA
python和C语言混合编程实例
2014/06/04 Python
在Django框架中运行Python应用全攻略
2015/07/17 Python
Windows下安装python MySQLdb遇到的问题及解决方法
2017/03/16 Python
Python基于numpy灵活定义神经网络结构的方法
2017/08/19 Python
pandas 将list切分后存入DataFrame中的实例
2018/07/03 Python
django框架使用方法详解
2019/07/18 Python
Python实现银行账户资金交易管理系统
2020/01/03 Python
python基于pygame实现飞机大作战小游戏
2020/11/19 Python
html5 CSS过度-webkit-transition使用介绍
2013/07/02 HTML / CSS
优秀毕业生事迹材料
2014/02/12 职场文书
2014年民政局关于保密工作整改措施
2014/09/19 职场文书
学校领导班子对照检查材料
2014/09/24 职场文书
2014年酒店工作总结范文
2014/11/17 职场文书
2016春节放假通知范文
2015/08/18 职场文书
Python 如何解决稀疏矩阵运算
2021/05/26 Python
Axios代理配置及封装响应拦截处理方式
2022/04/07 Vue.js