2020年08月_高先生的猫

原创横竖屏检测 orientation resize matchMedia

最近有人提需求，产品要适配横竖屏，这就令人头秃了呀。这在家办公也不让闲着点。虽然说需求提出来了，但是我们身为一个前端er，还是要有自己的想法呀，我们要统计一波数据看看到底有多少人在横屏使用我们的产品。demo测试地址方案一：orientationwindow.addEventListener("orientationchange", function(event) { // 等于0或者180竖屏 // 等于90或者-90度横屏 _this.eventValue =.

2020-08-31 10:23:32 599

原创前端安全之xss攻击

前段时间公司网页被 xss 搞了一下，微信把域名封了，通宵搞了好几天。这两天把公司好几年来的代码都改了一遍，这工作丧心病狂。什么是 xss？XSS 攻击指通过巧妙的方法注入恶意指令代码到网页，使用户加载并执行攻击者恶意制造的代码。危害有什么？跳转到广告页面，页面注入广告等等。导致公司域名被其他平台拉黑，从而使业务受损。用户的财产受到威胁，他注入的代码可以在网页中任意请求接口。注入代码http://upcdn"'></script><s...

2020-08-31 10:22:57 420 1

原创如何在Git提交大小写敏感的文件

背景下午在搞代码部署的时候，遇到一个文件大小写的问题，问题比较简单，但是也简单整理下，分享给大家。正文下午在搞代码部署的时候，线上编译失败了，看了下错误日志:#7 0.984 $ BABEL\_ENV=production webpack --config webpack/webpack.config.prod.js --colors#7 19.58 ModuleNotFoundError: Module not found: Error: Can't resolve .

2020-08-31 10:22:26 352

原创 js es6基础:Map和Set

Map和Set 都是es6新增的数据类型。1 Map是一组键值对的结构，具有极快的查找速度var m = new Map(); // 空Mapm.set('Adam', 67); // 添加新的key-valuem.set('Bob', 59);m.has('Adam'); // 是否存在key 'Adam': truem.get('Adam'); // 67m.delete('Adam'); // 删除key 'Adam'm.get('Adam'); // undefined.

2020-08-31 10:22:07 234

原创 Vue和React有什么区别与优劣？我到底应该选择哪谁？

前端开发框架从最开始的jquery时代，到后来backbone，angular1，再到现在vue和react两分天下，也才用了不到十年的光景。最开始jquery是为了解决浏览器兼容性的问题而火起来的，准确的说它只是一个库，而不能成为框架。但随着前端页面的复杂度的增加，渐渐数据驱动和mv*的思想开始形成，有了backbone，angular等先驱。再之后随着AST，Bable，webpack等技术的兴起，一个逐渐晚上的前端框架体系也随之建立了起来，如今最入门的就是vue和react了。但由于vue和r

2020-08-31 10:19:40 8200 1

原创 12种使用Vue的最佳做法

随着vuejs的使用越来越广泛，出现了几种最佳实践并逐渐成为标准。在本文中，主要分享在平时开发中一些有用资源和技巧，废话少说，我们开始吧。1.始终在v-for中使用:key在需要操纵数据时，将key属性与v-for指令一起使用可以让程序保持恒定且可预测。这是很有必要的，这样vue就可以跟踪组件状态，并对不同的元素有一个常量引用。在使用动画或vue转换时，key 非常有用。如果没有key，vue只会尝试使DOM尽可能高效。这可能意味着v-for中的元素可能会出现乱序，或者它...

2020-08-31 10:18:37 369

原创 JS if小技巧

带有if的代码简化function validation(customer) { if (!customer.email) { return error('email is require') } else if (!customer.login) { return error('login is required') } else if (!customer.name) { return error('name is required') } else {

2020-08-31 10:14:53 193

原创为什么 JS 对象内部属性遍历的顺序乱了

问题重现需求是要获取一个车型列表，并且输出到页面上按年份排序，故而接口提供的对象简化如下let obj = { '2018': { modelCode: "204313", modelName: "2018款 Vanquish 6.0L S Coupe" }, '2017': { modelCode: "202479", modelName: "2017款 Rapide 6.0L AMR" },

2020-08-31 10:13:29 3037 3

原创高频使用的Git命令

前言汇总下我在项目中高频使用的Git命令及姿势。不是入门文档，官方文档肯定比我全面，这里是结合实际业务场景输出。使用的Git版本：git version 2.24.0命令git log查看日志，常规操作，必备：# 输出概要日志，这条命令等同于# git log --pretty=oneline --abbrev-commitgit log --oneline# 指定最近几个提交可以带上 - + 数字git log --oneline -5# 提供类似G.

2020-08-31 10:12:51 239

原创你可能忽略的 async/await 问题

async/await大家肯定都用过，在处理异步操作的时候真的是很方便。如果有还不熟悉的小伙伴可以看笔者之前的文章：带你理解 async/await那今天主要讲一些在使用async/await时容易忽略和犯错的地方。一个例子下面是一个常见的vue代码片段： async initStore(query) { await this.getConfig(); await this.getUser(); await this.checkRussianCo...

2020-08-31 10:10:36 731

原创 dev、test、pre和prod是什么意思？

开发环境（dev)：开发环境是程序猿们专门用于开发的服务器，配置可以比较随意，为了开发调试方便，一般打开全部错误报告。测试环境(test)：一般是克隆一份生产环境的配置，一个程序在测试环境工作不正常，那么肯定不能把它发布到生产机上。灰度环境（pre）：灰度环境，外部用户可以访问，但是服务器配置相对低，其它和生产一样。 <很多企业将test环境作为Pre环境生产环境（prod）：是值正式提供对外服务的，一般会关掉错误报告，打开错误日志。三个环境也可以说是系统开发...

2020-08-28 14:50:00 9112

原创 js中~~和 |

~~它代表双非按位取反运算符，如果你想使用比Math.floor()更快的方法，那就是它了。需要注意，对于正数，它向下取整；对于负数，向上取整；非数字取值为0，它具体的表现形式为：~~null; // => 0~~undefined; // => 0~~Infinity; // => 0--NaN; // => 0~~0; // => 0~~{}; // => 0~~[]; .

2020-08-28 14:49:49 256

原创 js中获取窗口高度的方法

js中获取窗口高度的方法取窗口滚动条滚动高度function getScrollTop(){ var scrollTop=0; if(document.documentElement&&document.documentElement.scrollTop) { scrollTop=document.documentElement.scrollTop; } else if(document.body) { scrollTop=document.bod

2020-08-28 14:49:40 6748

原创如何启用windows10内置的Linux子系统

前言微软在10月3日举行了新品发布会，其中微软在这次发布会正式发布了Window是10的十月版，版本号是 Build 17763，版本为1809。博主怀着好奇心，决定试玩了一把。开启开发人员模式在设置 -> 更新与安全 -> 开发者选项选项中，勾选“开发人员模式”开发人员模式开启Linux子系统功能打开“控制面板”，在程序和功能 -> 启用或关闭 Windows 功能中，滚动条滑到最后，勾选“适用于 Linux 的 Windows 子系统”开启Lin

2020-08-28 14:48:44 297

原创 vue动态绑定class的几种方式

对象方法-最简单的绑定（这里的active加不加单引号都可以，以下也一样都能渲染）:class="{ 'active': isActive }"判断是否绑定一个active:class="{'active':isActive==-1}" 或者:class="{'active':isActive==index}"绑定并判断多个第一种（用逗号隔开）:class="{ 'active': isActive, 'sort': isSort }"第二种（放在data里面）//

2020-08-28 14:48:34 8028

原创 display：flex和display: inline-flex区别

flex：将对象作为弹性伸缩盒显示inline-flex：将对象作为内联块级弹性伸缩盒显示flex.main{ background-color: #0f0; display: flex;/*父div设置该属性*/ } .main>div{ width: 50px; height: 50px; border: 1px solid black; }此时没有为父元素main

2020-08-28 14:48:22 828

原创 HTML页面用CSS实现禁止选中、复制和右键

最近在写页面的时候，需要在左上角加一个logo，但是复制的时候会把这张图片一块选中。那么我们可以通过css给它设置禁止选中，代码如下：.icon{-webkit-touch-callout:none;/*iOSSafari*/-webkit-user-select:none;/*Chrome/Safari/Opera*/-khtml-user-select:none;/*Konqueror*/-moz-user-select:none;/*Firefox...

2020-08-28 14:48:01 1399

原创 HTML的＜Object＞标签怎么用？

2020-08-28 14:47:50 2636

原创节流和防抖的区别，以及如何实现

防抖触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间实现方式：每次触发事件时设置一个延迟调用方法，并且取消之前的延时调用方法缺点：如果事件在规定的时间间隔内被不断的触发，则调用方法会被不断的延迟//防抖debounce代码：function debounce(fn) { let timeout = null; // 创建一个标记用来存放定时器的返回值 return function () { // 每当用户输入的时候把前一

2020-08-28 14:47:31 550

原创 function* 生成器函数

ES6中定义了一种新的函数.用function*定义生成器函数,这种函数会返回一个generator对象.生成器函数在执行时可以暂停，然后又可以在暂停处接着执行。定义方式1.直接按照function*像一般的函数那样子声明.可以带参.function* gen(i){ yield 10; yield i+10;}2.通过GeneratorFunction进行生成,步骤比较麻烦.这边注意一个点就是GeneratorFunction对象并不是一个全局对象.它可以使用如下的方式进

2020-08-28 14:47:17 742

原创理解Javascript中的执行上下文和执行栈

正文如果你是或者想成为一名JavaScript开发者，那就必须要知道JavaScript内部是如何执行的。正确的理解JavaScript中的执行上下文和执行栈对于理解其它JavaScript概念(比如变量提升，作用域，闭包等)至关重要。正确的去理解JavaScript执行上下文和执行栈将会是你成为一名更好的JavaScript开发者。不多废话，我们现在就开始:)什么是执行上下文简单的来说，执行上下文是一种对JavaScript代码执行环境的一种抽象概念，也就是说只要有JavaScript

2020-08-26 10:47:39 229

原创 this.$router.push到当前页面，只是传入参数不同，页面不刷新的问题解决

问题在vue中使用$this.router.push()方法，如果只是传入的参数不同，会出现url地址变化了，但是页面没有重新请求数据，需要刷新一下页面才有新的数据加载。解决方式方式1：监听路由的变化在页面的watch中，监听$router的变化watch: { $route (to, from) { this.$router.go(0) } }其中this.$router.go(0)为刷新页面，但此方法可能在Safari中无法实现，还可以用js原生的方法：window.lo.

2020-08-26 10:45:50 3850

原创浏览器是多进程还是单进程?

在前端面试时，面试官经常会问：浏览器是多进程还是单进程?浏览器是多进程的，浏览器每一个 tab 标签都代表一个独立的进程（也不一定，因为多个空白 tab 标签会合并成一个进程），浏览器内核（浏览器渲染进程）属于浏览器多进程中的一种。浏览器每个进程有多个线程，主要有以下线程1）GUI 渲染线程:负责渲染页面，解析html，css构成 DOM 树等，当页面重绘或者由于某种操作引起回流都会调起该线程。和js引擎线程是互斥的，当js引擎线程在工作的时候，GUI 渲染线程会被挂起，...

2020-08-26 10:43:41 2444

原创 css表格文字不换行怎么设置？

很多时候，我们在项目开发中会出现，单元格内容由于太多导致的换行问题，让表格显得非常的丑陋。下面我们来看一下使用css设置表格内文字不换行的方法。css可以通过为表格table与td标签设置white-space:nowrap;样式使表格内文字不换行。代码如下：/*让单元格内容过多时也不换行*/#datasTablediv table td{white-space: nowrap;}white-space 属性设置如何处理元素内的空白。这个属性声明建立布局过程中如...

2020-08-26 10:43:13 1857

原创 css属性哪些可以继承？

在css的学习过程中，我们会遇到一些属性可以继承，那么，css中的继承是什么意思？有哪些属性可以继承呢？下面我们来看一下css中的属性有哪些可以继承。css中有继承性的属性：1、字体系列属性 font：组合字体 font-family：规定元素的字体系列 font-weight：设置字体的粗细 font-size：设置字体的尺寸 font-style：定义字体的风格 font-variant：设置小型大写字母的字体显示文本，这意味着所有的.

2020-08-26 10:41:51 2799 1

原创小驼峰命名规则是什么？

骆驼式命名法（Camel-Case）又称驼峰式命名法，是电脑程式编写时的一套命名规则（惯例）。正如它的名称CamelCase所表示的那样，是指混合使用大小写字母来构成变量和函数的名字。骆驼式命名法就是当变量名或函数名是由一个或多个单词连结在一起，而构成的唯一识别字时，第一个单词以小写字母开始；从第二个单词开始以后的每个单词的首字母都采用大写字母。例如：myFirstName、myLastName，这样的变量名看上去就像骆驼峰一样此起彼伏，故得名。小驼峰法变量一般用小驼峰法标识。驼峰法的.

2020-08-26 10:41:18 8683

原创 css怎么绘制箭头？

在网页制作中，很多时候都会有箭头的情况，我们可以使用css来绘制箭头，css是如何绘制箭头的呢？下面我们来看一下使用css绘制箭头的方法。我们可以使用css绘制三角形来制作箭头。一、绘制三角html代码：<div></div>css代码：.container{ width: 0; height: 0; border: 50px solid; border-color: red yellow green blue;}.

2020-08-26 10:40:45 3882

原创 JavaScript 与 Java、PHP 的比较

网站开发的实践从设计方面开始，包括客户端编程语言。大体上说，在网页设计中使用了三种语言：html，css和JavaScript。自从网站发明以来，html和css已经成为网页设计的基础，但是JavaScript被用于添加网站的动态视图。在提供吸引人的UI / UX中，JavaScript扮演着至关重要的角色。但是，有一个大的误解是关于js是Java的一部分。有时，JavaScript也会被比较于服务器语言php。最好运行JavaScript与java和JavaScript与php的比较。这会让你认识

2020-08-26 10:40:04 361

空空如也

空空如也