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 相关文章推荐
简单通用的JS滑动门代码
Dec 19 Javascript
Javascript UrlDecode函数代码
Jan 09 Javascript
JavaScript实现的购物车效果可以运用在好多地方
May 09 Javascript
javascript 控制input只允许输入的各种指定内容
Jun 19 Javascript
javascript获取dom的下一个节点方法
Sep 05 Javascript
JavaScript中的Math.LOG2E属性使用详解
Jun 14 Javascript
第十篇BootStrap轮播插件使用详解
Jun 21 Javascript
vue生成随机验证码的示例代码
Sep 29 Javascript
vue在手机中通过本机IP地址访问webApp的方法
Aug 15 Javascript
Vue安装浏览器开发工具的步骤详解
May 12 Javascript
微信小程序 轮播图实现原理及优化详解
Sep 29 Javascript
vue3 自定义图片放大器效果的示例代码
Jul 23 Vue.js
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简单获取复选框值的方法
2016/05/11 PHP
yii2控制器Controller Ajax操作示例
2016/07/23 PHP
js 蒙版进度条(结合图片)
2010/03/10 Javascript
基于jQuery替换table中的内容并显示进度条的代码
2011/08/02 Javascript
JS的encodeURI和java的URLDecoder.decode使用介绍
2014/05/08 Javascript
iScroll中事件点击触发两次解决方案
2015/03/11 Javascript
jQuery实现下拉加载功能实例代码
2016/04/01 Javascript
node.js express安装及示例网站搭建方法(分享)
2016/08/22 Javascript
相册展示PhotoSwipe.js插件实现
2016/08/25 Javascript
jQuery命名空间与闭包用法示例
2017/01/12 Javascript
浅谈angularjs依赖服务注入写法的注意点
2017/04/24 Javascript
Vue组件中的data必须是一个function的原因浅析
2018/09/03 Javascript
9102年webpack4搭建vue项目的方法步骤
2019/02/20 Javascript
ES5 模拟 ES6 的 Symbol 实现私有成员功能示例
2020/05/06 Javascript
Vue环境搭建+VSCode+Win10的详细教程
2020/08/19 Javascript
[02:03]风行者至宝清风环佩外观展示
2020/09/05 DOTA
[45:52]完美世界DOTA2联赛PWL S3 Forest vs INK ICE 第二场 12.09
2020/12/12 DOTA
Python中使用urllib2防止302跳转的代码例子
2014/07/07 Python
python实现2048小游戏
2015/03/30 Python
python实现关闭第三方窗口的方法
2019/06/28 Python
Python 绘制酷炫的三维图步骤详解
2019/07/12 Python
Python基于WordCloud制作词云图
2019/11/29 Python
python使用smtplib模块发送邮件
2020/12/17 Python
分享29个基于Bootstrap的HTML5响应式网页设计模板
2015/11/19 HTML / CSS
Penhaligon’s英国官网:成立于1870年的英国香水制造商
2021/02/18 全球购物
what is the difference between ext2 and ext3
2015/08/25 面试题
介绍一下gcc特性
2015/10/31 面试题
大学班长的职责
2014/01/27 职场文书
党风廉政建设责任书
2014/04/14 职场文书
食品安全承诺书
2014/05/22 职场文书
2015年护士节慰问信
2015/03/23 职场文书
2015年为民办实事工作总结
2015/05/26 职场文书
话题作文之生命的旋律
2019/12/17 职场文书
python spilt()分隔字符串的实现示例
2021/05/21 Python
Django与数据库交互的实现
2021/06/03 Python
关于MySQL中的 like操作符详情
2021/11/17 MySQL