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 相关文章推荐
兼容Mozilla必须知道的知识。
Jan 09 Javascript
使用CSS和jQuery模拟select并附提交后取得数据的代码
Oct 18 Javascript
动态读取JSON解析键值对的方法
Jun 03 Javascript
JQuery中serialize()、serializeArray()和param()方法示例介绍
Jul 31 Javascript
JS实现FLASH幻灯片图片切换效果的方法
Mar 04 Javascript
jQuery position() 函数详解以及jQuery中position函数的应用
Dec 14 Javascript
使用SVG基本操作API的实例讲解
Sep 14 Javascript
vuejs实现ready函数加载完之后执行某个函数的方法
Aug 31 Javascript
vue实现路由切换改变title功能
May 28 Javascript
微信小程序实现日期格式化和倒计时
Nov 01 Javascript
小程序中英文混合排序问题解决
Aug 02 Javascript
js时间转换毫秒的实例代码
Aug 21 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的ASP防火墙
2006/10/09 PHP
php截取html字符串及自动补全html标签的方法
2015/01/15 PHP
PHP内核探索之解释器的执行过程
2015/12/22 PHP
thinkPHP模板中函数的使用方法示例
2016/11/30 PHP
PHP设计模式之装饰器模式定义与用法详解
2018/04/02 PHP
利用PHP扩展Xhprof分析项目性能实践教程
2018/09/05 PHP
DB.ASP 用Javascript写ASP很灵活很好用很easy
2011/07/31 Javascript
jQuery News Ticker 基于jQuery的即时新闻行情展示插件
2011/11/05 Javascript
cnblogs 代码高亮显示后的代码复制问题解决实现代码
2011/12/14 Javascript
jQuery.Validate验证库的使用介绍
2013/04/26 Javascript
js使用正则实现ReplaceAll全部替换的方法
2014/07/18 Javascript
JavaScript获得当前网页来源页面(即上一页)的方法
2015/04/03 Javascript
简述AngularJS相关的一些编程思想
2015/06/23 Javascript
跟我学习javascript的异步脚本加载
2015/11/20 Javascript
JavaScript代码判断点击第几个按钮
2015/12/13 Javascript
基于jquery编写的放大镜插件
2016/03/23 Javascript
再谈Javascript中的异步以及如何异步
2016/08/19 Javascript
微信小程序实现的涂鸦功能示例【附源码下载】
2018/01/12 Javascript
详解vue 计算属性与方法跟侦听器区别(面试考点)
2018/04/23 Javascript
vue-cli2.x项目优化之引入本地静态库文件的方法
2018/06/19 Javascript
原生JS实现旋转轮播图+文字内容切换效果【附源码】
2018/09/29 Javascript
在vue项目实现一个ctrl+f的搜索功能
2020/02/28 Javascript
vue 实现锚点功能操作
2020/08/10 Javascript
简单介绍利用TK在Python下进行GUI编程的教程
2015/04/13 Python
python实现Flappy Bird源码
2018/12/24 Python
Django框架搭建的简易图书信息网站案例
2019/05/25 Python
python正则表达式匹配不包含某几个字符的字符串方法
2019/07/23 Python
python sklearn常用分类算法模型的调用
2019/10/16 Python
Python selenium抓取虎牙短视频代码实例
2020/03/02 Python
python中random.randint和random.randrange的区别详解
2020/09/20 Python
python 动态渲染 mysql 配置文件的示例
2020/11/20 Python
HTML5拖拽的简单实例
2016/05/30 HTML / CSS
Html5监听手机摇一摇事件的实现
2019/11/07 HTML / CSS
娇韵诗法国官网:Clarins法国
2019/01/29 全球购物
我看到了用指针调用函数的不同语法形式
2014/07/16 面试题
批评与自我批评范文
2014/10/15 职场文书