MattTheTekie

前端技术一些踩坑记录

顶部

编辑器相关（VSCode）

实用插件

  • Beautify 格式化代码
  • Bracket Pair Colorizer 括号颜色
  • Path Intellisense 路径智能提示
  • Vetur Vue提示插件
  • ES6 ES6语法提示
  • Open in Browser 在浏览器中打开

回到顶部

React开启JSX支持

打开settings，然后在右上角打开settings.json，配置如下：

"emmet.includeLanguages": {
  "javascript": "javascriptreact"
}

回到顶部

NPM(Yarn)相关

—save和—save-dev的区别

npm install --save安装的包是运行时的依赖，比如axios
npm install --save-dev安装的包仅仅是在开发阶段的依赖，比如less\sass等

回到顶部

npm在国内加快下载速度

  • 可以使用cnpm，安装方法npm install -g cnpm --registry=https://registry.npm.taobao.org(不推荐，有时候会出问题) 文档
  • 安装yarn来代替，直接下载或者在npm中下载，推荐直接下载安装 (推荐)
# 切换淘宝源
npx nrm use taobao
# 切换回来
npx nrm use npm

回到顶部

框架（Vue, React等）相关

Vue监听

Vue在mounted()中添加监听事件之后，记得在destroyed()中移除监听，特别是监听滚动事件

回到顶部

Vue引入iView之后使用Col标签后VSCode会报错

解决方法：在settings中搜索vetur.validation.template，关闭或者改成false之后重启vscode即可解决

回到顶部

在VsCode中识别webpack的alias

在项目根目录下创建jsconfig.json，如果使用ts则创建tsconfig.json，这里只展示js

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
        "@/*": ["src/*"]
    }
  },
  "exclude": ["node_modules", "dist"]
}

问题：只会显示js文件和文件夹，其他文件不会显示，暂时没发现解决方法

回到顶部

关于axios使用post传递application/x-www-form-urlencoded的问题

使用qs库来格式化数据

axios({
  method: 'post',
  url: '/api/demo',
  data: qs.stringify({ id: 1 })
})

如果你需要传递的数据中包含数组，则需要这样解决

axios({
  method: 'post',
  url: '/api/demo',
  data: qs.stringify({ id: 1, arr: [1, 2] }, { indices: false })
})

回到顶部

关于Mock.js

  • 无法使用fetch来进行模拟

回到顶部

在Vue中使用Lodash中的debounce

官方文档演示

_.debounce(func, [wait=0], [options={}]) 之后自己在使用过程中发现用不了，搜索了一下别人的代码，然后写成如下

import _ from 'lodash'
export default {
  methods: {
    handleClick: _.debounce(() => {
      console.log('防抖成功')
      this.fetchData()
    }, 500),

    fetchData() {
      console.log('fetch')
    },
  }
}

上面代码就会报错，原因是_.debounce中的this指向错误，所以不能使用箭头函数，要改成普通的写法，如果handleClick带参数，也可以直接写在function(args)中

import _ from 'lodash'
export default {
  methods: {
    handleClick: _.debounce(function() {
      console.log('防抖成功')
      this.fetchData()
    }, 500),

    fetchData() {
      console.log('fetch')
    },
  }
}

回到顶部

后端接口Long类型的问题

请求接口中，如果后端返回Long类型的参数（比如ID），前端浏览器会自动截断，需要后端将Long转成String返回

回到顶部

Vue和TS

  • 如果是Vue-Cli创建的项目，可以在现有项目下直接vue add typescript
  • 关于Mixins
import { Vue, Component, Mixins } from 'vue-property-decorator'
// 这个可以封装成 .ts文件做全局mixins
@Component({})
export class GlobalMixins extends Vue {
  /**
   * 设置提示框
   */
  setSnackbar({
    msg = "一条提醒",
    type = "success",
    timeout = 2000
  }) {
    this.$store.commit('openSnackbar', {
      msg,
      type,
      timeout
    })
  }
}
// 要这么写
@Component({})
export default class App extends Mixins(GlobalMixins) {}
  • 在TS中定义prototype,可参考这个答案
  • 关于$refs.form.validate()报错(Vuetify)
interface VuetifyValidType extends Vue {
  validate(): boolean
}

export default class {
  $refs!: {
    form: VuetifyValidType
  }
}

回到顶部

Vue中通过CDN引入高德地图externals的问题

在Vue中通过CDN引入高德地图，script标签需要放在head中，不然会报错AMap undefined

回到顶部

Element UI如果在项目中需要CDN引入

不需要配置externals，直接通过官方提供的CDN引入方式就好，也不需要在main.js中调用
直接就能全局引入

