比较水的一些问题总结 #3
Comments
webpack中的path和publicPath的区别webpack的output下面有两个路径，一个path，一个是publicPath，其实区别还是很大的，首先path这个不需要特别多的解释，就是编译输出的项目路径，如下图所示。但是实际放置到服务器中，不一定是服务器的根目录下的dist文件夹，有可能是放置在服务器的wwww文件夹下面，这时候就需要我们设置下publicPath文件夹的输出路径。 |
如何生成博客或文档中的目录结构树平时在写readme.md的时候，可能会使用树状的目录结构，比如
|
安装在本地的node_modules中的模块怎么运行比如 快速删除node_modules文件夹安装 |
Terminal快速移动光标
vim常用快捷键常用命令
cmd数据库连接mysql -u用户名 -p密码 -h远程数据库IP地址 -P端口 -D数据库名 mac 修改host
nginx命令停止服务： 启动NFS服务
PHP 修改代码之后，页面不改变这个跟php.ini中开启了opcache有关系，可以避免反复编译带来的性能消耗。所以开发状态下关闭即可，但是修改完ini文件之后，记得重启php-fpm和nginx tar 压缩命令Ubuntu创建映射修改pac.txt， ss 自定义规则书写自定义代理规则的设置语法规则如下，记得重启：
下载m3u8直播流的视频
|
使用flex实现左侧文字自适应，右侧文字长度省略号需求：在一行中有两段文字，左侧是昵称，右侧为评论，昵称正常展示，右侧评论吃掉剩余长度，超出就省略号 <div class="card-comment">
<div class="nickname">
<div class="nickname-ellipsis">{{comment.nickname}}</view>
</div>
<div class="comment">{{comment.comment}}</view>
</div>.card-comment {
font-size: 0.26rem;
font-family: PingFang-SC-Regular ;
display: flex;
overflow: hidden;
padding: 0 0.3rem;
}
.card-comment .nickname {
color: #000000;
max-width: 5rem;
}
.card-comment .nickname-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.card-comment .comment {
color: #999999;
margin-left: 0.2rem;
flex: 1 1 auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 2rem;
}css动画抖动解决在使用animation动画时，页面出现抖动的问题 css优先级优先级： flex:1 导致子元素overflow: hidden; text-overflow: ellipsis;失效的问题解决方案：将flex:1元素设置overflow: hidden;或者min-width: 0;即可，这里注意一点 如果是flex:1元素N层的嵌套，那么这N层flex:1元素都需要设置。 font-size：0display：inline-block的元素之间会有一个字符的间隙，这个间隙导致了最后一个会掉下来。 IE10中flex导致文本不换行<div class="title">
<span>用户表测试_动态汇总</span>
<label>某个checkbox</label>
</div>这个要实现span和label的flex布局，然后space-between，在火狐和Chrome和IE11中可以完美显示，只要加上如下代码： .title {
display: flex;
justify-content: space-between;
}但是在IE10中会出现span中文本过长但不折行的现象。 span{
display: block;
max-width: 100%;
flex-shrink: 1;
}CSS垂直水平居中1.使用flex .box {//外层元素
display: flex;
align-items: center; //垂直居中
justify-content: center;//水平居中
}2.还有一种外层flex，内层margin:auto .box {//外层元素
width: 200px;
height: 200px;
display: flex;
}
.center {//内层元素
width: 100px;
height: 100px;
margin: auto;
}3.绝对定位（不需知道内层/外层元素的宽和高） .center {//内层
position:absolute;
left:50%;
top:50%;
transform: translate(-50%,-50%);
}4.绝对定位（不需知道内层/外层元素的宽和高，需设置内层的宽高） .box {//外层
width: 200px;
height: 200px;
background:#fff;
position:relative
}
.center{//内层
width:100px;
height:100px;
left:0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
position:absolute;
background:#000;
}5.绝对定位（需知道内层的宽高） .center{ //内层
width:100px;
height:100px;
position: absolute;
left: 50%;
top:50%;
margin-left:-50px; //内层元素的一半
margin-top: -50px;
}6.绝对定位（需要知道外层/内层元素宽和高） .center {//内层
position: absolute;
width: 100px;
height: 100px;
left: 50px;//外层元素一半减去center元素一半
top: 50px;
}CSS中z-index不起作用这种情况发生的条件有三个： less中calc计算异常问题.flow-node-modal .ivu-modal {
@marginVal : 20px; //这里使用了变量
margin: @marginVal;
top:0;
.ivu-modal-content {
height: calc(~"100vh - "@marginVal*2); //注意！，这里的写法，一般的写法less解析calc会有问题
}
}sass的写法为： 关于text-align:center和vertical-align:middletext-align具有继承性，给祖先元素添加，即可实现内部行内元素的水平居中； css中的transition与animation拜读了大漠的两篇文章写得还是非常系统的： 实现卡片自适应布局一种常见需求：有n个宽度相同的卡片，需要间距相等，从左到右铺满内容区域，直接用flex的space-between会导致，不满一行的数量卡片，布局异常。 /**
* 填充N个空dom，来解决flex中space-between布局的问题，
* 宽度为卡片宽度，N为填满一行的数量
* @returns
*/
const getEmptyDom = () => {
let emptyFiles = []
for (let i = 0; i < EmptyFilesLength; i++) {
emptyFiles.push(
<div key={i} className={styles.flexEmpty} />
)
}
return emptyFiles
}
<div className={styles.cardContent}>
<Card size='small' bordered={false} title='Inner Card title' className={styles.innerCard} >
Inner Card content
</Card>
<Card size='small' bordered={false} title='Inner Card title' className={styles.innerCard}>
Inner Card content
</Card>
{
// 填充N个空dom，来解决flex中space-between布局的问题
getEmptyDom()
}
</div>.cardContent{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
align-content: flex-start;
.flexEmpty{
width: 33%;
border: 1px solid transparent;
margin: 0;
visibility: hidden;
height: 0 !important;
}
.innerCard{
width: 33%;
margin-bottom: 10px;
}
} |
window.on与addevent区别 window.addEventListener('click', ()=>{
console.log(1)
}
)
window.addEventListener('click', ()=>{
console.log(2)
}
)
window.onclick = ()=>{
console.log(3)
}
window.onclick = ()=>{
console.log(4)
}
window.click();//1 2 4简而言之，on会进行覆盖，而addEventListener会进行无限次添加，不会覆盖。 var a = [{id:1,name:1},{id:2,name:2},{id:3,name:4}];
var result = a.find(function(a,b,c){
if(a.id == 3){
return a;
}
});
console.info(result);
result = a.filter(function(a, b, c){
if(a.id == 2){
return a;
}
});
console.info(result[0]);
a.forEach(function(a, b, c){
if(a.id == 3){
result = a;
return;
}
});
console.info(result);
a.map(function(a,b,c){
if(a.id == 2){
result = a;
return;
}
});
console.log(result);
a.some(function(a){
if(a.id == 3){
result = a;
return;
}
});
console.log(result);
var b = a.entries(),
c;
while (!(c = b.next()).done) {
if (c.id == 3) {
result = c;
break;
}
}
console.log(result); |
git SSH配置1.首先查看ssh是否存在 看一下有没有id_rsa和id_rsa.pub(或者是id_dsa和id_dsa.pub之类成对的文件)，有 .pub 后缀的文件就是公钥，另一个文件则是密钥。 git 配置多个本地SSH运行命令创建config文件 根据项目进行配置 测试是否成功 git放弃当前工作区更改放弃所有更改： git项目上传至两个git工程中git remote add origin2别名 git@github.com:xxxxxx.git 在本地新建分支并推送到远程git checkout -b test git常用的分支命令git 命令别名git撤销push后的代码第一步: git log --pretty=oneline 查看当前提交的日志 重置你的本地分支以匹配远程分支git reset --hard origin/main |
npm install的异常错误Unexpected end of JSON input while parsing near ' :
总结下来，多为网络环境导致的一些包依赖并没有下载成功，真正解决方案为： |
chrome 调试console点开时数据不对value below was evaluated just now错误：console控制台输出会有惰性问题，在查看对象、数组这种引用型变量时，会出现控制台输出与运行时的值不正确的问题 var s = ["hi"];
console.log(s);
s[0] = "bye";
console.log(s);将以上语句在console控制台输出，会发现展开之后不同的结果，原因大致为控制台输出的堆区对应的地址的数据，会导致引用类型的变量，在展开的时候会出现执行后的值，如图： |
iView按需加载以及iview is not defined按照官网的配置babel 注意main.js修改如下，不然会有iview is not defined的错误信息： import Vue from 'vue';
import VueRouter from 'vue-router';
import App from 'components/app.vue';
import Routers from './router.js';
// import iView from 'iview'; <=注释掉
import 'iview/dist/styles/iview.css'; //<=保留
Vue.use(VueRouter);
// Vue.use(iView);<=注释掉
//<=在此页面增加或Vue页面中添加均可
import {Input,Dropdown } from 'iview';
Vue.component('Input', Input);
//<=增加
// The routing configuration
const RouterConfig = {
routes: Routers
};
const router = new VueRouter(RouterConfig);
new Vue({
el: '#app',
router: router,
render: h => h(App)
});
iview按需加载之前后比较，明显降低 vue懒加载
在webpack的dev配置文件中配置一下即可
然后 这样，我们可以通过该工具来分析哪个文件是最大的来有目的的优化 |
路径中的无斜线 与 ./ 与 / 的区别如 假如index.html在template文件夹下的话，访问index.html为127.0.0.1:80/template/index.html |
使用fiddler监听Https和手持端请求
charles抓包安卓和笔记本
|
关于webpack下，本地IP无法访问localhost项目的问题解决方案：在package.json中的dev指令中加入 nodejs 获取本机IPfunction getIPAdress(){
var interfaces = require('os').networkInterfaces();
for(var devName in interfaces){
var iface = interfaces[devName];
for(var i=0;i<iface.length;i++){
var alias = iface[i];
if(alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal){
return alias.address;
}
}
}
} |
echarts 绑定click事件//this.inventoryChart为echarts实例
//this.option 为echats实例的配置项
//给本页面的echart添加click事件
bindEventForChart() {
//获取echats的canvas区域，并绑定click事件
this.inventoryChart.getZr().on("click", params => {
const pointInPixel = [params.offsetX, params.offsetY];
if (this.inventoryChart.containPixel("grid", pointInPixel)) {
//将点击区域的横轴像素值转化成x轴index
let xIndex = this.inventoryChart.convertFromPixel(
{ seriesIndex: 0 },
[params.offsetX, params.offsetY]
)[0];
//将x轴坐标index，转化成对应像素值
let offsetX = this.inventoryChart.convertToPixel(
{ xAxisIndex: 0 },
this.option.xAxis.data[xIndex].value
);
//处理点击事件的逻辑
this.handleEchartClickEvent(xIndex, offsetX);
}
});
}, |
think php中打印sql语句的方法
|
使用命令行 快速启动vscode 打开项目方法有很多可以搜下，这里说一种比较简单的命令：
|
在Linux系统中创建shell脚本
使用nodejs创建github的webhook如果想实现github上push代码，页面实时更新，就需要借助webhook这个功能，它会提供代码更新的接口，比如push，这样我们就可以在服务器端进行监听，然后执行相应的命令。
查看log |
nginx服务器屏蔽ip地址访问，并可以通过域名访问
保存，重启nginx |
Mac卸载node验证卸载： |
VScode 插件VS Code Counter 统计项目代码行数，区分注释、空行以及有效代码行，只需要安装后，右击文件夹即可 |
开源项目的徽标什么是徽标？如 徽标生成的网址一般用如下网站： |
如何在chrome的devtools中复制jsonIf the right-click -> copy is not available you could try: |
关于进程与线程有一个有趣的回答：
|
js中Object的属性遍历中key的顺序这里直接抛出结论：Object的属性遍历顺序如果key是数字会按照数字先排序，字母或数字加字母类的key则按照原有顺序输出。 |
前端使用CDN的资源分离的访问流程图
|
git提交流程规范
|
package.json版本号 |
umd、cjs、cmd、amd
|
lodash一些方法注意问题_.isEmpty(0) // true
const aaa = {a: null}
_.get(aaa,'a', '-') // null |
获取url中的?号后的参数
防抖与截流
关于防抖(debounce) ：在事件触发后的n秒之后，再去执行真正需要执行的函数，如果在这n秒之内事件又被触发，则重新开始计时。常见的操作就是搜索，中间不断的输入，我们都可以忽略，只获取最后停止输入的时候，才去请求后端。。
节流(throttling)：规定好一个单位时间，触发函数一次。如果在这个单位时间内触发多次函数的话，只有一次是可被执行的。想执行多次的话，只能等到下一个周期里。常见的操作比如滚动事件，每隔n毫秒，我们去请求，或者拖拽，每隔n毫秒改变dom的位置。还比如resize窗口。
参考：
el.dataset
el.dataset可以获取DOM元素中绑定的data-的属性值，比如
el.dataset-index 即为index的值
JavaScript中 ‘+’ 号
有时阅读源码，会在代码中看到在某个元素前使用 ‘+’ 号，这个操作是将该元素转为Number类型，如果转换失败，那么将得到 NaN。
所以 +new Date 将会调用 Date.prototype 上的 valueOf 方法，而根据 MDN ，Date.prototype.value 方法等同于 Date.prototype.getTime()。所以一下代码效果相同：
JS中的'~'号
~是位非运算符，
~-1 === 0表示true；所以这个符号常用来搭配 indexOf 方法一起使用，比如：
Cannot read property 'forEach' of null/undefined
??有效的防止属性的值如果为空字符串或false或0箭头函数
箭头函数的this其实就是包裹它的第一个非箭头函数的函数的this值。因为箭头函数内部没有this。
如果对一些函数比如类内部指向有疑问，Babel转ECMA5看下即可清晰看出箭头函数内this指向。
构造函数
在JavaScript构造函数中：如果return值类型，那么对构造函数没有影响，实例化对象返回对象；如果return引用类型（数组，函数，对象），那么实例化对象就会返回该引用类型；
The text was updated successfully, but these errors were encountered: