zerojs

实战踩坑

other

在 md 文件中添加

返回目录

1. 修改 markdown 表格宽度

在 md 文件中添加

<!-- html5标签 -->
<!-- .markdown-section th { width: 38rem; }   总宽 -->
<!-- th:first-of-type  { width: 10rem; }   第一格宽度 -->
<style>
  table .markdown-section td,
  .markdown-section th {
    width: 38rem;
  }
  table .markdown-section td,
  .markdown-section th:first-of-type {
    width: 10rem;
  }
</style>

2. 乱序

sort 乱序 1 是正序,-1 是倒序,两个两个比较,要不要换

//打乱数组函数
function randomSort() {
  return Math.random() > 0.5 ? -1 : 1
  //随机数大于0.5返回-1，反之返回1
}

// 调用
var arr = [1, 2, 3, 4, 5, 6]
arr.sort(randomSort) //不用带小括号
console.log(arr)

3. 禁止用户选中内容

user-select：none

取值：

值描述
none：文本不能被选择
text：可以选择文本
all：当所有内容作为一个整体时可以被选择。如果双击或者在上下文上点击子元素，那么被选择的部分将是以该子元素向上回溯的最高祖先元素。
element：可以选择文本，但选择范围受元素边界的约束

4. 设置图片不允许拖拽下载

事实上,只设置 body 的各个事件为window.event.returnValue=false;在 chrome 下也是可以的,但是在 ie 下,必须加上后边的return false;

<body
  ondragstart="window.event.returnValue=false;return false;"
  oncontextmenu="window.event.returnValue=false;return false;"
  onselectstart="event.returnValue=false;return false;"
></body>

5. 常用 cdn

jquery

<script src="https://cdn.bootcss.com/jquery/2.1.0/jquery.js"></script>

bootstrap

<link
  href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
  rel="stylesheet"
/>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

6. 点击穿透

click 的事件触发远晚于 touchstart/touchend,因此遮罩消失会触发遮罩下元素的 click 事件

解决方法

  1. 避免 click 和 touch 混用
  2. 使用 preventDefault 阻止默认事件

7. 浏览器f12 中的 vue 问题

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
使用这个引入需要加上 Vue.config.devtools = true 才能在f12中找到vue

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
使用这个没问题

参考 vue devtools

8. 性能优化

  1. 压缩图片,代码等
  2. 函数防抖,节流
  3. 懒加载,预加载
  4. 减少不必要的 ajax,触发加载时,注意滚动事件触发 ajax
  5. 注意重绘和回流

    6. 重绘: css rule 的修改,和尺寸无关的样式修改,不影响结构的变化
    回流: HTML 方面的修改,增删节点,尺寸变化
    宽高的平移变化,用 transform 代替

  6. 尽量少使用 DON,不是不使用,而是尽可能一步到位

9. vscode 用户代码片段

\t 表示缩进

	"create Vue":{
		"prefix": "newVue",
		"body": [
			"new Vue({",
			"\tel: '#app',",
			"\tdata: {",
              "\t\t$1",
			"\t},",
			"\tmethods: {",
              "\t\t$2",
			"\t},",
		"})"
		],
		"description": "创建vue实例对象"
  }

10. 查看本地全局安装过的npm包

npm list -g --depth 0

11. mac 配置vue环境变量

// 全局安装 vue脚手架
npm install --global vue-cli 

// 打开环境变量配置文件
open -e .bash_profile

// 添加下面一行代码并保存
export PATH="$PATH:/usr/local/Cellar/node/13.5.0/bin"

// 运行配置文件是环境变量生效
source .bash_profile

// 查看vue版本
vue --version

12. 使用 patch-package 修改第三方模块(插件源码)

npm install patch-package
npx patch-package xxx
// 或
yarn add patch-package
yarn patch-package xxx

在package.json文件中添加postinstall命令，以后就可以自动化安装相关补丁

"scripts": {
    "postinstall": "patch-package"
}

后续执行 npm install 或 yarn install 命令时，会自动为依赖包打补丁

13.vue封装api

// api/index.js

const api = {}
const requireContent = require.context('.', true, /\.js$/)
requireContent.keys().forEach((key) => {
  const content = requireContent(key)
  const contentName = key.replace(/^\.\//, '').replace(/\.\w+$/, '')
  // console.log({ content, contentName, __esModule: content.__esModule })
  api[contentName] = content.__esModule && content.default ? content.default : content
})

export default api

// main.js

// api
import $api from './api'
Vue.prototype.$api = $api

使用

this.$api.User.login()

14. vue 封装自定义组件

// components/index.js

/*
 * @Description: 借助webpack，使用 require.context() 方法来创建自己的（模块）上下文，从而实现自动动态require组件，
 * 这个方法需要3个参数：要搜索的文件夹目录（查找需要文件的相对路径），是否还应该搜索它的子目录，以及一个匹配文件的正则表达式。
 * 在 main.js 中 import 'components/index.js'，然后就可以随时随地使用这些基础组件，无需手动引入了
 * 组件命名方式：
 * 1. 单驼峰：baseButton.vue 在使用时通过 <base-button></base-button> 使用
 * 2. 双驼峰：ComButton.vue，使用 com-button
 * 3. 文件夹/组件名.vue: com-button/com-button.vue，使用 com-button
 * @Date: 2020-12-23 17:28:31
 * @LastEditTime: 2021-03-19 17:56:16
 * 
 */
// # 自定义组件 - COMPONENTS
// 命名规则：
// - 如：`com-header/com-header.vue`或`com-header.vue`, 可在组件中直接通过 `<com-header></com-header>`调用，不需要另外进行注册。
// - 建议尽可能使用`文件夹/同名文件.vue`的格式命名，使用到的 js 逻辑代码可以放在同级文件夹中
// - 所有组件都必须有`name`属性，且不能和已有`name`属性同名

import Vue from 'vue'

const requireComponent = require.context(
  '.',
  true,
  /\.vue$/
  // 找到components文件夹下以.vue命名的文件
)

// 循环获取到的文件，可在循环时处理文件名
requireComponent.keys().forEach(fileName => {
  // 获取组件配置(组件模板)
  const componentConfig = requireComponent(fileName)
  // 因为得到的filename格式是: './baseButton.vue', 所以这里我们去掉头和尾，只保留真正的文件名
  const componentName = fileName
    .replace(/^\.\//, '')
    .replace(/\.\w+$/, '')
    .split('/') // split('/')兼容 ./com-button/com-button.vue 结构
  // console.log(componentName, '基础组件文件获取测试')
  // 将组件在循环中注册到全局
  Vue.component(
    componentName[1] || componentName[0],
    componentConfig.default || componentConfig
  )
})

// main.js

import '@/components/index.js' //引入全局组件