在用sea.js进行模块化开发前,应该知道一些知识点
时间:2022-05-06
本文章向大家介绍在用sea.js进行模块化开发前,应该知道一些知识点,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
先看问题:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>变量作用域问题</title>
<script>
//程序员a写的代码
var a=123;
alert( a);
</script>
</head>
<body>
<script>
//程序员b写的代码
var a=89;
alert( a);
</script>
<script>
//程序员c写的代码
alert( a);
</script>
注意: 在这里, 三个程序员使用的都是同一个全局变量a, 造成了混乱。
</body>
</html>
解决方案: 每个程序员定义一个匿名函数,在自己的匿名函数中定义局部变量来使用:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>使用匿名函数解决变量作用域问题</title>
<script>
( function(){
//程序员a写的代码
var a=123;
alert( a);
})();
</script>
</head>
<body>
<script>
( function(){
//程序员b写的代码
var a=89;
alert( a);
})();
</script>
<script>
( function(){
//程序员c写的代码
alert( a);
})();
</script>
这里每个程序员定义了自己的匿名函数,在不同的函数中定义变量,这个变量就是一个局部变量。 <br />
用匿名函数将脚本包起来,可以有效控制全局变量,避免冲突。
</body>
</html>
但如果程序仍然要求在不同的程序员编写的代码之间共享一些数据怎么办,
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>使用全局变量解决在多个匿名函数共享数据的问题</title>
<script>
//全局变量
var a=555;
</script>
<script>
( function(){
//程序员a写的代码
var a=123;
alert( a);
})();
</script>
</head>
<body>
<script>
( function(){
//程序员b写的代码
var a=89;
alert( a);
})();
</script>
<script>
( function(){
//程序员c写的代码访问的就是全局变量
alert( a);
})();
</script>
<hr />
在这里加入一个全局变量a的定义,这样,程序员c就可以访问全局变量。 而a和b访问的仍是自己定义的局部变量a,因为同名时,局部变量优先于全局变量。 <br />
但这里,问题又来了,为了在匿名函数间通信而大量添加全局变量也是不可取的,怎么办,我们这里可以借用面向对象的封装原则,声明一个hash变量用为全局变量,这个hash变量类似于一个集合,可以在这个集合中添加多个要用的变量。
</body>
</html>
如果要共享的数据很多,就会造成定义了大量的全局变量的局面,最后会导致不可控。
解决方案: 将多个全局变量包装在一起,使用一个hash全局变量,类似于一个集合一样的用。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>使用hash变量作为全局变量</title>
<script>
//hash全局变量
var GLOBAL={};
</script>
<script>
( function(){
//程序员a写的代码
var a=123;
alert( a);
})();
</script>
</head>
<body>
<script>
( function(){
//程序员b写的代码:操作全局GLOBAL变量
GLOBAL.a=89;
alert( "程序员b:"+GLOBAL.a);
})();
</script>
<script>
( function(){
//程序员c写的代码访问的就是全局变量
alert( "程序员c:"+ GLOBAL.a);
})();
</script>
在这里使用了GLOBAL作为全局变量名, 在匿名函数间要传递值的话,将这些变量作为全局变量的属性即可。 <br />
但GLOBAL是全局变量,它在各个函数间都可以访问到,这很容易让GLOBAL的属性不小心被覆盖掉。 <br />
解决方案:<br />
命名空间
</body>
</html>
但GLOBAL是一个全局变量,各个函数都可以操作,很容易发生误操作。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>全局变量中添加命名空间的定义</title>
<script>
//hash全局变量
var GLOBAL={};
</script>
<script>
( function(){
//程序员a写的代码
GLOBAL.A={}; //程序员a定义了自己的命名空间
GLOBAL.A.a=123;
alert( GLOBAL.A.a);
})();
</script>
</head>
<body>
<script>
( function(){
//程序员b写的代码:操作全局GLOBAL变量
GLOBAL.a=89;
alert( "程序员b:"+GLOBAL.a);
GLOBAL.B={}; //定义了自己的命名空间,现在只要保证命名空间不冲突即可。
GLOBAL.B.b=222;
alert("程序员b操作自己的命名空间下的变量:"+ GLOBAL.B.b );
GLOBAL.A.a=333;
alert( "程序员b操作A命名空间下的变量:"+GLOBAL.A.a);
})();
</script>
<script>
( function(){
//程序员c写的代码
GLOBAL.A.b=444;
alert( "程序员c操作A命名空间下的变量:"+ GLOBAL.A.a);
alert( "程序员c操作A命名空间下的变量:"+ GLOBAL.A.b);
})();
</script>
另外,命名空间的也可以嵌套定义。 <br />
最后,再将定义命名空间的功能封装成一个函数。
</body>
</html>
最后将定义命名空间的功能封装成一个函数。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>全局变量GLOBAL中添加定义命名空间的函数</title>
<script>
//hash全局变量
var GLOBAL={};
// str :表示要生成的命名空间,例如: GLOBAL.A.name 或是 A.name
GLOBAL.namespace=function(str){
var arr=str.split(".");
var o=GLOBAL;
var i= (arr[0]=="GLOBAL"?1:0 ); //如果str中的第一部分为GLOBAL的话,命名空间从第二个开始计算
for( ;i<arr.length;i++){
o[arr[i]]=o[arr[i]]||{};
o=o[arr[i]];
}
}
</script>
<script>
( function(){
//程序员a写的代码
GLOBAL.namespace("A.person"); //程序员a定义了自己的命名空间A,并在A下面定义了子命名空间person
GLOBAL.A.person.name="zy";
GLOBAL.A.person.age=22;
alert( GLOBAL.A.person.name +"t"+ GLOBAL.A.person.age);
})();
</script>
</head>
<body>
<script>
( function(){
//程序员b写的代码:定义自己的命名空间
GLOBAL.namespace("B.student"); //程序员a定义了自己的命名空间B,并在B下面定义了子命名空间student
GLOBAL.B.student.name="lisi";
GLOBAL.B.student.age=33;
alert( GLOBAL.B.student.name +"t"+ GLOBAL.B.student.age);
})();
</script>
<script>
( function(){
//程序员c写的代码
alert( "程序员c操作A命名空间下的变量:"+ GLOBAL.A.person.name +"t"+ GLOBAL.A.person.age);
alert( "程序员c操作B命名空间下的变量:"+ GLOBAL.B.student.name +"t"+ GLOBAL.B.student.age);
})();
</script>
以上体现的就是合理使用命名空间解决变量冲突的问题。
</body>
</html>
- 使用QT创建系统托盘
- WinEdit编辑器中中文乱码
- 微信小游戏上线,2018年的H5游戏可以“跳一跳”
- QT程序在发布的时候应注意的地方
- 漂洋过海! 英文域名d.me小六位易主
- Python基础09 面向对象的进一步拓展
- QT中获取选中的radioButton的两种方法
- QT中根据ID设置radio按钮
- QWebView在 Qt 5.x中编译出错:File not found: main.obj
- Qt实现小功能之列表无限加载
- Python基础08 面向对象的基本概念
- 如何选择合适的PaaS
- 使用Qt installer framework制作安装包
- Qt Style Sheet实践(三):QCheckBox和QRadioButton
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Linux入门--基础命令
- Linux入门--权限管理、任务调度、磁盘管理
- 【Rust日报】2020-08-05 -- 如何在2020年进一步加快 Rust 编译器的速度
- Linux学习--网络、进程、服务、软件管理
- IOS label 设置行高
- 重学数据结构(序:概览)
- 【Rust日报】2020-08-06 使用 Rust 编写的 Lambdas 在 AWS IoT 和 SQS 队列之间传递消息
- react-router-config的使用
- Spring 源码解读第七弹!bean 标签的解析
- Kubeflow实战: 入门介绍与部署实践
- matplotlib基础绘图命令之violinplot
- 性能分析(3)- 短时进程导致用户 CPU 使用率过高案例
- stat 命令家族(1)- 详解 vmstat
- 性能测试必备知识(9)- 深入理解“软中断”
- Vue老项目支持Webpack打包