授人以渔 - 轩枫阁 – 前端开发

JS实用技巧手记（二）

本系列文章旨在记录一些实用的javascript技巧，既可以作为一个知识的积累，又可以作为闲暇时打发时间写写代码的记录。同时也方便日后翻阅~

1. 实现字符串长度截取并在结尾添加…

function cutstr(str, len) {

var temp;

var icount = 0;

var patrn = /[^\x00-\xff]/; //表示汉字或者全角，即ASCII 编码不在0-255的字符

var strre = "";

for (var i = 0; i < str.length; i++) {

if (icount < len) {

// 每次截取一个字符

temp = str.substr(i, 1);

if (patrn.exec(temp) == null) {

// 如果是英文、半角

icount = icount + 1

} else {

// 如果是中文、全角

icount = icount + 2

}

// 字符串连接

strre += temp

} else {

break

}

return strre + "..."

}

// demo:

cutstr("xuanfeng", 2) //xu...

cutstr("轩枫阁", 3) //轩枫...

查看全文

2013/11 08 周五

关于jQuery性能优化

也许很多人都在使用jQuery，因为它给我们的开发效率、兼容处理、代码量等方面带来了很多便利。无论是什么，都会有它需要优化的地方，即使你平常没注意到。那下面来看看这篇优秀的外国文章的翻译版，相信会对你有所用处。

我一直在寻找有关jQuery性能优化方面的小窍门，能让我那臃肿的动态网页应用变得轻便些。找了很多文章后，我决定将最好最常用的一些优化性能的建议列出来。我也做了一个jQuery性能优化的简明样式表，你可以打印出来或者设为桌面背景。

一、选择器性能优化建议

1. 总是从#id选择器来继承

这是jQuery选择器的一条黄金法则。jQuery选择一个元素最快的方法就是用ID来选择了。查看全文

2013/11 07 周四

作用域（scope）是结构化编程语言中的重要概念，它决定了变量的可见范围和生命周期，正确使用作用域可以使代码更清晰、易懂。作用域可以减少命名冲突，而且是垃圾回收的基本单元。和C、C++、Java等常见语言不同，javascript的作用域不是以花括号包围的块级作用域（block scope），这个特性经常被大多数人忽视，因而导致莫名其妙的错误。例如下面代码，在大多数类C的语言中会出现变量未定义的错误，而在javascript中却完全合法：

if (true) {

var somevar = "value";

}

console.log(somevar); //输出 value

这是因为javascript的作用域完全是由函数来决定的，if、for语句中的花括号不是独立的作用域。

函数作用域

不同于大多数类C的语言，由一对花括号封闭的代码块就是一个作用域，javascript的作用域是通过函数来定义的。在一个函数中定义的变量只对这个函数内部可见，我们称为函数作用域。在函数中引用一个变量时，javascript会先搜索当前函数作用域，或者成为“局部作用域”，如果没有找到则搜索其上层作用域，一直到全局作用域。查看全文

2013/10 02 周三

JavaScript面向对象（OOP）语法

面向对象程序设计（简称OOP）是现在最流行的程序设计方法，这种方法有别于前面介绍的基于过程的程序设计方法。目前的主流程序设计语言Java，C#，C++，PHP，JavaScript全部支持面向对象程序设计。JavaScript本身就是一种完全面向对象的语言，因此面向对象这个词用在JavaScript上有些多余。

为了能透彻的理解面向对象程序设计，我先举一个例子

同学们肯定都有一台属于自己的电脑，电脑的硬件组成都是基本相似的，包括：主板，CPU，内存，硬盘，显示器，电源等。像Dell，联想这样的公司在组装电脑时，根本不用自己去做这些硬件，他们通常会根据一定的需求去购买，只要这些硬件符合相应的接口便可以组装使用。这样极大的提高了效率，完善了社会分工，提高了生产力，甚至像Dell，联想这样公司的盈利水平也会有充分的提高。

面向对象正是基于这样的思想。程序(电脑)是具有一定行为与属性的对象(硬件)组成的。我们是购买对象还是自己创建，完全取决于预算与时间。通常，只要对象(硬件)能满足需求，就不必关心其功能的实现方法。面向对象程序设计最关心的是对象(硬件)的接口是什么。这就像计算机制造商对硬盘的实现并不关心，硬盘能存储数据而且便宜耐用就可以了。

面向对象程序设计就是设计一个个的对象，之后在把对象通过接口组合在一起。看下面等式:

1 2	面向对象程序设计=对象1+对象2+...+对象n 对象设计=数据+算法

JavaScript面向对象编程思想

在面向对象程序设计(组装计算机)的过程中，通常不用关心对象(例如硬盘)数据的内部实现，这种内部实现我们称为对象的封装，这些数据我们称之为对象的属性或实例字段。

一个对象(硬盘)还要提供一些接口，好使外面程序(例如主板)调用(连接)，这种可以调用对象的接口我们称之为方法或成员函数。

通过对象提供的方法可以调用对象内部属性来完成指定功能，这样就把前面介绍的程序设计最重要的数据与算法结合成了一个统一体，同时隐藏了对象中数据的实现过程，实现了当前最流行的面向对象编程思想。查看全文

2013/09 18 周三

jQuery中的prop()与attr()的用法区别

attr()方法

一般jQuery中，获取或设置属性的值是通过attr()方法。如：

返回文档中所有图像的src属性值：$(“img”).attr(“src”);
为所有图像设置src和alt属性：$(“img”).attr({ src: “test.jpg”, alt: “Test Image” });

prop()方法

而jquery的1.6版本中，增加了prop()，方法，有什么用意呢？大家都知道有的浏览器只要写disabled，checked就可以了，而有的要写成disabled = “disabled”，checked=”checked”，比如用attr(“checked”)获取checkbox的checked属性时选中的时候可以取到值,值为”checked”但没选中获取值就是undefined。

jq提供新的方法“prop”来获取这些属性，就是来解决这个问题的，以前我们使用attr获取checked属性时返回”checked”和undefined,现在使用prop方法获取属性则统一返回true和false。查看全文

2013/09 05 周四