seajs hello world
http://localhost/seajs/index.html
<!doctype html>
<head>
<title>Hello Seajs</title>
<script src="sea.js"></script>
<script>
seajs.config({
// 调试模式
debug: true,
// Sea.js 的基础路径
base: 'http://localhost/seajs/app',
// 别名配置
alias: {
"jquery": "jquery/jquery"
},
// 文件编码
charset: 'utf-8'
});
</script>
<script>
//执行模块
seajs.use("app.js");
</script> </head>
<body>
<div id="hello-seajs" >Hello SeaJS</div>
</body>
</html>
http://localhost/seajs/app/jquery/jquery.js
http://localhost/seajs/app/app.js
define(function(require,exports,module){
var $ = require("jquery");
// 引入util模块的接口
var util = require('./util');
//var helloSeaJS = document.getElementById('hello-seajs');
// 调用接口的方法
//helloSeaJS.style.color = util.randomColor();
var helloSeaJS = $("#hello-seajs");
helloSeaJS.css("color",util.randomColor());
});
http://localhost/seajs/app/util.js
define(function(require,exports,module){
var util = {};
var colorRange = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F'];
util.randomColor = function(){
return '#' +
colorRange[Math.floor(Math.random() * 16)] +
colorRange[Math.floor(Math.random() * 16)] +
colorRange[Math.floor(Math.random() * 16)] +
colorRange[Math.floor(Math.random() * 16)] +
colorRange[Math.floor(Math.random() * 16)] +
colorRange[Math.floor(Math.random() * 16)];
};
module.exports = util;
});
base添加规则
完整的绝对路径 不会加base
以 "." 开头 会相对于当前(被调用的)模块解析地址。 如果不存在被调用的模块(如seajs.use() ), 则会相对于当前页面解析地址。
以 "/" 开头 相对于当前页面的根目录 解析地址
普通命名 直接加上base前缀
base值
base 默认值是 seajs所在目录
seajs.config()中base的解析与ID命名解析规则相同
例如:
http://example.com/test/js/sea/sea.js
http://example.com/test/index.html
在index.html中调用了sea.js
base的默认值为 "http://example.com/test/js/sea/"
如果使用seajs.config()设置了base
seajs.config({
base: "home" // base值为 "http://example.com/test/js/sea/home"
});
seajs.confg({
base: "./home" // base值为 "http://example.com/test/home"
});
seajs.conifg({
base: "/home" // base值为 "http://example.com/home"
});
seajs hello world的更多相关文章
- seaJs学习笔记2 – seaJs组建库的使用
原文地址:seaJs学习笔记2 – seaJs组建库的使用 我觉得学习新东西并不是会使用它就够了的,会使用仅仅代表你看懂了,理解了,二不代表你深入了,彻悟了它的精髓. 所以不断的学习将是源源不断. 最 ...
- 初学seaJs模块化开发,利用grunt打包,减少http请求
原文地址:初学seaJs模块化开发,利用grunt打包,减少http请求 未压缩合并的演示地址:demo2 学习seaJs的模块化开发,适合对seajs基础有所了解的同学看,目录结构 js — —di ...
- JS模块化开发:使用SeaJs高效构建页面
一.扯淡部分 很久很久以前,也就是刚开始接触前端的那会儿,脑袋里压根没有什么架构.重构.性能这些概念,天真地以为前端===好看的页面,甚至把js都划分到除了用来写一些美美的特效别无它用的阴暗角落里,就 ...
- seajs的使用
写在前面 seajs是什么? Seajs是一个js文件加载器. 遵循 CMD 规范模块化开发,依赖的自动加载.配置的简洁清晰. 用于Web开发的模块加载工具,提供简单.极致的模块化体验 一:使用 文件 ...
- 用spm2构建seajs项目的过程
前言 Javascript模块化规范有CommonJs规范,和主要适用于浏览器环境的AMD规范,以及国内的CMD规范,它是SeaJs遵循的模块化规范.因为以前项目中用SeaJs做过前端的模块管理工具, ...
- jquery插件封装成seajs模块
jquery直接在html中引入. jquery插件修改为: define(function (require, exports, moudles) { return function (jquery ...
- 快速上手seajs——简单易用Seajs
快速上手seajs——简单易用Seajs 原文 http://www.cnblogs.com/xjchenhao/p/4021775.html 主题 SeaJS 简易手册 http://yslo ...
- seajs学习一天后的总结归纳
公司项目最近需要将js文件迁移到seajs来进行模块化管理,由于我以前主要接触模块化开发是接触的AMD规范的requireJS,没有接触过CMD规范,而且在实际项目中还没有用过类似技术.于是,我非常兴 ...
- RequireJS与SeaJS模块化加载示例
web应用越变的庞大,模块化越显得重要,尤其Nodejs的流行,Javascript不限用于浏览器,还用于后台或其他场景时,没有Class,没有 Package的Javascript语言变得难以管理, ...
- 新手 gulp+ seajs 小demo
首先,不说废话,它的介绍和作者就不在多说了,网上一百度一大堆: 我在这里只是来写写我这2天抽空对seajs的了解并爬过的坑,和实现的一个小demo(纯属为了实现,高手请绕道); 一.环境工具及安装 1 ...
随机推荐
- AutoHotKey实现将站点添加到IE的Intranet本地站点
最近在内部推行CRM系统,其中的CPQ组件要求必须将站点加入到"本地Intranet”才可以正常使用,但是由于使用用户比较多(超过几千人),并且每个用户的计算机水平都不一样,所以让用户手工去 ...
- 软件工程(FZU2015)赛季得分榜,第11回合(beta冲刺+SE总结)
目录 第一回合 第二回合 第三回合 第四回合 第五回合 第6回合 第7回合 第8回合 第9回合 第10回合 第11回合 增补作业 积分规则 积分制: 作业为10分制,练习为3分制:alpha30分:b ...
- Pyhont-Urllib2
Urllib2 相当于的Urllib 的升级版 但又不能代替 Urllib 这个我得新手很费解呢...这个问题留着把,,等以后成大牛的时候在回来想想这儿问题!! Urllib2 常用 // 1 设置 ...
- Redis JedisPool
获取连接池,通常连接池为单例,这里使用 双端检测机制保证只有一个实例 public class JedisPoolUtil { private static volatile JedisPool je ...
- fedora22命令useradd,groupadd等命令不能自动补全
sudo ls -l /sbin/useradd 发现登陆账户没有读权限 修改为其他账户为读权限即可
- Zabbix监控mysql主从复制状态
原理 mysql slave show slave status\G 在输出信息中查看I/O线程和SQL线程的状态值(YES为正常,NO为错误) Slave_IO_Running: Yes Slave ...
- Makefile 规则的使用
1.Makefile格式 //最终目标 all: led.o //依赖 arm-linux-ld -Tled.lds -o led.elf led.o //命令 arm-linux-objcopy - ...
- CSS复习
CSS 选择器 p.into 表示带有into类的p元素 伪类: a) first-line b) last-line 伪元素: :before 能在指定的元素前添加内容(创造 ...
- 【ESRI论坛6周年征文】ArcEngine注记(Anno/ Label/Element等)处理专题 -入门篇
原发表于ESRI中国社区,转过来.我的社区帐号:jhlong http://bbs.esrichina-bj.cn/ESRI/viewthread.php?tid=122097 ----------- ...
- fedora 24 使用扇贝网页版没有声音
(扇贝的官方答疑:https://www.shanbay.com/help/faq/no_voice/) 第4步下载MP3测试文件没办法使用: 似乎因为MP3格式的文件是的版权问题. 打算安装能处理M ...