如今，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. 03以太网帧结构（链路层 IEEE802.3）

    OSI七层模型:从底往上记(研究细致时用) 物理层:单位bit,字节byte,同轴电缆,光纤,二进制,比特流 数据链路层:帧,16进制,0-9,A-FMac地址->全网唯一性     mac地址 ...

  2. Multimodal Machine Learning:A Survey and Taxonomy 综述阅读笔记

    该笔记基于:Multimodal Machine Learning:A Survey and Taxonomy 该论文是一篇对多模态机器学习领域的总结和分类,且发表于2017年,算是相当新的综述了.老 ...

  3. 前端模拟API数据的两种方式

    第一种方法:使用 mock-api 1.创建一个项目 2.创建一个资源 3.拖动创建记录 点击data查看记录 4.如何访问API的数据 第一种方式:在终端中通过 curl + 地址,如图: 第二种方 ...

  4. [原创]用python检测LVS real server状态实现HTTP高可用

    import httplib import os import time def check_http(i): try: conn=httplib.HTTPConnection(i, 80, time ...

  5. hive和关系型数据库

    1)hive和关系型数据库存储文件的系统不同.  hive使用hdfs(hadoop的分布式文件系统),关系型数据库则是服务器本地的文件系统: 2)hive使用的计算模型是mapreduce,而关系型 ...

  6. node-redis使用记录

    redis的高速存取性能让人印象深刻,虽然是分布式存储,但相比本地内存,性能毫不逊色. 之所以能做到这点,是由于redis的“单线程,多路复用IO”,同一时刻只有一个操作在进行. 而且多次建立从red ...

  7. Allure--自动化测试报告生成

    之前尝试使用过testNG自带的测试报告.优化过reportNG的测试报告,对这两个报告都不能满意.后经查找资料,发现有个神器: Allure(已经有allure2了,笔者使用的就是allure2), ...

  8. word record 4

    word record 4 pledge p le g vt. 保证,许诺 snowflake falke->n. 小薄片:火花 deputy de piu ti n. 代理人,代表 etch ...

  9. 完整的正则表达式知识汇总（Python知识不断更新）

    ## 大纲: ## 一.正则概述 1.正则是什么 正则就是一套规则,或者语法 2.正则的作用 让我们判断是否符合我们的的规则,或者根据规则找到符合规则的数据 3.使用场景 可以用正则判断我们输入的邮箱 ...

  10. C if 判断 else 否则

    #include <stdio.h> int main(int argc, char **argv) { //新建三个变量进行比较 int a,b,c; //输入三个变量的值scanf(& ...