day27 SPA路由实现及SASS讲解
一.路由
1.前端路由
根据对应路由地址渲染不同的内容
2.前端的分类
页面路由（刷新）
-
根据对应的地址访问不同的页面（location.href location.assign location.repalce）
hash路由 （不会刷新）
-
根据对应的hash地址来渲染不同的内容（onhashchange）
-
location.hash 来获取对应的hash值 通过onhashchange进行监听
history路由 （不会刷新）
-
根据对应的history页面的地址来渲染不同的内容（onpopstate）
-
通过replaceState和pushState来改变state的值和页面的地址
-
通过history.back history.go history.forward来触发对应的onpopstate事件
3.后端路由
根据对应的路由地址访问对应的接口
4.SPA
单页应用程序 （single page application）,整一个应用只有一个页面，那么对应的页面调整就没有意义了，所以对应的SPA的路由实现就主要是hash模式和history模式。在后续的vue或者是对应的react中，他主要做的是SPA的应用那么对应的主要采用的模式hash和history，hash的监听能直接触发而history的监听不能直接触发，所以默认的模式就是hash模式。
5.Vue中的SPA路由
Document
去首页
去用户页
6.hash模式路由实现
根据对应hash值的变化来控制对应渲染内容的变化（onhashchange）
class VueRouter {
constructor(option) {
//获取传入的配置
this.routes = option['routes']
this.handlerLoad()
}
//处理hash改变的监听 需要渲染的元素
obServer(element) {
this.el = element
window.onhashchange = () => {
this.render()
}
}
//渲染的方法
render() {
let _this = this
//获取当前hash值 去除#
let hash = location.hash.slice(1)
//去this.routes比较
this.routes.forEach(route => {
if (hash == route.path) {
_this.el.querySelector('router-view').innerHTML = route.component.template
}
});
}
//a标签变化
handlerLink() {
let _this = this
//获取所有的router-link
let linkList = this.el.querySelectorAll('router-link')
Array.from(linkList).forEach(link => {
//找到对应的to属性
let path = link.getAttribute('to')
//创建a标签 将他的to地址赋值href属性
let a = document.createElement('a')
a.href = "#" + path
a.innerHTML = link.innerHTML
_this.el.replaceChild(a, link)
})
}
//在打开的时候前面自动+#/
handlerLoad(){
window.onload = ()=>{
location.hash = '/'
}
}
}
class Vue {
constructor(option) {
this.el = document.querySelector(option.el)
this.router = option.router
this.router.obServer(this.el)
//第一次渲染
this.router.render()
this.router.handlerLink()
}
}
7.history模式
核心点 onpopstate 路径变化（location.pathname）
class VueRouter {
constructor(option) {
//获取传入的路由配置
this.routes = option.routes
}
obServer(element) {
//需要挂载的el对象
this.el = element
//监听onpopstate事件
window.onpopstate = () => {
//读取path根据路径匹配渲染不同的内容
this.render(location.pathname)
}
}
render(path) {
let _this = this
//匹配
// 遍历路由配置
this.routes.forEach(route => {
//判断对应的path地址是否等于route的path地址
if (path == route.path) {
//渲染
let view = _this.el.querySelector('router-view')
view.innerHTML = route.component.template
}
});
}
handlerLoad() {
window.onload = () => {
//替换当前路径
history.replaceState('', '', './')
//第一次渲染
this.render('/')
}
}
hanlderLink() {
let _this = this
let list = []
//获取所有的router-link
let linkList = this.el.querySelectorAll('router-link')
Array.from(linkList).forEach(link => {
//找到对应的to属性
let path = link.getAttribute('to')
//创建a标签 将他的to地址赋值href属性
let a = document.createElement('a')
a.href = path
a.innerHTML = link.innerHTML
_this.el.replaceChild(a, link)
list.push(a)
})
//给a添加点击事件
//获取所有的a list
list.forEach(a => {
a.addEventListener('click', function (e) {
e = e || window.event
//禁止a默认行为
e.preventDefault();
history.pushState('', '', a.href)
//渲染
_this.render(location.pathname)
})
})
}
}
class Vue {
constructor(option) {
this.el = document.querySelector(option.el)
this.router = option.router
//监听传入当前的el元素
this.router.obServer(this.el)
this.router.handlerLoad()
this.router.hanlderLink()
}
}8.Sass
sass是一个预编译的css，核心还是css（css语法它都支持），他最终还是会编译成css，sass的好处在于它可以以js的方式书写css（有跟js原生一样的语法）。跟他同类的预编译的css还有less以及stylus等。sass它是使用ruby语言书写的，后续使用的python所以sass必须具备python环境。sass它和less是一类的产品，但是俩种的书写语言不一样。
官方文档
使用方式
使用node来进行sass的编译
npm i sass -D sass sass文件名 文件名（css文件名）
使用第三方插件来进行编译
vscode的第三方插件 easy sass 、 sass 、live sass
easy sass的扩展配置
9.sass的俩种扩展名
-
.sass 以缩进作为区分 （里面是没有;没有{}）
div
color:red
p
font-size:13px-
.scss 跟正常的css一样
div{
background-color: red;
}10.sass的相关应用
变量定义 ($变量名:值) *
$color:red;
div{
background-color:$color
}编译
div {
background-color: red;
}支持运算符（+ - * / %） *
$size:12px;
p{
font-size: $size%100;
width: $size*10-100;
height: $size+100;
}编译
p {
font-size: 12px;
width: 20px;
height: 112px;
}样式关系 *
span,img{
padding: 10px;
}
.box{
background-color: red;
img{
width: 100px;
h1{
height: 100px;
}
}
}
#content{
color: yellow;
&:hover{
color: green;
}
.box{
font-size: 12px;
&:hover{
font-size: 18px;
}
}
}编译
.box {
background-color: red;
}
.box img {
width: 100px;
}
.box img h1 {
height: 100px;
}
#content {
color: yellow;
}
#content:hover {
color: green;
}
#content .box {
font-size: 12px;
}
#content .box:hover {
font-size: 18px;
}插值表达式
#{变量名} 获取对应的变量值
if判断
$number:10;
.item{
@if $number>10 {
color: red;
}
@else{
color: green;
}
}编译
.item {
color: green;
}for循环 （while循环）
@for $i from 0 to 3 {
.item_#{$i}{
size: $i;
}
}编译
.item_0 {
size: 0;
}
.item_1 {
size: 1;
}
.item_2 {
size: 2;
}each （for each遍历）
$list:1,2,3,4;
@each $item in $list {
.item_list_#{$item}{
width: $item;
}
}函数
@function f($arg:20px){
@return $arg+10
}
div{
height: f(10px);
width: f();
}编译
div {
height: 20px;
width: 30px;
}混入器 *
@mixin a{
background:red;
}
@mixin border($size,$style,$color){
border: $size $style $color;
}
@mixin shadow($offsetleft:10px,$offsettop:20px,$width:30px,$color:green){
box-shadow: $offsetleft $offsettop $width $color;
}
div{
font-size: 18px;
@include a();
@include border(1px,solid,red);
@include shadow()
}编译
div {
font-size: 18px;
background: red;
border: 1px solid red;
box-shadow: 10px 20px 30px green;
}导入（模块化思想）*
@import './test.scss';
div{
@include shadow()
}注释
//我是注释 不会显示
/*我是注释 会显示*/