后续有什么问题再更新

回到顶部

Vite的问题

  • Vite引入VueRouter4的问题
// 以下代码是报错代码
import VueRouter from 'vue-router'

// 以下代码是正确代码
import {createRouter, createWebHashHistory} from 'vue-router
// 因为VueRouter4没有export default，所以不能使用第一种方式

回到顶部

小程序相关以及HTML

movable-view

movable-view 这个组件内部无法滚动设置了 overflow: scroll 样式的元素（尚未解决）

回到顶部

关于点击穿透

例子: 当你点击一个嵌套元素，你点击的是span的范围，但你想获取父元素div的内容

<div class="test" data-index="outer">
  <span data-index="inner">Click</span>
</div>
<script>
  document.querySelector('.test').onclick = function (e) {
    console.log(e.target.dataset.index);
  }
</script>

解决方法：内部元素的样式pointer-events修改为none; 或在内部放置一个位于所有子元素顶层的div专门用来点击;

回到顶部

css来判断元素是否为空

通过伪类:empty来判断一个元素内部是否有文字或者是否存在子元素

div:empty {
  width: 100px;
  height: 100px;
  background-color: red;
}
div {
  width: 50px;
  height: 50px;
  background-color: orange;
}

回到顶部

百度地图自定义标记点图标

从iconfont上下载的图标，设置好大小即可显示，但如果图标太大，在PS中修改后又无法正常显示尺寸（尚不知问题，但从iconfont上设置好大小没问题）

回到顶部

关于判断网络状态

  • navigator.onLine能判断网络是否在线
  • navigator.connection能获取网络状态信息
  • navigator.connection可以监听change事件

回到顶部

JS录制屏幕内容

  • 使用navigator.mediaDevices来获取stream流---MDN文档
  • 获取的stream流可以使用MediaRecorder录制获取webm文件---MDN文档

回到顶部

获取内部可滚动元素的滚动

  • 通过offsetTop来获取内部以及外部的高度，通过相减则是实际内部高度

回到顶部

原生JS获取当前经纬度

MDN官方文档

const geo = navigator.geolocation
geo.getCurrentPosition((res) => {
  const crd = res.coords
  console.log('Your current position is:');
  console.log(`Latitude : ${crd.latitude}`);
  console.log(`Longitude: ${crd.longitude}`);
  console.log(`More or less ${crd.accuracy} meters.`);
})

问题：

微信H5下无法使用，可能移动端H5都无法正常使用

回到顶部

关于调用百度腾讯等web服务

使用axios这些会出现跨域问题，需要使用jsonp

回到顶部

关于cookies

如果在不同域名下,cookies会无法设置,简单来说就是: 同域名下cookies有效,不同域名下cookies无效

回到顶部

微信sdk

前端微信sdk的Config只需要域名或者ip地址能够对上就好

回到顶部

监听DOM变化

原生JS监听DOM变化

// 选择需要观察变动的节点
var targetNode = document.getElementById('some-id');

// 观察器的配置（需要观察什么变动）
var config = { attributes: true, childList: true, subtree: true };

// 当观察到变动时执行的回调函数
var callback = function(mutations) {
    for(var mutation of mutations) {
        if (mutation.type == 'childList') {
            console.log('A child node has been added or removed.');
        }
        else if (mutation.type == 'attributes') {
            console.log('The ' + mutation.attributeName + ' attribute was modified.');
        }
    }
};

// 创建一个观察器实例并传入回调函数
var observer = new MutationObserver(callback);

// 以上述配置开始观察目标节点
observer.observe(targetNode, config);

// 之后，可停止观察
observer.disconnect();

参考MDN文档

回到顶部

页面平滑滚动

  • css
    • scroll-behavior: smooth
  • js
    • scrollIntoView({ behavior: "smooth" })

回到顶部

IOS格式化日期出错

Safari格式化日期格式yyyy-mm-dd时会返回NaN，或者直接报错，需要把-替换成/变成yyyy/mm/dd才可正常格式化。

回到顶部

JS文字转语音

const voice = speechSynthesis.getVoices()[0];
let speech = new SpeechSynthesisUtterance();
for (const key in voice) {
  speech[key] = voice[key];
}
speech.text = '你好';
speechSynthesis.speak(speech);

回到顶部

Tailwind在VSCode中的智能提示

  • 安装插件Tailwind CSS IntelliSense
  • 在VSCode设置中找到tailwindCSS.includeLanguages
{
  "plaintext": "vue",
  "javascript": "javascript"
}
  • 如上设置之后就能Vue和React都能智能提示了

回到顶部