一、组件库的价值
- 就个人而言，拥有一套自己的组件库，可以让你的开发变得更高效，让你在行业里更有价值。
- 就团队而言，拥有一套团队的组件库，可以让协同开发变得更高效规范，让你的团队在公司更具有影响力。
- 就公司而言，拥有一套公司维护的开源组件库，可以让你的公司在行业里更具有影响力。
[……]
Vue项目SEO优化的另一种姿态
背景：当前项目首页和登陆后的平台在一个项目里，路由采用hash模式，现在要做SEO优化，这时候同构SSR(Server Side Rendering)服务端渲染代价显然太大，影响范围比较广，同样更改当前项目路由为history模式采用预渲染(Prerending)代价也不小。最终决定将首页单独出一个[……]
批量修改历史commit的用户名user.name邮箱user.email
配置当前的用户名邮箱可以当前项目配置或者全局配置。
仅当前项目配置：
|
1 2 |
git config user.name 'your-user-name' git config user.email 'your-user-email' |
全局配置：
|
1 2 |
git config --global user.name 'your-user-name' git config --global user.email 'your-user-email' |
新建shell脚本 change-email-nam[……]
简述this,call,apply,bind之间的关系
一、什么是this？
this是JavaScript语言的一个关键字，它是函数运行时在函数体内部自动生成的一个对象，只能在函数体内部使用。函数的不同使用场合，this的指向不同。
在ES5中，this永远指向最终调用它的对象。
例1：这里最终调用函数a的对象是全局window,相当[……]
前端下载远程文件
前端网页下载远程文件可以分为以下两种形式：
- 打开新窗口下载
- 在当前窗口直接下载
打开新窗口下载的方法：
window.open方法(打开一个弹窗)：
|
1 |
window.open('http://xxx/download?param=1', '_blank', 'fullscreen=no,width=400,height=300') |
创建一个隐藏form表单提交方法(打开新的标签页)：[……]
Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause().
解决方法：
|
1 2 3 4 5 6 7 8 9 |
audio.load() let playPromise = audio.play() if (playPromise !== undefined) { playPromise.then(() => { audio.play() }).catch(()=> { }) } |
原因：
从Chrome50开始，对<video>或<audio>元素的play()调用返回一个Promise。 一个异步返回单个结果的函数。如果回放成功，Promise就会实现，而play[……]
前端内存泄漏检查判断及处理
什么是内存泄露？
已经不再使用的内存未能被程序释放，叫内存泄露(memory leak)。
内存泄露会带来什么样的后果？
内存泄露会因为减少可用内存数量从而降低计算机性能，严重的可能导致设备停止正常工作，或者应用程序崩溃。
什么情况下出现内存泄漏？
首先了解一下垃圾回收[……]
在vue中使用import()来代替require.ensure()实现代码打包分离
一、require.ensure() 方法来实现代码打包分离
require.ensure() 是 webpack 特有的，已经被 import() 取代。
|
1 2 3 4 5 6 |
require.ensure( dependencies: String[], callback: function(require), errorCallback: function(error), chunkName: String ) |
给定 dependencies 参数，将其对应的文件拆分到一个单独[……]
微信小程序将view动态填满全屏
一、在app.js利用官方方法获取设备信息，将获取到的screenHeight、windowHeight度量单位统一由rpx换算为px
注：官方文档给出 【rpx换算px (屏幕宽度/750) 】【 px换算rpx (750/屏幕宽度)】
[crayon-6648d9ec05917[……]
H5背景音乐自动播放(兼容微信IOS，进程后台切换自动停止播放，本文例子为Vue写法)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 |
<template> <audio src="./static/music.mp3" id="bgMusic" preload="auto" loop></audio> <div class="bgMusicBtn" @click="bgMusicPlayOrPause('bgMusic')"> <img :src="playFlag ? playImg : pauseImg" :class="{rotate: playFlag}"> </div> </template> export default { data() { return { playFlag: true, playImg: require('../../static/play.png'), pauseImg: require('../../static/pause.png'), clickMusicBtn: false } }, mounted() { this.audioAutoPlay('bgMusic'); document.addEventListener("visibilitychange", (e) => { // 兼容ios微信手Q if (this.clickMusicBtn) { // 点击了关闭音乐按钮 if (this.playFlag) { this.audioAutoPlay('bgMusic'); this.playFlag = true; } else { this.audioPause('bgMusic'); this.playFlag = false; } text.innerHTML = e.hidden; if (e.hidden) { // 网页被挂起 this.audioAutoPlay('bgMusic'); this.playFlag = true; } else { // 网页被呼起 this.audioPause('bgMusic'); this.playFlag = false; } } else { // 未点击关闭音乐按钮 if (this.playFlag) { this.audioPause('bgMusic'); this.playFlag = false; } else { this.audioAutoPlay('bgMusic'); this.playFlag = true; } text.innerHTML = e.hidden; if (e.hidden) { // 网页被挂起 this.audioPause('bgMusic'); this.playFlag = false; } else { // 网页被呼起 this.audioAutoPlay('bgMusic'); this.playFlag = true; } } }); }, methods: { bgMusicPlayOrPause(id) { this.clickMusicBtn = !this.clickMusicBtn; if (this.playFlag) { this.audioPause(id); this.playFlag = false; } else { this.audioAutoPlay(id); this.playFlag = true; } }, audioPause(id) { var audio = document.getElementById(id); audio.pause(); document.addEventListener("WeixinJSBridgeReady", function () { audio.pause(); }, false); document.addEventListener('YixinJSBridgeReady', function () { audio.pause(); }, false); }, audioAutoPlay(id) { var audio = document.getElementById(id); audio.play(); document.addEventListener("WeixinJSBridgeReady", function () { audio.play(); }, false); document.addEventListener('YixinJSBridgeReady', function () { audio.play(); }, false); } } } |