Day29笔记
一、异步与同步
JavaScript是单线程语言，就好比只有一条流水线。
同步
所有代码按顺序执行，后面的代码需要等待前面的代码执行完毕。
异步
异步是一种代码的执行方式，无需等待前面的代码执行完毕，异步程序在触发（代码执行顺序触发、事件触发、计时器触发等）后单独执行，程序执行的结果会反应给回调函数，通过回调函数就可以知道异步程序是否成功执行。
二、NPM包管理器
- NPM：Node Package(包) Manager(管理器)。
- Node.js（一个脱离浏览器可以单独运行的JavaScript的应用程序）内置的包管理器，下载Node.js自动安装NPM。
- 像软件商店一样，你可以从NPM中下载各种代码框架和工具。
三、使用NPM包管理器
初始化
// 初始化项目，npm会帮助我记录当前项目所使用的包
$ npm init
清除缓存
// 有时候会因为各种原因导致包下载到一半失败
// 下载一半的包有可能会被缓存下来
// 再次下载时就会是失败的状态
// 这时候就需要清除缓存再重新下载
$ npm cache clear -f
下载指令
// 用npm下载 jquery 库
$ npm install jquery
// 缩写
$ npm i jquery
// 全局安装 mysql 服务器
$ npm install mysql --global
// 缩写
$ npm i mysql -g
删除指令
// 删除 jquery 库的两种方法
$ npm uninstall jquery
$ npm remove jquery
NRM
-
npm下载地址都在国外，我们每次使用npm下载时，都是去国外服务器上下载。
-
这样就会有很多不稳定的因素，而且相对时间比较长。
-
nrm就是用来切换npm下载地址的工具。
-
// 全局安装nrm $ npm install --global nrm // 查看 nrm 地址网速 $ nrm test // 切换 npm 下载地址 $ nrm use taobao(地址名)
四、通过程序连接mysql
-
初始化项目
$ npm init -y -
下载 mysql 第三方模块（包）
$ npm install mysql -
建立数据库连接
// 引入 mysql 第三方模块（包） const mysql = require('mysql') // 创建数据库连接对象 let connection = mysql.createConnection({ host:'主机名', user:'用户名', password:'密码' database:'数据库名' }) // 与数据库建立连接 connection.connect() // 执行SQL语句 connection.query('sql语句',function(err,data){ if(err){ console.log('数据库操作失败',err) erturn } console.log(data) }) // 结束数据库连接 connection.end()
五、CSS 预处理
- 专门的编程语言，为CSS增加了编程的特性。
- 将CSS作为目标生成文件。
- 使CSS更加简洁、适应性更强、可读性更佳、更易于代码的维护。
六、SASS 预处理器
安装SASS
// 使用 npm 全局安装 sass
$ npm install sass -g
SASS和SCSS的区别
-
SASS 的文件后缀有两种，一种是
.sass一种是.scss。 -
// .scss文件 div{ width:100px; height:200px; } -
// .sass文件 h1 width:100px height:200px -
我们常用的还是
.scss文件。
编译CSS文件
// 把 index.scss 文件编译输出成 index.css 文件。
$ sass index.scss index.css
// 这样会在当前目录下自动生成 index.css 文件。
// 我们在 html 文件里还是引入 css 文件。
实时编译
// 上一种方法每次修改都需要重新编译一次。
// 实时编译就是随着 SCSS 文件的修改，CSS 文件也会自动编译。
$ sass --watch index.scss:index.css
实时监控目录
// 上一种方法只能监控一个文件。
// 我们可能要写很多文件。
// 我们需要准备一个文件夹，里面放的全部都是 scss 文件。
// 实时把每一个 scss 文件编译到 css 文件夹里。
$ sass --watch sass:css
// 注意：删除一个 scss 文件，css 文件夹中不会自动删除，需要手动删除。
七、SASS 语法
变量
// 用 $ 来定义变量，在后面的代码中使用
$r:red;
p{
color:$r;
}
// 上面是全局变量，也可以在块内定义私有变量
div{
$w:100px;
width:$w;
}
嵌套
div{
width:500px;
ul{
width:300px;
li{
width:200px;
a{
width:100px;
}
}
}
}
// 嵌套中的 &
div{
width:100px;
height:100px;
&:hover{
background-color:red;
}
}
// 单个标签群组嵌套多个标签
div{
width:100px;
.box1 .box2{
color:red;
}
}
// 多个标签群组嵌套单个标签
.box1,.box2{
width:100px;
h1{
color:red;
}
}
混合器
// 定义一个混合器
@mixin 混合器名称 {
border-radius:10px;
}
div{
width:100px;
height:100px;
border:1px solid;
// 将刚才定义的混合器拿过来使用
@include 混合器名称;
}
混合器传参
@mixin 混合器名称($pro,$dur,$delay,$tim) {
transition:$pro $dur $delay $tim;
}
div{
width:100px;
height:100px;
// 与javascript中函数的实参形参用法一样
@include 混合器名称(all,1s,0s,linear)
}
混合器参数默认值
// 设置带有默认值的参数
@mixin 混合器名称($dur:1s,$pro:all,$delay:0s,$tim:linear) {
transition:$pro $dur $delay $tim;
}
div{
width:100px;
height:100px;
// 使用时，只给第一个传递参数，剩下的使用默认值
@include 混合器名称(2s)
}
继承
div{
width:100px;
height:100px;
background-color:pink;
}
p{
// 继承div中设置的属性
@extend div;
// 私有属性
font-size:20px;
color:red;
}
注释
// 我是一个普通的注释，在编译的时候会被过滤，css文件中不会显示。
/* 我在编译的时候，会被一起编译进去，css文件中显示 */
/*! 我是一个强力注释，不光会被编译，将来压缩文件我也在 */
导入scss文件
可以将变量单独写一个文件，混合器单独写一个文件，然后直接导入使用。
@import '变量scss文件路径';
@import '混合器scss文件路径';
// 继承div中设置的属性
@extend div;
// 私有属性
font-size:20px;
color:red;
}
### 注释
```scss
// 我是一个普通的注释，在编译的时候会被过滤，css文件中不会显示。
/* 我在编译的时候，会被一起编译进去，css文件中显示 */
/*! 我是一个强力注释，不光会被编译，将来压缩文件我也在 */
导入scss文件
可以将变量单独写一个文件，混合器单独写一个文件，然后直接导入使用。
@import '变量scss文件路径';
@import '混合器scss文件路径';