seajs的使用1.0

1、引入seajs

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

2、程序入口是一个use方法,2个参数,一个是主js引用,一个是回调方法

seajs.use("./main.js", function(test) {

test.bind(agrs);

});

3、模块定义方法:一个全局define()方法调用,方法的参数是一个匿名函数,所有逻辑写在函数体里

define(function(require, exports) {

//模块逻辑

});

一个js就是一个模块,一个模块里全文就是调用一个define方法,js文件名就是模块名。

匿名函数有2个参数require, exports,应该还不止2个,反正起码要两个,

require用来引入外部依赖,exports向外部提供模块内的方法

4、模块的引用

使用require方法:var query = require("./queryRandom"),参数为模块的路径,queryRandom为模块名

5、外部如何调用模块内部的方法

在模块内部,给exports加静态方法:

exports.xxx = function(url, succCall) {

//......

}

假如xxx方法是queryRandom模块内部定义的方法,外部调用queryRandom的xxx方法就是:

var query = require("./queryRandom");

query.xxx(url,fun);

6、实例

实现功能:将指定元素背景变成指定颜色

将根据id获取元素的逻辑做成一个模块叫:getEle

设置颜色的逻辑模块是:main,main要依赖getEle

目录结构:

html:

<style type="text/css">
.box{width:200px;height:200px;background:#999;}
</style>

<div class="box" id="J_box"></div>
<script type="text/javascript" src="./sea/sea.js"></script>
<script type="text/javascript">
seajs.use("./main.js", function(xxx) {
	xxx.set("J_box","green");
});

</script>

main.js:

define(function(require, exports) {
	var get = require("./getEle");

	exports.set=function(str,color){
		var obj = get.$(str);
		obj.style.backgroundColor=color;
	}
});

getEle.js:

define(function(require, exports) {
	exports.$=function(str){
		return document.getElementById(str);
	}
});

代码完成后,打开index.html会看到一个红色的方块,那是因为程序的入口处设置了红色(原来是灰色#999):

seajs.use("./main.js", function(xxx) {
	xxx.set("J_box","green");
});

xxx是个句柄,它代表main模块,用来调用main模块对外提供的方法

PS:本文使用seaj的方式比较山寨,要规范正确使用seajs还是要看官网,以后再慢慢看吧

参考:http://www.zhangxinxu.com/wordpress/2012/07/seajs-node-nodejs-spm-npm/

吐槽:看了不少人写的文章,介绍各种技术层面的文章,生怕自己说的东西太low,简单的不说,太细节的不说,高大上的概念,没有营养的吐槽一堆,再或者一堆你不懂的概念,你还没学会1+1=2,他就跟你说1*1=1,1*1=1几句讲完,又来说1/1也是等于1的,开头和末尾还不忘加上“就是这么简单”,╮(╯▽╰)╭

时间: 2024-08-28 13:28:10

seajs的使用1.0的相关文章

日期三联控件

运用Seajs模块写的一个三联日期选择控件,可以通过配置显示页面元素信息 define(function (require, exports, module) { 'use strict'; var $ = require('zepto'); require('./dateSelect.css'); var config = { "dateSelect":".dateSelect", "year_box": 'J_select_year', //

鬃嘴释怀说太多就成真不了。

子阻撞砖奏尊仔籽着 释怀说太多就成真不了. http://passport.baidu.com/?business&un=vip&un=%E5%A4%A9%E6%B0%B4%E4%B8%8A%E9%97%A8%E8%BF%99%E5%B0%8F%E5%A7%90#0 http://passport.baidu.com/?business&un=vip&un=%E7%99%BD%E9%93%B6%E4%B8%8A%E9%97%A8%E8%BF%99%E5%B0%8F%E5%A

澜星粘鼐贩逊耐盼系甭妊倏纪傲傲sdfghjk

http://passport.baidu.com/?business&un=R&un=%E5%A4%A7%E5%AE%81%E6%A1%91%E6%8B%BF%E9%80%9A%E5%B0%8F%E5%A7%90#0 http://passport.baidu.com/?business&un=R&un=%E4%B9%A1%E5%AE%81%E6%A1%91%E6%8B%BF%E9%80%9A%E5%B0%8F%E5%A7%90#0 http://passport.bai

在Ubuntu14.04上OpenStack Juno安装部署

在Ubuntu14.04上OpenStack Juno安装部署 0 安装方式 0.1 安装方式 安装方式 说明 目标 备注 单结点 一台服务器运行所有的nova-xxx组件,同时也驱动虚拟实例. 这种配置只为尝试Nova,或者为了开发目的进行安装.   1控制节点+N个计算节点 一个控制结点运行除nova-compute外的所有nova-services,然后其他compute结点运行nova-compute.所有的计算节点需要和控制节点进行镜像交互,网络交互,控制节点是整个架构的瓶颈. 这种配

2008 SCI 影响因子(Impact Factor)

Excel download 期刊名缩写 影响因子 ISSN号 CA-CANCER J CLIN 74.575 0007-9235 NEW ENGL J MED 50.017 0028-4793 ANNU REV IMMUNOL 41.059 0732-0582 NAT REV MOL CELL BIO 35.423 1471-0072 PHYSIOL REV 35.000 0031-9333 REV MOD PHYS 33.985 0034-6861 JAMA-J AM MED ASSOC 3

seajs 2.3.0 添加jquery

[前言] 上篇文章简单的介绍了seajs的使用,下午使用seajs整合jquery就碰到问题了. 下载seajs上的examples,里面直接require('jquery')没有任何问题, 我照着写了一遍,但是报$未定义,坑爹.. 找到这篇博文解决了问题: http://blog.csdn.net/adeyi/article/details/18003043 雪中送炭啊,太感谢了. [原因] seajs中的js都是模块,直接加载jquery,这个jquery是没有模块化的, 对,example

seajs 3.0.0 源码阅读笔记

写笔记的时候才注意到我看的源代码是 3.0.0 的,但是官方发布的最新版本是 2.3.0.相信大部分是相同的,所以先把这个记完,再看一次 2.3.0 的代码. seajs 的源代码可以在 github上获取.seajs 在文档"如何参与开发"中说明了阅读顺序,当然为了便于阅读,在了解了目录结构之后,我直接阅读了合并好的 sea-debug.js. 整个seajs采用的是2空格缩进,避免分号的写法,我不是很习惯,但不影响阅读. 文件/目录结构 文档中各个源文件所包含的内容大致如下: in

seajs 2.3.0 傻瓜式入门

[seajs] 很久之前就想使用seajs,尝试了多次,可能是自己比较笨或者seaj的文档和例子太简单,总是无从下手, 这次自己搞了一个网站,引用多个js的时候需要减少http请求, 找了半天又找到seajs+spm,好吧,再来一次. [博文] 这个博文讲的很透彻,好像是seajs开发者写的,供参考,如果这个博文能看懂那就不必再往下看了, 地址:https://speakerdeck.com/lifesinger/seajs [傻瓜式入门] 如果还是看不懂,那就一步一步往下看吧. 说明: 我的例

简单的使用Seajs

什么是Seajs Seajs是一个加载器 http://yslove.net/seajs/ 遵循 CMD 规范模块化开发,依赖的自动加载.配置的简洁清晰. 兼容性 Chrome 3+ Firefox 2+ Safari 3.2+ Opera 10+ IE 5.5+ 基本应用 导入Seajs库 去官网下载最新的seajs文件, http://seajs.org/docs/#downloads 在页尾引入seajs: <script src="/site/script/sea.js"