甘焕的博客

在用table进行布局时，大部分人都会对齐复杂且略显混乱的空间分配方式感到无所适从，尤其是在计量单位像素(px)与百分比(%)进行混合使用时，本文详细讲述了在auto布局下表格的宽度与高度如何进行分配。

通过change事件，输入框可以感知用户手动输入，但是如果用程序对输入框进行赋值，则会出现无法感知的情况。实践的HTML如下：<input type="text" id="username" name="username"/>实践的JS如下：var username = document.querySelector("#username"), counter = 0;// 创建定时器对其

在单页面应用里，被requirejs加载的模块会一直缓存在内存中，以后无论进行多少次加载都不会发送网络请求，并且模块也不会再进行初始化，这对我们的引用可能造成不必要的干扰。

既想利用ES6的先进特性，又想发挥Requirejs的AMD特性，于是想着将ES6代码转换为满足Requirejs规范的AMD代码，并解决ES6默认添加default属性问题。

因为requirejs的全局模块特性，即模块载入后，在同一个页面应用中，模块对应的JS文件只会解释执行一次，所以我们可以将某一个require模块用作全局变量，用于所有的require模块共享。代码如下：// User.js文件只会被加载一次，也只会被解释执行一次var yiifaa = { username : 'yiifaa', age : 20};yiifa

1. 入门及练手应用集合startbootstrap.com是新手学习Bootstrap必看的站点，里面不仅包含了桌面应用(由浅入深，包含Dashboard)，还有移动应用，并且布局简单，扩展容易，更重要的是，全是免费的。 访问地址如下：https://startbootstrap.com/template-categories/all/2. 免费的主题集合在使用默认的浅色主题后，如果有意犹未尽的

针对大屏修炼，d3必不可少，可引入d3到项目中不是一件简单的事，很容易犯错，如下：import d3 from 'd3'// 执行代码d3.select('#canvas').text('Hello,yiifaa!')执行上面的代码，则必然出现d3引用错误，如下：uncaught TypeError:Cannot read property 'select' of undefined1. 利

在Javascript中，变量的类型一旦声明为基础类型，如果再为基础类型的变量添加属性，则其新建的属性不可存储，会自动销毁，基本流程如下： 1. 首先将基础类型临时转换为Object类型，并备份好基础类型的值； 2. 为Object类型添加属性； 3. 属性赋值完成后，再将Object转换为基本类型，并恢复为原值；所以，整体来说，为基础类型添加属性的感觉就像是幻影数据，赋值完成后，就会自动销毁

如果想知道构造函数被实例化了多少次，最常用的方法如下：// 声明构造函数var count = 1function User(username) { this.username = username count ++;}表面上看起来没有问题，其实会产生两个缺陷： 1. 此函数被只是作为函数调用，而不是作为构造函数； 2. count暴露在外，容易被无意修改改进方法如下：/

在webpack中引入jquery很困难，引入jquery插件更困难，本文提供了多种方法在webpack项目中引入jquery及其相关插件。

SVG中DOM元素的偏移与缩放都是基于SVG元素的左上角，所以如何理解与计算SVG中元素的真实位置就比较难，下面的例子都以圆(circle)为例。1.缩放假定缩放的比例为s，执行缩放后，圆的圆心坐标由(cx, cy)变为(cx * s, cy * s)2. 偏移假定偏移的距离为(x1, y1), 执行单纯的偏移后，圆的圆心坐标由(cx, cy)变为(cx + x1, cy + y1)3. 先偏移后缩

有如下的代码：<style type="text/css"> canvas { position:absolute; height : 100%; width : 100%; }</style><canvas id="canvas" width="100%" height="100%"></canvas><script type

今天看到这样的面试题，如下：var yiifaa = 'yiifaa', str1 = new String(yiifaa), str2 = String(yiifaa)声明与赋值了3个变量，然后考题如下：// 请确认以下的判断是否准确str1 === yiifaa//str2 === yiifaa//typeof str1 === typeof str2根据JS的语法，

在绘制图谱时，需要在圆圈中填充图片，且不能重复，效果如下： 实现的代码如下：<defs> <!-- 这里的width、height都是相对的比例，所以1也代表100% --> <pattern id="patter-0" height="1" width="1" patternContentUnits="objectBoundingBox"> <!-- 这里的w

