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 相关文章推荐
jQuery 开发者应该注意的9个错误
May 03 Javascript
点击按钮自动加关注的代码(sina微博/QQ空间/人人网/腾讯微博)
Jan 02 Javascript
node.js抓取并分析网页内容有无特殊内容的js文件
Nov 17 Javascript
微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例
Oct 13 Javascript
简单实现JavaScript图片切换效果
Nov 28 Javascript
详解AngularJs HTTP响应拦截器实现登陆、权限校验
Apr 11 Javascript
Vue 2.0中生命周期与钩子函数的一些理解
May 09 Javascript
JS中‘hello’与new String(‘hello’)引出的问题详解
Aug 14 Javascript
详解vue-cli+element-ui树形表格(多级表格折腾小计)
Apr 17 Javascript
如何用原生js写一个弹窗消息提醒插件
May 24 Javascript
在Express中提供静态文件的实现方法
Oct 17 Javascript
JS删除数组指定值常用方法详解
Jun 04 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邮件类
2007/01/03 PHP
php实现的仿阿里巴巴实现同类产品翻页
2009/12/11 PHP
php URL跳转代码 减少外链
2011/06/25 PHP
PHP与Java进行通信的实现方法
2013/10/21 PHP
PHP 5.3和PHP 5.4出现FastCGI Error解决方法
2015/02/12 PHP
php防止sql注入的方法详解
2017/02/20 PHP
PHP自动补全表单的两种方法
2017/03/06 PHP
如何修改yii2.0自带的user表为其它的表
2017/08/01 PHP
两种WEB下的模态对话框 (asp.net或js的分别实现)
2009/12/02 Javascript
javascript 当前日期转化为中文的实现代码
2010/05/13 Javascript
chrome原生方法之数组
2011/11/30 Javascript
jquery统计输入文字的个数并对其进行判断
2014/01/07 Javascript
JS不能跨域借助jquery获取IP地址的方法
2014/08/20 Javascript
jQuery中prependTo()方法用法实例
2015/01/08 Javascript
javascript使用正则表达式实现去掉空格之后的字符
2015/02/15 Javascript
jQuery在ul中显示某个li索引号的方法
2015/03/17 Javascript
JS实现点击网页判断是否安装app并打开否则跳转app store
2016/11/18 Javascript
js 客户端打印html 并且去掉页眉、页脚的实例
2017/11/03 Javascript
解决vue-cli项目webpack打包后iconfont文件路径的问题
2018/09/01 Javascript
微信小程序项目总结之记账小程序功能的实现(包括后端)
2019/08/20 Javascript
微信小程序点击按钮动态切换input的disabled禁用/启用状态功能
2020/03/07 Javascript
JS判断数组四种实现方法详解
2020/06/29 Javascript
JS PHP字符串截取函数实现原理解析
2020/08/29 Javascript
[01:02]2014 DOTA2国际邀请赛中国区预选赛 现场抢先看
2014/05/22 DOTA
[00:32]2018DOTA2亚洲邀请赛出场——VP
2018/04/04 DOTA
windows下Virtualenvwrapper安装教程
2017/12/13 Python
python 利用已有Ner模型进行数据清洗合并代码
2019/12/24 Python
浅谈pytorch池化maxpool2D注意事项
2020/02/18 Python
Python Scrapy图片爬取原理及代码实例
2020/06/12 Python
如何使用pycharm连接Databricks的步骤详解
2020/09/23 Python
对pytorch中x = x.view(x.size(0), -1) 的理解说明
2021/03/03 Python
美国折扣网站:jClub
2017/08/07 全球购物
美国领先的个性化礼品商城:Personalization Mall
2019/07/27 全球购物
项目申报专员岗位职责
2014/07/09 职场文书
竞聘报告优秀范文
2014/11/06 职场文书
党委工作总结2015
2015/04/27 职场文书