- 博客(31)
- 收藏
- 关注
RSS订阅原创 javascript cookie session和web storage存储
众所周知，http是一种无状态存储，现实中的业务需要一定的业务状态，例如某电商网站的用户登录，购物车。如何标示用户和认证一个用户，最早的方案就是cookie存储了。 通过引入cookie和session体系机制来维护状态信息。即用户第一次访问服务器的时候，服务器响应报头通常会出现一个Set-Cookie响应头，这里其实就是在本地设置一个cookie，当用户再次访问服务器的时候，http会附带这个...
2018-11-25 10:19:57
269
原创 node.js buffer的使用场景和方法及stream的应用
buffer是什么？ Node中，应用需要处理网络协议、操作数据库、处理图片、接收上传文件等，在网络流和文件的操作中，还要处理大量二进制数据，JavaScript自有的字符串远远不能满足这些需求，于是Buffer对象应运而生。 Buffer作为存在于全局对象上，无需引入模块即可使用，你绝对不可以忽略它。 可以理解Buffer是在内存中开辟的一片区域，用于存放二进制数据。Buffer所开辟的是...
2018-11-23 12:13:01
2476
原创 https非对称加密及CA证书签名介绍
非对称加密产生的背景： 在网络中，数据在客户端和服务器之间由于是明文传递，一旦网络被人监控，数据就可能一览无余地展现在窃听者面前，为此我们需要将数据加密后再进行网络传输，这样即使数据被窃听，窃听着也无法知道数据的真实内容是什么，但是对于我们的应用层协议而言，如HTTP，FTP等，我们仍然希望能够透明的处理数据，而无需操心网络传输过程中的安全问题。所以提出了SSL，SSL做为一种安全协议，它在传输...
2018-11-22 21:56:29
808
原创 javascript实现经典排序
排序是我们生活中经常面对的问题，做操时需要从小到大排序，我们逛电商网站，常常按价格排序。像这样我们把多个序列按照关键词递增（递减）的方式进行排列，使得序列成为一个按关键字有序的序列，这样的操作就称为排序。 1.冒泡排序 冒泡排序是一种交换排序，它的基本思想是：两两比较相邻的关键字，如果反序则交换位置，知道没有反序的记录为止 时间复杂度：最快的情况下是所有的元素已经是正序 冒泡排序的时间复...
2018-11-06 00:22:22
792
原创 js栈内存和堆内存与垃圾回收机制
v8作为javascirpt引擎，对变量的存储主要有两种位置：栈存储和堆存储 栈内存存储基本类型的变量：如Number,String,boolen,undefined,null,以及对对象和数组变量的指针,对象是动态分配内存，数组的初始化方式分为： 动态初始化：初始化时只指定数组长度，由系统为数组分配初始值。 静态初始化：初始化时指定每个数据元素的初始值，由系统决定数组长度 我们在代码声明...
2018-11-04 17:20:34
3893
原创 Linux常用命令
命令 解释 cd /home 进入 '/ home' 目录' cd .. 返回上一级目录 pwd 显示工作路径 ls 查看目录中的文件 ls -a 显示隐藏文件 mkdir dir1 创建一个叫做 'dir1' 的目录' rm -f file1 删除一个叫做 'file1' 的文件' rmdir dir1 删...
2018-09-30 17:13:50
168
原创 单线程与事件循环
单线程指的是主线程是“单线程”的，所有阻塞的部分交给一个线程池处理，然后这个主线程通过一个队列跟线程池协作，于是对我们写到的js代码部分，不再关心线程问题，代码也主要由一堆callback回调构成，然后主线程在不停的循环过程中，适时调用这些代码。 什么是 Event Loop ？ 单线程的 Node.js 能够实现无阻塞IO的原因就是事件循环（Event Loop）。 现在大多数系统内核是多...
2018-09-05 11:33:00
967
原创 node.js 事件驱动
在传统编程中，i/o操作和本地函数调用的处理方式相同：处理过程需要一直等待直到某个操作结束才能继续下去，这种基于i/o操作的阻塞式编程模型继承自早期的分时系统，在这类系统中，每一个进程都对应着一个用户，这样做的目的是使得用户之间相互隔离。并且在这类系统中，用户在决定下一个操作前，必须先结束一个操作。显然，这种“单用户，单进程”的模型不具备较好的伸缩性，当任务的数量达到一定的数量之后性能开始急剧下降...
2018-09-05 11:30:11
216
原创 原型链的理解
原型与原型链是JS中一个难点，也是其他语言不具有的特点之一。 1. 原型链作用：利用修改原型链的结构（增删改节点中的成员），使得实例对象可以使用整条原型链中的所有成员。 2. 对象的原型链：凡是对象都有原型；原型也是对象。原型总可以找到下面的原型，构成一个对象的序列，就称该结构为原型链。 3. 原型链结构：凡是使用构造函数创建出来的对象，并且没有利用赋值的方式修改原型，该对象保留默认的原型链...
2018-08-05 13:22:08
399
原创 Vue的生命周期
Vue官网的生命周期图示 Vue生命周期 Vue实例从创建到销毁的过程，就是生命周期。 Vue的生命周期包括：开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。 在Vue的整个生命周期中，提供了一系列的事件，可以注册JavaScript方法，达到控制整个过程的目的，在这些JavaScript方法中的this直接指向的是vue的实例。 ...
2018-07-28 22:47:04
268
原创 对闭包的理解
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <
2018-07-19 09:42:34
148
转载 使用git进行版本管理
1.master分支 存放的应该是随时可供在生产环境中部署的代码 当开发活动告一段落，产生了一份新的可供部署的代码时，master分支上的代码会被更新。同时，每一次更新，都有对应的版本号标签（TAG）。 分支命名：master 该分支，由管理员负责维护，其它人只有拉取权限。来自于release分支的合并，供发版使用 生命周期：伴随着整个项目的生命周期，项目结束时结束。 2.develo...
2018-07-18 09:50:17
266
原创 canvas.save()和canvas.restore()作用
这里canvas.save();和canvas.restore();是两个相互匹配出现的，作用是用来保存画布的状态和取出保存的状态的。这里稍微解释一下， 当我们对画布进行旋转，缩放，平移等操作的时候其实我们是想对特定的元素进行操作，比如图片，一个矩形等，但是当你用canvas的方法来进行这些操作的时候，其实是对整个画布进行了操作，那么之后在画布上的元素都会受到影响，所以我们在操作之前调用canv...
2018-07-07 18:50:12
262
原创 offsetX clientX pageX等位置的计算
e.pageX——相对整个页面的坐标e.layerX——相对当前坐标系的border左上角开始的坐标注意：在opera、IE6、IE7、IE8中这个属性，而IE8以上表示相对当前坐标系的border左上角开始的坐标 + 滚动条滚过的距离e.offsetX——相对当前坐标系的border左上角开始的坐标注意：火狐中无该属性e.clientX——相对可视区域的坐标pageX指鼠标在页面上的位置，以页面...
2018-07-07 17:41:34
383
原创 给多行文字设置垂直居中
效果图：页面代码：<div class="left"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sem erat, egestas quis luctus ut, rhoncus vitae risus. Integer venenatis libero s...
2018-06-30 23:13:54
287
原创 POST和GET请求的区别
两种请求方式的区别：1、GET请求，请求的数据会附加在URL之后，以?分割URL和传输数据，多个参数用&连接。URL的编码格式采用的是ASCII编码，而不是uniclde，即是说所有的非ASCII字符都要编码之后再传输。POST请求：POST请求会把请求的数据放置在HTTP请求包的包体中。上面的item=bandsaw就是实际的传输数据。因此，GET请求的数据会暴露在地址栏中，而POST请...
2018-06-28 23:35:20
288
转载 http请求的详细过程
我们来看当我们在浏览器输入http://www.mycompany.com:8080/mydir/index.html,幕后所发生的一切。首先http是一个应用层的协议，在这个层的协议，只是一种通讯规范，也就是因为双方要进行通讯，大家要事先约定一个规范。1.连接 当我们输入这样一个请求时，首先要建立一个socket连接，因为socket是通过ip和端口建立的，所以之前还有一个DNS解析过程，把ww...
2018-06-27 23:37:14
279
原创 前端性能优化
1、html部分 a、要避免代码的深层级嵌套。因为层级越深的节点在初始化时更占内存。 b、尽量不要使用h5摒弃的iframe标签，因为在页面加载的时候iframe标签会阻塞父文档onload事件的触发，这恰恰影响了初始化UI c、诸如img、link、script等元素的src或href属性的值不为空，因为就算我们写为src=""浏览器仍会发送...
2018-06-27 08:44:54
150
原创 BOOTstrap网格系统
Bootstrap 网格系统本章节我们将讲解 Bootstrap 的网格系统（Grid System）。Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。什么是网格（Grid）？摘自维基百科：在平面设计中，网格是一种由一系列用于组织内容的相交的直线（垂直的、水平的）组成的结构（通常是二维的）。它广泛应用于打印设...
2018-06-27 00:19:51
254
转载 JSON对象与JSON字符串之间的转换
JavaScript中： JSON对象转JSON字符串（推荐）[html] view plain copyvar obj = {id:1,code:2}; JSON.stringify(obj); JSON字符串转JSON对象方法一（推荐）：[html] view plain copyvar string = '{"id":"1","code":"2"}'; J...
2018-06-27 00:02:56
204
转载 本地存储
HTML5 storage提供了一种方式让网站能够把信息存储到你本地的计算机上，并再以后需要的时候进行获取。这个概念和cookie相似，区别是它是为了更大容量存储设计的。 HTML5storage提供了一种方式让网站能够把信息存储到你本地的计算机上，并再以后需要的时候进行获取。这个概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候...
2018-06-26 23:37:09
143
原创 通过gitbash将本地文件上传到github
1.在本地存在的文件夹下进入 ：Git Bash2.初始化 ：git init3.增加一个远程服务端 ：git remote add origin ssh://git.com/lsy/demo.git4.将修改过的文件提交暂存区 ：git add 文件名/工程名5.理解提交暂存区的文件 ：git commit -m “Initial commit”6.将本地主分支推到远程 ：git push -u...
2018-06-26 22:27:27
560
转载 property 和 attribute
perty 和 attribute非常容易混淆，两个单词的中文翻译也都非常相近（property：属性，attribute：特性），但实际上，二者是不同的东西，属于不同的范畴。property是DOM中的属性，是JavaScript里的对象；attribute是HTML标签上的特性，它的值只能够是字符串；基于JavaScript分析property 和 attributehtml中有这样一段代码：...
2018-06-10 22:13:15
233
转载 html5存储
HTML5的几种存储方式html5在引入webStorage之前，主要用cookies.web storagehtml5的webstorage 分两种：LocalStorage 和SessionStorage，两者的差别主要在生命周期不同。LocalStorage LocalStorage用于持久化的本地存储，存储资料在客户端（client）的浏览器上，除非主动删除数据，否则数 据是永远不会过期的...
2018-06-10 21:42:24
141
转载 清除浮动的几种方式
浮动(float)，一个我们即爱又恨的属性。爱，因为通过浮动，我们能很方便地布局； 恨，浮动之后遗留下来太多的问题需要解决，特别是IE6-7（以下无特殊说明均指 windows 平台的 IE浏览器）。也许很多人都有这样的疑问，浮动从何而来？我们为何要清除浮动？清除浮动的原理是什么？本文将一步一步地深入剖析其中的奥秘，让浮动使用起来更加得心应手。一、清除浮动 还是 闭合浮动 （Enclosing f...
2018-05-20 21:58:22
3063
原创 标准盒模型和怪异盒模型
简写：盒模型标准盒子模型中，width和height是content的长与宽 而IE盒子模型中，width和height是content+padding+border区域的长与宽在标准模式下，一个块的总宽度=width+margin(左右)+padding(左右)+border(左右)；在怪异模式下，一个块的总宽度=width+margin(左右)（即width已经包含了padding和borde...
2018-05-20 21:56:57
308
转载 CSS实现全局的自适应
放置全屏地图时遇到的问题，解决方案如下：方法一：[css] view plain copy#map { height: 100%; width: 100%; position: absolute; top: 0px; bottom: 0px; background: #00FF00 url('map/n/n/n.png') repeat...
2018-05-20 20:12:55
3858
转载 AMD和CMD的特点
模块既然JavaScript不能handle如此大规模的代码，我们可以借鉴一下其它语言是怎么处理大规模程序设计的，在Java中有一个重要带概念——package，逻辑上相关的代码组织到同一个包内，包内是一个相对独立的王国，不用担心命名冲突什么的，那么外部如果使用呢？直接import对应的package即可import java.util.ArrayList; 遗憾的是JavaScript在设计时定...
2018-05-20 13:46:51
786
原创 判断是否是数组
整理了一些，留待自己复习用1. instanceofvar a = { "name":'fangxiaoming', "age": 19, } var b = [1,2,3,4]; console.log(a instanceof Array); //false console.log(b instanceof Array); //true12345672.Array.isA...
2018-05-20 10:47:58
7767
转载 js事件监听机制(事件捕获)总结
在前端开发过程中我们经常会遇到给页面元素添加事件的问题，添加事件的js方法也很多，有直接加到页面结构上的，有使用一些js事件监听的方法，由于各个浏览器对事件冒泡事件监听的机制不同，le浏览器只有事件冒泡，没有事件监听的机制，对于事件监听的兼容性问题是最大的难题：1.直接把事件的方法写在页面结构上[javascript] view plain copyfunction eventfun(){ /...
2018-05-19 23:00:43
10558
转载 用join分割字符串倒序
var str = "1,3,4,5,6,7,8"; console.log(str.split(",").reverse().join(" ")) var string = str.split("").reverse().join(''); str.split("")//把字符串分割成数组，如果无参数则每个元素都会被分割，有参数以...
2018-05-19 16:50:44
572
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人