seajs的使用

seajs是一个jS模块加载器,由淘宝前端架构师玉伯开发,它可以解决命名空间污染,文件依赖的问题.可以在一个js文件中引入另外一个js.require('a.js')

1.安装

npm install --save seajs

2.API

2.1 require

在一个模块中引入其它模块

var addSub = require('./addSub');

2.2 seajs.use()

  • 加载模块，启动模块系统。

    • 加载一个模块 seajs.use('id')
    • 加载一个模块，在加载完成时，执行回调 seajs.use('id', callback)
    • 加载多个模块，加载完成时，执行回调 seajs.use(['id1','id2',…],callback)
  • 注意：
    • 在调用 seajs.use 之前，需要先引入 sea.js 文件
    • seajs.use 与 DOM ready 事件没有任何关系。如果某些操作要确保在 DOM ready 后执行，需要使用 jquery 等类库来保证

      +　seajs.use 理论上只用于加载启动，不应该出现在 define 中的模块代码里

2.3 module

module 是一个对象，上面存储了与当前模块相关联的一些属性和方法。

  • module.id

    模块的唯一标识，可以通过 define 方法的第一个参数来指定，默认为该模块文件的绝对路径
  • module.uri

    模块的绝对路径
  • module.dependencies

    dependencies 是一个数组，表示当前模块的依赖
  • module.exports

    当前模块对外提供的接口对象

    相当于每个模块内部最终都执行了这么一句话：return module.exports

    模块与模块之间的通信接口
  1. module.exports={
    2. 

  2.         add:function(x,y){
    3. 

  3.             return parseFloat(x)+parseFloat(y);
    4. 

  4.         },
    5. 

  5.         sub:function(x,y){
    6. 

  6.             return parseFloat(x)-parseFloat(y);
    7. 

  7.         }
    8. 

  8.     }

2.4 exports

每个文件模块中默认的对外接口对象是module.exports,另外seajs还提供了一个接口对象exports

注意:exports是module.exports接口对象的一个引用,也就是说修改了exports就相当于修改了module.exports

将模块中定义的数据接口暴露出去(变量,方法),供其它模块使用.

但是如果要向外暴露一个单独的变量,函数等成员,那就必须通过给module.exports赋值才可以

2.5 define(factory)

  • define 是一个全局函数，用来定义模块。

  • define 接受 factory 参数，factory 可以是一个函数，也可以是一个对象或字符串。

  • factory 为对象、字符串时，表示模块的接口就是该对象、字符串。

  • factory 是一个对象时

  • define({})

  • factory 是一个字符串时

  • define('hello')

  • factory 是一个函数时
  1. define(function(require,exports,module){
    2. 

  2.     //...js代码...
    3. 

  3. });

3.使用步骤

  • 模块系统:

    • 1.定义模块成员
    • 2.设定交互规则
  • 3.1 引包
  • 3.2 使用define定义一个模块,所有代码写到define回调函数中
  • 3.3 使用module.exports作为模块与模块之间的通信接口对象
  • 3.4 使用require函数加载模块,执行模块中的代码得到模块中的module.exports接口对象
  • 3.5 使用seajs.use方法,启动模块系统.

4.小案例

4.1html文件

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3. <head>
    4. 

  4.     <meta charset="UTF-8">
    5. 

  5.     <title>Title</title>
    6. 

  6. </head>
    7. 

  7. <body>
    8. 

  8. <input type="text" id="inputX">
    9. 

  9. <select name="" id="selMethed">
    10. 

  10.     <option value="0">+</option>
    11. 

  11.     <option value="1">-</option>
    12. 

  12. </select>
    13. 

  13. <input type="text" id="inputY">
    14. 

  14. <button id="btn">=</button>
    15. 

  15. <input type="text" id="outPut">
    16. 

    17. 

  17. <!--1.引入seajs包-->
    18. 

  18. <script src="lib/sea.js"></script>
    19. 

  19. <script>
    20. 

  20.     /*2.设置主入口文件*/
    21. 

  21.     seajs.use('./js/main')
    22. 

  22. </script>
    23. 

  23. </body>
    24. 

  24. </html>

4.2main.js文件 主模块入口文件

  1. define(function(require,exports,module){
    2. 

  2.     /*引入addSub模块*/
    3. 

  3.     var addSub = require('./addSub');
    4. 

    5. 

  5.     var inputX = document.querySelector('#inputX');
    6. 

  6.     var inputY = document.querySelector('#inputY');
    7. 

  7.     var selMethed = document.querySelector('#selMethed');
    8. 

  8.     var outPut = document.querySelector('#outPut');
    9. 

  9.     var addSubClick = document.querySelector('#btn');
    10. 

  10.     var selMethedValue = selMethed.value;
    11. 

    12. 

  12.     var outPutValue='';//存储计算的结果
    13. 

  13.     addSubClick.onclick=function(){
    14. 

    15. 

  15.         var xValue = inputX.value;
    16. 

  16.         var yValue = inputY.value;
    17. 

  17.         console.log(xValue);
    18. 

  18.         /*使用addSub中暴露的方法*/
    19. 

  19.         switch(selMethedValue){
    20. 

  20.             case '0':
    21. 

  21.                 outPutValue = addSub.add(xValue,yValue);
    22. 

  22.                 break;
    23. 

  23.             case '1':
    24. 

  24.                 outPutValue = addSub.sub(xValue,yValue);
    25. 

  25.         }
    26. 

  26.     console.log(outPutValue);
    27. 

  27.         //把结果放在输出的input的中
    28. 

  28.         outPut.value=outPutValue;
    29. 

  29.     }
    30. 

    31. 

  31. });

