前端技术一些踩坑记录
source link: https://mrleidesen.github.io/posts/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF%E4%B8%80%E4%BA%9B%E8%B8%A9%E5%9D%91%E8%AE%B0%E5%BD%95/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
前端技术一些踩坑记录
顶部#
编辑器相关（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安装的包是运行时的依赖，比如axiosnpm 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录制屏幕内容#
获取内部可滚动元素的滚动#
- 通过offsetTop来获取内部以及外部的高度，通过相减则是实际内部高度
原生JS获取当前经纬度#
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();
页面平滑滚动#
- 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都能智能提示了
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK