首页 > 编程语言> 文章详细

JavaScript学习Day29笔记

2021-06-29 20:29:44 阅读：198 来源： 互联网

标签：npm 文件 Day29 100px JavaScript 混合器笔记 width scss

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

标签：npm,文件,Day29,100px,JavaScript,混合器,笔记,width,scss
来源： https://blog.csdn.net/qq_57479061/article/details/118343233

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

JavaScript学习Day29笔记

Day29笔记

一、异步与同步

同步

异步

二、NPM包管理器

三、使用NPM包管理器

初始化

清除缓存

下载指令

删除指令

NRM

四、通过程序连接mysql

五、CSS 预处理

六、SASS 预处理器

安装SASS

SASS和SCSS的区别

编译CSS文件

实时编译

实时监控目录

七、SASS 语法

变量

嵌套

混合器

混合器传参

混合器参数默认值

继承

注释

导入scss文件

导入scss文件