michael8512的博客

1、在父组件中绑定子组件的生命周期我们一般的写法是子组件：export default { mounted() { this.$emit('listenMounted') }}父组件<template> <div> <List @listenMounted="listenMounted"...

这篇文章主要介绍如果用canvas实现固定坐标数组的飞线动画（折线），或者可以说是电流效果吧。之前在网上有看到过流星托尾的效果，那种效果的主要方式是通过不断添加“蒙板”层的方式逐渐淡化前几秒的位置，而绘制的线其实就是一个小球，一直在移动。看起来是线，代码层面上其实只画了一个点。主要的代码为ctx.fillStyle = 'rgba(0,0,0,0.1)';//这里颜色要与背景图的颜色一样...

1、循环1）循环类型的选择：for、while、do-while、for-in  除了for-in循环之外，其他循环类型差不多。除非要迭代一个属性数量未知的对象，否则应避免使用for-in循环。 2）减少迭代的工作量： （1）减少对象成员及数组项的查找次数。对于item.length，使用局部变量对其缓存，速度可以快25%以上 ； （2）倒序循环：此时，每个控制条件只需简单与0

当需要对DOM元素进行一系列操作时，可以通过以下步骤来减少重绘和重排的次数：1、使元素脱离文档流；2、对其应用多重DOM改变；3、把元素带回到元文档中。该过程会触发两次重排（reflow），如果忽略这两个操作，则第二部操作会造成多次重排。如何使元素脱离文档流：1、隐藏元素，DOM修改，重新显示；      这里主要通过display属性达到2、使用文档片段（

HTML 5 增加了一项新功能是 自定义数据属性 ，也就是  data-* 自定义属性。在HTML5中我们可以使用以 data- 为前缀来设置我们需要的自定义属性，来进行一些数据的存放。当然高级浏览器下可通过脚本进行定义和数据存取。在项目实践中非常有用。例如： 1、使用attribute方法存取 data-* 自定义属性的值JavaScript代码：// 使用getAttr

1、AMD1）来源：是 RequireJS 在推广过程中对模块定义的规范化产出2）执行顺序：提前执行2、CMD1）来源：是 SeaJS 在推广过程中对模块定义的规范化产出2）执行顺序：延迟执行

1、Web Worker1）Web Worker 是运行在后台的 JavaScript、独立于其他脚本、不会影响页面的性能、您可以继续做任何愿意做的事情：点击、选取内容等等、而此时 Web Worker 在后台运行；2）除了DOM操作之外、理论上任何JS脚本任务都可放入worker中执行；3）不能跨域访问JS；4）从用户体验上看、提高了服务性能。5）使用：（1）new Wo

1.概述  除了正常运行模式，ECMAscript 5添加了第二种运行模式："严格模式"（strict mode）。顾名思义，这种模式使得Javascript在更严格的条件下运行。2.为什么用严格模式- 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;- 消除代码运行的一些不安全之处，保证代码运行的安全；- 提高编译器效率，增加运行速度；

1. click事件的覆盖当在同一个元素上绑定两个click事件时，后一个会覆盖前一个。例如：div.onclick=function(){ console.log('click1');};div.onclick=function(){ console.log('click2');}此时，单击div，输出click2.2. click事件的分解cl

什么是作用域链：当代码在一个环境中执行时，会创建变量对象的一个作用域链（scope chain，不简称sc）来保证对执行环境有权访问的变量和函数的有序访问。作用：保证执行环境里有权访问的变量和函数是有序的。对象：作用域第一个对象始终是当前执行代码所在环境的变量对象，变量访问到window对象即被终止。访问方式：作用域链的变量只能向上访问，不允

浮动会脱离文档流，如果不清楚浮动，会对周围的元素造成影响。当元素浮动时，它将不再处于普通的文档流中，不占据空间。html和css代码&lt;div class="father"&gt; &lt;div class="child1"&gt;&lt;/div&gt; &lt;div class="child2"&gt;&lt;/div&gt;&lt;/di

1、概述：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。那这是什么意思呢？网上的各位大牛们讲事件委托基本上都用了同一个例子，就是取快递来解释这个现象，我仔细揣摩了一下，这个例子还真是恰当，我就不去想别的例子来解释了，借花献佛，我摘过来，大家认真领会一下事件委托到底是一个什么原理： 有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口

1、MVCView 传送指令到 ControllerController 完成业务逻辑后，要求 Model 改变状态Model 将新的数据发送到 View，用户得到反馈所有的通信都是单向的。2、MVVCView：UI界面  ViewModel：它是View的抽象，负责View与Model之间信息转换，将View的Command传送到Model

1）IE支持currentStyle，Firefox使用getComputStyle;2）IE使用innerText，FireFox使用textContent；3）滤镜方面：IE：filter:alpha(opacity= num)；Firefox：-moz-opacity:num；4）事件方面：IE：attachEvent：火狐是addEventListene

