- 博客(30)
- 收藏
- 关注
RSS订阅原创 JS创建对象和继承
创建对象工厂模式在普通函数中创建一个新对象，为其添加属性和方法，然后返回。在调用的时候直接调用函数，不需要使用new操作符。function factory(name){ var o = new Object(); o.name = o; o.sayName = function(){ console.log(this.name); } return o;}var per...
2018-11-20 20:27:05
377
原创 JS 内存理解总结
JS内存分配管理ECMAScript 变量可能包含两种不同数据类型的值，即基本类型值和引用类型值。栈、堆、池栈：LIFO，后进先出的原则，属于一级缓存，相当于CPU的寄存器，由编译器自动分配释放，读写速度快，存储的是固定值（基本类型值）堆： 属于二级缓存，由开发人员分配释放， 要是没有手动的释放，在调用结束后可能由GC回收，其生命周期由虚拟机的垃圾回收算法来决定。存储的是引用类型池：存...
2018-10-29 20:33:50
404
原创 BFC理解
BFC定义BFC (Block formatting context) 直译为"块级格式化上下文"。它是一个 独立的 渲染区域，只有Block-level box（块级box）参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。也就是说，BFC就是一类有自己渲染规则的渲染区域，它的渲染规则规定了它的内部子元素的排列方式以及和其它元素之间的关系，所以下面...
2018-10-23 21:45:44
303
1
原创 CSS之margin合并
合并marginCSS中，两个或多个盒（可能但不一定是兄弟）的相邻的margin会被结合成一个margin。外边距按这种方式结合叫做合并（collapse），产生的结合的外边距叫做折叠外边距计算规则当两个或者更多的margin合并时，产生的margin宽度为合并margin宽度中的最大值。至于负margin，就从正相邻margin的最大值中减去负相邻margin的绝对值的最大值。如果没...
2018-10-23 21:42:38
1895
原创 头像裁剪上传功能实现
头像裁剪上传功能实现主要实现一个如图的头像裁剪上传功能：思路设置固定宽高的div，用于头像裁剪的最终部分并设置其overflow属性为hidden，position设置为relative给之后拖拽canvas作为参照，然后通过监听input的onchange事件，利用canvas绘图，将图片绘制到canvas上，并将该canvas加到该div之中，并设置其position为absolute...
2018-10-15 14:26:39
2233
1
原创 [ES6] Class继承
简介ES6中Class可以通过extends关机子实现继承，相比起ES5用修改原型链的方式来实现继承，要清晰方便很多。class father {}class son extends father {}上面的例子中son通过extends关键字继承了father所有的属性和方法。（由于没有部署任何代码，所以这两个类是完全一样的，等于复制了一个father类到son中）...
2018-07-27 10:12:02
689
原创 [ES6] Class入门基础知识
自定义事件在子组件的某个事件中触发父组件的某个自定义事件。 利用v-on绑定自定义事件： 使用$on(eventname)监听事件 使用$emit(eventName, optionalPayload)触发事件父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。主要靠着父组件注册自定义事件，子组件触发该事件，达到传参等效果。例1：div id
2018-07-26 20:20:51
325
2
原创 Http长连接和短连接
HTTP协议与TCP/IP协议的关系HTTP的长连接和短连接本质上是TCP长连接和短连接。 HTTP属于应用层协议，在传输层使用TCP协议，在网络层使用IP协议。 IP协议主要解决网络路由和寻址问题，TCP协议主要解决如何在IP层之上可靠地传递数据包，使得网络上接收端收到发送端所发出的所有包，并且顺序与发送顺序一致。TCP协议是可靠的、面向连接的。在HTTP/1.0中，默认使用的是短连接。 也就是...
2018-06-26 18:31:42
224
原创 SSE 服务器发送事件
SSE(Server-Sent Events 服务器发送事件)SSE是 WebSocket 的一种轻量代替方案，使用 HTTP 协议。 严格地说，HTTP 协议是没有办法做服务器推送的，但是当服务器向客户端声明接下来要发送流信息时，客户端就会保持连接打开，SSE 使用的就是这种原理。 简单的说，就是浏览器向服务器发送一个HTTP请求，然后服务器不断单向地向浏览器推送“信息”（message）。这种...
2018-06-25 11:45:20
1085
原创 Ajax轮询
短轮询（传统轮询）客户端定时向服务器发送Ajax请求，服务器接到请求后马上返回响应信息并关闭连接。优点：简单缺点：请求中有大半是无用，浪费带宽和服务器资源适用场景：适于小型应用。function getting() { $.ajax({ type : 'get', url : 'http://127.0.0.1:8000/get', success : function(res...
2018-06-24 16:02:55
1369
原创 前端图片压缩上传和显示
watch：观测Vue实例上的数据变动，对应一个对象， 键：就是需要监测的那个东西， 值： 1.可以是当键变化时执行的函数，有两个参数，第一个是变化前的值，第二个是变化后的值。 2.可以是函数名，得用单引号包裹。 3.可以是一个对象，这个对象有三个选项： （1）handler ：一个回调函数，监听到变化时应该执行的函数。 （2）deep ：boolean值，
2018-05-25 14:50:56
3096
原创 Vue.js学习笔记（三）
Vue 事件处理器：1.直接用表达式：v-on:<div id="app"> <button v-on:click="counter +=1"></button> <p>{{counter}}</p></div>new Vuew({ el:'#app', data:{ counter:0 }})2.定义一个方法：<div id="app">
2018-04-24 20:35:12
208
原创 vye.js 关于自定义事件
自定义事件在子组件的某个事件中触发父组件的某个自定义事件。 利用v-on绑定自定义事件： 使用$on(eventname)监听事件 使用$emit(eventName, optionalPayload)触发事件父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。主要靠着父组件注册自定义事件，子组件触发该事件，达到传参等效果。例1：<div id="app">
2018-04-24 20:26:31
287
原创 vue.js 关于watch
watch：观测Vue实例上的数据变动，对应一个对象， 键：就是需要监测的那个东西， 值： 1.可以是当键变化时执行的函数，有两个参数，第一个是变化前的值，第二个是变化后的值。 2.可以是函数名，得用单引号包裹。 3.可以是一个对象，这个对象有三个选项： （1）handler ：一个回调函数，监听到变化时应该执行的函数。 （2）deep ：boolean值，是否深度监
2018-04-11 12:54:48
696
原创 Vue.js学习笔记（二）
计算属性：computed<div id="app"> <p>{{message}}</p> <p>{{reserveMess}}</p></div><script> var vm = new Vue({ el:"#app"
2018-04-11 12:51:15
265
原创 Vue.js学习笔记（一）
Vue每个 Vue 应用都需要通过实例化 Vue 来实现： var vm = new Vue({ //选项 })el : DOM元素中的id， data : 定义属性， methods : 定义函数，可以用return返回函数值，{{ }}用于输出对象属性和函数返回值， 当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入 了其 data 对象中能找到的所有的属
2018-04-10 14:56:33
255
原创 理解回调函数
A callback is a function that is passed as an argument to another function and is executed after its parent function has completed.
2017-12-06 19:18:28
410
原创 JS原型模式之修改与重写
"实例中的指针仅指向原型，而不是指向构造函数”。"重写原型对象切断了现有原型与任何之前已经存在的对象实例之间的关系；它们引用的仍然是最初的原型”。
2017-10-28 20:43:14
4051
原创 事件冒泡和事件捕获
事件冒泡：IE的事件流叫做事件冒泡，即从事件开始的最具体的元素接收，然后逐层往上传播到较不具体的节点。比如：<body> <div id="grandfather"> <div id="father"> <div id="son"></div> </div> </div></body> 三个div的关系：son->fathe
2017-10-22 18:55:41
319
转载 npm初入门
what is npm?npm（node package manager）npm（node package manager）nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等）；
2017-09-24 16:27:55
459
原创 Gulp入门基础总结
what is gulp?gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。 gulp是基于Nodejs的自动任务运行器
2017-09-24 16:05:23
556
原创 JS原生实现瀑布流
在暑期留校期间完成了瀑布流的任务，现在写下这篇博客作为总结以及回顾。 首先来讲下瀑布流的思想：首先将屏幕分成n列，图片有规则的（宽度一致高度随机，除了第一排的图片，其余图片的布局紧接在当前列长度最短的那列，并且在实现霸屏的情况下，如果继续滑动鼠标滑轮，图片数据会继续向下加载，直至不再滑动鼠标滑轮）。
2017-09-16 21:44:08
414
原创 初识JS定时器
最近在学JS种的运动，用到了定时器，出了这样那样的问题，特意了解了一下JS定时器，写下作为总结和回顾。JS中定时器分为两种：setTimeout和setInterval，以下作为对比来讲。1.setTimeout：语法：setTimeout(method,time); 两个参数，method参数是要执行的代码（一般是函数），time参数是指延迟time毫秒将定时器的代码添加到队列中，而不是何时执行
2017-08-10 21:05:41
462
原创 无缝滚动
学了定时器后做了一个无缝滚动的小demo，在此小结一下。 首先，无缝滚动用到的一个小心机，就是将原来的滚动画布加长为原来的两倍，在滚动到特殊位置的时候，改变画布的left使之看起来像一直在滚动的效果。（默认为向右滚动，左端的按钮可以控制滚动方向，当鼠标移动到滚动条上时暂停滚动，移出之后继续滚动）效果如下： html代码如下：<body><input type="button" id="le
2017-08-03 11:19:43
428
原创 创建对象的几种方法的总结
花了些时间在JS创建对象这块，写下做总结，也备以后复习。1. 工厂模式：用函数封装以特定接口创建对象的细节，解决了创建多个相似对象的问题，但没有解决对象识别的问题，代码示例如下：function creatPerson(name,age,job){ var o = new Object(); //在函数中定义对象和对象的属性 o.nam
2017-07-25 19:53:32
672
原创 关于三栏布局（浮动法/定位法/margin负值法）
三栏布局就是页面布局主要分为左中右三个部分，普遍为左、右固定中间自适应的形式。 1.定位法三栏布局：CSS代码：html , body { margin: 0; padding:0; height: 100%; } #right ,#left { position: absolute; /*设置定位*/
2017-07-18 15:59:53
1388
原创 关于position：relative,absolute,fixed和static
恶补了一下position的一些知识点，写下自己的理解，见谅。首先，position是个啥？定位。就大家所知，position有4个值：relative,absolute,fixed和static。在没有设定的情况下，默认为static，所以在没有特殊要求的情况下，可以省略不写。所以就着重讲讲另外三个。1.relative：相对定位。（相对上一个容器的定位，只会改变自身的定位，不影响其
2017-07-17 19:52:43
629
原创 opacity和rgba()
opacity和rgba()都可以设置透明度，但opacity在设置透明度时会被其子元素继承，举个例子：分别用opacity和rgba设置背景的透明度，显示出的效果如下：上面一个是opacity设置的显示出来的结果，由于opacity会被子元素继承，所以字也变透明了，而下方那个是rgba设置的，只有背景颜色变透明了
2017-07-16 18:40:26
608
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人