JavaScript学习Day29笔记

Day29笔记

一、异步与同步

JavaScript是单线程语言,就好比只有一条流水线

同步

所有代码按顺序执行,后面的代码需要等待前面的代码执行完毕

异步

异步是一种代码的执行方式,无需等待前面的代码执行完毕异步程序触发(代码执行顺序触发、事件触发、计时器触发等)单独执行,程序执行的结果会反应给回调函数,通过回调函数就可以知道异步程序是否成功执行

JavaScript学习Day29笔记

二、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文件路径';
上一篇:在行内样式 或 对象格式的样式中 使用scss变量


下一篇:Vue 使用Scss,深度修改局部样式