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实现悬浮移动窗口(悬浮广告)的特效
Mar 12 Javascript
jQuery拖动图片删除示例
May 10 Javascript
JS控制表单提交的方法
Jul 09 Javascript
跟我学习JScript的Bug与内存管理
Nov 18 Javascript
JS锚点的设置与使用方法
Sep 05 Javascript
Node.js读取文件内容示例
Mar 07 Javascript
angularjs指令之绑定策略(@、=、&)
Apr 13 Javascript
利用Vue v-model实现一个自定义的表单组件
Apr 27 Javascript
vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】
Mar 15 Javascript
小程序实现搜索界面 小程序实现推荐搜索列表效果
May 18 Javascript
vue给对象动态添加属性和值的实例
Sep 09 Javascript
详解Vue的异步更新实现原理
Dec 22 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
星际RPG字典
2020/03/04 星际争霸
全国FM电台频率大全 - 10 江苏省
2020/03/11 无线电
PHP 进程锁定问题分析研究
2009/11/24 PHP
php邮箱地址正则表达式验证
2015/11/13 PHP
IE和Firefox的Javascript兼容性总结[推荐收藏]
2011/10/19 Javascript
日期处理的js库(迷你版)--自建js库总结
2011/11/21 Javascript
jquery图片放大功能简单实现
2013/08/01 Javascript
Javascript表格翻页效果实现思路及代码
2013/08/23 Javascript
js中继承的几种用法总结(apply,call,prototype)
2013/12/26 Javascript
Bootstrap carousel轮转图的使用实例详解
2016/05/17 Javascript
JSON对象 详解及实例代码
2016/10/18 Javascript
JavaScript 深层克隆对象详解及实例
2016/11/03 Javascript
在javaScript中检测数据类型的几种方式小结
2017/03/04 Javascript
简单谈谈JS中的正则表达式
2017/09/11 Javascript
JavaScript实现的仿新浪微博原生态输入字数即时检查功能【兼容IE6】
2017/09/26 Javascript
ES6 javascript中Class类继承用法实例详解
2017/10/30 Javascript
微信小程序自定义底部弹出框
2020/11/16 Javascript
JS实现把一个页面层数据传递到另一个页面的两种方式
2018/08/13 Javascript
深入解析ES6中的promise
2018/11/08 Javascript
JS array数组检测方式解析
2020/05/19 Javascript
在Mac OS上部署Nginx和FastCGI以及Flask框架的教程
2015/05/02 Python
Python的socket模块源码中的一些实现要点分析
2016/06/06 Python
python爬取w3shcool的JQuery课程并且保存到本地
2017/04/06 Python
Python基于回溯法解决01背包问题实例
2017/12/06 Python
Python实现的NN神经网络算法完整示例
2018/06/19 Python
Python读写zip压缩文件的方法
2018/08/29 Python
使用coverage统计python web项目代码覆盖率的方法详解
2019/08/05 Python
Python高阶函数、常用内置函数用法实例分析
2019/12/26 Python
如何使用Python抓取网页tag操作
2020/02/14 Python
Python3中FuzzyWuzzy库实例用法
2020/11/18 Python
世界第一冲浪品牌:O’Neill
2016/08/30 全球购物
铭立家具面试题
2012/12/06 面试题
学院领导推荐信
2013/10/30 职场文书
申报优秀教师材料
2014/12/16 职场文书
2014年青年教师工作总结
2014/12/17 职场文书
2016年学校禁毒宣传活动工作总结
2016/04/05 职场文书