seajs进行模块化开发

模块化前端开发入门指南（二）

2015-08-26 15:23 by paseo, 370 阅读, 0 评论, 收藏, 编辑

概览

使用seajs模块化加载器进行模块化开发，以及它的一些弊端。

使用seajs进行模块化开发

项目目录

  1. 新建新项目
  2. 引入sea.js，文件路径modules/sea.js
  3. 引入公共库jquery。
  4. 新建index.html，index.js

项目目录如下：

关于sea.js的公共模块路径
sea.js加载时，会自动获取sea.js所在的路径，将sea.js文件存放的路径做为公共模块的根目录。
以modules/sea.js为例，require('a')加载的是modules/a.js模块，require('a/b')加载的是modules/a/b.js模块。

index.html内容如下：

<!--index.html-->

<!doctype html>

<html>

	<head>

		<title>使用seajs进行模块化开发</title>

		<!--引入公共库-->

		<script src="libs/jquery.js"></script>

	</head>

	<body>

		<div id="container"></div>

		<!--引入seajs-->

		<script src="modules/sea.js"></script>		

		<!--引入index.html业务脚本-->

		<script>

			seajs.use('./scripts/index')

		</script>

	</body>

</html>

创建模块

创建文件modules/moduleA.js。接上篇三种封装形式，使用CMD规范后，分别是这样：



// 创建jquery插件形式，不需要返回值

// 使用方法require('moduleA')，返回为null

define(function(require, exports, module) {

	//$为公共模块

	$.fn.moduleA = function(options) {

	};

});

//Object字面量方式

define(function(require, exports, module) {

	module.exports = {

		fn1: function() {},

		fun2: functdion() {}

	};

});

//prototype继承，new Function方式

define(function(require, exports, module) {

	function moduleA() {

		//constructor

	}

	moduleA.prototype.fn1 = function() {};

	moduleA.prototype.fn2 = function() {};

	module.exports = moduleA;

});

模块的使用



/*

	jquery插件形式的模块加载方式

	*/

define(function(require, exports, module) {

	//加载模块

	require('moduleA'); 

	//使用

	$('body').moduleA();

});

/*

Object形式

*/

define(function(require, exports, module) {

	//加载模块

	var moduleA = require('moduleA');

	//使用

	moduleA.fn1();

	moduleA.fn2();

});

/*

原型链继承, new Function形式

*/

define(function(require, exports, module) {

	//加载模块

	var ModuleA = require('moduleA');

	//使用

	var moduleA = new ModuleA();

	moduleA.fn1();

	moduleA.fn2();

});

总结

seajs作为一款国人创造的一个工具库，一直是被放在与requirejs齐平的地位上探讨，个人觉得非常不易。使用方式也简单易懂。而且有配套的打包和构建工具，做工程化也不是问题。不足之处是文档不足，提供的工程化产品在国外的grunt、gulp、bower、browserify、components等工程化产品的生态和完整使用文档冲击下，受众不多。

延伸阅读

如何改造现有文件为CMD模块
玉伯回答seajs和其他模块加载器的异同
玉伯近期说要给seajs立碑悼念，知乎人的看法

