博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
seajs的使用1.0
阅读量:7187 次
发布时间:2019-06-29

本文共 1655 字,大约阅读时间需要 5 分钟。

hot3.png

1、引入seajs

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

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

seajs.use("./xx.js", function(xxx) {

xxx.x(agrs);

});

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

define(function(require, exports) {

//模块逻辑

});

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

匿名函数有2个参数require, exports

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

但是这个参数不是固定的,假如只依赖不对外提供方法,那么只用require参数

如果当前模块即无依赖也不对外提供方法那么一个参数都可以不要

4、模块的引用

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

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

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

exports.xxx = function(url, succCall) {

        //......

}

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

var mod = require("./xxoo");

mod.xxx(url,fun);

6、实例

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

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

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

目录结构:

220421_jzax_1267040.png

html:

.box{width:200px;height:200px;background:#999;}
seajs.use("./main.js", function(xxx) { xxx.set("J_box","green");});

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模块对外提供的set方法

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

参考:

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

转载于:https://my.oschina.net/710409599/blog/529114

你可能感兴趣的文章
Excel写入
查看>>
我的友情链接
查看>>
802.11b网络标准
查看>>
串口编程时,出现Cannot open /dev/ttyS0 Permission denied解决
查看>>
阿里开发者们的第20个感悟:好的工程师为人写代码,而不仅是为编译器
查看>>
linux 磁盘管理
查看>>
VMWARE服务器虚拟化功能介绍
查看>>
深入搜索引擎原理
查看>>
jemalloc 内存分配管理
查看>>
mysqld源码及目录结构
查看>>
Golang walk在win及linux建立 GUI 應用程式
查看>>
Linux执行命令常见的英语语句
查看>>
elasticsearch简单JavaAPI总结
查看>>
线索化二叉树
查看>>
vimrc
查看>>
【Spark亚太研究院系列丛书】Spark实战高手之路-第一章 构建Spark集群(第四步)(1)...
查看>>
Perl语言之统计特定字符串个数
查看>>
Linux用户和组管理
查看>>
Eclipse中从svn上检出项目无法识别jar包
查看>>
shell实现FTP自动批量上传下载文件
查看>>