SM-xiao-优快云博客

原创结合源码解析-vue响应式原理

vue响应式原理在之前vue2.0中，vue的响应式原理主要是基于Object.defineProperty进行数据劫持然后结合观察者模式(发布订阅模式)来实现数据的双向绑定。 function Dep() {//主题对象 this.subs = []; //订阅者列表 } Dep.prototype.notify = function() { //主题对象通知订阅者 this.subs...

2020-12-30 16:54:41 129

浏览器渲染详解浏览器渲染主要分为以下几步：这个过程中涉及几个重要的知识点浏览器渲染主要分为以下几步：生成DOM: DOM树生成时会对dom节点进行深度优先遍历，直到该节点结束，才会去遍历下一个节点生成CSSOM树: 分析css文件和元素上的行内样式，生成页面的样式文件，CSS解析大的过程是从右向左解析的，因此避免使用嵌套太深的标签，会影响解析性能创建Render树: 将DOM树和CSSOM树进行关联起来布局Layout: 浏览器根据render树进行布局，计算出每个节点的坐标绘制Paintin

2020-12-30 16:53:19 931

原创 IE6常见CSS解析Bug及hack

1.谷歌浏览器表单元素在点击时候会出现外边线 hack：outline:none; 2.ie中图片加了超链接后会带有边框 hack：border:none/0; 3.ie6以下的版本中，浏览器正在解析浮动元素时，会错误地把浮向边界加倍显示 hack：display：inline 4.ie6以下的版本中，部分块元素拥有默认高度（低于16px高度） hack：给元素添加声明 overflow:hidd...

2019-07-19 10:58:55 208 1

原创总结：常见的创建对象的几种方式

1.通过Object构造函数或对象字面量创建单个对象 Var obj=new Object(); //在外部生成 Var person={name:’aa’,age:12}; 缺点：使用同一个接口创建很多对象，会产生大量的重复代码 2.工厂模式：在一个函数内创建好对象，然后把函数返回 //在内部生成 function creatObj(name, age) { var obj =...

2019-04-28 17:33:58 3152

原创显示类型转换和隐式类型转换

显示类型转换 1.Number()：函数把对象的值转换为数字，如果对象的值无法转换为数字，那么 Number() 函数返回 NaN。 var a = 'true'; console.log(typeof(Number(a)) + '-' + Number(a)); // number-NaN var a = '1a'; c...

2019-04-28 17:26:37 2217

原创 call,apply,bind的区别和用法

用途：改变this指向区别：传参列表不同 function Person(name,age){ this.name=name; this.age=age; this.job=function(){ console.log("teacher"); } } var newPerson={}; Person.call(newPers...

2019-04-28 16:39:19 1021

原创 slice,splice,split区别和作用

slice,splice,split区别和作用 slice(start,[end])方法：该方法是对数组进行部分截取，该方法返回一个新数组，参数start是截取的开始数组索引，end参数等于你要取的最后一个字符的位置值加上1（可选）。包含了源函数从start到 end 所指定的元素，但是不包括end元素，比如a.slice(0,3)； 1.如果出现负数就把负数与长度相加后再划分。 2.slice中...

2019-04-26 21:31:09 3388

原创如何解决在JS中0.1+0.2！=0.3的问题

如何解决在JS中0.1+0.2！=0.3的问题在计算机中数字是以多位二进制的方式进行存储，在js中数字采用的是双精度标准进行存储。在谷歌中可以用： function numbersequal(a, b) { return Math.abs(a - b) < Number.EPSILON; } var a = 0.1 + 0.2, b = 0.3; console.log(numberse...

2019-04-26 21:20:08 1232 1

原创行内元素、行内块元素、块级元素的区别

行内元素：display:inline 特点：在水平方向上排列，它的宽高随内容而定。不可以设置宽高，可以设置行高。设置margin和padding的上下无效。常见的内联元素有： a,b,br,em,font,i,img,input,label,select,small,span,strike(中划线),strong 注意： 1.虽然行内元素设置行高之后会有位置的变化，但是并没有改变盒子大小。 2...

2019-04-26 21:14:11 2020 1

原创 JavaScript中var、let、const的区别

在最新的ES6中添加了两个变量声明的方式：let、const var—变量声明会提升，没有块级作用域在非严格模式下，没有用var声明的变量会被默认为全局变量，但是在严格模式下会报错。使用var定义全局变量时，不能用delete删除，而不使用var定义时可以删除。 var声明相同的变量时，后者会覆盖前者。变量声明提升：没有块级作用域：声明在for循环中的变量，跳出循环仍然可以使用 let —...

2019-04-26 12:24:47 227 1

SM-xiao的博客