4.3addSub.js被引用的模块文件

  1. define(function(require,exports,module){
    2. 

    3. 

  3.     module.exports={
    4. 

  4.         add:function(x,y){
    5. 

  5.             return parseFloat(x)+parseFloat(y);
    6. 

  6.         },
    7. 

  7.         sub:function(x,y){
    8. 

  8.             return parseFloat(x)-parseFloat(y);
    9. 

  9.         }
    10. 

  10.     }
    11. 

    12. 

  12. });

sea.js模块加载工具的更多相关文章

  1. 第三课：sea.js模块加载原理

    模块加载,其实就是把js分成很多个模块,便于开发和维护.因此加载很多js模块的时候,需要动态的加载,以便提高用户体验. 在介绍模块加载库之前,先介绍一个方法. 动态加载js方法: function l ...

  2. js模块化/js模块加载器/js模块打包器

    之前对这几个概念一直记得很模糊,也无法用自己的语言表达出来,今天看了大神的文章,尝试根据自己的理解总结一下,算是一篇读后感. 大神的文章:http://www.css88.com/archives/7 ...

  3. js模块加载之AMD和CMD

    当我写这篇文章的时候,sea.js已经逐渐退出历史的舞台,详细链接.不过任何新事物的出现都是对旧事物的取其精华,去其糟粕,所以了解一下以前模块的加载也是一件好事. js模块化的原因自不比多说,看看HU ...

  4. nodejs js模块加载

    本文地址:http://www.cnblogs.com/jasonxuli/p/4381747.html nodejs的非核心模块(core module)加载主要使用的就是module.js. 项目 ...

  5. 实现简单的 JS 模块加载器

    实现简单的 JS 模块加载器 1. 背景介绍 按需加载是前端性能优化的一个重要手段,按需加载的本质是从远程服务器加载一段JS代码(这里主要讨论JS,CSS或者其他资源大同小异),该JS代码就是一个模块 ...

  6. js模块加载框架 sea.js学习笔记

    seajs实现了JavaScript 的 模块开发及按模块加载.用来解决繁琐的js命名冲突,文件依赖等问题,其主要目的是令JavaScript开发模块化并可以轻松愉悦进行加载. 官方文档:http:/ ...

  7. 关于前端JS模块加载器实现的一些细节

    最近工作需要,实现一个特定环境的模块加载方案,实现过程中有一些技术细节不解,便参考 了一些项目的api设计约定与实现,记录下来备忘. 本文不探讨为什么实现模块化,以及模块化相关的规范,直接考虑一些技术 ...

  8. 【 js 模块加载 】深入学习模块化加载（node.js 模块源码）

    一.模块规范 说到模块化加载,就不得先说一说模块规范.模块规范是用来约束每个模块,让其必须按照一定的格式编写.AMD,CMD,CommonJS 是目前最常用的三种模块化书写规范.  1.AMD(Asy ...

  9. webpack前端模块加载工具

    最近在看许多React的资料,发现了大部分的项目都是用webpack行模块化管理的工具.这次也是借着写了一个React-Todos的小应用,对webPack最基本实用的功能体验了一番,顺带做个小记录. ...

随机推荐

  1. “void * __cdecl operator new(unsigned int)”(??2@YAPAXI@Z) already defined in LIBCMTD.lib(new.obj)

    转自VC错误:http://www.vcerror.com/?p=1377 问题描述: 当 C 运行时 (CRT) 库和 Microsoft 基础类 (MFC) 库的链接顺序有误时,可能会出现以下 L ...

  2. ceph-报错日志

    由于时钟不一致问题,导致ceph存储有问题 clock skew时钟偏移overalladj. 全部的:全体的:一切在内的stampedadj. 铭刻的:盖上邮戳的:顿足的 beaconvt. 照亮, ...

  3. 1. 什么是Prometheus

    什么是Prometheus Prometheus是一个最初在SoundCloud上构建的开源系统监视和警报工具包 .自2012年成立以来,许多公司和组织都采用了Prometheus,该项目拥有一个非常 ...

  4. 阻抗匹配 及 SI9000 使用

    1. 阻抗匹配 1. 波长 * 频率 = 光速(3*10^8) 2. PCB走线什么时候需要做阻抗匹配? 不主要看频率,而关键是看信号的边沿陡峭程度,即信号的上升/下降时间,一般认为如果信号的上升/下 ...

  5. upc组队赛6 Progressive Scramble【模拟】

    Progressive Scramble 题目描述 You are a member of a naive spy agency. For secure communication,members o ...

  6. Struts2的Action访问

    ● 示例项目结构 ●  demo1.jsp <%@ page language="java" import="java.util.*" pageEncod ...

  7. 【DRP】採用dom4j完毕XML文件导入数据库

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/lantingxv_jing/article/details/37762523     xml文件在如 ...

  8. 怎么在vue-cli中利用 :class去做一个底层背景或者文字的点击切换

    // html <div class="pusherLists" :class="{hidden: isHidden}"> <span @cl ...

  9. 在我的Mint上安装网易云音乐

    首先到网易官网下载Ubuntu版本的安装包,哪个版本多少位没多大所谓啦 然而会出现类似如下的依赖错误: dpkg: 依赖关系问题使得 netease-cloud-music 的配置工作不能继续: ne ...

  10. 四、hibernate的缓存

    缓存: 就是将数据保存到内存中,需要使用时直接从内存中获取,不需要每次查询数据库或者磁盘中的文件 hibernate的缓存 一级缓存:Session级别的缓存 二级缓存:SessionFactory级 ...