一、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之间互相调用:
- 全局调用,就是在函数外部调用其他JS文件中封装的函数时,被调用的JS文件要先引用
- 局部调用,就是在函数内部调用其他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">
- 。。。