随笔列表第7页 - snandy

Perl与JS的比较（变量）

摘要：变量具有六个属性， Perl将变量分成了标量，数组，哈希。分别以不同的前缀表示。$ 表示标量变量@ 表示数组变量% 表示哈希（对象）变量$, @, %后标示符要求同JS，由字符串，数字，下划线组成，不能以数字开头。一、标量变量$str = 'Hello, world!';$length = 10;JS中一般用var声明，不使用var的默认是全局变量。这里Perl的$str, $length也是全局变量（Perl可以使用my关键字定义私有变量）。var str = 'Hello, world!';var length = 10;二、数组变量列表是标量的有序集合，阅读全文

posted @ 2012-11-02 12:17 snandy 阅读(1515) 评论(0) 推荐(0) 编辑

Perl与JS的比较（基本数据类型）

摘要：一、数字和JS一样，用双精度浮点数（double-precision floating-point）表示。不同于JS的如下1，整数直接量中可以插入下划线，看起来比较清楚，如 11222333 等同于 11_222_333if (11222333 == 11_222_333) { print 'tru... 阅读全文

posted @ 2012-11-02 10:18 snandy 阅读(2309) 评论(0) 推荐(0) 编辑

Perl入门

摘要：入门就是能写出一个HelloWorld，前提自然需要先安装语言环境。一、获取安装1，来这里下载Perl，按操作系统选下载版本。Unix/Linux/Mac OSX 自带了Perl环境。一般来说系统自带的版本会低于官网下载的，如我所在公司的Linux上Perl版本为5.8.8。想使用最新的仍然需要下载重新安装。我下载的是5.16.1，系统是Windows 7。2，双击下载文件，下一步下一步就哦了。3，打开命令行，输入perl -v，出现以下输出说明安装成功了二、编写Perl程序1，新建一个文件（任意后缀）first.pl，任意编辑器输入内容如下print "Hello, world!\ 阅读全文

posted @ 2012-11-01 18:18 snandy 阅读(3456) 评论(0) 推荐(1) 编辑

仅IE6/7不支持字符串属性/索引读取

摘要： IE6/7不支持字符串属性/索引读取（Property access on strings），其它浏览器则支持。如下alert('abcd'[1])IE6/7是undefined，其它浏览器中会返回'b'。相关：各浏览器关键字/保留字作为对象属性的差异阅读全文

posted @ 2012-10-09 10:30 snandy 阅读(682) 评论(1) 推荐(0) 编辑

坑爹的JS笔试题（持续更新）

摘要： 1，考察thisvar length = 10function fn(){ alert(this.length)}var obj = { length: 5, method: function(fn) { fn() // ? arguments[0]() // ? }}obj.method(fn)这里的坑主要是arguments，我们知道取对象属于除了点操作符还可以用中括号，这里fn的scope是arguments，即fn内的this===arguments，调用时仅传了一个参数fn，因此length为1。2，函数表达式具名（函数声明同时赋值给另一个变量）或函数声明立即执行时，名仅在该函数.. 阅读全文

posted @ 2012-09-18 16:10 snandy 阅读(21000) 评论(34) 推荐(21) 编辑

IE9/Firefox/Safari/Chrome/Opera支持模拟触发自定义DOM事件

摘要：自定义DOM事件是在DOM3中定义的，它不是由DOM原生触发。自定义事件只能通过addEventListener方式添加，其它如内联到html或DOM0方式（el.onXXX=fn）添加的不能触发。如<div id="d1" onmyevent="alert(this)">DIV1</div><script> // DOM 0 方式添加 d1.onmyevent = function(){alert(this)}</script>以下方式可以<!DOCTYPE 阅读全文

posted @ 2012-09-12 17:17 snandy 阅读(2142) 评论(1) 推荐(0) 编辑

瀑布流的简单实现

摘要：基本流程第一屏图片不用Ajax加载，默认写在页面上。第一屏要以最快效率打开，待JS文件下载后再Ajax请求明显要慢。滚动到最后一行图片时开始加载图片，每次加载两行，每行4张图片（4列布局）。位置计算是关键的，可以以页面中翻页容器或页面footer为参考点，如果scrollTop大概等于翻页容器或fo... 阅读全文

posted @ 2012-09-12 11:32 snandy 阅读(1520) 评论(2) 推荐(2) 编辑

事件处理程序的执行上下文

摘要：以下五种方式添加事件<!doctype html><html> <head> <title>事件处理程序的执行上下文</title> <meta charset="utf-8"> <style> div { background: gold; margin: 10px; } </style> </head> <body>  <div id="d1" onclick="alert( 阅读全文

posted @ 2012-09-10 17:45 snandy 阅读(952) 评论(0) 推荐(0) 编辑

JavaScript原型继承的陷阱

摘要： JavaScript默认采用原型继承。虽然没有类(class)的概念，它的函数(function)可以充当构造器(constructor)。构造器结合this，new可以构建出类似Java的类。因此，JavaScript通过扩展自身能模拟类式(class-based)继承。JavaScript和其它面向对象语言一样，对象类型采用引用方式。持有对象的变量只是一个地址，而基本类型数据是值。当原型上存储对象时，就可能有一些陷阱。先看第一个例子var create = function() { function Fn() {} return function(parent) { Fn.prototy. 阅读全文

posted @ 2012-09-02 12:01 snandy 阅读(3438) 评论(2) 推荐(4) 编辑

JavaScript中proto与prototype的关系

摘要：这里讨论下对象的内部原型(__proto__)和构造器的原型（prototype）的关系。一、所有构造器/函数的__proto__都指向Function.prototype，它是一个空函数（Empty function）Number.__proto__ === Function.prototype // trueBoolean.__proto__ === Function.prototype // trueString.__proto__ === Function.prototype // trueObject.__proto__ === Function.prototype // tr... 阅读全文

posted @ 2012-09-01 10:31 snandy 阅读(37283) 评论(37) 推荐(36) 编辑

jQuery1.8的几个小变化

摘要：一，.width() 和 .height()方法1.8增加了对css属性box-sizing的支持，需要注意与1.7.2的区别了。1.7.2及以前的版本无论是否定义box-sizing: border-box返回的都是盒模型中元素内容的宽度或高度，不包括padding和border。1.8后则不同了，当设置了css属性box-sizing: box-border后，使用width()返回的数值有可能与css中设置的不同。如 div[id=container]的box-sizing设置为border-box（Firefox14.1尚不支持border-box，使用-m... 阅读全文

posted @ 2012-08-18 23:03 snandy 阅读(6941) 评论(0) 推荐(1) 编辑

JavaScript判断元素为数字的奇异写法

摘要：这是在阅读underscore（1.3.3）源码中看到的，它的each方法 var each = _.each = _.forEach = function(obj, iterator, context) { if (obj == null) return; if (nativeForEach && obj.forEach === nativeForEach) { obj.forEach(iterator, context); } else if (obj.length === +obj.length) { for (var i = 0, l = obj... 阅读全文

posted @ 2012-08-01 18:38 snandy 阅读(4224) 评论(7) 推荐(3) 编辑

基于CommonJS Modules/2.0的实现：BravoJS

摘要：今天看见一个基于CommonJS Modules/2.0的实现：BravoJS。Modules/2.0目前还不是CommonJS的当前规范（Current Specifications），甚至连建议或开发中的标准（Proposals and standards in development）也都不是... 阅读全文

posted @ 2012-06-10 14:40 snandy 阅读(6469) 评论(1) 推荐(4) 编辑

RequireJS和Backbone的集成

摘要：有朋友留言RequireJS如何与Backbone集合使用。这两个轻量级的库合起来使用确实能够方便的构建大型应用程序。RequireJS填补了前端模块化开发的空缺，Backbone采用MVC的分层结构很好的将程序各个部分解耦。Backbone目前不支持AMD（曾经支持过），那么它只能作为普通的JS文件使用。它全局的标示符是Backbone，它还依赖于underscore，underscore的全局标示是下划线（_）。因此，当我们使用AMD方式写的模块中使用Backbone时，得确保underscore和Backbone已经载入了。RequireJS 2.0后提供了一个shim参数很好的解决了该阅读全文

posted @ 2012-06-08 15:26 snandy 阅读(18228) 评论(6) 推荐(3) 编辑

RequireJS进阶（三）

摘要：进阶的前面两篇讲述了r.js如何通过命令行把所有的模块压缩为一个js文件或把所有的css压缩为一个css文件。其中包括一些压缩配置参数的使用。但以上两种方式有几个问题1、通过命令手动配置压缩选项显得很呆板2、都仅合并为一个文件对于最后只生成一个文件的库来说，这种方式并无不妥。比如jQuery，它的工程中小文件有20多个，打包后只有一个jquery-1.x.x.js。对于多数实际应用项目来说，可能打包后需要生成多个js文件。有些是页面打开时就要用到的，有些是用户点击或输入时按需加载的。r.js有另外一种方式来合并压缩，即通过一个配置文件（如build.js）。配置文件内部采用前端工程师非常熟悉J 阅读全文

posted @ 2012-06-08 11:56 snandy 阅读(19955) 评论(4) 推荐(8) 编辑

RequireJS进阶（二）

摘要：这一篇来认识下打包工具的paths参数，在入门一中就介绍了require.config方法的paths参数。用来配置jquery模块的文件名（jQuery作为AMD模块时id为“jquery”，但文件名可通过paths配置可以不必是“jquery.js”，而是带有版本的如“jquery-1.7.2.js”）。在入门一中，jquery-1.7.2.js和main.js都在一个域中，即把jquery-1.7.2.js下载到本地了。但有时可能一些JS资源不在同一个域。比如直接使用Google CDN上的jquery 1.7.2版本。而这时应该如何使用打包工具r.js呢？r.js自然不会去载入非本地资阅读全文

posted @ 2012-06-07 07:48 snandy 阅读(19713) 评论(5) 推荐(8) 编辑

RequireJS进阶（一）

摘要：为了应对日益复杂，大规模的JavaScript开发。我们化整为零，化繁为简。将复杂的逻辑划分一个个小单元，各个击破。这时一个项目可能会有几十个甚至上百个JS文件，每个文件为一个模块单元。如果上线时都是这些小文件，那将对性能造成一定影响。RequireJS提供了一个打包压缩工具r.js来对模块进行合并压缩。r.js非常强大，不但可以压缩js，css，甚至可以对整个项目进行打包。r.js的压缩工具使用UglifyJS或Closure Compiler。默认使用UglifyJS（jQuery也是使用它压缩）。此外r.js需要node.js环境，当然它也可以运行在Java环境中如Rhino。这篇以一个阅读全文

posted @ 2012-06-06 08:15 snandy 阅读(26244) 评论(13) 推荐(13) 编辑

RequireJS 2.0 正式发布

摘要：就在前天晚上RequireJS发布了一个大版本，直接从version1.0.8升级到了2.0。随后的几小时James Burke又迅速的将版本调整为2.0.1，当然其配套的打包压缩工具r.js也同时升级到了2.0.1。此次变化较大，代码也进行了重构，层次更清晰可读。功能上主要变化如下： 1，延迟模块阅读全文

posted @ 2012-06-04 07:58 snandy 阅读(32782) 评论(15) 推荐(16) 编辑

RequireJS入门（三）

摘要：这篇来写一个具有依赖的事件模块event。event提供三个方法bind、unbind、trigger来管理DOM元素事件。event依赖于cache模块，cache模块类似于jQuery的$.data方法。提供了set、get、remove等方法用来管理存放在DOM元素上的数据。示例实现功能：为页面上所有的段落P元素添加一个点击事件，响应函数会弹出P元素的innerHTML。创建的目录如下为了获取元素，用到了上一篇写的selector.js。不在贴其代码。index.html 如下 requirejs入门（三） p1p2p3p4p5 cache.js 如下defi... 阅读全文

posted @ 2012-05-24 07:30 snandy 阅读(34636) 评论(22) 推荐(24) 编辑

RequireJS入门（二）

摘要：上一篇是把整个jQuery库作为一个模块。这篇来写一个自己的模块：选择器。为演示方便这里仅实现常用的三种选择器id，className，attribute。RequireJS使用define来定义模块。新建目录结构如下这次新建了一个子目录js，把main.js和selctor.js放入其中，r 阅读全文

posted @ 2012-05-23 09:41 snandy 阅读(68333) 评论(14) 推荐(24) 编辑

RequireJS入门（一）

摘要： RequireJS由James Burke创建，他也是AMD规范的创始人。RequireJS会让你以不同于往常的方式去写JavaScript。你将不再使用script标签在HTML中引入JS文件，以及不用通过script标签顺序去管理依赖关系。当然也不会有阻塞（blocking）的情况发生。好，以一... 阅读全文

posted @ 2012-05-22 18:17 snandy 阅读(186251) 评论(24) 推荐(59) 编辑

jQuery-1.7.2中getAll方法的疑惑

摘要： getAll方法是私有的，在manipulation模块中。代码只有简单的几行，如下function getAll( elem ) { if ( typeof elem.getElementsByTagName !== "undefined" ) { return elem.getElementsByTagName( "*" ); } else if ( typeof elem.querySelectorAll !== "undefined" ) { return elem.querySelectorAll( "*" 阅读全文

posted @ 2012-05-18 18:05 snandy 阅读(3160) 评论(1) 推荐(1) 编辑

读Ext之十五（操作批量元素）

摘要：前两篇读了Ext.Element，这篇介绍的Ext.CompositeElementLite类是对集合（Ext.Element）的操作。Ext.select / Ext.element.select 依赖于Ext.CompositeElementLite。类的大概结构如下（省略了挂在prototype上的很多方法），Ext.CompositeElementLite = function(els, root){ this.elements = []; this.add(els, root); this.el = new Ext.Element.Flyweight();};Ext... 阅读全文

posted @ 2012-05-18 08:09 snandy 阅读(2860) 评论(2) 推荐(2) 编辑

读Ext之十四（Ext元素）

摘要：上篇读了Ext.Element的部分方法，这篇继续。El.addMethods方法，var ep = El.prototype;El.addMethods = function(o){ Ext.apply(ep, o);};El是Ext.Element类的简写，addMethods可认为是该类的静态方法。无须new使用类名直接调用。其内部调用的是Ext.apply，该方法会将o上的所有属性方法拷贝到ep上。使用该方法为Ext.Element类的原型上添加属性，方法。如Ext中队样式的操作、动画、位置等都是通过该方法扩展。Ext.apply在读Ext之一（实用方法）中介绍了。接着看El.g.. 阅读全文

posted @ 2012-05-16 07:20 snandy 阅读(2621) 评论(0) 推荐(0) 编辑

读Ext之十三（Ext元素）

摘要：终于越来越接近Ext的核心了。这篇开始Ext.Element，这里说的Ext元素指的是Ext.Element类的实例。任何前端库都会涉及到对HTMLElement的操作，JQuery更是以其为中心，一个$()函数调用后将DOM元素以索引方式存在JQuery对象中。Ext则使用了一个称为 Ext.Element 的类，如 Ext.get/Ext.fly 返回的都是该类的实例对象。许多操作如样式，添加事件等都封装到该类里。Ext.Element的定义大概框架如下Ext.Element = function(element, forceNew){ var dom = typeof elemen... 阅读全文

posted @ 2012-05-07 07:47 snandy 阅读(3176) 评论(1) 推荐(3) 编辑

Snandy