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 页面自动加载函数(兼容多浏览器)
May 18 Javascript
基于jsTree的无限级树JSON数据的转换代码
Jul 27 Javascript
jquery将一个表单序列化为一个对象的方法
Jan 03 Javascript
node.js入门实例helloworld详解
Dec 23 Javascript
js实现的页面矩阵图形变换特效
Jan 26 Javascript
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
Jan 26 Javascript
jQuery中的Deferred和promise 的区别
Apr 03 Javascript
AngularJS改变元素显示状态
Apr 20 Javascript
vue项目中导入swiper插件的方法
Jan 30 Javascript
vue加载自定义的js文件方法
Mar 13 Javascript
js实现select下拉框选择
Jan 11 Javascript
vue $router和$route的区别详解
Dec 02 Vue.js
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中防止SQL注入攻击和XSS攻击的两个简单方法
2010/04/15 PHP
基于PHP 面向对象之成员方法详解
2013/05/04 PHP
Yii2增删改查之查询 where参数详细介绍
2016/08/08 PHP
浅谈php数组array_change_key_case() 函数和array_chunk()函数
2016/10/22 PHP
PHP JWT初识及其简单示例
2018/10/10 PHP
laravel框架中路由设置,路由参数和路由命名实例分析
2019/11/23 PHP
js实现单一html页面两套css切换代码
2013/04/11 Javascript
Hallo.js基于jQuery UI所见即所得的Web编辑器
2016/01/26 Javascript
jQuery实现带水平滑杆的焦点图动画插件
2016/03/08 Javascript
快速掌握Node.js之Window下配置NodeJs环境
2016/03/21 NodeJs
javaScript 逻辑运算符使用技巧整理
2017/05/03 Javascript
React-router v4 路由配置方法小结
2017/08/08 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
2017/09/18 Javascript
使用Electron构建React+Webpack桌面应用的方法
2017/12/15 Javascript
CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
2019/06/14 Javascript
JS Math对象与Math方法实例小结
2019/07/05 Javascript
layui实现鼠标移动到单元格上显示数据的方法
2019/09/11 Javascript
Javascript模块化机制实现原理详解
2020/04/02 Javascript
基于redis的小程序登录实现方法流程分析
2020/05/25 Javascript
vue实现一个6个输入框的验证码输入组件功能的实例代码
2020/06/29 Javascript
原生js实现下拉框选择组件
2021/01/20 Javascript
python自动化测试实例解析
2014/09/28 Python
Python中3种内建数据结构:列表、元组和字典
2014/11/30 Python
简述:我为什么选择Python而不是Matlab和R语言
2017/11/14 Python
Python实现打砖块小游戏代码实例
2019/05/18 Python
将Python文件打包成.EXE可执行文件的方法
2019/08/11 Python
Python3如何使用多线程升程序运行速度
2020/08/11 Python
python3.9实现pyinstaller打包python文件成exe
2020/12/13 Python
HTML5中微数据概述及在搜索引擎中的使用举例
2013/02/07 HTML / CSS
IE9对HTML5中部分属性不支持的原因分析
2014/10/15 HTML / CSS
日本高端护肤品牌:Tatcha
2016/08/29 全球购物
俄罗斯购买剧院和演唱会门票网站:Parter.ru
2019/11/09 全球购物
Linux管理员面试题 Linux admin interview questions
2016/07/08 面试题
2014年高校辅导员工作总结
2014/12/09 职场文书
小学教师自我评价
2015/03/04 职场文书
新西兰:最新留学学习计划书写作指南
2019/07/15 职场文书