文档章节

seajs学习日志 简单尝试模板+数据合并、模块异步加载、非标准CMD模式定义define模块

尐桀
 尐桀
发布于 2014/11/01 16:48
字数 877
阅读 236
收藏 4

今天继续尝试seajs 2.3的版本,那做点什么demo好呢,就来一个简单是数据模板吧,然后通过其他一些细节深入学习

先看看目录结构,按照官方demo架设

index.html只是简单入口文件和seajs的配置项,最下面有一个seajs.use加载crontroller模块,然后回调暴露的combine方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>halo sea.js</title>
		<script type="text/javascript" src="../sea-modules/sea.js"></script>
	</head>
	<body>
		<div id="hello"></div>
	</body>
</html>
<script type="text/javascript">
seajs.config({
	base : "../sea-modules/",
	alias : {
		"jquery" : "jquery.js"
	}
});

seajs.use("../static/crontroller", function(c){
	console.log(c.combine());
});
</script>

crontroller模块,里面有一些官方的说明和调试,试用了require.async异步加载、require方式加载其他模块(数据和模板module)、如何成功加载非CMD标准定义模块

define(function(require, exports, module) {

	/* 使用模块系统内部的路径解析机制来解析并返回模块路径。
	 * 该函数不会加载模块,只返回解析后的绝对路径 */
	// console.log( require.resolve("./data.js") );

	// console.log( module.id );
	// console.log( module.uri );

	// exports 是 module.exports 的一个引用
 	// console.log(module.exports === exports);

 	// 重新给 module.exports 赋值(继承)
	// module.exports = new SomeClass();

	// exports 不再等于 module.exports
 	//console.log(module.exports === exports);

 	/* dependencies 是一个数组,表示当前模块的依赖 */
 	// console.log(module.dependencies);

 	/* 异步加载模块,当加载多个模块可使用数组形式['./a','./b'] */
 	require.async('./async');

 	var data = require('./data');
 	var temp = require('./temp');

 	/* 终于能够加载 */
 	var halo = require('./hello');
 	console.log(halo);

 	exports.combine = function() {
 		return temp.replace("{{name}}", data.name);
 	};
});

data模块,尝试了在同一份文件定义多个define,结果后者会覆盖前者! 

如果之后项目优化需用到合并js文件解决http链接数问题,看看官方seajs-combo插件和官方解析module.id和module.uri的说明可能会更加清晰

define({name:"jack"});

/* 估计内部会判断参数类型,当是function类型就执行,
 * 然后将返回结果绑到exports对象上,与exports.name = "jack"效果一样;
 * 只是写法不一样
 */
/*
define(function(require) {
	return {
		name : "jack"
	};
});
*/

/* 同一份文件不能同时存在多个define */
/* 否则后者的定义会覆盖前者 */
// define({interest:"games"});

temp模块

define("halo, My name is {{name}}");

async模块

define(function(require, exports, module) {
	console.log("异步加载的模块!所以你最后才能看到我");
});

hello模块,这里主要是非标准模式下定义模块注意

1、id和deps的细节,开始在这里绕了一下,如果module.id与module.uri不一致会导致其他模块加载失败

2、deps数组定义了依赖的模块并接管require(path)路径加载模块方式,如果不在这里声明,模块内部是不能通过路径和别名成功加载其他依赖模块

更详细说明看 https://github.com/seajs/seajs/issues/930

/* id 和 dependencies 参数可以省略。省略时,可以通过构建工具自动生成。 */
/* 带 id 和 deps 参数的 define 用法不属于 CMD 规范,而属于 Modules/Transport 规范 */
/* https://github.com/seajs/seajs/issues/930 在这里能够更好理解ID作用 */
define('../static/hello', ['jquery'], function(require, exports, module) {

	/* 当使用这种id和deps的方式时,dependencies会接管所有模块依赖 */
	/* 所以下面这种按照以往加载其他模块将会失败,返回null */
	var o = require('./other');
	console.log(o);//null

	/* 在deps中声明加载,所以能够正确获取jq对象 */
	var j = require('jquery');
	console.log(j);

	exports.halo = function() {
		return "halo my friends";
	};
});

other模块

define({
	name : "other module",
	varsion : "1.0.1"
});

最终执行结果,在firefox的控制台下

© 著作权归作者所有

尐桀

尐桀

粉丝 49
博文 75
码字总数 14922
作品 0
广州
程序员
私信 提问
加载中

评论(1)

尐桀
尐桀
关于异步加载更多用法
https://github.com/seajs/seajs/issues/259
查看动态加载
JavaSript模块规范 - AMD规范与CMD规范介绍

JavaSript模块化 在了解AMD,CMD规范前,还是需要先来简单地了解下什么是模块化,模块化开发? 模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问题进行系统性...

大糊涂
2015/06/09
0
0
使用SeaJS实现模块化JavaScript开发

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

green001
2014/04/01
0
2
一步步学会使用SeaJS 2.0

一步步学会使用SeaJS 2.0 1、SeaJS是什么? -------------------------------------------------- 1、SeaJS是什么? https://github.com/seajs/seajs/issues/547),详细说明了前端模块化。 ...

leon_rock
2014/04/05
0
1
使用SeaJS实现模块化JavaScript开发

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

i33
2013/03/15
0
0
seajs初尝 加载jquery返回null解决学习日志

今天早上初尝seajs,发现一个非常蛋疼的事情,使用官方demo中的jquery是没有问题, 下载官方最新版jquery 2.1.1发现console.log($)返回null,百思不得其解!只能求助度娘! 在GitHub发现了玉...

尐桀
2014/10/31
0
1

没有更多内容

加载失败,请刷新页面

加载更多

思维导图XMind 8 Pro 绿化方法(附序列号)

按部就班: Step 1 -全新下载最新版本的 Xmind 8(注必须是英文官方的版本,中文代{过}{滤}理网站的版本修改过,无法使用pj); Step 2 -安装完毕后,点击文末的下载按钮下载pj补丁文件包,将...

一只小青蛙
18分钟前
0
0
数据结构(ER数据库)设计规范

表命名规范 表命名的规则分为3个层级,层级之间通过_分割,例如b_r_identity、d_l_identity。规约为: [leavel]_[type]_[name] [leavel] 表示数据库表的层级和功能,分为: s:业务无关的系统...

随风溜达的向日葵
42分钟前
1
0
阿里Sentinel控制台源码修改-对接Apollo规则持久化

https://github.com/alibaba/Sentinel/wiki/%E5%9C%A8%E7%94%9F%E4%BA%A7%E7%8E%AF%E5%A2%83%E4%B8%AD%E4%BD%BF%E7%94%A8-Sentinel 动态规则扩展 https://github.com/alibaba/Sentinel/wiki......

jxlgzwh
昨天
3
0
在Linux系统中创建SSH服务器别名

如果你经常通过 SSH 访问许多不同的远程系统,这个技巧将为你节省一些时间。你可以通过 SSH 为频繁访问的系统创建 SSH 别名,这样你就不必记住所有不同的用户名、主机名、SSH 端口号和 IP 地...

老孟的Linux私房菜
昨天
5
0
高德API入门教程

项目需求 1、实现打开地图就能定位到中心显示标注点 2、点击标注显示保利可爱岛的详细信息 3、实现导航功能 <!doctype html><html><head> <meta charset="utf-8"> <meta http-......

我叫小糖主
昨天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部