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

1. 初始化项目

   $ npm init -y
   

2. 下载 mysql 第三方模块（包）

   $ npm install mysql
   

3. 建立数据库连接

   // 引入 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文件路径';