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 相关文章推荐
在每个匹配元素的外部插入新元素的方法
Dec 20 Javascript
jquery实现的一个文章自定义分段显示功能
May 23 Javascript
JavaScript Math.round() 方法
Dec 18 Javascript
js判断数组key是否存在(不用循环)的简单实例
Aug 03 Javascript
JavaScript实现二分查找实例代码
Feb 22 Javascript
Vue实现动态响应数据变化
Apr 28 Javascript
解决webpack打包速度慢的解决办法汇总
Jul 06 Javascript
Angular实现图片裁剪工具ngImgCrop实践
Aug 17 Javascript
React Native日期时间选择组件的示例代码
Apr 27 Javascript
微信小程序页面滚动到指定位置代码实例
Sep 07 Javascript
解决ant-design-vue中menu菜单无法默认展开的问题
Oct 31 Javascript
JavaScript中document.activeELement焦点元素介绍
Nov 27 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批量采集下载美女图片的实现代码
2013/06/03 PHP
php之XML转数组函数的详解
2013/06/07 PHP
Codeigniter实现多文件上传并创建多个缩略图
2014/06/12 PHP
使用array_map简单搞定PHP删除文件、删除目录
2014/10/29 PHP
PHP中的自动加载操作实现方法详解
2019/08/06 PHP
laravel框架使用FormRequest进行表单验证,验证异常返回JSON操作示例
2020/02/18 PHP
TP5框架实现自定义分页样式的方法示例
2020/04/05 PHP
jquery 选择器部分整理
2009/10/28 Javascript
Jquery ajax不能解析json对象,报Invalid JSON错误的原因和解决方法
2010/03/27 Javascript
JQuery以JSON方式提交数据到服务端示例代码
2014/05/05 Javascript
json中换行符的处理方法示例介绍
2014/06/10 Javascript
简介JavaScript中的sub()方法的使用
2015/06/08 Javascript
详解javascript中原始数据类型Null和Undefined
2015/12/17 Javascript
AngularJS入门教程之Select(选择框)详解
2016/07/27 Javascript
Vue.js学习笔记之 helloworld
2016/08/14 Javascript
JavaScript观察者模式(publish/subscribe)原理与实现方法
2017/03/30 Javascript
jfinal与bootstrap的登出实战详解
2017/11/27 Javascript
weebox弹出窗口不居中显示的解决方法
2017/11/27 Javascript
JS实现中英文混合文字溢出友好截取功能
2018/08/06 Javascript
javascript设计模式 ? 外观模式原理与用法实例分析
2020/04/15 Javascript
JavaScript实现五子棋小游戏
2020/10/26 Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
2021/01/08 Vue.js
Python的subprocess模块总结
2014/11/07 Python
Python使用爬虫猜密码
2016/02/19 Python
解决python写入mysql中datetime类型遇到的问题
2018/06/21 Python
Python django框架应用中实现获取访问者ip地址示例
2019/05/17 Python
Python二维码生成识别实例详解
2019/07/16 Python
css3圆角边框和边框阴影示例
2014/05/05 HTML / CSS
深入剖析webstorage[html5的本地数据处理]
2016/07/11 HTML / CSS
大学生村官考核材料
2014/05/23 职场文书
井冈山红色之旅心得体会
2014/10/07 职场文书
2015年行风建设工作总结
2015/05/15 职场文书
2019年最新证婚词精选集!
2019/06/28 职场文书
导游词之湖北梁子湖
2019/11/07 职场文书
python 使用tkinter与messagebox写界面和弹窗
2022/03/20 Python
Win11无法安装更新补丁KB3045316怎么办 附KB3045316补丁修复教程
2022/08/14 数码科技