1、创建了一个空对象，并且this变量引用该对象，同时还继承了该函数；2、属性和方法被加入到this引用的对象中；3、新创建的对象由this所引用，并且最后隐式的返回this。var obj={};obj.__proto__=Base.prototype;Base.call(obj);

cookie虽然在持久保持客户端数据提供了方便，分担了服务器存储的负担，但还是有很多局限。1、IE6或更低版本最多20个cookie；2、IE7和之后的版本最后可以有50个cookie；3、Firefox最多50个cookie；4、chrome和Safari没有做硬性限制；5、IE和Opera 会清理近期最少使用的cookie，Firefox会随机清理cookie；6、co

1、最小化DOM访问次数，尽可能在JavaScript端处理；2、如果需要多次访问某个DOM节点，请使用局部变量存储它的引用；3、小心处理HTML集合，因为它实时联系着底层文档。把集合的长度缓存到一个变量中，并在迭代中使用它。如果需要经常操作集合，建议把它拷贝到一个数组中；4、如果可能的话，使用速度更快的API，比如querySeletorToAll()和fir

最新的浏览器提供了一个名为querySelectorAll()的原生DOM方法，可以达到jQuery获取DOM的效果，例如 hrefvar a=document.querySelectorAll("#content a");此处的a即为div中的所有a标签元素。但是这里的a为一个DOM集合，要想准确获取a标签，则应该用a[0]表示，但是这里的a虽然能用数组的方法，却不是一个标准数组。

简介：之前在两个项目的开发过程中都遇到轮播动画，因此，今天结合自己的开发经验进行一定的分享，下面是自己用vue做的一个简单的demo。这个例子的实现主要用的是TweenMax插件+scrollTop实现的。下面的Gif是实现的效果。html：css：为了让轮播效果更加自然，隐藏了滚动条。此外，这里安利一个css属性object-fit，主要用于img标签中图片的定位。本文在...

1）js加载后立即执行；2）js执行时会阻塞页面后续的内容（包括页面的渲染和其他资源的下载）。原因：因为浏览器需要一个稳定的dom树结构，而js中很可能有代码直接改变了dom树的结构，比如使用了document.write或者appendChild，甚至使用页面跳转。3）如何优化js（1）将所有的script标签放到页面底部，也就是body闭合标签之前，这能确保这脚本执行前页面已经完成了D...

介绍我觉得JS拖拽的功能，大家一定都不会陌生。然而，在自己实际的项目开发工程中，却很少用到，以至于当自己开始着手实现这个这个功能当时候，也遇到了一些问题。实现原理其实很简单，无非是鼠标事件+定位，但是，在实现当过程中，还是有一些注意点。同时，我自己在开发过程中，也是看了一些相关当博文，其中，还牵扯到了其他一些知识点，也有一些自己当见解同大家分享。PS：第一次用markdown编辑器，排版问题...

1. 将代理作为原型链    用Object.create( )方法创建原型链，同时设置自定义的defineProperty上述例子中，在对象上定义属性的操作不需要操作对象原型，所以代理中的defineProperty陷阱永远不会被调用。自定义get和set方法后，得到下面修改后的代码    下面的例子使用Promise对象检验代理原型链，捕获get陷阱2. 将代理作为类的原型这里，如果用ES6中...

        实际上，尾调用的优化发生在引擎背后，除非你尝试优化一个函数，否则无需思考此类问题。递归函数是其主要的应用场景，此时尾调用优化的效果很显著。请看下面这个阶乘函数        由于在递归调用前执行了乘法操作，因此当前版本的阶乘函数无法被引擎优化。如果n是一个非常大的数，则调用栈的尺寸就会不断增长并存在最终导致栈溢出的潜在风险。        优化这个函数，首先要确保乘法不会在函数调用...

1、避免双重求值使用evel()和Function()构造器时，使得在JavaScript代码中执行另一段JavaScript代码，因此会导致双重求值的性能消耗。1) eval()例子比较：var array=['first','second','third'];console.time()var item=eval("array[0]")console.timeEnd()consol...

1、异步加载的方案： 动态插入script标签  1）通过ajax去获取js代码，然后通过eval执行  2）script标签上添加defer或者async属性  3）创建并插入iframe，让它异步执行js  2、延迟加载：有些 js 代码并不是页面初始化的时候就立刻需要的，而稍后的某些情况才需要的。1）使用setTimeout延迟方法加载时间，给网页加载留出等多

