seajs学习教程之基础篇

 更新时间:2016年10月20日 15:08:38   作者:royalrover  
Seajs是一个Web模块加载框架,追求简单、自然的代码书写和组织方式,Sea.js 遵循 CMD 规范,模块化JS代码。依赖的自动加载、配置的简洁清晰,可以让程序员更多地专注编码。这篇文章为seajs深入学习的第一篇,主要介绍的基础性的内容,感兴趣的朋友们可以参考学习。
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud

(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun

介绍

众所周知前端开发模块化已经是大势所趋,目前模块化的规范有很多,众所周知的有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的文章,感兴趣的朋友们请继续关注程序员之家。

相关文章

  • sea.js常用的api简易文档

    sea.js常用的api简易文档

    现在使用sea.js的公司越来越多, 比如阿里巴巴,淘宝网,百姓网,支付宝,有道云笔记等。模块化的javascript开发带来了可维护、可扩展性,尤其在多人协作开发的时候不用再担心文件依赖和函数命名冲突的问题,本文给大家分享了sea.js常用的api简易文档,下面来一起看看吧
    2016-11-11
  • seaJs的模块定义和模块加载浅析

    seaJs的模块定义和模块加载浅析

    这篇文章主要介绍了seaJs的模块定义和模块加载浅析,以及模块间的依赖关系等问题,需要的朋友可以参考下
    2014-06-06
  • SeaJS中use函数用法实例分析

    SeaJS中use函数用法实例分析

    这篇文章主要介绍了SeaJS中use函数用法,结合实例形式分析了use函数加载模块的使用方法与相关操作技巧,需要的朋友可以参考下
    2017-10-10
  • 深入探寻seajs的模块化与加载方式

    深入探寻seajs的模块化与加载方式

    本文是对Sea.js 提供seajs的模块化与加载方式的讲解,对学习JavaScript编程技术有所帮助,与大家分享。有需要的小伙伴可以参考下。
    2015-04-04
  • seajs学习之模块的依赖加载及模块API的导出

    seajs学习之模块的依赖加载及模块API的导出

    SeaJS是一个遵循 CommonJS 规范的模块加载框架,可用来轻松愉悦地加载任意JavaScript模块和css模块样式。SeaJS接口和方法也非常少,SeaJS 就两个核心:模块定义和模块的加载及依赖关系。本文将详细介绍模块的依赖加载及模块API的导出,有需要的朋友们可以参考借鉴。
    2016-10-10
  • seajs中最常用的7个功能、配置示例

    seajs中最常用的7个功能、配置示例

    这篇文章主要介绍了seajs中最常用的7个功能、配置,结合实例形式简单分析了seajs中常用的项目配置、模块加载、定义、获取等操作技巧,需要的朋友可以参考下
    2017-10-10
  • seajs学习教程之基础篇

    seajs学习教程之基础篇

    Seajs是一个Web模块加载框架,追求简单、自然的代码书写和组织方式,Sea.js 遵循 CMD 规范,模块化JS代码。依赖的自动加载、配置的简洁清晰,可以让程序员更多地专注编码。这篇文章为seajs深入学习的第一篇,主要介绍的基础性的内容,感兴趣的朋友们可以参考学习。
    2016-10-10
  • 把jQuery的类、插件封装成seajs的模块的方法

    把jQuery的类、插件封装成seajs的模块的方法

    这篇文章主要介绍了把jQuery的类、插件封装成seajs的模块的方法,需要的朋友可以参考下
    2014-03-03
  • seajs中模块的解析规则详解和模块使用总结

    seajs中模块的解析规则详解和模块使用总结

    这篇文章主要介绍了seajs中模块的解析规则详解和模块使用总结,需要的朋友可以参考下
    2014-03-03
  • Vue实现图片懒加载的多种方法详解

    Vue实现图片懒加载的多种方法详解

    图片懒加载是前端开发中一项重要的性能优化策略,它能够明显缩短页面加载时间,提升用户的浏览体验,在本文中,我们将深入探讨在Vue开发时候如何实现图片懒加载,同时探讨多种实现途径,需要的朋友可以参考下
    2023-08-08

最新评论

?


http://www.vxiaotou.com