HTML&CSS

芳-华

已于 2024-01-18 21:32:18 修改

阅读量1k

点赞数 20

文章标签： html css 前端 javascript vue.js

于 2023-12-07 21:12:29 首次发布

本文链接：https://blog.csdn.net/m0_51440011/article/details/134865196

版权

一、HTML

<p>、<h1>、<div>等元素独占一行，称为块级元素；<input>、<span>等只占一行的一小部分成为行内元素。块级元素内可以写块级元素（有些不行：<h1>~<h6>、<p>之间不能互相嵌套）和行内元素，但行内元素内只能写行内元素
submit事件只能绑定到<form>身上，而不能绑定到<button type="submit" class="dl">登录</button>身上
在通过“事件委托”给子元素绑定事件时，回调函数里不能用this，因为this指代事件的委托者，必须用“事件对象.target”
div内展示图片时，用background-image时可以使用background-size来调整图片大小让其完整的显示在盒子内；用<div><img></div>时，可以给img设置with: 100%来实现图片完整展示在盒子内
。。。

二、JS

闭包和防抖：

function debounce(fn, t) {
      // 闭包：外层函数的变量
      let timeId

      // 闭包：内层函数
      return function () {
        // 如果有定时器就清除
        if (timeId) clearTimeout(timeId)
        // 开启定时器 200
        timeId = setTimeout(function () {
          fu()
        }, t)
      }
    }
// return function () 返回的“内层函数”仍能访问到timeId，就是利用了“闭包”的特性
box.addEventListener('mousemove', debounce(mouseMove, 500))

闭包和节流：

function throttle(fn, t) {
      // 闭包：外层函数的变量
      let timeId = null

      // 闭包：内层函数
      return function () {
        if(!timeId){
          timeId = setTimeout(() =>{
            fn()
            // 因为要用timeId来做判断，clear的话不能清除timeId的值，就不会进行下一次计时了，需要手动清除其值
            timeId = null
          },t)
        }
      }
    }
    box.addEventListener('mousemove', throttle(mouseMove, 500))

两个js之间互相调用：
1. 全局调用，就是在函数外部调用其他JS文件中封装的函数时，被调用的JS文件要先引用
2. 局部调用，就是在函数内部调用其他JS文件中封装的函数时，引用不分先后，想在哪调就在哪调。
自定义属性data-*不管赋值是不是字符串（不管=后边加不加引号），在获取时得到的始终是字符串string

巧妙使用“短路与”来优雅控制是否执行后边的代码：

// 添加请求拦截器:在所有请求前添加token
axios.interceptors.request.use(function (config) {
  const token = localStorage.getItem('token')
  // 下面这段代码其实是个无异议的逻辑运算，他没有写if (){}，但是他仍然会执行，但由于“短路”的特点浏览器本地存储查不到token时，就不在执行后边添加token的操作，比写if (){}更简洁
  token && (config.headers.Authorization = `Bearer ${token}`)
  // 在发送请求之前做些什么
  return config
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error)
})

后端也可以用。后端也有类似的简写，比如IO写出时，变量int n;既要给n赋值，又要通过n来进行比较判断时可以如下写：

public class Demo03 {
    public static void main(String[] args) {
        int n = -1;
        byte[] a = new byte[100];
        try {
            File f = new File("D:/JavaProject/JavaShiYan/src/com/java/zhang10/", "Demo03.java");
            InputStream in = new FileInputStream(f);
            //返回读取的字节数
            while ((n = in.read(a, 0, 100)) != -1) {
                System.out.println("字节数：" + n);
                String str = new String(a, 0, n);
                System.out.println(str);
            }
            //返回读取的字节数

            // 这里就是既使用n和-1做了判断，同时又给n赋了值（需要赋值后才能判断）
            while ((n = in.read(a)) != -1) {
                System.out.println("字节数：" + n);
                String str = new String(a, 0, n);
                System.out.println(str);
            }
            //返回字节对应的数值0-255
            while ((n = in.read()) != -1) {
                System.out.println("n:" + n);
            }
            in.close();
        } catch (IOException e) {
            System.out.println("e:" + e);
        }
    }
}

。。。

三、Vue

一级路由重定向到二级路由时，一级路由的component还是要写的，因为是在一级路由对应的组件中展示二级路由对应的组件的
Vue相关的组件注册用component，插件注册用Vue.use()。在main.js中是全局注册
Vuex存储的数据只是在页面中，相当于全局变量，页面刷新时vuex里的数据会重新初始化，导致数据丢失；vuex里的数据是保存在运行内存中的，当页面刷新时，页面会重新加载vue实例，vuex里面的数据会被重新赋值，因此需要本次持久化
在进行移动端开发时，都要做移动端适配，如果使用的是postcss这种，且在配置了"postcss.config.js"后浏览器移动端窗口中还是会出现上下/左右滚动条，就在index.html里配置下行代码
```
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,minimum-scale=1.0">
```
。。。