- 博客(36)
- 收藏
- 关注
RSS订阅原创 罕见的js技能
单行简洁的代码很难维护（有时甚至难以理解），但这并不能阻止广大攻城狮们脑洞，在编写简洁的代码后获得一定的满足感。以下我最近的一些收藏javascript精简代码集合。它们都可以在你的开发控制台中运行，你可以从控制台中查看运行结果。同时，我希望你能在评论中分享一些自己的藏品！ 创建过去七天的数组，如果将代码中的减号换成加号，你将得到未来7天的数组集合// 创建过去七天的数组[...Arr...
2019-04-29 15:07:10
249
原创 vuex插件
vuex介绍vuex是vue的一个插件，一个库，简单来说: vuex是对应用中组件的状态进行集中式的管理(读/写)的，即状态自管理应用github站点: github站点在线文档:在线文档：在线文档vuex作用：实现多组件共享状态我们知道在一个大型的项目中，往往多个视图依赖于同一状态(同一个数据对象)，或者来自不同视图的行为需要变更同一状态(一个数据发生改变，所有依赖这个数据的页面需...
2019-04-25 16:14:46
786
原创 模板解析
1.模板解析的关键对象: compile对象模板解析的基本流程:将el的所有子节点取出, 添加到一个新建的文档fragment对象中对fragment中的所有层次子节点递归进行编译解析处理(主要对应的init()函数)《1》对大括号表达式文本节点进行解析《2》对元素节点的指令属性进行解析《2.1》 事件指令解析《2.2》 一般指令解析将解析后的fragment添加到el...
2019-04-23 16:53:17
479
原创 数据代理(MVVM.js)
数据代理概念通过一个对象代理对另一个对象中属性的操作(读/写)，比如a里面包含了b，想要操作b，就通过操作a来达到操作b的效果数据代理目的通过vm对象来代理data对象中所有属性的操作数据代理好处:更方便的操作data中的数据数据代理基本实现流程：通过Object.defineProperty()给vm添加与data对象的属性对应的属性描述符所有添加的属性都包含getter/se...
2019-04-23 16:47:49
392
原创 Vue双向数据绑定
几种实现双向绑定的做法目前几种主流的mvc(vm)框架都实现了单向数据绑定，而我所理解的双向数据绑定无非就是在单向绑定的基础上给可输入元素（input、textare等）添加了change(input)事件，来动态修改model和 view，并没有多高深。所以无需太过介怀是实现的单向或双向绑定。实现数据绑定的做法有大致如下几种： 发布者-订阅者模式（backbone.js） 脏值检查...
2019-04-23 16:43:50
254
原创 MVC与MVVM区别
MVC在MVC里，View是可以直接访问Model的！从而，View里会包含Model信息，不可避免的还要包括一些业务逻辑。 MVC模型关注的是Model的不变，所以，在MVC模型里，Model不依赖于View，但是 View是依赖于Model的。不仅如此，因为有一些业务逻辑在View里实现了，导致要更改View也是比较困难的，至少那些业务逻辑是无法重用的。特点：把业务逻辑、模型数据、用户界...
2019-04-22 21:37:13
5446
原创 Vue中的computed，methods 和 watcher
Methods:对象属性的函数，使用方法对发生在DOM中的事件做出反应或者从组件中的其他位置调用。方法也可以对公共功能进行分组，如处理表单提交，构建可重用的类似发出Ajax请求等； computed: 计算属性对于从现有源，来组合新的数据费城方便。与Methods相比，突出的优点是缓存了输出，即如果独立于计算属性的某些内容在页面上发生更改，并且重新呈现UI,则会返回缓存的结果，并且不会重新计...
2019-04-18 14:15:41
393
原创 ES6的扩展运算符的作用
ES6的扩展运算符(...)的作用 将数组转为用逗号分隔的参数系列 ；如...[1,2,3] 实现数组的复制和解构赋值；如 a=[1,2,3] b = [...a] 取代arguments对象和apply方法，获取未知参数个数情况下的参数集合；...
2019-04-18 13:50:44
1111
原创 JavaScript七大继承解析
原型链继承首先我们简单回忆一下构造函数、原型、原型链之间的关系：每个构造函数有一个prototype 属性，它指向原型对象，而原型对象都有一个指向构造函数的指针 constructor，实例对象都包含指向原型对象的内部指针[[prototype]]。如果我们让原型对象等于另一个构造函数的实例，那么此原型对象就会包含一个指向另一个原型的指针。这样一层一层，逐级向上，就形成了原型链。根据上面的回顾...
2019-04-17 15:31:49
151
原创 怎么让一个 div 水平垂直居中
<div class="parent"> <div class="child"></div></div>方法1：div.parent { display: flex; justify-content: center; align-items: center;}方法2：div.parent { pos...
2019-04-15 14:29:34
786
原创 js判断一个数值为 +0
function isPosZero (n) { return n === 0 && 1 / n === Infinity}
2019-04-15 12:42:49
580
1
原创 Js判断一个数为整数
// ES6Number.isInteger(num);// ES5if (!Number.isInteger) { Number.isInteger = function(num) { return typeof num == "number" && num % 1 == 0; };}
2019-04-15 12:39:37
1794
原创 prototype 和 __proto__ 区别
prototype是构造函数的属性。__proto__是每个实例都有的属性，可以访问[[prototype]] 属性。实例的__proto__与其构造函数的prototype指向的是同一个对象。function Student(name) { this.name = name;}Student.prototype.setAge = function(){ this.age...
2019-04-10 21:07:41
410
原创 通过new的方式创建对象和通过字面量创建有什么区别？
new的原理new:创建一个新对象。这个新对象会被执行[[原型]]连接。将构造函数的作用域赋值给新对象，即this指向这个新对象.如果函数没有返回其他对象，那么new表达式中的函数调用会自动返回这个新对象。function new(func) { lat target = {}; target.__proto__ = func.prototype; let ...
2019-04-10 20:46:39
5550
2
原创 类数组和数组的区别
类数组拥有length属性，其它属性（索引）为非负整数（对象中的索引会被当做字符串来处理）;不具有数组所具有的方法；类数组是一个普通对象，而真实的数组是Array类型。常见的类数组有: 函数的参数arugments, DOM对象列表(比如通过 document.querySelectorAll 得到的列表),jQuery 对象 (比如 $("div")).类数组可以转换为数组:/...
2019-04-10 15:46:09
3745
原创 如何判断一个变量是不是一个数组
判断一个变量是否是数组有几种不同的方法使用Array.isArray 判断，如果返回 true, 说明是数组.第一种方法的原理如下：Array.isArray = function(value) { return Object.prototype.toString.call(value) === '[object Array]';}简单理解就是运用对象原型的toString方法...
2019-04-10 15:39:57
7391
原创 js中的sort方法
soft()方法原理js中的sort方法不同于Java中的soft方法，默认的按照升序排列数组项–最小的排在最前面，最大的排在最后面。但在js中，sort方法会调用每个数组项的toString()转型方法，然后比较得到的字符串，以确定如何排序，即使数组中每一项都是数组，sort()方法比较的也是字符串。如：var values = [0.1,5,10,15];values.sort();...
2019-04-09 21:36:26
8463
2
原创 js中的for in 和 for of 的区别
for...in和for...of的区别[ ]for...in是ES5的标准，该方法遍历的是对象的属性名称(key：键名)。一个Array对象也是一个对象，数组中的每个元素的索引被视为属性名称，所以在使用for...in遍历Array时，拿到的是每个元素索引一般用于遍历对象的可枚举属性。以及对象从构造函数原型中继承的属性。对于每个不同的属性，语句都会被执行。不建议使用for in 遍...
2019-04-09 21:01:29
22145
原创 forEach，map， filter， find， sort，some等方法的易错点整理
一、常用方法解析说起数组操作，我们肯定第一反应就是想到forEach()、map()、filter()等方法，下面分别阐述一下各方法的优劣。1、forEach1.1 基础点 forEach的使用频率很高，多用于对数组自身的改变和各元素相关统计性的计算，重要特性如下：可以改变数组自身，没有返回值；中途不能用常规操作跳出循环，可以用抛出异常（try/catch）的方式，但不推荐这样做；...
2019-04-08 21:01:52
3022
1
原创 JS基本类型和引用类型的区别
JS基本类型和引用类型的区别主要以下几个方面： 在内存中的位置不同基本类型： 占用空间固定，保存在栈中；引用类型：占用空间不固定，保存在堆中；**栈（stack）**为自动分配的内存空间，它由系统自动释放；使用一级缓存，被调用时通常处于存储空间中，调用后被立即释放。**堆（heap）**则是动态分配的内存，大小不定也不会自动释放。使用二级缓存，生命周期与虚拟机的GC算法有关当一...
2019-04-08 19:40:49
1732
原创 前端性能优化--HTML优化，CSS优化，JS优化
前端的性能优化主要分为三部分： HTML优化避免 HTML 中书写 CSS 代码，因为这样难以维护。使用Viewport加速页面的渲染。使用语义化标签，减少 CSS 代码，增加可读性和 SEO。减少标签的使用，DOM解析是一个大量遍历的过程，减少不必要的标签，能降低遍历的次数。避免 src、href等的值为空，因为即时它们为空，浏览器也会发起 HTTP 请求。...
2019-04-03 20:53:15
1024
原创 盒模型box-sizing属性
盒模型问题在IE5.x以及IE6~7的怪异(Quirks)模式下，边框和内距都包含在宽度或高度以内。而在标准的浏览器中，宽度和高度仅仅包含内容的高度或者宽度，除去了边框和内距两个区域，这样势必给Web设计师处理效果增添了很多的麻烦box-sizing属性为了解决上述的问题，CSS3添加了一个盒模型属性box-sizing，能够事先定义盒模型的尺寸解析方式。 语法： box-sizing:...
2019-04-03 16:00:11
538
原创 CSS盒模型
在CSS中盒模型被分为两种，第一种是W3C的标准模型，另一种是IE的传统模型，它们相同之处都是对元素计算尺寸的模型，具体说就是对元素的width，height，padding，和border以及元素实际尺寸的计算关系，不同之处是两者的计算方式不一样。 W3C的标准盒模型外盒尺寸计算(元素空间尺寸)element 空间高度 = 内容高度 + 内距 + 边框 + 外距element 空间宽度...
2019-04-03 14:54:13
75
原创 head标签
<head>介绍<head>标签用于定义文档的头部，它是所有头部元素的容器。<head>描述了文档的各种属性和信息，包括文档的标题、在 <head> 中的位置以及和其他文档的关系等。<head>内部标签<base><base>是个很实用但是很多人会忽略的标签。它可以为页面上的所有链接规定默认地址或默认目标。通...
2019-04-03 14:28:35
443
原创 web移动端布局方法
移动端布局分类移动端的布局主要分为四类，分别是流式布局，rem布局，响应式布局和弹性布局。 流式布局（百分百布局）：定义：使用非固定像素来定义网页内容，也就是百分比布局，通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固 定像素的限制，内容向两侧填充。优点：px(绝对单位)做css单位,这样的布局可以适配移动端不同的分辨率设备，在大屏小屏自动适应,特别适合于电商...
2019-04-02 15:37:38
5996
原创 ES6和js的遍历方法
数组遍历 ES6提供了三个新方法—entries()， keys()，和values()。这些方法都是用于遍历数组，都返回一个遍历器对象。可用for…of 循环遍历，唯一的区别在于，keys()，是对键名的遍历，values()是对键值对的遍历，entries()是对键值对的遍历。//keys()方法for(let index of ['a'，'b'].keys()){ con...
2019-04-02 14:59:43
1006
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人