一、单页应用历史
什么是单页应用？
-
所谓单页应用，简称SPA，指的是在一个页面上集成多种功能，甚至整个系统就只有一个页面，所有的业务功能都是它的子模块，通过特定的方式挂接到主界面上。
-
传统单页应用是AJAX技术的进一步升华，把AJAX的无刷新机制发挥到极致，因此能造就与桌面程序媲美的流畅用户体验。
-
随着HTML5规范的定制及推广，浏览器新技术的支持趋于完善，websocket已经逐渐成为web单页应用更加适宜的技术，当然低版本浏览器也有对应的解决方案。
早期传统单页应用有哪些？
-
1.flash技术相关页面：
QQ空间，三国杀在线版本等
-
2.java程序
web版java办公套件等
-
3.javascript程序
简单的js计算器，小游戏等
传统网页和单页应用的区别
传统网页和单页应用的区别.png
1.传统网站很多超链接组成 2.服务器端出来逻辑
2.单页应用，客户端性能提高，用户追求体验
二、重要的JS语法
WEB单页应用的重要语法基础
- 变量作用域
- 变量作用域链
- 闭包
- 变量提升
- 自执行函数
- 模块模式
1. 变量作用域
-
变量的有效范围或者作用范围称为变量作用域。
-
JS中变量作用域分为两大类：局部变量和全局变量
-
局部变量:(全身麻醉)
- 在函数内部使用var声明的变量就是局部变量，尽在函数内部有效
-
全局变量:(局部麻醉)
-
在函数外部使用var声明的变量就是全局变量，在函数内外有效
变量作用域.png
<!doctype html>
<html>
<head>
<title>变量作用域</title>
<meta charset="utf-8" />
</head>
<body>
<script>
//全局环境
var globalVal = '全局变量';
function myFunc(){
//调用全局变量
console.log(globalVal);
var localVal = '局部变量';
//调用局部变量
console.log(localVal);
}
//调用全局变量
console.log(globalVal); // 在全局环境中声明变量，调用全局变量
//调用局部变量
myFunc();
console.log(localVal); //在函数外是不能调用函数内声明的变量的
//调用函数
myFunc();//函数也在全局环境中，所以在函数中调用全局变量也是可以使用的
</script>
</body>
</html>
2. 变量作用域链
- 变量在当前环境向当前环境内部的函数内部传递，这种方式就是作用域链
变量作用域链.png
<!doctype html>
<html>
<head>
<title>变量作用域链条</title>
<meta charset="utf-8" />
</head>
<body>
<script>
//全局环境，声明变量
var zhuxi = '习大大';
function liaoning(){
function tieling(){
function yinzhou(){
function longshan(){
//主席说话好使不！
console.log(zhuxi);
}
//调用龙山乡
longshan();
}
//调用银州区
yinzhou();
}
//调用铁岭市函数
tieling();
}
//调用辽宁省函数
liaoning();
</script>
</body>
</html>
3. 闭包
- 简单的说，闭包就是将一个局部变量的向外层环境传递的特殊实现方式。借以
突破局部变量的限制。 在JS程序中闭包非常常见。
闭包.png
<!doctype html>
<html>
<head>
<title>闭包</title>
<meta charset="utf-8" />
</head>
<body>
<script>
function bibao(){
var xifu = '志玲';
return function(){
//借助函数返回局部变量
return xifu;
}
}
var result = bibao();
var wife=result();//调用函数
console.log(wife);
</script>
</body>
</html>
4. 变量提升
- 主要是指在后面声明的代码中的声明部分，可以在执行时提升到最开始的位置。
变量提升.png
<!doctype html>
<html>
<head>
<title>变量提升</title>
<meta charset="utf-8" />
</head>
<body>
<script>
var angel = '丘比特';
function myfunc(){
alert(angel);//结果为undefined
var angel = '林妹妹';//此处使用var声明，会提升变量到使用之前所以结果undefined
}
myfunc();
</script>
</body>
</html>
5. 自执行函数
- 自动执行而不需要正常调用的函数就是自执行函数，自执行函数是JS中匿名函数的特殊使用方式。
自执行函数.png
注意：自执行函数并不是没有调用，而是在声明之后调用(蓝色字部分)
<!doctype html>
<html>
<head>
<title>自执行函数</title>
<meta charset="utf-8" />
</head>
<body>
<script>
(function (){
alert('各位兄弟，大学生活好吗！');
})()
</script>
</body>
</html>
6. 模块模式
- 自执行函数的应用，主要用于较多模块划分的程序开发当中。
模块模式 .png
注:两种函数结果一样，但是模块函数内存中不会保存函数，仅保存结果变量
<!doctype html>
<html>
<head>
<title>模块函数方式</title>
<meta charset="utf-8" />
</head>
<body>
<script>
var module=(function(){
//局部变量
var add=function(){};
var del=function(){};
var modi=function(){};
var find=function(){};
//返回模块的公开方法和属性
return {
add:add,
del:del,
modi:modi,
find:find,
};
})()
console.log(module);//console.log(module.add);模块化开发
</script>
</body>
</html>
三、单页应用架构
1. web单页应用整体架构
web单页应用整体架构.png
1. 文件结构
| 文件/文件夹 | 功能 |
|---|---|
| app.html | 主页面 |
| js | 所有JS文件夹 |
| css | 所有css文件夹 |
2. JS文件结构
JS文件结构
3. CSS文件结构
CSS文件结构.png
4. shell在架构中的作用
shell是单页应用的主控制器，是框架中必须的。
- 主要负责的内容：
1.部署单页应用整体形状和结构(不包含具体功能的样式，类似框架)
2.初始化所有功能模块。
3.管理应用的cookie或者URI处理
3.该模块被根文件调用
5. 功能模块在架构中的作用
功能模块是单页应用中每个独立功能的集合。（不包含业务逻辑）
- 功能模块主要负责：
1.部署当前功能模块的html渲染和生成(css已经预选加载，不再此处处理)
2.为当前模块的元素添加事件，绑定事件处理方式
3.该模块被shell模块调用
6. Model模块在架构中的作用
- Model是为当前单页应用所有数据提供模型和操作的代码集合。
- 主要负责的内容：
1.构建和设计所有功能模块使用的业务逻辑对象
例如:用户对象:添加用户，删除用户，修改用户等
2.调用Data实现Model中的业务逻辑操作
3.该模块功能被shell中的指定功能模块调用
7.Data模块在架构中的作用
Data是提供前端和后端进行数据通讯的必备模块
- 主要负责的内容：
1.获取和设置通讯使用的功能对象和方法
2.该模块功能被Model调用
网友评论