一、概念：
SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架。

在 Sea.js 中，所有 JavaScript 模块都遵循 CMD（Common Module Definition） 模块定义规范。该规范明确了模块的基本书写格式和基本交互规则。

在 CMD 规范中，一个模块就是一个文件。代码的书写格式如下：define(factory);

SeaJS解决了两个问题：

1.JavaScript的模块化

2.按模块加载

SeaJS在开发中的角色：在多人协作开发时，起着后勤人员的作用，协调  文件依赖、命名冲突、按需加载的作用;

二、用法：

1.引入sea.js

2.定义模块--define

3.对外提供接口--export

4.依赖接口--require

5.调用模块--seajs.use

例：

为了让 sea.js 内部能快速获取到自身路径，推荐手动加上 id 属性

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>seajs的使用方法</title>

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

 <script>

 /*

     调用模块

     语法：

         seajs.use(url, callback);

     参数说明：

         url: 调用模块的地址, url默认根目录是sea.js所有文件夹

         callback: 回调函数

     内部工作原理：

         填入url后，seajs会异步加载url的文件， 加载完成后执行 callback;

         这样就实现了按模块加载JS，也可以说是按需加载。

 */

 seajs.use('./js/test1.js',function(ex){

     //ex就是对外接口export

     ex.tab();

     function tab(){

         alert('我是现写的，大家都是tab，但不冲突哦~~');

     }

     tab();  //很好的就解决了命名冲突

 });

 </script>

 </head>

 <body>

 </body>

 </html>

目录层级关系如下 ：

test1.js 如下：

 // JavaScript Document

 /*

     定义模块

     语法：

         define(function (require, exports, module){ //参数写法是固定

             //your code gose here

          });

     参数说明：

         require: 依赖的接口

         exports: 对外提供的接口

         module:

     内部工作原理：

         1.当调用require方法时，seajs会同步加载url的文件，这样就解决依赖问题了。如果想异步加载就用require.async(url, callback);

         2.exports对象下包含的是对外提供的属性和方法，调用seajs.use时，callback函数的参数就是exports对象

 */

 define(function(require, exports, module){ 

     //如果依赖的是一个普通JS文件

     require('./test2.js');

     //如果依赖的是一个用define写的JS模块

     var ex = require('./test3.js');

     function tab(){

         alert('我是test1模块的一个方法');

         alert('test1' + a);

         alert('test1' + ex.b)

     }

     exports.tab = tab;

 });

test2.js 如下：

 // JavaScript Document

 var a = '依赖test2了， 我是test2的全局变量';

test3.js 如下：

 // JavaScript Document

 define(function(require,exports,module){ //参数写法是固定

     exports.b = '依赖test3了，我是test3模块的局部变量';

 });

上面说到了seajs中常用的4个方法，别外请参考管方的seajs常用的7个方法： https://github.com/seajs/seajs/issues/266

模块化开发，SesJS简单总结的更多相关文章

  1. seaJs模块化开发简单入门

    随着前端技术的日益成熟,功能越来越丰富强大,规范也越来越健全,在这样的背景环境下很快便有了CommonJs.AMD.CMD等一系列规范,使前端发开趋向模块化.规范化.CMD模块化的代表之一就是国内开发 ...

  2. JS模块化开发：使用SeaJs高效构建页面

    一.扯淡部分 很久很久以前,也就是刚开始接触前端的那会儿,脑袋里压根没有什么架构.重构.性能这些概念,天真地以为前端===好看的页面,甚至把js都划分到除了用来写一些美美的特效别无它用的阴暗角落里,就 ...

  3. iOS关于模块化开发解决方案(纯干货)

    关于iOS模块化开发解决方案网上也有一些介绍,但真正落实在在具体的实例却很少看到,计划编写系统文章来介绍关于我对模块化解决方案的理解,里面会有包含到一些关于解耦.路由.封装.私有Pod管理等内容:并编 ...

  4. .NET/ASP.NET MVC（模块化开发AraeRegistration）

    阅读目录: 1.开篇介绍 2.AreaRegistration注册路由(传递路由上下文进行模块化注册) 1]开篇介绍 ASP.NET Routing 路由功能非常强大,设计的也很巧妙:如果说ASP.N ...

  5. Mvc 模块化开发

    在Mvc中,标准的模块化开发方式是使用Areas,每一个Area都可以注册自己的路由,使用自己的控件器与视图.但是在具体使用上它有如下两个限制 1.必须把视图文件放到主项目的Areas文件夹下才能生效 ...

  6. 详解JavaScript模块化开发

    什么是模块化开发? 前端开发中,起初只要在script标签中嵌入几十上百行代码就能实现一些基本的交互效果,后来js得到重视,应用也广泛起来了,jQuery,Ajax,Node.Js,MVC,MVVM等 ...

  7. Javascript模块化开发，使用模块化脚本加载工具RequireJS，提高你代码的速度和质量。

    随着前端JavaScript代码越来越重,如何组织JavaScript代码变得非常重要,好的组织方式,可以让别人和自己很好的理解代码,也便于维护和测试.模块化是一种非常好的代码组织方式,本文试着对Ja ...

  8. Asp.net Mvc模块化开发之分区扩展框架

    对于一个企业级项目开发,模块化是非常重要的. 默认Mvc框架的AreaRegistration对模块化开发真的支持很好吗?真的有很多复杂系统在使用默认的分区开发的吗?我相信大部分asp.net的技术团 ...

  9. Asp.net Mvc模块化开发系列(目录)

    模块化开发是非常重要的,模块化开发是个系统性问题,为此我觉得有必须要写一个系列的文章才能基本说的清楚 那又为什么要写一个目录呢? 其一.是对我昨天承诺写一个系列新的文章的回应 其二.是先写出一个大纲, ...

  10. Javascript 模块化开发上线解决方案

    最近又换部门了,好频繁地说...于是把这段时间搞的小工具们简单整理了一下,作了一个小的总结.这次用一个简单业务demo来向大家介绍一下Javascript模块化开发的方式和自动化合并压缩的一些自己的处 ...

随机推荐

  1. No.1_1 java语言基础_学习笔记

    import java.util.Scanner; public class HelloWorld { static final double PI=3.14; static int x=125; / ...

  2. [Head First Python]2. BIF(内置函数)

    1- range() >>> for each in range(2): print(each) ... 0 1

  3. css制作简单下拉菜单

    要点:定位,隐藏,显示. (一)先建一个两次列表 <ul id="ul1"> <li>首页</li> <li>第二页 <ul& ...

  4. Tempter of the Bone（dfs+奇偶剪枝）

    Tempter of the Bone Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Othe ...

  5. Typecho 代码阅读笔记（一） - 页面渲染及路由机制

    转载请注明出处:http://blog.csdn.net/jh_zzz 从 index.php 开始看, /** 初始化组件 */ Typecho_Widget:: widget('Widget_In ...

  6. ubuntu 中c 语言编程（学习）

    ubuntu下c编程 c编程中相关文件后缀 .a    静态库(archive .c     C源代码(需要编译预处理) .h     C源代码头文件 .i      C源代码 (不需要编译预处理) ...

  7. css显示省略号

    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;  <!-- 就这三句,,,嘿嘿....->

  8. SQL Server索引语法 <第四篇>

    从CREATE开始 通过显式的CREATE INDEX命令 在创建约束时作为隐含的对象 随约束创建的隐含索引 当向表中添加如下两种约束之一时,就会创建隐含索引. 主键约束(聚集索引) 唯一约束(唯一索 ...

  9. invesments 第三章 上

    1. How firms issue securities: 公司如何发行股票 A.       primary market: 新的股票,债券和其他的证券第一次发行的market B.        ...

  10. HDU1232 畅通工程 (并查集模板题）

    畅通工程 Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submis ...