- 博客(52)
- 收藏
- 关注
RSS订阅原创 Vue 服务端渲染(SSR)
一、什么是服务端渲染(SSR)Server Side Render简称SSR，服务端渲染。在ajax兴起之前，特别是在SPA（单页面应用（Single-Page Application））技术流行之前，大部分的web应用都采用的是服务端渲染。即服务器端在接收到用户请求网页的时候，由服务端先调用数据库，获得数据之后，将数据和页面元素进行拼装，组合成完整的 html 页面，再直接返回给浏览器，以便...
2019-06-28 14:44:11
1660
1
原创 webpack 的项目使用script动态导入第三方库
最近有个项目需要导入腾讯云的图片验证js库官方文档https://007.qq.com/quick-start.html?ADTAG=acces.cfghttps://ssl.captcha.qq.com/TCaptcha.js像这种只提供script方式引入的第三方库，在webpack项目中使用，1、可以使用webpack.ProvidePlugin 【提供了npm安装方式的库没...
2019-05-23 16:44:41
3586
原创 ios 微信浏览器下 input失去焦点后 软键盘收起后 被撑起上移动的页面 没有归位
在iOS微信浏览器下 input 获取焦点软键盘弹起把页面整体往上撑起了移动了一定距离， 失去焦点后 软键盘收起后 被撑起往上移动的页面没有归位，导致页面上的元素错位，点击按钮，input输入框等的位置发生错位。解决办法两种：1、当input失去焦点后，使用js将页面滚动到顶部。//滚动到顶部 scrollToTop:function(){ ...
2019-05-07 14:31:53
2005
原创 js中的异步以及事件轮询 (event loop) 机制
一、JS为何是单线程的？ JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。那么，为什么JavaScript不能有多个线程呢？这样能提高效率啊。（在JAVA和c#中的异步均是通过多线程实现的，没有循环队列一说，直接在子线程中完成相关的操作） JavaScript的单线程，与它的用途有关。作为浏览器脚本语言，JavaScript的主要用途是与用户...
2019-04-30 18:30:54
1839
转载 https加密过程
HTTPS即加密的HTTP，HTTPS并不是一个新协议，而是HTTP+SSL（TLS）。原本HTTP先和TCP（假定传输层是TCP协议）直接通信，而加了SSL后，就变成HTTP先和SSL通信，再由SSL和TCP通信，相当于SSL被嵌在了HTTP和TCP之间。HTTP和HTTPS: 首先二者都是网络传输协议;HTTPS在传输过程中是可以通过加密来保护数据安全的，以免用户敏感信息被第三方获取。 可...
2019-03-12 22:21:44
647
原创 js onclick addeventlistener 区别
onclick()这种写法是DOM0级规范的写法，是所有的浏览器支持的，但是这种写法有不能同时绑定多个事件、使代码耦合在了一起的弊端。但是addEventListener() 是DOM2标准中定义的方法，它可以控制是在事件捕获阶段或者是在冒泡阶段调用事件处理程序。既然这个是DOM2标准中定义的，那么只有支持DOM2级事件处理程序的浏览器才支持这个方法（IE9,Firefox,Safari,Chro...
2019-03-11 21:37:09
269
原创 Attribute和Property的区别
一：Attribute和Property的区别1.含义区别首先在定义上更准确的来说，Attribute和Property分别为特性和属性，作为区别。其次，这样理解下来，我们知道Attribute就是DOM节点自带属性，例如我们在HTML中常用的id,class,src,title,alt等。而Property则是这个DOM元素作为对象，其附加的属性或者内容，例如childNodes，fir...
2019-03-11 21:31:27
17454
2
转载 函数式编程和响应式编程
到底什么是函数式，他和命令式编程和面向对象有什么区别。（知乎上已经有很多讨论了，感兴趣的话，我在结尾的地方贴了一些链接。）总的来说，在函数式中，函数是一等公民，函数能作为变量的值，函数可以是另一个函数的参数，函数可以返回另一个函数等等。函数式编程函数式编程是一系列被不公平对待的编程思想的保护伞，它的核心思想是，它是一种将程序看成是数学方法的求值、不会改变状态、不会产生副作用（后面我们...
2019-03-10 13:12:28
1727
转载 从输入URL到页面加载的全过程-- 前端理解
1、浏览器的地址栏输入URL并按下回车。 2、浏览器查找当前URL是否存在缓存，并比较缓存是否过期。 3、DNS解析URL对应的IP。 4、根据IP建立TCP连接（三次握手）。 5、HTTP发起请求。 6、服务器处理请求，浏览器接收HTTP响应。 7、渲染页面，构建DOM树。 8、关闭TCP连接（四次挥手）。 说完整个过程的几个关键点后我们再来展开的...
2019-03-09 22:18:22
3457
转载 tcp 三次握手
三次握手建立连接：第一次握手：客户端发送syn包(seq=x)到服务器，并进入SYN_SEND状态，等待服务器确认;第二次握手：服务器收到syn包，必须确认客户的SYN(ack=x+1)，同时自己也发送一个SYN包(seq=y)，即SYN+ACK包，此时服务器进入SYN_RECV状态;第三次握手：客户端收到服务器的SYN+ACK包，向服务器发送确认包ACK(ack=y+1)，此包发送完毕，客户...
2019-03-09 21:54:19
146
转载 http的协商缓存 、强缓存
本文主要讲解浏览器端的缓存，缓存的作用是不言而喻的，能够极大的改善网页性能，提高用户体验。1、浏览器缓存缓存这东西，第一次必须获取到资源后，然后根据返回的信息来告诉如何缓存资源，可能采用的是强缓存，也可能告诉客户端浏览器是协商缓存，这都需要根据响应的header内容来决定的。下面用两幅图来描述浏览器的缓存是怎么玩的，让大家有个大概的认知。浏览器第一次请求时：浏览器后续在进行请求...
2019-03-09 21:50:49
156
转载 阿里\网易和滴滴2017面试转
阿里面试了三个部门，都是在二面挂的，网易和滴滴也是各两轮技术面试，加一起就是十次面试经历。在此回忆总结一下，既是给社区朋友的一个参考，反馈社区，更是给自己一个好好的总结。HTML HTML5新增了哪些内容或API，使用过哪些 input和textarea的区别 用一个div模拟textarea的实现 移动设备忽略将页面中的数字识别为电话号码的方法 --- 2...
2019-03-05 11:43:22
103
转载 alibaba 阿里面试题
使用css实现一个持续的动画效果 12345 animation:mymove 5s infinite;@keyframes mymove {from {top:0px;}to {top:200px;}} 主要考：animation 用法值 描述 animation-name 规定需要绑定到选择器的 keyfr...
2019-03-04 22:30:54
165
原创 js 通用事件绑定
function bindEvent(elem, type, selector, fn) { if (fn == null) { fn = selector; selector = null; } elem.addEventListener(type, function(e) { var target = e.target; if (selector) { //代理...
2019-02-12 21:10:40
228
转载 debounce 防抖、 节流（throttle）
在处理诸如 resize、scroll、mousemove 和 keydown/keyup/keypress 等事件的时候，通常我们不希望这些事件太过频繁地触发，尤其是监听程序中涉及到大量的计算或者有非常耗费资源的操作。有多频繁呢？以 mousemove 为例，根据 DOM Level 3 的规定，「如果鼠标连续移动，那么浏览器就应该触发多个连续的 mousemove 事件」，这意味着浏览器会...
2019-01-24 16:55:18
301
转载 js 模块化
基本的实现方法模块是实现特定功能的一组属性和方法的封装。简单的做法是把模块写成一个对象，所有的模块成员都放到这个对象里面。var module1 = new Object({ _count : 0, m1 : function (){ //... }, m2 : function (){ //... }});上面的函数m1和m2，都封装在module1对象...
2019-01-23 19:52:20
211
原创 js 继承
1、function Shape() { this.x = 0; this.y = 0;}Shape.prototype.move = function (x, y) { this.x += x; this.y += y; console.info('Shape moved.');};//我们需要让Rectangle构造函数继承Shape。// 第一步，子...
2019-01-23 19:50:13
122
转载 js new命令原理
使用new命令时，它后面的函数依次执行下面的步骤。创建一个空对象，作为将要返回的对象实例。 将这个空对象的原型，指向构造函数的prototype属性。 将这个空对象赋值给函数内部的this关键字。 开始执行构造函数内部的代码。也就是说，构造函数内部，this指的是一个新生成的空对象，所有针对this的操作，都会发生在这个空对象上。构造函数之所以叫“构造函数”，就是说这个函数的目的，就是...
2019-01-22 19:38:21
1230
1
原创 js 大数相加
1、function add (str1, str2) { let len1 = str1.length; let len2 = str2.length; // let len = len1<len2 ? len1 : len2; let len = Math.max(len1, len2); let res = ''; let jin ...
2019-01-18 18:39:00
2316
1
原创 js 斐波那契数列
指的是这样一个数列：1、1、2、3、5、8、13、21、34、……在数学上，斐波纳契数列以如下被以递归的方法定义：F(0)=1，F(1)=1, F(n)=F(n-1)+F(n-2)（n>2，n∈N*）1、递归function fb1(n){ if(n <= 1){ return 1; }else{ return fb1(...
2019-01-17 11:03:18
1316
原创 object对象复制 / array复制
00、深度拷贝这里有三点需要注意：1、用new obj.constructor ()构造函数新建一个空的对象，而不是使用{}或者[],这样可以保持原形链的继承；2、用obj.hasOwnProperty(key)来判断属性是否来自原型链上，因为for..in..也会遍历其原型链上的可枚举属性。3、上面的函数用到递归算法，在函数有名字，而且名字以后也不会变的情况下，这样定义没有问题。但问题...
2019-01-15 16:10:47
1492
1
原创 排序
1、冒泡（从小到大排序）function maopao(arr){ let len = arr.length-1; for (let i = 0; i < len; i++) { for (let j = 0; j < len-i; j++) { if(arr[j]>arr[j+1]){ let tmp = arr[j...
2019-01-15 10:46:59
74
转载 clientX,screenX,offsetX,pageX,offsetLeft,...
1.pageX，clientX，screenX与offsetX先统一了解下这四个概念，理解不透没关系，咱们把概念相近的对比着一一细说。pageX：鼠标指针距离文档X轴左侧边缘的距离，不随滚动条变化而变化clientX：鼠标指针距离可视窗口左侧边缘的距离，随着滚动条变化而变化screenY：鼠标指针距离屏幕的距离(包括浏览器工具栏之类)，不随滚动条变化而变化offsetX：鼠标指...
2018-12-27 14:34:04
821
原创 判断对象（ "number," "string," "boolean," "object," "function," 和 "undefined."以及'symbol'）是否相等
export function isEqual(obj1, obj2) { if(typeof obj1 !== typeof obj2){ console.log('not one type') return false } if(obj1 instanceof Object && obj2 instanceof Object){ if (O...
2018-08-28 10:50:21
522
原创 数组去重--数组的每一项是json对象object
function obj2key(obj, keys){ let n = keys.length let key = [] while(n-=1){ key.push(obj[keys[n]]); } return key.join('|'); } //去重操作 export function uniqeByKeys(array,...
2018-08-22 16:57:11
864
原创 指定文件、指定行、指定代码块不使用 ESLint 语法检查
整个文件范围内禁止规则出现警告将/* eslint-disable */放置于文件最顶部/* eslint-disable */alert('foo');在文件中临时禁止规则出现警告将需要忽略的代码块用注释包裹起来/* eslint-disable */alert('foo');/* eslint-enable */对指定规则的启用或者禁用警告将需要忽略的...
2018-07-26 10:23:28
30608
5
原创 js typeof 和 判断array 以及是Array还是Object或者null
typeof 返回值有六种可能： "number," "string," "boolean," "object," "function," 和 "undefined."以及'symbol' // Symbols typeof Symbol() === 'symbol' typeof Symbol('foo') === 'symbol' typeof Sy
2018-07-21 10:51:04
29462
原创 nodejs上线部署1
Nodejs 上线部署笔记1、 购买阿里云的域名和云服务器ECS云主机安装的是Ubuntu16.04.2 LTS (GNU/Linux 4.4.0-63-generic x86_64) 域名绑定云主机（大陆的云主机得备案，香港的不用备案）2、创建用户：阿里云的云主机默认是root用户，直接用root用户操作比较危险，所以创建一个具有sudo 权限的用户（用户名
2018-05-08 16:09:42
1177
转载 js对用户输入非法字符进行编解码预防xss
1 var HtmlUtil = { 2 /*1.用浏览器内部转换器实现html转码*/ 3 htmlEncode:function (html){ 4 //1.首先动态创建一个容器标签元素，如DIV 5 var temp = document.createElement ("div"); 6 //2.然后将要转换的字符串设
2017-09-16 17:22:03
2226
3
转载 js判断json对象是否为空
1.最简单的方法，判断是否有对应的属性， 当然这里并不能判断是否为空[javascript] view plain copy print?var dd={yy:""}; if(dd&&dd.yy!=""){ alert("dd不为空") } else{ alert("
2017-09-08 11:39:44
35876
原创 div 高度随窗口动态变化
var resizeDiv = function(){ heightWin = $(window).height(); heightWin2 = document.body.clientHeight; console.log("h1----"+heightWin+'h2---'+ heightWin2); document.getEl
2017-08-01 18:07:51
684
转载 react router4.0的一些变化
如果你已经是一个正在开发中的React应用，想要引入更好的管理路由功能。那么，react-router是你最好的选择~react-router版本现今已经到4.0.0了，而上一个稳定版本还是2.8.1。相信我，如果你的项目中已经在使用react-router之前的版本，那一定要慎重的更新，因为新的版本是一次非常大的改动，如果你要更新，工作量并不小。这篇文章不讨论版本的变化，只是讨论一下Re
2017-07-19 16:26:30
642
转载 react router4.0初识
React Router 4.0 （以下简称 RR4） 已经正式发布，它遵循react的设计理念，即万物皆组件。所以 RR4 只是一堆 提供了导航功能的组件（还有若干对象和方法），具有声明式（引入即用），可组合性的特点。http://www.jianshu.com/p/e3adc9b5f75cRR4 本次采用单代码仓库模型架构（monorepo），这意味者这个仓库里面有若干相互独立
2017-07-19 14:18:30
405
原创 javascript 刷新和跳转页面的集中方法
Javascript刷新页面的几种方法：1 history.go(0)2 location.reload()3 location=location4 location.assign(location)5 document.execCommand('Refresh')6 window.navigate(location)7 location.replace(locatio
2017-06-13 10:05:18
364
原创 浏览器窗口失去和获得焦点
$(window).blur(function(){ //your code here console.log('window blur'); });$(window).focus(function(){ //your code here console.log('window fouse'); });
2017-06-05 17:51:30
10564
转载 vue-devtools chrome 开发工具
1.github下载地址：https://github.com/vuejs/vue-devtools有Git的同学直接 git clone https://github.com/vuejs/vue-devtools2.下载安成之后打开cmd进入vue-devtools文件夹把依赖装好npm install 之后再进行npm run build最好装一个cnpm3.然
2017-06-02 16:01:03
7010
3
原创 创建git 项目
第一步：第二步：第三步：第四步：上传SSH KEY查看ssh key : (linux-mac): cat ~/.ssh/id_rsa.pub。如果没有则生成，生成命令：ssh-keygen -t rsa -C "[email protected]"邮箱地址随便。
2017-06-01 17:34:00
327
转载 css 开门－透视perspective动画效果
IE9及其以下版本完全不支持CSS 3D transforms技术，Opera 12也不支持。具体支持信息请查看caniuse.com。CSS动画是当前一种非常火爆的技术，我说的并不是一些简单的颜色变换或长短属性变换，我说的是3D变换技术；纯CSS实现的翻滚旋转立方体就是最典型的例子。网上能找到很多关于CSS动画的代码，但对于一个程序员来说，真正理解其为什么会动起来的原理是非常重要的。
2017-05-17 20:01:53
2923
原创 vue-cli 打包压缩(npm run build)文件后,默认根目录修改
vue-cli 打包压缩(npm run build)文件后,默认根目录修改，解决前后端代码结合的路径问题。将config/index.js文件中的assetsPublicPath 值修改为你需要的根目录，原来默认是‘／’，下图中加上了"elkdashboard/"，“elkdashboard”是本项目的项目名，用tomcat起的服务URL默认根目录会加上“／项目名／”。这样将打包好的代码放到
2017-05-16 17:32:25
17529
转载 Js实现上下左右无缝隙滚动代码 二
利用js 实现无缝滚动效果。有往上滚动，往下滚动，往左滚动，往右滚动。 innerHTML: 设置或获取位于对象起始和结束标签内的 HTML scrollHeight: 获取对象的滚动高度。 scrollLeft: 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop: 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的
2017-05-15 14:34:45
402
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人