Node.js
服务器
动态网站 : 页面以asp、jsp、php、asp等结束。
静态网站 : 以html(标准通用标记语言的子集)结尾。
本章内容
Node.js概述
node.js是一个事件驱动I/O服务端。
node.js是一个基于Google chrome浏览器的Javascript引擎(V8 Engine)的服务器端平台。
node.js版本常识
偶数位为稳定版本 奇数为非稳定版本
-0.6x -0.7x
-0.8x -0.9x
-0.10x -0.11x
Url网址解析
语法:
代码如下
url.parse(urlStr,[parseQueryString],[slashesDenoteHost]);
接受参数:
urlStr url字符串
parseQueryString 为true时将用查询模块分析查询字符串,默认为false
slashesDenteHost
默认为false,//foo/bar 形式的字符串将被解释成{pathname:'//foo/bar/'}
如果设置成true,//foo/bar 形式的字符串将被解析成{host‘foo’,pathname:'/bar}
QueryString 参数处理
此类共包括四个方法:
querystring.stringify(obj,[sep],[eq])
querystring.parse(str,[sep],[eq],[option]);
querystring.escape
querystring.unescape
Sass和Scss的区别
sass和css的对比sass增加了编程的特性 css只是纯描述语言
《sass》
1、sass是这个世界上最成熟、稳定和强大的专业级css扩展语言。
2、css预处理器:定义了一种“中间语言”,将css作为目标生成文件,为css增加了“编程”的特性,
开发者使用这种语言进行编码,然后再编译成正常css文件供项目使用。
特点:1、适应性强 2、易于阅读 3、 易于维护
3、sass 和 scss区别:
1、文件后缀(扩展名)不同:
sass以“.sass”为扩展名, scss以“.scss”为扩展名
2、书写方式(语法)不同:
sass以严格的缩进式语法规则来书写,不带大括号和分号
scss的书写方式和css语法非常相似。
特点:1、兼容css语法 2、功能丰富 3、成熟 4、久经考验 5、社区 6、 前端框架基石
4、sass四种编译格式:
1、nested 嵌套格式 2、expanded 展开格式 3、compact 紧凑格式 4、compressed压缩格式
《sass基础》
1、sass使用美元符号“$”来声明变量。
例:$a:100px;
数据类型: 数字 字符串 颜色 布尔 null
2、普通变量和默认变量
1、普通变量: $a:100px;
2、默认变量: $a:50px !default;
[注]:最后加"!default"就成为了默认变量
!default 作用用于降低变量优先级(备胎),不至于排序问题覆盖掉上一条相同的变量
3、全局变量:定义在元素外的变量
例:$a:100px; 这样定义在元素外全局都可以使用这样为全局变量
4、局部变量:写在嵌套中的变量为局部变量
例:div{
$a:50px;
p{
height: $a;
}
}
这样嵌套在div中的变量称为局部变量,这个变量只可以是div下的后代元素何以调用。
div外面是没办法调用到div包含的变量
【注】:局部变量就是全局变量的影子,只会在局部覆盖全局变量
5、@import "one" 引入别的scss文件这样就可以使用别的scss文件的样式和全局变量
例:import "one";
6、嵌套 分为三种 1、选择器嵌套 2、属性嵌套 3、伪类嵌套
1、选择器嵌套
例:div{ 编译后 div p{color:red}
p{ color:red;}
}
这样代表了div后代元素是p标签的元素
2、属性嵌套
例:div{ 编译后:div{
border:{
border-top:1px solid red;
top:1px solid red; border-bottom:1px solid yellow;
bottom: 1px solid yellow; }
}
}
3、伪类嵌套
例:div{ 编译后 div:hover{
&:hover{ background: red;
background:red; }
}
}
[注]:伪类必须添加“&”这样可以清除掉空格 否则有空格伪类会出错,就无法执行。
7、混合宏
1、混合宏的声明和调用
@mixin 声明混合宏
例:@mixin hunhe{border:1px solid #000;}
@include 调用混合宏
例:div{ @include hunhe; }
2、传参混合宏
声明传参混合宏
@mixin hunhe($width,$height){width:$width; height:$height;}
调用传参混合宏
div{@include hunhe(100px,100px)}
8、继承 通过 “@extend” 来继承已存在的样式块,和占位符
例:.div{width:100px; height:100px;}
p{ @extend div; } 这样就继承到了div中所有的样式
9、占位符 通过“%name(自定义名称)” 声明占位符
例:声明占位符 %zhan{color:red;}
调用占位符 p{ @extend %zhan;}
10、插值 #{}
例:$a:"font-size"; 编译后 p{font-size:100px;}
插值 p{ #{$a}:100px;}
11、scss 加减乘除运算
1、加法
例:p{width:20px + 20px;}
2、减法
例:p{width: 100px - 20px;} [注]:减法运算减号两边要有空格
3、乘法
例:p{width: 100px * 2;} [注]:乘法中只可以有一个带有单位 否则会报错
4、除法
例:p{width: 100px / 2;} [注]:除法中只可以有一个带有单位 否则会报错
12、sass 的if判断
例:@mixin iff($yicang){
@if $yicang==true{
display:none;
}@else{
display:block;
}
}
div{@include iff(true);} 编译后 div{display:none;}
【注】:当调用混合宏的时候 传入参是 true 的时候会调用if后边的语句
传入参是 false 的时候会调用else后边的语句
也可以 @if $yincang=="什么"
13、scss 的for循环
例:@for $i from 1 to 4{ 【注】:to 表示不包含4只到3 through 表示包含这个数也就是倒4
div-#{$i}{width: 10px*$i;}
}