Front-End严黑C的博客

原创 服务端渲染

SSR的优势1. 更利于SEO。不同爬虫工作原理类似，只会爬取源码，不会执行网站的任何脚本（Google除外，据说Googlebot可以运行javaScript）。使用了React或者其它MVVM框架之后，页面大多数DOM元素都是在客户端根据js动态生成，可供爬虫抓取分析的内容大大减少(如图一)。另外，浏览器爬虫不会等待我们的数据完成之后再去抓取我们的页面数据。服务端渲染返回给客户端的是已...

原创 移动端小技巧

1.input 点击出现键盘 blur键盘收起 发生重排 导致点击失位<input @blur="blurFun" />blurFun(){setTimeout(()=>{window.scrollTo(0, 0);},0);}setTimeout(function(){ var scrollHeight = document...

原创 移动端自适应css

1.flexible.js2.postcss后期再加详解

原创 Vue文档再研-感悟

1.只有当实例被创建时就已经存在于data中的属性才是响应式的。2.计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要message还没有发生改变，多次访问reversedMessage计算属性会立即返回之前的计算结果，而不必再次执行函数。3.JS操作真实DOM的代价！浏览器渲染引擎工作流程都差不多，大致分为5步，创建DO...

原创 img和div之间有间隙解决

div 中 存在 img标签，由于img标签的display:inline-block属性。 display:inline-block布局的元素在chrome下会出现几像素的间隙，原因是因为我们在编辑器里写代码的时候，同级别的标签不写在同一 行以保持代码的整齐可读性，即inline-block布局的元素在编辑器里不在同一行，即存在换行符，因此这就是著名的inline-blo...

原创 移动端点击穿透修复

点透发生的理由:当手指触摸到屏幕的时候，系统生成两个事件，一个是touch 一个是click，touch先执行，touch执行完成后，A从文档树上面消失了，而且由于移动端click还有延迟200-300ms的关系，当系统要触发click的时候，发现在用户点击的位置上面，目前离用户最近的元素是B，所以就直接把click事件作用在B元素上面了.系统提供了先触发的touch事件去取消系统生成的cl...

原创 H5下拉分页加载

import InfiniteLoading from 'vue-infinite-loading';components: {InfiniteLoading},<infinite-loading direction="bottom" spinner="waveDots" :distance="100" @infinite="infiniteHandler"&gt...

原创 charles 抓包要点

Charles 主要的功能包括：1）截取 Http 和 Https 网络封包。2）支持重发网络请求，方便后端调试。3）支持修改网络请求参数。4）支持网络请求的截获并动态修改。5）支持模拟慢速网络。1.Charles安装与配置：1.1.打开浏览器访问Charles官网https://www.charlesproxy.com/，下载相应系统的Charles安装包，然后...

原创 z-tree滚动条自动定位

import { TreeComponent } from '../../../../assets/libs/paletxUI/tree/tree.component';@ViewChild(TreeComponent) treeComponent: TreeComponent;setTimeout(()=>{let treeHeight = $("#my-tree div...

原创 js单线程

浏览器目前最为流行的浏览器为：Chrome，IE，Safari，FireFox，Opera。浏览器的内核是多线程的。一个浏览器通常由以下几个常驻的线程：渲染引擎线程：顾名思义，该线程负责页面的渲染 JS引擎线程：负责JS的解析和执行 定时触发器线程：处理定时事件，比如setTimeout, setInterval 事件触发线程：处理DOM事件 异步http请求线程：处理http...

原创 宏任务与微任务

什么是宏任务、微任务先来了通俗易懂的例子：去银行办理业务的人就是一个个宏任务，当宏任务P1在柜台办理业务时，其它任务都需等待，当一个宏任务P1办理业务结束时，柜台职员会询问他还有没有其它微任务，如果他还有其他业务，则其他宏任务都需等待。就是微任务是在宏任务之前执行。宏任务、微任务有哪些宏任务包括：script(整体代码), setTimeout, setInterval, setImme...

原创 阻止H5左右滑动，保留上下滑动

let startX,startY;document.addEventListener("touchstart",function(e){ startX = e.touches[0].pageX; startY = e.touches[0].pageY;});document.addEventListener("touchmove",function(e){ ...

原创 日历列表

原创 Vue、GitLab、Jenkins、Nginx实现自动打包发布上线

将gitlab上的代码下载到了本地电脑上，且进行了代码压缩，压缩完成后发布压缩包到自己的阿里服务器上，阿里服务器成功接收到压缩包后，解压放到了服务器指定目录，最后通过nginx反向代理实现了自动化部署。具体步骤如下：1.Vue+GitLab：（研发阶段）用vue编码实现业务迭代 使用webpack进行前端构建 将最新的代码和构建后的dist目录共同组成的项目推送到远程仓库gitla...

原创 v-for为什么要加key

可以简单的这样理解：加了key(一定要具有唯一性) id的checkbox跟内容进行了一个关联。是我们想达到的效果查过相关文档，图例说明很清晰。vue和react的虚拟DOM的Diff算法大致相同，其核心是基于两个简单的假设首先讲一下diff算法的处理方法，对操作前后的dom树同一层的节点进行对比，一层一层对比，如下图：当某一层有很多相同的节点时，也就是列表节点时，D...

原创 Unable to preventDefault inside passive event listener

那么如何解决这个问题呢？不让控制台提示，而且 preventDefault() 有效果呢？两个方案：1、注册处理函数时，用如下方式，明确声明为不是被动的window.addEventListener('touchmove', func, { passive: false })2、应用 CSS 属性touch-action: none;这样任何触摸事件都不会产生默认行为，但是 touc...

原创 微信分享和埋点

wxShare(info) {let data = {};data.title = info.title;data.desc = info.desc;data.link = `http://${window.location.host}/auth?${decodeURIComponent(getParam('state'))}`; 必须+httpdata.imgUrl ="h...

原创 移动端阻止遮罩层下面的body滑动

<div v-if="type === 5" :class="isOpen ? 'zanShare' : 'zanShare no'" @scroll.prevent @touchmove.prevent > <div class="zanContent"> <div class="zanContent_img"></div>...

原创 eslint-rules

"off"或者0 //关闭规则关闭"warn"或者1 //在打开的规则作为警告（不影响退出代码）"error"或者2 //把规则作为一个错误（退出代码触发时为1）"no-alert": 0,//禁止使用alert confirm prompt"no-array-constructor": 2,//禁止使用数组构造器"no-bitwise": 0,//禁止使用...

原创 CSRF（跨站请求伪造）、XSS（跨站脚本攻击）、Click Jacking（点击劫持）的理解与处理

一、xss跨站脚本攻击(Cross Site Scripting)如果网站带有评论功能并将评论内容直接存到服务器中，那么显示评论的时候就可能遭到之前恶意用户恶意评论的攻击原理主要是通过在评论中输入html标签，如标签，就相当于往你的网页中嵌入了一段脚本理论上，所有可输入的地方没有对输入数据进行处理的话，都会存在xss漏洞例如在评论框中输入：&lt;script&gt;  while...

原创 跨域

1.为什么src可以不受浏览器同源影响在浏览器中，对于标签 &lt;script&gt;、&lt;img&gt;、&lt;iframe&gt;、&lt;link&gt; 等标签都可以跨域加载资源，而不受同源策略的限制。这些带有“src”属性的标签每次加载的时候，实际上是由浏览器发起一个get请求。不同于XMLHttpRequest的是，通过src属性加载的资源，浏览器是限制了javascri...

原创 angular2

Angular1.      Angular简介Angular简称Angular，作为Angular.js1.x的升级，其表现了以下四点优势：a. 改用组件式开发；b. 性能更好（渲染更快、变化监测效率更高）；c. 优先为移动应用设计；d. 更加贴合未来标准（es6/es7，WebComponent）。 2.     开发环境：a.       Node.js;...

转载 前端工程师进阶

《前端工程师进阶》 HTML先看《HTML & CSS: Design and Build Websites》1-9章，然后《HTML5: The Missing Manual》1-4章。 CSS先看《CSS: The Missing Manual》，然后《CSS权威指南》 javascript先看《javascript高级程序设计》，然后《javascript权威指南》 HTTP

转载 AMD/CMD/CommonJs 模块化区别？

知道JS有模块化开发的说法，也偶尔听过requireJs,AMD,CMD等等名字，甚至使用node的时候，还用过require之类的方法，但是对这些一直没有一个明确的认识和概念。想必这就是许多新手刚接触这方面知识时的一个普遍状态。其实仅仅做一些基础的活儿的时候，并不需要对它们有太多的了解，知道怎么用就行了，管他是什么理念，是什么实现呢。于是人就懒下来了。终于有一天，下定决心，一定要

原创 setInterval在Vue2.0路由和@import导入css导致页面间css覆盖的bug修复

1.由于setInterval函数属于全局对象window,此页面的定时器在路由页面，也会执行，采取钩子函数mounted运行定时器，beforeDestroy去除定时器。2.由于@import需要页面网页完全载入以后加载，不同于link和style导入，即使写了scoped也没有什么效果，路由页面如果设有相同的class会相互覆盖样式，故如果样式有相同class名字，采用style直接写即可。

原创 Vue2.0路由动态路径的绑定

<template> <div class="title" name="list"> <!--通过v-for循环打印,:to进行绑定router-link的路径，然后结合router-link-active给激活a加样式--> <router-link :to="{ path: bar}" v-for="(bar, inde...

原创 脚手架vue-cli构建vue项目

脚手架vue-cli构建vue项目参考资料:Vue2.0 新手完全填坑攻略—从环境搭建到发布1.Node.js安装https://nodejs.org/en/download/2.安装vue-cli注意：如果安装淘宝镜像（cnpm）： $ npm install -g cnpm --registry=https://registry.npm.taobao.org...

转载 前端实时可视化开发工具

前端实时可视化开发工具：liveStyle、liveReload、Broswer-Sync。一、liveStyle如图，liveStyle支持三种文件。需要安装两个插件：浏览器的插件，sublime编辑器中的livestyle插件。 浏览器的插件可以通过Chrome的网上商店安装。**注意：**liveStyle主要针对样式的修改，实现浏览器和编辑器双向

原创 Vue.js的应用——e.currentTarget的应用

1.当li下有多个子标签时，给li添加了click事件，但是在vue中如果用e.target获取的一般均为li里的子元素，因此采用e.currentTarget方法去获取li的click事件，再去获取li对应的id值，从而可以进行参数传承。2.在用vue调试工具Devtools 时发现vue.min.js和vue.js的区别，引用的vue.js应该使用vue.js（开发版本）而不是vue.min.js（生成版本）

转载 click/ touch /tap应用——点击穿透

移动端用tap时会有穿透问题一：click与tap比较click与tap都会触发点击事件，但是在手机web端，click会有200-300ms的延迟(这是因为，浏览器是等着看，如果你是真正执行双击，iOS Safari 在双击后准确地定位到页面主体文章，并将其缩放至适合比例展现)，所以一般用tap代替click作为点击事件。singleTap 和doubleTap分别代表单次点击和双次点击...

转载 对象-工厂模式-构造函数-原型-原型链

工厂模式和构造函数的区别学习JavaScript有一段时间了，但是随着工作的进展，我发现，javascript绝对不是写一下简单效果那么肤浅，是时候完全，透彻地理解他的精髓了。一：为什么使用工厂模式和构造函数？  虽然Object构造函数或者字面量(var person={})可以创建单个对象，但是，他有一个明显的缺点，那就是：重复造轮子，产生大量的重复性代码，为了解决这...

原创 url传参——GetRequest函数修复

当A页面通过ajax获取后台数据（dataFp）进行渲染完毕后，进入B页面，从B再返回A页面，当后台压力太大不想再去ajax请求得到数据（dataFp）再次渲染A页面，此时可以考虑url传参，我们常用法1，但是当涉及对象传参（dataFp下面某个属性含中文）会出现乱码；queryCompany（中文）却不含乱码问题。采用decodeURI代替unescape进行解码，对GetRequest函数进行优化，即可解决。

原创 js控制响应式垂直居中——当内容高度不定

当内容不定导致盒字高度不确定时；利用伪元素方法将盒子内容撑起来，此时才能获取其盒子高度，父元素.companyName添加样式position: relative;overflow: hidden;伪元素添加样式content: '';display: block;封装函数function vertical(objdiv,objp)，objdiv为最外层div，当获取其高度再减去objp自身高度，除以二就为其margin-top，此时需要注意对margin-top值得取整，因为避免出现小数如0.5px，导致

原创 iframe法在页面中引入相同部分html的应用

当nav中 页面都有相同html部分，我们可以尝试用 iframe 引入相同部分commonHeader.html， 需要加 frameboder="0" scrolling="no" 这样才不会有滚动条；这样可以减少代码冗余；其中nav中通过ul、li（a标签包裹）实现布局，此时的a标签 一定要加target="_parent" 这样点击时整个页面才会跳转，否则只是iframe页面会跳转；当然也可以用事件委托来解决这个小bug。

原创 明年的昨天算法 / ios时间格式bug修复

ios不支持yyyy-mm-dd形式；需要用yyyy/mm/dd形式；此处还做了获取 明年的昨天的函数，对数据报表、合同到期时间等方面有一定作用。如2015-03-01——2016-02-29此种类型，刚好间隔一年，考虑平闰年的影响。

原创 canvas作dashTo的函数封装

采用canvas制作dashTo的封装函数，dashTo(obj,x1,y1,x2,y2)参数分别对应,obj:canvas的id;初始坐标:x1y1;终点坐标:x2y2;lineLength:实线的长度等于间隔的空隙长度,为了达到lineTo一样的效果只是实现虚线。

转载 浏览器内核、渲染引擎、js引擎

浏览器内核、渲染引擎、js引擎

原创 Cookie保存用户登录账号密码的应用

1.在Firefox上测试,火狐上可以查看cookie, contextmenu有个查看页面信息-安全-查看cookie；2.格式名字=值;document.cookie名与值之间只能用’=‘，而值与下一个名之间只能用‘,’,尝试名与值之间用':'或者值与下一个名之间用';'下层cookie会覆盖上层cookie;3.过滤一定要用split('; ')其中分号后面需要一个空格,因为cookie两个数组间分号加空格的格式,否则切割的password应该为‘ password’即前面多一个空格.

原创 完美运动框架——getStyle(obj,attr)、startMove(obj,json,fn)

本文主要 封装一套完美运动框架 startMove(obj,json,fn) 实现多物体运动以及通过json实现一个物体多参数的变动，其中也用到了非行内样式的获取函数getStyle(obj,attr)...

原创 分享侧边栏——js代码

本文主要封装了三种运动框架 ，通过增加函数传参 可以减少代码的冗余, 为以后封装其他函数 提供一点思路