在前端开发中，发现小组成员总是对ES6、Javascript、CommonJS、AMD、nodejs概念搞不清，既不知道它们之间的联系，更不知道它们之间的差异。理清它们的关系很简单，首先要从最核心的说起，也就是Javascript，javascript是一种脚本编程语言，有自己独立的语法与语义，没有javascript，也就没有其他的那些概念了。关于ES6，可直接理解为javascript的增强版(

设置为disabled与readonly的元素都不能进行输入操作，但它们依旧存在显著的差异，稍微处理不好，就会得到难以预料的结果。1. disabled的元素不会响应任何事件disabled不会对任何事件进行响应，包括click等各类鼠标事件，而readonly的元素不仅会响应click事件，还能响应focus事件(但难以保持，会马上出发blur事件)，所以对于按钮的状态，只设置为readonly是

blur与change事件在绝大部分的情况下表现都非常相似，输入结束后，离开输入框，会先后触发change与blur，唯有两点例外。1. 没有进行任何输入时，不会触发change在这种情况下，输入框并不会触发change事件，但一定会触发blur事件。在判断表单的修改状态时，这种差异会非常有用，通过change事件能轻易地找到哪些字段发生了变更以及其值的变更轨迹。2. 输入后值并没有发生变更这种情况

需要同时为多个元素绑定事件并绑定数据，但如果没有理解透彻作用域的有效范围与事件响应机制，常常会发生数据绑定错误甚至代码执行错误。

随着HTML5的快速发展，现在HTML的应用不仅讲究布局的美观性与合法性，还越来越注重编码的语义性，传统页面中满是div元素的编码风格正逐渐被淘汰，取而代之的是更具语义性与自身行为的元素。

值传递与引用传递的最大区别在于，引用传递的实际参数与形式参数指向同一个地址，所以，在方法执行中，对形式参数的操作实际上就是对实际参数的操作，这个结果会在方法结束后被保留下来，所以方法执行中形式参数的改变将会影响实际参数。而在JS中，无论参数是什么类型，对形式参数的任何赋值都不会影响到实际参数。

如何在浏览器里实现零延迟的定时任务！

当浏览器的窗口失去焦点时，窗口中的所有定时任务(包括setTimeout、setInterval, requestAnimationFrame)都会暂停，只有当窗口再次被激活时，其中的定时任务才会继续运行。需要指出的是，IE浏览器不会出现这种现象。       以下两种情况，浏览器的窗口必定会失去焦点，进入背景运行状态。 在同一个浏览器窗口中，发生了浏览器的Tab页切换，请注意，

看了很多技术文章，大多都信誓旦旦地说setTimeout(f, 0)语句中的f方法会在4ms之后执行，以至于小组很多成员都深信不疑，我决定亲手来验证一下4ms的真伪。事实证明，4ms完全是伪论！

从定义上来讲，’_ _ proto_ _ ‘是Object.prototype的一个可读写访问属性，也就是说，操作’_ _ proto_ _ ‘就相当于操作了Object.prototype。

CSS动画的扩展性、易用性与性能都远超JS动画，但其可控制性(启动、暂停、重新启动)、生命周期的监听都远不如JS动画那么强大，但充分利用元素的style、class特性依旧可实现CSS动画的停止功能，并能利用新增的”transitionend”事件监听到动画何时结束。

当输入框的值发生变化时，我们可以通过keydown、keyup、input、onchange、blur事件观察到其值的变化，但它们的应用时机与应用场景存在显著的差异

继续之前的例子，我们在文本框中输入“中文”两个汉字，并且每个汉字都确认一次，最后事件监听的输出结果如下图所示。 从这张图中我们发现如下问题： 1. 在中文输入法下，keydown监听到的键值都是229，完全没有参考意义，所以为了准确地监听键盘事件，最好监听keyup事件。 2. 如果输入的速度较快，keyup事件可能不会及时触发，但一定会触发，所以会出现keyup事件连续触发的情形，也可能会产

在大屏可视化的制作过程中，最大的难题在于适应所有的分辨率，尤其是在高分屏的环境中，经常会出现字体过小的情况，导致用户体验不佳。针对这种情况，一般有以下几种方法： 1. 修改浏览器的缩放比例； 2. 字体大小单位统一采用em，然后通过控制容器的font-size来改变字体大小； 3. 采用zoom来放大容器； 4. 采用scale来放大容器；      修改浏览器的缩放比例能够改变浏览

操作Dom元素时，我们经常可以用attribute的读写方法与点运算符进行运算，大部分的情况下，它们的运算结果是一致的，但也存在一些例外情况。

一个变量的作用域是指程序源代码中定义这个变量的区域 ，换句话说，变量只存在属于它的作用域里，（代码执行）离开了它的作用域，变量将被销毁（变量不能被访问）。

bind、apply、call都是函数自身携带的方法，都能改变函数的上下文，提高函数的适用性，但它们之间也存在明显的区别。假定存在如下的上下文与函数：// 待测试的上下文var context = { name : 'yiifaa', age : 32, welcome : function (hello) { hello = hello || 'Hel

在webpack项目中引入jquery插件jstree时，提示如下错误：TypeError: __WEBPACK_IMPORTED_MODULE_3_jquery___default(...)(...).jstree is not a function at a.mounted (list.vue:104) at _e (vue.min.js:6) at Object.ins