[置顶]在循环中正确找到对应DOM元素的索引

摘要: 有个网友问了个问题,如下的html,为什么点击所有的段落p输出都是5,而不是alert出对应的0,1,2,3,4。闭包演示 产品 0 产品 1 产品 2 产品 3 产品 4 以上场景是初学者经常碰到的。即获取HTML元素集合,循环给元素添加事件。在事件响应函数中(event handler...阅读全文
posted @ 2011-03-01 08:48 snandy 阅读(14594) 评论(34) 编辑

Webpack2学习记录-2

摘要: 这篇在 webpack-demo 目前下新建一个 w2 目录,学习 webpack.config.js 及 与 npm scripts 的使用。 1、w2 下新建一个 webpack.config.js,内容如下 这是 w2 目录为 这时就可以直接在命令行执行 webpack 命令了,一些配置参数 阅读全文
posted @ 2017-04-08 05:50 snandy 阅读(94) 评论(0) 编辑

Webpack2学习记录-1

摘要: 1、安装前准备 安装 webpack 之前,需要安装 node,这时最新的是 6,npm 是 4。如果有老的 node 项目在跑建议安装下 nvm。 2、建议安装在局部,即在项目下的 node_modules 里 比如在 webpack_demo 目录下新建了一个 w1 项目,先用 npm init阅读全文
posted @ 2017-04-07 11:16 snandy 阅读(99) 评论(0) 编辑

Win下安装nvm

摘要: nvm 是 windows 下切换 node 版本的管理工具,mac 下可以使用 TJ 写的 n 。 1、https://github.com/coreybutler/nvm-windows/releases,图示点击下载 2、点击安装,默认配置即可,win开始菜单会生成一个 3、命令行cmd进入,阅读全文
posted @ 2017-04-06 17:46 snandy 阅读(69) 评论(0) 编辑

Mac下安装GIT的坑

摘要: 先去 https://git-scm.com/download/mac 下载 GIT 客户端 双击安装,界面中有三个文件 接着双节 .pkg 文件,却提示无法安装 解决方式是按住 Control ,再点击该文件解决方式是按住 Control ,再点击该文件阅读全文
posted @ 2016-11-30 21:26 snandy 阅读(113) 评论(0) 编辑

jQuery 3.0的domManip浅析

摘要: domManip 这个函数的历史由来已久,从 jQuery 1.0 版本开始便存在了,一直到最新的 jQuery 版本。可谓是元老级工具函数。 domManip 的主要功能是为了实现 DOM 的插入和替换。具体共为以下 5 个函数服务 内部后插入(append) 内部前插入(prepend) 外部前阅读全文
posted @ 2016-09-03 06:01 snandy 阅读(534) 评论(0) 编辑

jQuery 3.0的buildFragment

摘要: 在 jQuery3.0中,buildFragment 是一个私有函数,用来构建一个包含子节点 fragment 对象。这个 fragment 在 DOM1 中就已经有了,所有浏览器都支持。当频繁操作(添加、插入) DOM 时使用该方法可以提高性能,John resig 做过一个测试及一篇博客。 jQ阅读全文
posted @ 2016-08-16 05:08 snandy 阅读(576) 评论(0) 编辑

jQuery 3.0 的 setter/getter 模式

摘要: jQuery 的 setter/getter 共用一个函数,通过是否传参来表明它是何种意义。简单说传参它是 setter,不传它是 getter。 一个函数具有多种意义在编程语言中并不罕见,比如函数重载:一组具有相同函数名,不同参数列表的函数,这组函数被称为重载函数。重载的好处是减少了函数名的数量,阅读全文
posted @ 2016-07-11 07:27 snandy 阅读(786) 评论(1) 编辑

jQuery 3.0 的 Data 浅析

摘要: jQuery 3.0 在6月9日正式发布了,3.0 也被称为下一代的 jQuery 。这个版本从14年10月开始,其中发布过一次beta 版(2016/1/14,)和候选版(2016/05/20)。一路走来,颇为不易。 文章目录 一、Data浅析 jQuery 3.0 中的 Data 是内部使用的,阅读全文
posted @ 2016-06-14 07:34 snandy 阅读(1991) 评论(0) 编辑

强大的DOM变化观察者MutationObserver

摘要: 在这之前 DOM3 提供了 Mutation events 事件 可以监听到属性、文本内容、节点插入删除、子节点变化等事件。可是该事件 W3C 已废弃,虽然一些浏览器仍然支持,但不建议使用。 MutationObserver目前IE11+及其它浏览器最新版本都已支持。可以通过以下代码判断是否支持 使阅读全文
posted @ 2016-04-10 05:57 snandy 阅读(1314) 评论(1) 编辑

JavaScript的写类方式(6)

摘要: 时间到了2015年6月18日,ES6正式发布了,到了ES6,前面的各种模拟类写法都可以丢掉了,它带来了关键字 class,extends,super。 ES6的写类方式 以上定义了一个类,constructor 是构造器,这点和 Java 不同,Java的构造器名和类名相同。 和 Java 多象啊,阅读全文
posted @ 2016-04-08 08:04 snandy 阅读(1606) 评论(3) 编辑

ES5 的 setter 和 getter

摘要: 有两种方式使用 setter 和 getter 1. set/get 2. Object.defineProperty 当然,通常用 setter 和 getter 来实现私有变量 或者 当然,setter 和 getter 最牛逼的用处是用来实现目前流行的 “双向绑定”,MVxx之类的库。不支持 阅读全文
posted @ 2016-03-17 07:28 snandy 阅读(780) 评论(0) 编辑

ES5 对象的扩展(Object.preventExtensions)、密封(Object.seal)和冻结(Object.freeze)

摘要: 前面提到 ES5 对象属性描述符,这篇看看对象的扩展、密封和冻结。 阻止对象扩展,让一个对象变的不可扩展,也就是永远不能再添加新的属性 ES3 是没有办法阻止对象扩展的,定义对象后可以给对象添加任意属性,如 ES5 的 Object.preventExtensions 则可以阻止给对象添加新属性 如阅读全文
posted @ 2016-03-16 07:18 snandy 阅读(487) 评论(0) 编辑

IE10/11克隆textarea时 bug

摘要: 重现代码 以上网页代码,在 IE10/11 中输出如下 可以看到IE10/11克隆时竟然把值赋给了value,这是一个的bug。 其它浏览器输出的均是空字符串。 判断是否有该bug的函数提取如下阅读全文
posted @ 2016-03-16 07:15 snandy 阅读(182) 评论(0) 编辑

ES5 数据属性描述符和存取描述符

摘要: 一、数据属性描述符 对象是一个属性集合,对象的基本特征是属性名(name)和属性值(value)。ES5 增加了属性描述符,可以更细腻的控制属性的不同操作。属性描述符有 configurable、writable 和 enumerable。 属性描述符通常和 Object.definePropert阅读全文
posted @ 2016-03-15 07:32 snandy 阅读(561) 评论(0) 编辑

Object.observe将不加入到ES7

摘要: 先请看 Object.observe 的 API Object.observe(obj, callback[, acceptList]) 它用来监听对象的变化,当给该对象添加属性,修改属性时都会被依次记录下来 看一个示例 var person = {} Object.observe(person, 阅读全文
posted @ 2016-03-04 09:31 snandy 阅读(357) 评论(1) 编辑

HTTP状态管理机制之Cookie

摘要: 一、cookie 起源cookie 最早是网景公司的雇员 Lou Montulli 在1993年3月发明,后被 W3C 采纳,目前 cookie 已经成为标准,所有的主流浏览器如 IE、Chrome、Firefox、Opera 等都支持。cookie 的诞生是由于 HTTP 协议的天生缺陷,HTTP...阅读全文
posted @ 2016-01-14 08:26 snandy 阅读(2745) 评论(0) 编辑

Fetch:下一代 Ajax 技术

摘要: Ajax,2005年诞生的技术,至今已持续了 10 年。它是一种在客户端创建一个异步请求的技术,本质上它不算创新,是一组技术的组合。它的核心对象是 XMLHttpRequest。 简单回顾下历史 使用步骤大概如下 以上可以看出,XHR 使用 onXXX 处理,典型的 "事件模式"。 Fetch 目前阅读全文
posted @ 2015-12-28 08:35 snandy 阅读(14304) 评论(17) 编辑

JavaScript数字精度丢失问题总结

摘要: 本文分为三个部分 一、JS数字精度丢失的一些典型问题 1. 两个简单的浮点数相加 Firebug 这真不是 Firebug 的问题,可以用alert试试 (哈哈开玩笑)。 看看Java的运算结果 再看看Python 2. 大整数运算 Firebug 16位和17位数竟然相等,没天理啊。 又如 看结果阅读全文
posted @ 2015-12-03 06:50 snandy 阅读(18890) 评论(9) 编辑

前端开发调试线上代码的两款工具

摘要: 用过 Charles 和 Fiddler 这两款,记录如下。一、CharlesCharles 界面简单直观,易于上手,数据请求控制容易,修改也简单,抓取数据的开始暂停也方便。全平台支持 win,mac,linux。1. 安装前提Charles 需要有 Java 环境,请提前下载安装 JDK。JDK ...阅读全文
posted @ 2015-11-05 07:22 snandy 阅读(7245) 评论(19) 编辑

微信公众账号开发入门

摘要: 此文记录了微信公众号开发的整个流程,想要调用微信 JS API 并非直接引入一个jweixin-1.0.0.js 到页面里那么简单。需要获取 access_token, jsapi_ticken和签名 sign等。其中的任何一个步骤错误都会调用不到其 API。这些参数一般是后台生成,可以用阿里云或新...阅读全文
posted @ 2015-10-21 07:08 snandy 阅读(12418) 评论(16) 编辑

Chrome/Firefox 中头toFixed方法四舍五入兼容性问题

摘要: 每个Number的toFixed()方法可把 Number 四舍五入为指定小数位数的数字。四舍五入顾名思义,4及以下舍去,5及以上加1。四舍1.31.toFixed(1) // 1.31.32.toFixed(1) // 1.31.33.toFixed(1) // 1.31.34.toFixed(1...阅读全文
posted @ 2015-10-16 19:00 snandy 阅读(2099) 评论(0) 编辑

GIT/node使用

摘要: 一、 为不同域名的库自动保存不同的用户名和密码 比如 公司的库是 http://source.sohu.com,另一个是 http://www.github.com,命令行中分别两个命令就搞定了 二、nrm的使用 三、GIT 单文件切换到某个版本阅读全文
posted @ 2015-10-15 16:17 snandy 阅读(464) 评论(0) 编辑

addEventListener 的另类写法

摘要: addEventListener 参数如下addEventListener(type, listener[, useCapture]);type,事件名称listener,事件处理器useCapture,是否捕获一直把 listener 记成是响应函数,function 类型。相信很多人也是这么理解...阅读全文
posted @ 2015-10-15 07:59 snandy 阅读(2063) 评论(5) 编辑

JavaScript 动态插入 CSS

摘要: 写组件时有时想把一些组件特性相关的 CSS 样式封装在 JS 里,这样更内聚,改起来方便。JS 动态插入 CSS 两个步骤就可以创建一个 style 对象使用 stylesheet 的 insertRule 或 addRule 方法添加样式一、查看样式表先看下 document.styleSheet...阅读全文
posted @ 2015-10-11 08:13 snandy 阅读(3118) 评论(2) 编辑

JavaScript判断各浏览器CSS前缀的两种方式

摘要: 不管浏览器更新的多快,号称多么支持标准。厂商不同,他们之间还是有很多差异。我们需要区分出这些差异,针对不同的浏览器做不同的处理。比如 CSS 前缀,IE 的是 "-ms-",旧版 Opera 的是 "-o-",Firefox 的是 "-moz-",Safari/Chrome 是 "-webkit-"...阅读全文
posted @ 2015-10-02 14:49 snandy 阅读(4047) 评论(0) 编辑

公告

统计

  • 随笔 - 449
  • 文章 - 0
  • 评论 - 1886