hyMiss-CSDN博客

转载 JavaScript 的 this 原理

上一篇：每周分享第&nbsp;9&nbsp;期&nbsp;&nbsp; ...

2018-06-20 21:51:24 207

前言React 好像已经火了很久很久，以致于我们对于 Virtual DOM 这个词都已经很熟悉了，网上也有非常多的介绍 React、Virtual DOM 的文章。但是直到前不久我专门花时间去学习 Virtual DOM，才让我对 Virtual DOM 有了一定的理解，以致于要怀疑起很久之前看过的那些文章来。倒不是这些文章讲得不对，而是现在在我看来角度不太好，说得越多，越说不清。让我能够有所开窍

2018-04-17 16:26:46 217

转载 DOM操作成本到底高在哪儿？

从我接触前端到现在，一直听到的一句话：操作DOM的成本很高，不要轻易去操作DOM。尤其是React、vue等MV*框架的出现，数据驱动视图的模式越发深入人心，jQuery时代提供的强大便利地操作DOM的API在前端工程里用的越来越少。刨根问底，这里说的成本，到底高在哪儿呢？什么是DOMDocument Object Model 文档对象模型什么是DOM？可能很多人第一反应就

2018-04-17 15:39:07 313

转载 vuejs-指令详解

文章目录v-ifv-showv-elsev-modelv-repeat数组变动检测内置过滤器1.filterBy(0.12版本)2.orderBy(0.12版本)v-forv-textv-htmlv-bindv-onv-refv-elv-prev-cloak v-ifv-if指令可以完全根据表达式的值在DOM中生成或移除一个元素。如果v-if表达式赋值为false，那么对应

2018-04-14 18:58:53 312

转载 Vue中ref和$refs

如图，ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例：在上面的例子中，input的引用信息为input1 ，$refs 是所有注册过的ref的一个集合， console.log(this.$refs.input1)//<input type=”text”

2018-04-14 16:51:46 459

转载 JavaScript里mouseenter和mouseleave与mouseover和mouseout的区别

