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 IE中的DOM ready应用技巧
Jul 23 Javascript
利用js的Node遍历找到repeater的一个字段实例介绍
Apr 25 Javascript
教你在heroku云平台上部署Node.js应用
Jul 30 Javascript
JQuery.get提交页面不跳转的解决方法
Jan 13 Javascript
js实现支持手机滑动切换的轮播图片效果实例
Apr 29 Javascript
浅谈jQuery中height与width
Jul 06 Javascript
基于jQuery仿淘宝产品图片放大镜特效
Oct 19 Javascript
Jquery实现$.fn.extend和$.extend函数
Apr 14 Javascript
js实现移动端编辑添加地址【模仿京东】
Apr 28 Javascript
关于vue中 $emit的用法详解
Apr 12 Javascript
node后端服务保活的实现
Nov 10 Javascript
js实现表单项的全选、反选及删除操作示例
Jun 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
关于拼配咖啡,你要知道
2021/03/03 咖啡文化
通用PHP动态生成静态HTML网页的代码
2010/03/04 PHP
Yii 2.0自带的验证码使用经验分享
2017/06/19 PHP
jQuery 动态酷效果实现总结
2009/12/27 Javascript
js控制淡入淡出示例代码
2013/11/12 Javascript
jquery 页眉单行信息滚动显示实现思路及代码
2014/06/26 Javascript
jQuery中[attribute*=value]选择器用法实例
2014/12/31 Javascript
JavaScript按值删除数组元素的方法
2015/04/24 Javascript
JavaScript  event对象整理及详细介绍
2016/10/10 Javascript
JavaScript实现鼠标点击导航栏变色特效
2017/02/08 Javascript
js实现年月日表单三级联动
2020/04/17 Javascript
jQuery日程管理控件glDatePicker用法详解
2017/03/29 jQuery
浅谈Angular2 ng-content 指令在组件中嵌入内容
2017/08/18 Javascript
vue 中swiper的使用教程
2018/05/22 Javascript
微信小程序学习笔记之获取位置信息操作图文详解
2019/03/29 Javascript
使用 Element UI Table 的 slot-scope方法
2019/10/10 Javascript
Vue实现点击箭头上下移动效果
2020/06/11 Javascript
vue在响应头response中获取自定义headers操作
2020/07/24 Javascript
Python Socket编程入门教程
2014/07/11 Python
详细介绍Ruby中的正则表达式
2015/04/10 Python
详解Python操作RabbitMQ服务器消息队列的远程结果返回
2016/06/30 Python
使用Python实现NBA球员数据查询小程序功能
2020/11/09 Python
一款html5 canvas实现的图片玻璃碎片特效
2014/09/11 HTML / CSS
荷兰超市:DEEN
2018/03/14 全球购物
请写一个C函数,若处理器是Big_endian的,则返回0;若是Little_endian的,则返回1
2015/07/16 面试题
C#怎么让一个窗口居中显示?
2015/10/20 面试题
汇科协同Java笔试题
2012/03/31 面试题
园林技术个人的自我评价
2014/01/08 职场文书
大学应届生的自我评价
2014/03/06 职场文书
企业标语口号
2014/06/10 职场文书
毕业大学生自荐信
2014/06/17 职场文书
员工工作表扬信
2015/05/05 职场文书
创业计划书之溜冰场
2019/10/25 职场文书
Golang流模式之grpc的四种数据流
2022/04/13 Golang
Windows Server 2012 R2服务器安装与配置的完整步骤
2022/07/15 Servers
Spring boot实现上传文件到本地服务器
2022/08/14 Java/Android