学习JS第七周

二十二536
81 阅读5分钟

1、动态样式语言

在CSS的基础之上，添加了新特性，目的：为了简化CSS开发

  1. 常见的动态样式语言:

    1. Sass/Scss
    2. Less
    3. stylus和css语法的差别较大

  2. 编译:浏览器只认识css，不认识其他的动态样式语言，动态样式语言-(编译)->自动成为一个css，在html页面上引入的其实是编译后的css

    1. vscode：安装一个插件：easy sass,编译你写的scss，只要一保存就会自动生成css(自动化)

  3. 学习Scss新特性：

    1. 变量：只要重复用到的数据，都要创建为一个变量
      创建：$变量名：值; <>特殊
      1. 使用时，$不能省略
      2. 不区分中划线和下划线
      3. 依然具有js中的作用域，全局变量和局部建立，如果你放在某个选择器内部创建的为局部，放在外面则为全局
    2. 嵌套：选择器可以嵌套
      1. 语法： .d1{
        ...
        .d2{
        }
        }

编译后：.d1{...},.d1.d2{...} 可以在前面添加&，类是于JS中的this，被哪个{}包裹，就算哪个选择器

  1. 导入 可以将多个Scss整合为一个css，@import"路径"

  2. 注释：只能书写多行注释，不能书写单行注释，因为CSS不能识别

  3. 混合器：类似于JS中的函数

    1. 创建混合器
      @mixin混合器名(形参:默认值,...){<br> css属性名:形参;
      ...
      }
    2. 调用混合器
      1. @include 混合器名(实参); 传入的顺序要一一对应
      2. @include 混合器名($形参：实参);-传入的顺序可以随意
    3. 特殊
      1. 使用时，关键字别掉了
      2. 不要着急去封装，碰到重复的代码，再提取出来封装为一个函数

  4. 运算符：主要用于颜色值的运算,支持+-/,尤其是,越往0靠近数字就越少，颜色就会越暗，越往f靠近数字就越大，颜色就越亮

  5. 分支和循环：不重要，直接写JS

less
  1. 变量的创建:@变量名：值;要区别中划线和下划线
  2. 混合器更加的简单
    1. 创建：
      .whb(@w:0px,@h:0px,@b:transparent){
      width: @w;
      height: @h;
      background: @b;
      }
    2. 调用:
      .div1{
      .whb()
      }

webSocket:HTML5提供的一个新特性，代码并不复杂，重点在于理解

HTML5一共有10大新特性：

  1. 语义化标签：header nav footer section...
  2. 增强型的表单：
  3. 视频和音频：
  4. *Canvas绘图：用于画折线图、柱状图、雷达图、饼状图、甜甜圈图...数据可视化，甚至学完后你会发现也有框架帮我们做好了
  5. SVG绘图 - 用于画矢量图的，画小图标的，由阿里图标代替了
  6. 拖拉API - 有了jQueryUI拖拽轻而易举
  7. WebWorker - 微任务
  8. *WebStorage - 客户端存储技术：LocalStorage和sessionStorage
  9. *WebSocket - 机器人、实施走势图、在线聊天室
  10. *地理定位 - 在中国由百度地图和高德地图帮助我们程序员搞定了地理定位

websocket协议，简称为ws协议，属于广播-收听协议，客户端连接到服务器就不会再断开连接，是永久连接，双方可以随意向对方发送消息，且是不对等发送，ws协议专门用于完成实时操作的 如何使用：

  1. 下载引入node.js的第三方模板包：引入:
    var ws=require("ws")
  2. 分为三方面
    1. 依旧使用express搭建http服务器和文件系统
    2. 搭建ws服务器 //引入
      var ws=require("ws");
      //创建ws服务器
      var server=new ws.Server({port:8008});
      //为ws服务器绑定连接事件
      server.on("connection",socket=>{
      console.log("有个崽儿连接上我ws服务器了");
      //说话
      socket.send("消息");
      //听话
      socket.on("message",data=>{
      data->前端发来的东西
      })
      })
  3. 搭建ws客户端 //和ws服务器端进行连接
    var socket=new WebSocket("ws://127.0.0.1:8008");
    //听话：
    socket.onmessage=e=>{
    e.data->后端发来的东西
    }
    //说话：
    socket.send("消息");

ES的补充

ES7

  1. Array API:includes 可以直接通过arr.includes();来判断数组中是否含有某个元素，可以直接得到一个布尔值
  2. 指数运算符:如果要计算数字的乘方：底数**幂

ES8

  1. Object.values
    作用：可以将一个对象转为一个数组
  2. Object.entries
    作用：将对象、数字、字符串变为二维数组
  3. StringAPI-Padding
    padStart和padEnd分别代表填充前面和后面
  4. 尾部逗号的添加
  5. async和await
    1. async作为关键字放到函数function的前面，用于表示该函数为一个异步函数
    2. await就算等待的意思，其实他后面可以放任何表达式，但更多的时候放的是一个返回的Promise对象的表达式

ES9

  1. 扩展运算符：...
    不光数组可以使用，对象也可以使用了，而且他不光可以脱衣服，还可以某些情况穿衣服

ES10

  1. flat:数组的API，会按照一个可以指定的深度遍历递归你的数组，把他铺平
  2. flatMap:数组的API，就算flat和Map二者合一，先执行map后执行flat，但是flat只能铺一层
  3. trimStart/trimEnd - 去掉字符串的空白

ES11

  1. 全局对象全新写法： globalThis，不管是服务器端又或者是浏览器端都可以使用
  2. for in循环标准化

ES12

逻辑赋值运算符，一句话完成两个操作，先逻辑再赋值

  1. &&=
  2. ||=

ES13

字符串、数组共用的一个API：at(i);也是放下标，但是支付负数参数，-1代表倒数第一个

avatar
文章
阅读
粉丝