JavaScript里mouseenter和mouseleave与mouseover和mouseout的区别今天总结下mouseenter、mouseleave、mouseover、mouseout的区别，之前一直懵着用没仔细研究他们的区别，结果终于踢到铁板了。上代码：　　<style> 　　　　div { marg

2018-04-13 21:13:58 368

转载 JavaScript：理解事件、事件处理函数、钩子函数、回调函数

js获取dom数据的两种方式:1 js派函数监听事件 =>监听函数就是所谓的钩子函数=>函数钩取事件：函数主动找事件=>钩子函数2 js预留函数给dom事件，dom事件调用js预留的函数 =>事件派发给函数：事件调用函数=>回调函数打个形象的比喻：书店、你、你小表弟、书店美女店员书店暂时没有你要的书，咋办呢？ 1）你无耻的派了你小表弟在书店24小时蹲守，有人送书来，你表弟就去看下，一旦来了

2018-04-04 21:14:01 372

原创 JS中----this的指向和如何修改this的指向

thisthis是js中的一个关键字，函数运行时自动生成的一个内部对象，只能在函数内部使用。我们要讨论的是 this 的指向。this就是函数运行时自动生成的一个内部对象this的指向不是在创建时就决定了，而是由执行环境决定的。下面介绍一下几种情况下，this的指向1、全局环境全局环境下，this就代表window对象。（针对web 应用来讲）var name = 'zhar';func

2018-04-03 11:56:00 509

转载 Vue.js 中，7种定义组件模板的方法

摘要：有多种方式可以在vue中定义模板组件。我算了一下，至少有7种不同的方法：字符串（String）模板字符串（Template literal）X-Templates内联（Inline）Render函数（Render functions） JSX 单文件组件（Single page components）当然，可能还有更多方法!在这篇文章里，我们将会展示每一个方法的示例，分析其优缺点，以便你能明白

2018-03-27 16:08:44 394

原创圣杯与双飞翼布局

简单介绍圣杯布局和双飞翼布局解决的问题是一样的，就是两边定宽，中间自适应的三栏布局，中间栏要放在文档流前面以优先渲染。但是圣杯布局和双飞翼布局在实现方式上有一点差别。圣杯布局的来历是2006年发在a list part上的这篇文章： http://alistapart.com/article/holygrail 双飞翼布局介绍-始于淘宝UED： http://www.imooc.com/wen

2018-03-03 10:53:46 191

原创同源策略、跨域解决方案

1、先来说说什么是源• 源（origin）就是协议、域名和端口号。以上url中的源就是：http://www.company.com:80若地址里面的协议、域名和端口号均相同则属于同源。以下是相对于 http://www.a.com/test/index.html 的同源检测• http://www.a.com/dir/page.html ----成功• http://ww

2018-03-01 15:36:14 268

转载 JavaScript中的闭包

一、变量的作用域要理解闭包，首先必须理解Javascript特殊的变量作用域。变量的作用域无非就是两种：全局变量和局部变量。 Javascript语言的特殊之处，就在于函数内部可以直接读取全局变量。 Js代码　　var n=999;　　function f1(){　　　　alert(n);　　}　　f1(); // 999另一方面，在函数外部自然无法读取函数内的局部变量。 J

2017-10-30 15:32:48 216

原创 JavaScript中的this关键字

this始终指向调用它的对象通过几个例子弄清楚：aaaa1、 alert(this); //object window，调用该段代码的是windowalert(this === window);//true，调用该段代码的是window2、 var test = function(){alert(this === window);}test();*/

2017-10-30 09:22:41 207

转载 CSS可继承属性和不可继承属性

一、无继承性的属性1、display：规定元素应该生成的框的类型2、文本属性：vertical-align：垂直文本对齐text-decoration：规定添加到文本的装饰text-shadow：文本阴影效果white-space：空白符的处理unicode-bidi：设置文本的方向3、盒子模型的属性：width、height、margin 、margin-top、margin-ri

2017-10-25 09:56:02 949

转载 iframe用法收藏

2017-10-25 09:51:55 820

转载 JS原型

一、js中的原型毫无疑问一个难点，学习如果不深入很容易就晕了！语言的小白来说，有理解不了里面的专有名词！如果你没学过c++或者Java之类的更接触底层的语言，那就不要太深究，理解会用自然可以了，当接触到更多语言时慢慢的会理解越来越深刻！下面我就举例分享一下prototype的概念！知道对于初学者知道这些就足够了！分析一下，上面这个例子！我们可以知道

2017-10-13 10:14:31 278

转载 JavaScript原生数组Array常用方法

栈方法push方法和pop方法, 可以使数组的行为类似于栈, 先进后出, 并且推入和弹出操作只发生在一端.push方法push方法可以接收一个或多个参数, 把它们追加到数组末尾, 并返回修改后数组的长度.?12345678var arr = ['a', 'b', 'c', 'd', 'e'];var temp = arr.push('f');console.info('temp: ' + te

2017-09-28 10:40:05 348

转载是否改变原数组的常用方法归纳

改变原数组的：shift：将第一个元素删除并且返回删除元素，空即为undefined unshift：向数组开头添加元素，并返回新的长度pop：删除最后一个并返回删除的元素 push：向数组末尾添加元素，并返回新的长度reverse：颠倒数组顺序sort：对数组排序splice:splice(start,length,item)删，增，替换数组元素，返回被删除数组，无删除则不返回不改

2017-09-28 09:51:08 394

转载 JavaScript arguments对象详解

转载自：http://www.uoota.com/blog/archives/12240最近整理自己的三个月进top100的图片网站 http://ioreq.com/ 的时候，思考了一个问题，什么是javascript arguments, 遂成此文，献给大家。1. 什么是 argumentsMDN 上解释：arguments 是一个类数组对象。代表传给一个function的参数列表。我们先

2017-09-27 14:37:53 425

转载前端性能优化归纳总结篇！！！

关于前端性能优化的总结，随处都可以看到这方面的文章，而优化方法，也无外乎那些“固定”方面，当然，有些方面已经过时，所以，在这里，我自己也总结一遍吧，加深理解，也希望是一种不同的总结形式。———————–正文总这里开始————————————一、什么是前端性能优化（what）？从用户访问资源到资源完整的展现在用户面前的过程中，通过技术手段和优化策略，缩短每个步骤的处理时间从而提升整个资源的访

2017-09-22 21:25:27 331

原创进行前端性能优化几种常用的方法。

代码层面：避免使用css表达式，避免使用高级选择器，通配选择器。缓存利用：缓存Ajax，使用CDN，使用外部js和css文件以便缓存，添加Expires头，服务端配置Etag，减少DNS查找等请求数量：合并样式和脚本，使用css图片精灵，初始首屏之外的图片资源按需加载，静态资源延迟加载。请求带宽：压缩文件，开启GZIP，代码层面的优化用 hash-table

2017-09-22 17:06:47 3050

原创 CSS盒模型、行内元素与块级元素

一、CSS盒模型盒模型概述盒模型是CSS的核心知识点之一，它指定元素如何显示以及如何相互交互。页面上的每个元素都被看成一个矩形框，这个框由元素的内容、内边距、边框和外边距组成。如下图所示：内边距出现在内容区域的周围。如果在元素上添加背景，那么背景应用于元素的内容和内边距组成的区域。因此可以用内边距在内容周围创建一个隔离带，使内容不与背景混合在一起。添加边框会在内边距区域外边增加一条线。这些线可

2017-09-22 16:51:35 515

原创描述cookies，sessionStorage和localStorage的区别

三者都是在浏览器端存储数据。1.数据存储大小限制不同。cookies：数据始终在同源的http请求中携带，即cookie在服务器和浏览器间回传。故存储的数据大小最小，一般为4k。sessionStorage：数据在本地保存，不会自动把数据发给服务器。所以一般5M或者更大。localStorage：数据在本地保存，不会自动把数据发给服务器。所以一般5M或者更大。

2017-09-22 15:42:31 712

转载优雅降级和渐进增强的区别

渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断

2017-09-22 15:16:33 262

hyMiss的博客