如今，webpack、gulp等构件工具流行，有人说seajs、requirejs等纯前端的模块化工具已经被淘汰了，我不这么认为，毕竟纯前端领域想要实现模块化就官方来讲，还是有一段路要走的。也因此纯前端的模块化工具依然有价值，而且就我了解一些中小企业一直都在用纯前端的模块化手段。

如今，重新关注seajs和requirejs，不求理解多么深刻，要求会用能用就可以。

模块化的起因是传统的直接引入js方法存在问题：

  1. 必须通过全局变量共享模块，有可能会出现命名冲突的问题；
  2. 依赖的文件必须手动地使用标签引入到页面中。

下面是seajs和requirejs的简单案例。

seajs 我用的seajs版本是2.2.3

html部分

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>极客学院首页</title>

 </head>

 <body>

     <button id="testbtn0">测试按钮0</button>

     <button id="testbtn1">测试按钮1</button>

     <script type="text/javascript" src="./js/sea.js"></script>

     <script type="text/javascript">

              seajs.use('./js/main');

     </script>

 </body>

 </html>

main.js文件

 define(function(require,exports,module){

    //引入两个js文件

    require("test0");

    require("test1");

 })

test0.js

 define(function(require,exports,module){

     var $$=require("common").$$;

     var testbtn0=$$("#testbtn0");

     testbtn0.addEventListener("click",function(e){

         alert(e.target.innerText);

     });

 })

test1.js

 define(function(require, exports, module) {

     var $$ = require("common").$$;

     var testbtn1 = $$("#testbtn1");

     testbtn1.addEventListener("click", function(e) {

         alert(e.target.innerText);

     });

 })

coomm.js

 define(function(rerquire,exports,module){

     /*//第一种导出方案

    exports.$$=function(tag){

            return document.querySelector(tag);

    }*/

    //第二种导出方案

    module.exports={

          $$:function(tag){

             return document.querySelector(tag);

          },

          test:"测试数据"

    }

    //第三种导出方案

   /* return {

          $$:function(tag){

             return document.querySelector(tag);

          },

          test:"测试数据"

    }*/

 })

以上是为seajs的，而requirejs的直接就是该一下html文件就可以了，真是哭笑不得啊。才发现二者是通过的。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>极客学院首页</title>

 </head>

 <body>

     <button id="testbtn0">测试按钮0</button>

     <button id="testbtn1">测试按钮1</button>

     <script type="text/javascript" data-main="./js/main" src="./js/require.js"></script>

 </body>

 </html>

关于导出接口有三种，分别是exports，用来导出变量；然后是module.exports用于导出对象；最后是return直接返回。

最后对seajs和requirejs的不通点做个总结，选择seajs作者github：

  1. 定位有差异。RequireJS 想成为浏览器端的模块加载器，同时也想成为 Rhino / Node 等环境的模块加载器。Sea.js 则专注于 Web 浏览器端，同时通过 Node 扩展的方式可以很方便跑在 Node 环境中。
  2. 遵循的规范不同。RequireJS 遵循 AMD（异步模块定义）规范，Sea.js 遵循 CMD （通用模块定义）规范。规范的不同，导致了两者 API 不同。Sea.js 更贴近 CommonJS Modules/1.1 和 Node Modules 规范。
  3. 推广理念有差异。RequireJS 在尝试让第三方类库修改自身来支持 RequireJS，目前只有少数社区采纳。Sea.js 不强推，采用自主封装的方式来“海纳百川”，目前已有较成熟的封装策略。
  4. 对开发调试的支持有差异。Sea.js 非常关注代码的开发调试，有 nocache、debug 等用于调试的插件。RequireJS 无这方面的明显支持。
  5. 插件机制不同。RequireJS 采取的是在源码中预留接口的形式，插件类型比较单一。Sea.js 采取的是通用事件机制，插件类型更丰富。

个人总结的不同是：

CMD，seajs 推崇依赖就近，AMD ，requirejs推崇依赖前置，实际是两者在简单实现上，是可以一致的。就比如本文的例子。

seajs比如requirejs小很多。

本文结束。

2019年7月21日

今天回顾了requirejs的使用，突然明白作者为什么不更新了。webpack确实是一种更高层次的模块化升级。