最常用的方法就是Console.log(),就是在控制台输出内容。刚开始学前端的时候看到大家都是用的Console.log(),几乎没有见过Console的其他用法，难道Console真的没有别的用法了？查了一下后发现Console还是非常强大的，至于为什么很少看到有人用可能是因为用过都删掉了吧。在此记录一下Console的其他用法。注意：因为Console 对象提供对浏览器控制台的接入 所以在不...

1. 遍历DOM当遍历父节点下面的所有子节点时，例如： 1 2 9000个 9003var div=document.getElementById("div");1) nextSibling方法var f=div.firstChild;var name='';do{ name=div.nodeName;}while(f=f.nextSibling)2)

1、背景介绍使用JavaScript数组常常需要对数组进行遍历、迭代操作。而我们常用的就是for语句对数组进行迭代。然而在ECMAscript5已经为数组定义了5个迭代的方法，分别是：filter、some、map、foreach、every，下面我们讲讲它们的具体作用。2、知识剖析1）every()：对数组中的每一项运行给定函数，如果该函数对每一项都返回true，则返回t

1、运行时机setTimeout并不是等其他任务完成时才开始计时，而是在出发setTimeout时开始计时，如果setTimeout后面的程序的运行时间大于setTimeout的等待时间，则setTimeout中的函数会优先于后面的程序执行。例如：setTimeout(function(){ console.log('a')},50)anotherFun();如果ano

我对mixins的理解是，有点像注册了一个vue的公共方法，可以绑定在多个组件或者多个Vue对象实例中使用。另一点，类似于在原型对象中注册方法，实例对象即组件或者Vue实例对象中，仍然可以定义相同函数名的方法进行覆盖，有点像子类和父类的感觉。下面主要参考网上的一些资料，对mixins的实际作用做介绍：1、方法的复用&lt;div id="app"&gt; &lt;child&gt;&lt;...

vue重methods、computed、watch以及v-model都能侦听数据，并相应数据的变化1）methods：每次获取都会重新计算求值 First Name: Last Name: methods: {{name}} let vm=new Vue({ el

1. for循环1) Array数组for(let i=0,len=arr.length;i&lt;len;i++){    console.log(arr[i])}2) Object对象for循环无法遍历Object对象3) NodeList数组&lt;span&gt;1&lt;/span&gt;&lt;span&gt;2&lt;/span&gt;&lt;span&gt;3&lt;/span...

function a(){ var i=0; function b(){ console.log(i++) } return b;}var c=a();//这里执行了函数a，返回函数b，因此c为函数bc();//0，这里调用了函数bc();//1，因为i仍然保存在a中，而函数b保持着对i的引用，因此i在内存中的栈去依然保留

内存泄漏：指一块被分配的内存既不能使用，又不能回收，直到浏览器进程结束。1、JS的回收机制JavaScript垃圾回收的机制很简单：找出不再使用的变量，然后释放掉其占用的内存，但是这个过程不是实时的，因为其开销比较大，所以垃圾回收系统（GC）会按照固定的时间间隔,周期性的执行。到底哪个变量是没有用的？所以垃圾收集器必须跟踪到底哪个变量没用，对于不再有用的变量打上标记，以备将来收

1. 代码简洁x=x+1；在不影响功能的情况下可以简写成x++；2. 变量名和方法名在不影响寓意的情况下简单（可以选用首字母命名）定义数组的长度可以取名为：ArrLen而不需要取为ArrayLength3. 关于JS循环（1）for(;;)：推荐使用，变量递增或递减应该使用嵌套的++或--，而不单独对循环变量赋值（2）for(i)：效率最差，因为它需要查询H

html代码如下：&lt;div class="top"&gt; &lt;span title="Top" id="topArrow"&gt;&lt;/span&gt;&lt;/div&gt;css：（添加一定的美化效果）.top{ width: 50px; height: 100px; background-color: rgba(0,0,255,0.5); border

IE内核的浏览器时间模型是冒泡型shijian.yejiushuoshi，在IE内核下，时间句柄的出发顺序是从ChildNode到ParentNode。 open the console and click me 以上的HTML代码在IE内核下IE的事件是这样传播的：Button #childdiv #ancestorBodyDocument内核是没有事件捕

1. parseInt(String,radix)：返回转换成整数的值如果radix为0或者没设置，则parseInt会根据String自动判断（1）string以0x开头，16进制；console.log(parseInt(0x19));//153（2）string以0开头，旧的浏览器默认使用8进制，ECMAScript默认10进制console.log(parseI

function Foo() { getNumber = function () { console.log (1); }; return this;}Foo.getNumber = function () { console.log (2);};Foo.prototype.getNumber = function () { console.log (3);};var ge

（1）typeof主要用于判断数据是不是基本数据类型：String、Number、Object、Null、Undefined，但是无法判断出function（有些浏览器会出错）、array、regExpconsole.log(typeof '');//stringconsole.log(typeof []);//objectconsole.log(typeof {});//object