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_09_Function与Object
Oct 16 Javascript
jquery $.ajax()取xml数据的小问题解决方法
Nov 20 Javascript
js控制页面控件隐藏显示的两种方法介绍
Oct 09 Javascript
js使用eval解析json(js中使用json)
Jan 17 Javascript
JS图片无缝、平滑滚动代码
Mar 11 Javascript
AngularJs 禁止模板缓存的方法
Nov 28 Javascript
Javasript设计模式之链式调用详解
Apr 26 Javascript
vue mounted 调用两次的完美解决办法
Oct 29 Javascript
JavaScript函数IIFE使用详解
Oct 21 Javascript
JS面向对象编程基础篇(二) 封装操作实例详解
Mar 03 Javascript
js实现抽奖功能
Nov 24 Javascript
国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程
Oct 05 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中实现记住密码自动登录的代码
2011/03/02 PHP
Cookie 小记
2010/04/01 Javascript
什么是cookie?js手动创建和存储cookie
2014/05/27 Javascript
javascript禁止超链接跳转的方法
2016/02/02 Javascript
通过jquery-ui中的sortable来实现拖拽排序的简单实例
2016/05/24 Javascript
js注入 黑客之路必备!
2016/09/14 Javascript
微信小程序之ES6与事项助手的功能实现
2016/11/30 Javascript
Angular2 PrimeNG分页模块学习
2017/01/14 Javascript
Nodejs 发送Post请求功能(发短信验证码例子)
2017/02/09 NodeJs
vue父组件中获取子组件中的数据(实例讲解)
2017/09/27 Javascript
vue计算属性时v-for处理数组时遇到的一个bug问题
2018/01/21 Javascript
详解React之父子组件传递和其它一些要点
2018/06/25 Javascript
JavaScript常见继承模式实例小结
2019/01/11 Javascript
详解js动态获取浏览器或页面等容器的宽高
2019/03/13 Javascript
重学JS之显示强制类型转换详解
2019/06/30 Javascript
js实现拖动缓动效果
2020/01/13 Javascript
JavaScript字符和ASCII实现互相转换
2020/06/03 Javascript
Vue2.0 $set()的正确使用详解
2020/07/28 Javascript
一个简单的python爬虫程序 爬取豆瓣热度Top100以内的电影信息
2018/04/17 Python
python 3.6.5 安装配置方法图文教程
2018/09/18 Python
python无限生成不重复(字母,数字,字符)组合的方法
2018/12/04 Python
Python3按一定数据位数格式处理bin文件的方法
2019/01/24 Python
python如何获取当前文件夹下所有文件名详解
2019/01/25 Python
python爬虫判断招聘信息是否存在的实例代码
2020/11/20 Python
video.js支持m3u8格式直播的实现示例
2020/05/20 HTML / CSS
美国时尚孕妇装品牌:A Pea in the Pod
2017/07/16 全球购物
微软巴西官方网站:Microsoft Brasil
2019/09/26 全球购物
董事长秘书岗位职责
2013/11/29 职场文书
幼儿教师研修感言
2014/02/12 职场文书
《曹刿论战》教学反思
2014/03/02 职场文书
初中班主任经验交流材料
2014/05/16 职场文书
校园标语大全
2014/06/19 职场文书
社区两委对照检查材料
2014/08/23 职场文书
繁星春水读书笔记
2015/06/30 职场文书
2016年幼儿园庆六一开幕词
2016/03/04 职场文书
python小型的音频操作库mp3Play
2022/04/24 Python