seaj和requirejs模块化的简单案例的更多相关文章

  1. Selenium(十四)：自动化测试模型介绍、模块化驱动测试案例、数据驱动测试案例

    1. 自动化测试模型介绍 随着自动化测试技术的发展,演化为了集中模型:线性测试.模块化驱动测试.数据驱动测试和关键字驱动测试. 下面分别介绍这几种自动化测试模型的特点. 1.1 线性测试 通过录制或编 ...

  2. Aurelia – 模块化，简单，可测试的 JS 框架

    Aurelia 是下一代 JavaScript 客户端框架,利用简单的约定来激发你的创造力.凭借其强大的专注于开发经验, Aurelia 可以使您不仅创造惊人的应用程序,同时也享受这个过程.它经过精心 ...

  3. Servlet请求头response应用简单案例

    Servlet请求头response应用简单案例:访问AServlet重定向到BServlet,5秒后跳到CServlet,并显示图片: AServlet package cn.yzu; import ...

  4. winform 通过 html 与swf 交互 简单案例

    在上一篇 winform 与 html 交互 简单案例 中讲了winform与html之间的简单交互,接下来的内容是在winform中以html为中转站,实现将swf嵌入winform中并实现交互. ...

  5. [Design Pattern] Front Controller Pattern 简单案例

    Front Controller Pattern, 即前端控制器模式,用于集中化用户请求,使得所有请求都经过同一个前端控制器处理,处理内容有身份验证.权限验证.记录和追踪请求等,处理后再交由分发器把请 ...

  6. [Design Pattern] Observer Pattern 简单案例

    Observer Pattern,即观察者模式,当存在一对多关系,例如一个对象一有变动,就要自动通知被依赖的全部对象得场景,属于行为类的设计模式. 下面是一个观察者模式的简单案例. Observer ...

  7. [Design Pattern] Mediator Pattern 简单案例

    Meditor Pattern,即调解模式,用一个调解类类处理所有的沟通事件,使得降低多对象之间的沟通难度,属于行为类的设计模式.为了方便理解记忆,我也称其为,沟通模式. 下面是一个调解模式的简单案例 ...

  8. [Design Pattern] Iterator Pattern 简单案例

    Iterator Pattern,即迭代时模式,按照顺序依次遍历集合内的每一个元素,而不用了解集合的底层实现,属于行为类的设计模式.为了方便理解记忆,我也会称其为遍历模式. 下面是一个迭代器模式的简单 ...

  9. [Design Pattern] Command Pattern 简单案例

    Command Pattern, 即命令模式,把一个命令包裹在一个对象里面,将命令对象传递给命令的执行方,属于行为类的设计模式 下面是命令模式的一个简单案例. Stock 代表被操作的对象.Order ...

随机推荐

  1. MQTT的学习之Mosquitto安装&使用（1）

    Mosquitto是一个实现了MQTT3.1协议的代理服务器,由MQTT协议创始人之一的Andy Stanford-Clark开发,它为我们提供了非常棒的轻量级数据交换的解决方案.本文的主旨在于记录M ...

  2. python3 练习题100例 （六）

    题目六:斐波那契数列(Fibonacci sequence),又称黄金分割数列,指的是这样一个数列:0.1.1.2.3.5.8.13.21.34.……. #!/usr/bin/env python3 ...

  3. 实验4 [BX]和loop指令

    实验内容: 1.综合使用loop,[bx],编写完整汇编程序,实现向内存b800:07b8开始的连续16个字单元重复填充字数据0441H. 实验结果: 若填充的数据为:0403h,则实验结果转变为: ...

  4. Codeforces431C_K-Tree_KEY

    题目传送门 题目大意:给定一棵K叉树,一个节点下的K个节点的分数为i,求包含大于等于D的边的总分数为N的方案总数,mod 1e9+7. 这是一道很好的树形DP题,首先看N和K两个条件,可以轻易的得到方 ...

  5. 13 内建属性 _getattribute_ 内建函数

    1.内建属性 2.__getattribute__ 属性访问时拦截器 class Itcast(object): def __init__(self,subject1): self.subject1 ...

  6. DSP5509项目之用FFT识别钢琴音调（1）

    1. 其实这个项目难点在于,能不能采集到高质量的钢琴音调.先看一下FFT相关程序. FFT 并不是一种新的变换,它是离散傅立叶变换(DFT)的一种快速算法.由于我们在计算 DFT 时一次复数乘法需用四 ...

  7. Servlet的5种方式实现表单提交（注册小功能）

    Servlet的5种方式实现表单提交(注册小功能),后台获取表单数据   用servlet实现一个注册的小功能 ,后台获取数据. 注册页面: 注册页面代码 : <!DOCTYPE html> ...

  8. Spring的cache缓存介绍

    从3.1开始,Spring引入了对Cache的支持.其使用方法和原理都类似于Spring对事务管理的支持.Spring Cache是作用在方法上的,其核心思想是这样的:当我们在调用一个缓存方法时会把该 ...

  9. 「日常训练」Caterpillar（POJ-3310）

    题意与分析 一条很有趣的题目.给一个无向图,问它是否无环,且可以在上面找到一条线,使所有的顶点要么在线上要么不在线上但在与线相连的边上. 那么首先要确定所有点联系在一起.这个可以同判环一起处理:如果建 ...

  10. MySQL日期、字符串、时间戳互转

    平时比较常用的时间.字符串.时间戳之间的互相转换,虽然常用但是几乎每次使用时候都喜欢去搜索一下用法:本文将作为一个笔记,整理一下三者之间的 转换(即:date转字符串.date转时间戳.字符串转dat ...