1.移动端轻量 Vue 组件库
- 京东架构：https://juejin.im/post/5e156cb45188253aa666afa2?utm_source=gold_browser_extension
- Vant UI
- vxe-table
2.端口占用，以及 git 代码操作报错 22 连接拒绝
- cmd：netstat -aon|findstr "3000" 任务管理器杀掉对应PID
- 这里主要是用到windows下的DOS工具，点击"开始"--"运行"，输入"cmd"后点击确定按钮，进入DOS窗口，接下来分别运行以下命令：
>netstat -aon | findstr "80" Proto Local Address Foreign Address State PID ==== ============ ============== ========== ====== TCP 0.0.0.0:80 0.0.0.0:0 LISTENING 1688
netstat -an 可以查看本机有哪些端口在监听
netstat -anb 查看监听端口的 pid
- 可以看出80端口被进程号为1688的程序占用
>tasklist | findstr "1688" 图像名 PID 会话名 会话# 内存使用 inetinfo.exe 1688 Console 0 2,800 K
- 很明显，是inetinfo占用了80端口，inetinfo.exe 主要用于支持微软 Windows IIS 网络服务的除错，这个程序对你系统的正常运行是非常重要的
- 当然，不是只有inetinfo.exe进程会占用80端口，这只是我机器上的情况.如果你并不了解此进程是干什么用的，千万不要盲目地将其kill掉，最好先百度或Google搜索一下；当然如果你很了解它，并确定可以终止,那么继续下面的命令
>taskkill /pid 1688 /F
- 成功：已终止 PID 为 1688 的进程。
- 如果你很熟悉此进程，并确定可以终止，那么就直接使用上面的命令把PID为1688的进程终止（这一步同样可以在任务管理器中执行，inetinfo.exe 就是任务管理器中的映像名称，选中它，点击【结束进程】即可）
>tasklist | findstr "1688"
- 再次确认是否成功终止,如果成功终止此次执行命令后应返回空.
git 报错：connect to host gitlab.com port 22: connection refused。
原因：可能是 git config --global 全局配置出现异常，这种情况如果还记得最近在 config 中配置了什么直接删除即可，否则请直接 git config --global --edit 进入编辑状态，删除所有配置，留下全局 user.email 和 user.name 即可
3.es6
箭头函数的利弊：this 指向问题（一般为上下文作用域），可在函数体中测试
() => { console.log(this === window)// or console.log(this); return this.balabala... }
故字面量定义方法的正确姿势：
const calculator = { sum () {console.log(this ===calculator)}; return this.bala... }
注意区别且禁止使用：
const calculator = { sum : () => {console.log(this ===calculator)}; return this.bala...}
总结箭头函数应用场景：原型 （构造函数），字面量，事件回调函数 （addEventListener ）不能用。Promise（then & catch），循环，定时，回调地狱能用
Promise参考：promise 白话
4.flex布局，容器设 display: flex ，子元素用 flex：num，届时子元素 float，clear，vertical-align 将失效。
要求：弹性布局，每行三个，不满左放，固定间隔
.parent { display: flex; flex-wrap: wrap; justify-content: flex-start; align-content: space-around; // 固定间隔 } .children { text-align: center; height: 70rpx; width: 200rpx; // 不大于宽度的三分之一即可 margin: 20rpx; border-radius: 6rpx; border: 2rpx solid #c8c8c8; line-height: 70rpx; }
5.博客添加小说模块，布置服务器一直报405，原因：nginx.conf 未设置事件转发 proxy-pass
10.vue 检测空对象 {} ，由于 observer 机制，即使 obj = {}，返回时也会变成处理后的 { __ob__: Observer } ，故检测是否为空对象请使用：
console.log(JSON.stringify(obj) === '{}')
11.vue 中的 $set，https://www.jianshu.com/p/358c1974d9a5 如果在实例创建之后添加新的属性，不会触发视图刷新
13.微信小程序：
刷新值：this.setData({obj:obj})
赋值：let obj = this.data.obj
复杂数据的刷新，例如一个search数组下的对象：this.setData({ ['search[0].open'] })
息屏后唤醒，执行onshow。
不断滚动到顶部或底部，出现闪动，原因可能为：滚动设置了限制高度，删除或注释即可 body { /* height: 100vh; */ /* overflow-y: auto; */ }
14.关于 vue+element-UI 分页显示需要注意的：
1.搜索后结果通常为第 1 页
2.搜索结果后，修改或删除某项，回调成功后需保持搜索结果
3.搜索结果后，选择第 2 页，第 3 页，始终为搜索的条件；此时改变搜索条件，重新展示新条件的第 1 页结果。
4.搜索与重置避免重复请求。
5.单页切换显示 pageSize 展现数据无误，包括此时正在非pageNo=1的情况下，和搜索后
6.回车触发搜索
...
15.目前编写的 import/export 最终都是编译为 require/exports 来执行的
const fs = require('fs')
exports.fs = fs
module.exports = fs
import fs from 'fs' import {default as fs} from 'fs' import * as fs from 'fs' import {readFile} from 'fs' import {readFile as read} from 'fs' import fs, {readFile} from 'fs' export default fs export const fs export function readFile export {readFile, read} export * from 'fs'
15.超出隐藏，关键字 ellipsis
16.css 换行与断句
// 自动换行 p { word-wrap:break-word; } // 强制不换行 p { white-space:nowrap; } // 强制英文单词断行 p { word-break:break-all; }
17.文字与图片垂直居中 https://zhuanlan.zhihu.com/p/30535299
18.node 部署上线：pm2 + nginx
19.随机生成字母和数字的组合 Math.random().toString(36).substr(2);
20.for ... of for (let [idx, val] of delayList.entries()) 可以使用 break 中断，可以使用 await
22.reduce 的应用
'person.msg'.split('.').reduce((data, currentData) => {
return data[currentData]
}, [初始值]);
// person[msg]
// person[msg][abc][fav]
23.解决github访问速度太慢的问题：站长工具A类输入 github.com 找最快的IP，修改 C:WindowsSystem32driversetchosts
24.断网组件 +
// 优雅地处理图片异常，error 只有捕获 window.addEventListener('error',function(e){ let target = e.target, // 当前dom节点 tagName = target.tagName, times = Number(target.dataset.times) || 0, // 以失败的次数，默认为0 allTimes = 3; // 总失败次数，此时设定为3 // 当前异常是由图片加载异常引起的 if( tagName.toUpperCase() === 'IMG' ){ if(times >= allTimes){ target.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'; }else{ target.dataset.times = times + 1; target.src = '//xxx.xxx.xxx/default.jpg'; } } },true)
25.语义化标签
<header> <nav> <a href="/">Home</a> </nav> ... </header> <main> <p>文档中独一无二的主要内容，是用户点进来的目的。</p> ... </main> <footer> <section class="contact" vocab="http://schema.org/" typeof="LocalBusiness"> <h2>Contact us!</h2> <address property="email"> <a href="mailto:us@example.com">us@example.com</a> </address> <address property="address" typeof="PostalAddress"> <p property="streetAddress">123 Main St., Suite 404</p> <p> <span property="addressLocality">Yourtown</span> </p> <p property="addressCountry">United States of America</p> </address> </section> </footer> <!-- article 完全独立的内容，放到别的地方任然有意义 --> <article> <header> <h1>Why you should buy more cheeses than you currently do</h1> </header> <section> <header> <h2>Part 1: Variety is spicy</h2> </header> <!-- cheesy content --> </section> <section> <header> <h2>Part 2: Cows are great</h2> </header> <!-- more cheesy content --> </section> </article>
26.小数运算
function equal(number1, number2) { return Math.abs(number1 - number2) < Math.pow(2, -52); } console.log(equal(0.1 + 0.2, 0.3));
27.移动端 750px 设计稿
- 750px 设计稿是 iphone 6 的物理像素
- css 像素是逻辑像素
- css 像素 = 物理像素 / window.devicePixelRatio
- 依照上述公式，DPR 等于 2 的设备上，当设计稿中出现 1px 的像素时，css 像素实际应等于 0.5px，由此产生 1px 像素问题。
- 解决1px方法1-直接拉到最后
- 解决1px方法2-媒体查询（推荐）+ 单位适配
/* 当 dpr=2 时，可以使用媒体查询 dpr=2 dpr=3 */ @media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2){ .border-bt-1px {
... } }
28.vue 动态组件，code review 被指出
<template> <div class="info"> <component :is="roleComponent" v-if="roleComponent" /> </div> </template> <script> import AdminInfo from './admin-info' import BookkeeperInfo from './bookkeeper-info' export default { components: { AdminInfo, BookkeeperInfo }, data() { return { roleComponents: { admin: AdminInfo, bookkeeper: BookkeeperInfo }, role: 'user', roleComponent: undefined } }, created() { const { role, roleComponents } = this this.roleComponent = roleComponents[role] } } </script>
29.electron 开发
- 用框架开发省时省力，打包打包
- 开启 nodeIntergration: true
- 本地 fs 读写操作可以选择一个绝对路径
- 同名监听避免 stackoverflow
30.Element vs Node：Element.prototype instanceof Node，Node 是基类
31.hybrid 平台：PhoneGap（Cordova）、Appcelerator Titanium 和 Ionic
32.vue 清楚定时器，code review
const timer = setInterval(() =>{ // 某些定时器操作 }, 500); // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。 this.$once('hook:beforeDestroy', () => { clearInterval(timer); })
33.rem 适配，导入 rem.js
;(function(c,d){var e=document.documentElement||document.body,a="orientationchange" in window?"orientationchange":"resize",b=function(){var f=e.clientWidth;e.style.fontSize=(f>=750)?"100px":100*(f/750)+"px"};b();c.addEventListener(a,b,false)})(window);
35.经过 element-ui el-table 二次封装的组件，报错 element-ui Cannot read property 'value' of undefined"
解决：一般是 tableData 和 tableKey 没有对应上
36.安装的 npm 包跑不起来，比如 nodemon
解决：管理员权限打开 Window.PowerShell ，键入 set-executionpolicy remotesigned，选择 A
37.表单上传，后端 node mutilparty 接收
const formData = new FormData(); formData.append("hash", hash); formData.append("filename", this.container.file.name); formData.append("fileHash", this.container.hash); // 注意顺序 chunk 是 file 文件所以要放在最后 formData.append("chunk", chunk); // 假如想只传一个 formData 参数 formData.append("hash", JSON.stringify(obj)); formData.append("chunk", chunk); request({ url: "http://localhost:3000", data: formData })
38.加一个 timeout，为了防止请求频率过高，当网络或响应异常时，请求响应是非常短的，如果马上进行请求就会导致进入死轮换，甚至递归调用栈溢出。
39.常见的 MIME
{
"css": "text/css",
"gif": "image/gif",
"html": "text/html",
"ico": "image/x-icon",
"jpeg": "image/jpeg",
"jpg": "image/jpeg",
"js": "text/javascript",
"json": "application/json",
"pdf": "application/pdf",
"png": "image/png",
"svg": "image/svg+xml",
"swf": "application/x-shockwave-flash",
"tiff": "image/tiff",
"txt": "text/plain",
"wav": "audio/x-wav",
"wma": "audio/x-ms-wma",
"wmv": "video/x-ms-wmv",
"xml": "text/xml"
}