常见前端代码整理

水平居中

行内元素

.parent {
  text-align: center;
}

块级元素（注意子元素要设置宽度）

.parent {
  text-align: center;
}
.child {
  width: 100px;
  margin: auto;
  border: 1px solid blue;
}

垂直居中

张鑫旭 绝对定位 + margin:auto

.parent {
  position: relative;
  height: 200px;
}
.child {
  width: 80px;
  height: 40px;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

table 布局

.parent {
  display: table;
  width: 80px;
  height: 40px;
}
.child {
  display: table-cell;
  vertical-align: middle;
}

多行文字 table

/* 多行文字 */
.parent {
  width: 400px;
  height: 300px;
  display: table-cell;
  vertical-align: middle;
  border: 1px solid red;
}
.child {
  display: inline-block;
  vertical-align: middle;
  background: blue;
}

不知道自己高度和父容器高度的情况下, 利用绝对定位只需要以下三行：

parent {
  position: relative;
}

child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Flex

parent{
    display:flex;/*Flex布局*/
    display: -webkit-flex; /* Safari */
    align-items:center;/*指定垂直居中*
    }

块级元素：绝对定位 + transform

.parent {
  position: relative;
  height: 200px;
}
.child {
  width: 80px;
  height: 40px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: blue;
}

---

图片超出部分居中裁剪

img {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 60%;
  width: auto;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

获取屏幕宽高

document.documentElement.clientWidth;
document.documentElement.clientHeight;

文字图片同一行居中

vertical-align: middle;
//给文字添加

Mac命令行本次都使用最高权限

sudo -i

查看本机 ip

ipconfig getifaddr en0

Nginx 某些图片 403

user root owner;

原生 dom 操作父子节点

var a = document.getElementById("dom");
del_space(a); //清理空格
var b = a.childNodes; //获取a的全部子节点；
var c = a.parentNode; //获取a的父节点；
var d = a.nextSibling; //获取a的下一个兄弟节点
var e = a.previousSibling; //获取a的上一个兄弟节点
var f = a.firstChild; //获取a的第一个子节点
var g = a.lastChild; //获取a的最后一个子节点

背景图片居中

background-image: url(xxx.jpg);
background-size: cover;
background-position: center center;

首行缩进还有一个功能是给输入框的内容和提示一个左边距

text-indent: 46px;

文字强制不换行

white-space:nowrap;

卡片悬浮+圆角

box-shadow: 0 4px 3px -3px rgba(0, 0, 0, 0.2), 0 3px 3px 0 rgba(0, 0, 0, 0.14),
  0 3px 5px 0 rgba(0, 0, 0, 0.12);

box-shadow:0 3px 1px -2px rgba(0, 0, 0, 0.2),0 2px 2px 0 rgba(0, 0, 0, 0.14),0 1px 5px 0 rgba(0, 0, 0, 0.12)

box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12)

box-shadow: 0 1px 1px 0 rgba(60,64,67,.08), 0 1px 3px 1px rgba(60,64,67,.16);

box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08);

box-shadow: 0 5px 10px rgba(0,0,0,0.16);

box-shadow: 0 2px 10px 0 rgba(0,0,0,.16), 0 2px 5px 0 rgba(0,0,0,.26);

box-shadow: 0 0 20px rgba(0,0,0,.5);
 box-shadow: rgba(0,0,0,0.188235) 0px 0px 50px 0px;

box-shadow: 0 0.5rem 2rem 0 #dae0eb;
box-shadow: 0 0.5rem 2rem 0 #dae0eb;


    border-top-right-radius: 1rem;
    border-bottom-left-radius: 1rem;
/* 点击后的阴影 */
box-shadow: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12);

box-shadow: 0 0 30px rgba(0,0,0,.8);



box-shadow: 5px 5px 25px 0 rgba(46,61,73,.2);
box-shadow: 2px 4px 8px 0 rgba(46,61,73,.2);


box-shadow: 0 12px 20px -10px rgba(76,175,80,.28),0 4px 20px 0 rgba(0,0,0,.12),0 7px 8px -5px rgba(76,175,80,.2)!important;


/* 内阴影 */
box-shadow: inset 2px 0 4px #000;

排序

arr = arr.sort(function(a, b) {
   return b.time - a.time;
})

截取字符串

let str = "0123456789";

alert(str.substring(5));------------"56789"
alert(str.substring(10));-----------""
alert(str.substring(12));-----------""
alert(str.substring(-5));-----------"0123456789"
alert(str.substring(-10));----------"0123456789"
alert(str.substring(-12));----------"0123456789"
alert(str.substring(0,5));----------"01234"
alert(str.substring(0,10));---------"0123456789"
alert(str.substring(0,12));---------"0123456789"
alert(str.substring(2,0));----------"01"
alert(str.substring(2,2));----------""
alert(str.substring(2,5));----------"234"
alert(str.substring(2,12));---------"23456789"
alert(str.substring(2,-2));---------"01"
alert(str.substring(-1,5));---------"01234"
alert(str.substring(-1,-5));--------""
alert(str.substr(0));---------------"0123456789"
alert(str.substr(5));---------------"56789"
alert(str.substr(10));--------------""
alert(str.substr(12));--------------""
alert(str.substr(-5));--------------"0123456789"
alert(str.substr(-10));-------------"0123456789"
alert(str.substr(-12));-------------"0123456789"
alert(str.substr(0,5));-------------"01234"
alert(str.substr(0,10));------------"0123456789"
alert(str.substr(0,12));------------"0123456789"
alert(str.substr(2,0));-------------""
alert(str.substr(2,2));-------------"23"
alert(str.substr(2,5));-------------"23456"

自动换行

p{
  word-wrap: break-word;
  word-break: break-all;
  overflow: hidden;
}

老版本浏览器兼容flex

div{
   display: -webkit-flex;
   -webkit-justify-content: center;
}

json相关

JSON.stringify  //把一个对象转换成json字符串
JSON.parse      //把一个json字符串解析成对象。  

输入框只能是数字和小数点

<input v-model="item.planTime"  
onchange="if(/[^d.]/.test(this.value)){alert('只能输入数字');this.value='';}"
onKeyUp="value=value.replace(/D/g,'')">

取消掉ios上alert的头部网址信息

  window.alert = function(name) {
            var iframe = document.createElement("IFRAME");
            iframe.style.display = "none";
            iframe.setAttribute("src", 'data:text/plain,');
            document.documentElement.appendChild(iframe);
            window.frames[0].window.alert(name);
            iframe.parentNode.removeChild(iframe);
        }

Git Branch Checkout&Merge

开一个新分支改bug先 checkout -b 分支名
Git push origin 分支名
然后git branch
Git branch -u origin/分支名
写完代码，push之后切回原来分支
Git merge origin/分支名

删除node modules文件夹

$ rm -rf node_modules

创建本地存储与读取

sessionStorage.getItem("key")
se 大专栏  常见前端代码整理ssionStorage.setItem('key',valus)

升级node

清楚node缓存；
$  sudo npm cache clean -f  

安装node版本管理工具'n';

$  sudo npm install n -g

使用版本管理工具安装指定node或者升级到最新node版本；

$  sudo n stable  （安装node最新版本）

升级yarn

yarn self-update

升级Vue

npm install -g @vue/cli
# OR
yarn global add @vue/cli

升级npm

npm install -g npm

安装SASS

npm install --save-dev sass-loader
//sass-loader依赖于node-sass
npm install --save-dev node-sass

IOS时间适配

.replace(/-/g, "/").replace(/T/g, " ")
//针对公司Java后台给我返回的时间数据

---

下图是在Mac sa3feri浏览器中我测试的结果（在这部分和IOS上是相同的）
我们可以看到第二种new Date结果是正确的，但是后台给我返回的是第四种，所以我们通过上述的正则来转换

Vue延迟执行

 setTimeout(() => {

 },5000);

 //使用箭头函数在内部可以是用this

VSCode几个小众提高效率的键

Ctl + H ···············································替换

Ctl + Shift + Alt + ↑ / ↓ ················向上 / 下复制当前行

Alt + ↑ / ↓ ··········································向上 / 下移动当前行

Ctl + Alt + ↑ / ↓································向上 / 下扩展行光标

Ctl + D································选中文字相同的项

IOS 12点击输入框偏移bug解决方案

// 兼容部分ios手机input失焦后页面上移问题
(function() {
 let myFunction
 let isWXAndIos = isWeiXinAndIos()
 if (isWXAndIos) { // 既是微信浏览器 又是ios============（因为查到只有在微信环境下，ios手机上才会出现input失去焦点的时候页面被顶起）
   document.body.addEventListener('focusin', () => { // 软键盘弹起事件
     clearTimeout(myFunction)
   })
   document.body.addEventListener('focusout', () => { // 软键盘关闭事件
     clearTimeout(myFunction)
     myFunction = setTimeout(function() {
       window.scrollTo({top: 0, left: 0, behavior: 'smooth'})// 重点  =======当键盘收起的时候让页面回到原始位置
     }, 200)
   })
 }
})()

function isWeiXinAndIos() {
 // window.navigator.userAgent属性包含了浏览器类型、版本、操作系统类型、浏览器引擎类型等信息，这个属性可以用来判断浏览器类型
 let ua = '' + window.navigator.userAgent.toLowerCase()
 // 通过正则表达式匹配ua中是否含有MicroMessenger字符串且是IOS系统
 let isWeixin = /MicroMessenger/i.test(ua) // 是在微信浏览器
 let isIos = /(i[^;]+;( U;)? CPU.+Mac OS X/i.test(ua) // 是IOS系统
 return isWeixin && isIos
}

Vue-Cli 3.0 配置

// vue.config.js 配置说明
// 这里只列一部分，具体配置惨考文档啊
module.exports = {
   // baseUrl  type:{string} default:'/'
   // 将部署应用程序的基本URL
   // 将部署应用程序的基本URL。
   // 默认情况下，Vue CLI假设您的应用程序将部署在域的根目录下。
   // https://www.my-app.com/。如果应用程序部署在子路径上，则需要使用此选项指定子路径。例如，如果您的应用程序部署在https://www.foobar.com/my-app/，集baseUrl到'/my-app/'.

   baseUrl: process.env.NODE_ENV === 'production' ? '/online/' : '/',

   // outputDir: 在npm run build时 生成文件的目录 type:string, default:'dist'

   // outputDir: 'dist',

   // pages:{ type:Object,Default:undfind }
   /*
     构建多页面模式的应用程序.每个“页面”都应该有一个相应的JavaScript条目文件。该值应该是一
     个对象，其中键是条目的名称，而该值要么是指定其条目、模板和文件名的对象，要么是指定其条目
     的字符串，
     注意：请保证pages里配置的路径和文件名 在你的文档目录都存在 否则启动服务会报错的
   */
   // pages: {
   // index: {
   // entry for the page
   // entry: 'src/index/main.js',
   // the source template
   // template: 'public/index.html',
   // output as dist/index.html
   // filename: 'index.html'
   // },
   // when using the entry-only string format,
   // template is inferred to be `public/subpage.html`
   // and falls back to `public/index.html` if not found.
   // Output filename is inferred to be `subpage.html`.
   // subpage: 'src/subpage/main.js'
   // },

   //   lintOnSave：{ type:Boolean default:true } 问你是否使用eslint
   lintOnSave: true,
   // productionSourceMap：{ type:Bollean,default:true } 生产源映射
   // 如果您不需要生产时的源映射，那么将此设置为false可以加速生产构建
   productionSourceMap: false,
   // devServer:{type:Object} 3个属性host,port,https
   // 它支持webPack-dev-server的所有选项

   devServer: {
       port: 8080, // 端口号
       host: 'localhost',
       https: false, // https:{type:Boolean}
       open: true, //配置自动启动浏览器
       // proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理
       proxy: {
           '/api': {
               target: 'http://192.168.2.61:8090',
               ws: true,
               changeOrigin: true
           },
           '/foo': {
               target: '<other_url>'
           }
       },  // 配置多个代理
   }
}

作者：WangYatao
链接：https://www.jianshu.com/p/d29e6c834f05

在Vue生命周期里操作DOM元素

//这段函数要卸载axios成功的回调函数里
this.$nextTick(() => {
               //这里写
                     });

Vue路由后到顶部

router.beforeEach((to, from, next) => {
  document.body.scrollTop = 0;
  next()
});

vue静态

放在static中的 文件 要用绝对路径引用，assets中的要“./”，webpack打包对于assets中的当做模块来处理

循环删除数组中的某一项时

一个简单的需求是，在遍历一个数组时，移除指定的项。
下列代码是不能正常工作的：

var elements = [1, 5, 5, 3, 5, 2, 4];
for(var i = 0; i < elements.length; i++){
    if(elements[i] == 5){
        elements.splice(i, 1);
    }
}

不能正常执行的问题是，element.length是在for循环开始时就确定的snapshot，不会随着splice操作而改变。

正确的写法是：

var elements = [1, 5, 5, 3, 5, 2, 4];
for(var i = elements.length -1; i >= 0 ; i--){
    if(elements[i] == 5){
        elements.splice(i, 1);
    }
}

或者

        var arr = [1,2,2,3,4,5];
        var i = arr.length;
        while(i--){
            console.log(i+"="+arr[i]);
            if(arr[i]==2){
                arr.splice(i,1);
            }
        }

或

   var arr = [1,2,2,3,4,5];
        var len = arr.length;
        for(var i=0;i<len;i++){
            //打印数组中的情况，便于跟踪数组中数据的变化
            console.log(i+"="+arr[i]);
            //删除掉所有为2的元素
            if(arr[i]==2){
                //注意对比这行代码：删除元素后调整i的值
                arr.splice(i--,1);
            }
        }
        console.log(arr);

移动端遮罩层，防止影响下面的div

<div @touchmove.prevent></div>

Android某些浏览器overflow：hidden失效

尽量不要相对于body进行定位，而是给他加一个父元素，
然后相对于父元素进行定位（一般给父元素添加position：relative）,
再给父元素加上overflow:hidden 或 overflow-x：hidden 或 overflow-y：hidden来解决。

来源：https://www.cnblogs.com/lijianming180/p/12046799.html