一、概念：
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. spring3+hibernate3+（dbcp+oracle+拦截器事务配置）整合（一）

    1.applicationContext-base.xml文件 <?xml version="1.0" encoding="UTF-8"?>< ...

  2. SVN的错误： working copy locked

    提示:your working copy appears to be locked. run cleanup to amend the situation. 产生这种情况大多是因为上次svn命令执行失 ...

  3. C#透过PerformanceCounter取得特定Process的CPU使用率

  4. Android framework浅析[转]

    Android系统从底向上一共分了4层,每一层都把底层实现封装,并暴露调用接口给上一层. 1. Linux内核(Linux Kernel) 1)Android运行在linux kernel 2.6之上 ...

  5. EXT JS 4.3 在线学习

    官网地址:http://docs.sencha.com/extjs/4.1.3/ 相关示例:http://docs.sencha.com/extjs/4.1.3/#!/example Examples ...

  6. c++容器使用总结（转载）

    目录 ==================================================== 第一章 容器 第二章 Vector和string 第三章 关联容器 第四章 迭代器 第五 ...

  7. LeeCode-Contains Duplicate

    Given an array of integers, find if the array contains any duplicates. Your function should return t ...

  8. Code Generation and T4 Text Templates

    Code Generation and T4 Text Templates Code Generation and T4 Text Templates

  9. laravel5.3 笔记一

    laravel5.3 笔记 安装环境 laravel环境,laravel中文学习论坛上面有相关的教程 创建应用 laravel new blog 其中blog就是你的应用的名字 数据迁移 php ar ...

  10. IOS开发之---触摸和手势

    Touch:在与设备的多点触摸屏交互时生成. 响应者对象 响应者对象就是可以响应事件并对事件作出处理.在iOS中,存在UIResponder类,它定义了响应者对象的所有方法.UIApplication ...