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 CSS操作方法集合
Oct 31 Javascript
js 面向对象的技术创建高级 Web 应用程序
Feb 25 Javascript
jquery 插件实现多行文本框[textarea]自动高度
Mar 04 Javascript
浅谈jquery.fn.extend与jquery.extend区别
Jul 13 Javascript
javascript中eval和with用法实例总结
Nov 30 Javascript
AngularJS equal比较对象实例详解
Sep 14 Javascript
js上传图片预览的实现方法
May 09 Javascript
jquery.masonry瀑布流效果
May 25 jQuery
Node.js搭建小程序后台服务
Jan 03 Javascript
JS实现数组深拷贝的方法分析
Mar 06 Javascript
JS原型与继承操作示例
May 09 Javascript
javascript面向对象三大特征之封装实例详解
Jul 24 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
《APMServ 5.1.2》使用图解
2006/10/23 PHP
解析coreseek for sphinx的使用
2013/06/21 PHP
详解PHP中strlen和mb_strlen函数的区别
2014/03/07 PHP
PHP简单处理表单输入的特殊字符的方法
2016/02/03 PHP
JQUERY复选框CHECKBOX全选,取消全选
2008/08/30 Javascript
js 实现无干扰阴影效果 简单好用(附文件下载)
2009/12/27 Javascript
Array.prototype.slice.apply的使用方法
2010/03/17 Javascript
基于jquery的网页SELECT下拉框美化代码
2010/10/28 Javascript
JavaScript高级程序设计 阅读笔记(四) ECMAScript中的类型转换
2012/02/27 Javascript
js鼠标及对象坐标控制属性详细解析
2013/12/14 Javascript
Jquery使用小技巧汇总
2015/12/29 Javascript
浅谈JavaScript 浏览器对象
2016/06/03 Javascript
JavaScript基础之AJAX简单的小demo
2017/01/29 Javascript
整理关于Bootstrap模态弹出框的慕课笔记
2017/03/29 Javascript
jacascript DOM节点——元素节点、属性节点、文本节点
2017/04/18 Javascript
通过button将form表单的数据提交到action层的实例
2017/09/08 Javascript
vue+swiper实现侧滑菜单效果
2017/12/28 Javascript
jQuery实现的3D版图片轮播示例【滑动轮播】
2019/01/18 jQuery
Vue中实现权限控制的方法示例
2019/06/07 Javascript
在JavaScript中如何访问暂未存在的嵌套对象
2019/06/18 Javascript
微信小程序转发事件实现解析
2019/10/22 Javascript
使用原生JS实现火锅点餐小程序(面向对象思想)
2019/12/10 Javascript
微信小程序实现下滑到底部自动翻页功能
2020/03/07 Javascript
浅析TypeScript 命名空间
2020/03/19 Javascript
Python中使用Beautiful Soup库的超详细教程
2015/04/30 Python
使用pandas read_table读取csv文件的方法
2018/07/04 Python
Python线程同步的实现代码
2018/10/03 Python
Python 程序报错崩溃后如何倒回到崩溃的位置(推荐)
2020/06/23 Python
详解Python 函数参数的拆解
2020/09/02 Python
Python Charles抓包配置实现流程图解
2020/09/29 Python
Ted Baker英国官网:男士和女士服装及配件
2017/03/13 全球购物
Nike台湾官方商店:Nike.com (TW)
2017/08/16 全球购物
旅游管理本科生求职信
2013/10/14 职场文书
怎样写好自我鉴定
2013/12/04 职场文书
就业自我评价
2014/02/04 职场文书
2015年小学体育工作总结
2015/05/22 职场文书