seajs进行模块化开发的更多相关文章

  1. seajs的模块化开发--实践笔记

    2017-04-02 SeaJS是一个遵循CMD规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制.有效的解决复杂项目中命名冲突.依赖.性能等问题. SeaJS ...

  2. 初学seaJs模块化开发，利用grunt打包，减少http请求

    原文地址:初学seaJs模块化开发,利用grunt打包,减少http请求 未压缩合并的演示地址:demo2 学习seaJs的模块化开发,适合对seajs基础有所了解的同学看,目录结构 js — —di ...

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

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

  4. 2.精通前端系列技术之JavaScript模块化开发 seajs（一）

    在使用seajs模块化开发之前,直接在页面引用js会容易出现冲突及依赖相关的问题,具体问题如下 问题1:多人开发脚本的时候容易产生冲突(比如全局参数冲突,方法名冲突),可以使用命名空间降低冲突,不能完 ...

  5. JavaScript模块化开发库之SeaJS

    SeaJS是一个很好的前端模块化开发库,源码不到1500行,压缩后才4k,质量极高.

  6. 使用SeaJS实现模块化JavaScript开发（新）

    本文转自张洋,因为SeaJS更新版本很快,所以原文中很多地方不太适用,在这里发布一个更新版. 前言   SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架,可以实现JavaSc ...

  7. 使用SeaJS实现模块化JavaScript开发

    前言 SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制.与jQuery等JavaScript框架不同,SeaJS不会扩展封 ...

  8. 轻轻谈一下seaJs——模块化开发的利器

    "仅做一件事,做好一件事." 这个应该就是seaJs的精髓了. 我在自己的一些项目中使用过seaJs.对其算是了解一二.如今就班门弄斧.轻轻地谈一下. 首先上一段度娘的话: &qu ...

  9. JS模块化开发（三）——seaJs+grunt

    1.seaJs直接构建存在的问题 由于模块之间的依赖require引用的是模块名,当多个js模块被合并成一个时,会由于找不到模块名而报错 2.seaJs+grunt开发 用到的插件:grunt-cmd ...

随机推荐

  1. Oracle 基于 RMAN 的不完全恢复(incomplete recovery by RMAN)

    Oracle 数据库可以实现数据库不完全恢复与完全恢复.完全恢复是将数据库恢复到最新时刻,也就是无损恢复,保证数据库无丢失的恢复.而不完全恢复则是根据需要特意将数据库恢复到某个过去的特定时间点或特定的 ...

  2. 【原创】poj ----- 3009 curling 2 解题报告

    题目地址: http://poj.org/problem?id=3009 题目内容: Curling 2.0 Time Limit: 1000MS   Memory Limit: 65536K Tot ...

  3. 配置jndi服务，javax.naming.NamingException的四种情况

    1.当jndi服务没有启动,或者jndi服务的属性没有设置正确,抛出如下异常: javax.naming.CommunicationException: Can't find SerialContex ...

  4. Linux新手命令

    给老婆写了一份速成培训教材--最经常使用的命令及解释.当然每一个人工作内容不同,经常使用命令也不同,这仅仅是我的个人经验,并且要考虑到接受者的基础. ls:列出文件夹下的内容,类似于dos下的dir. ...

  5. Android 基于Netty接收和发送推送解决方案的消息字符串（三）

    在上一篇文章中<Android 基于Netty的消息推送方案之概念和工作原理(二)> .我们介绍过一些关于Netty的概念和工作原理的内容,今天我们先来介绍一个叫做ChannelBuffe ...

  6. $(&#39;#checkbox&#39;).attr(&#39;checked&#39;); 回报checked或undefined该解决方案

    $('#checkbox').attr('checked'); 返回的是checked或者是undefined,不是原来的true和false了,有关此问题的解决方法例如以下 在JQ1.6之前的版本号 ...

  7. android集成apk对一些问题经常遇到系统

    1.集成APK必须确认是否release版本号,否则会导致CTS测试失败. 途径:反编译apk,视图manifest.xml文件,看<application>在那里debug属性:andr ...

  8. Linux下安装Oracle11g服务器(转)

    安装环境 Linux服务器:SuSe10 sp2 64位 Oracle服务器:Oracle11gR2 64位 系统要求 Linux安装Oracle系统要求 系统要求 说明 内存 必须高于1G的物理内存 ...

  9. hdu 5094 Maze（水搜索）

    题目意思:说有一个人在(1,1) 他的目标点在(n,m) 每次是4方向的移动: 限制条件:有的各自之间有墙 或者门,强不可通过,有对应的要钥匙可以开启这个类型的所有门: 问题:求最少步骤数(和): 类 ...

  10. 匿名方法，Lambda表达式，高阶函数

    原文:匿名方法,Lambda表达式,高阶函数 匿名方法 c#2.0引入匿名方法,不必创建单独的方法,因此减少了所需的编码系统开销. 常用于将委托和匿名方法关联,例如1. 使用委托和方法关联: this ...