当前位置:  编程技术>WEB前端

[1]仿微博字符统计和本地存储功能的实现

1.1.1 摘要

随着移动设备和Web应用的普及，为了更好的便于用户的使用，对于网页或应用程序的用户体验要求就越来越高，确实是这样，作为用户更喜欢选择用户体验效果好的网站或应用程序，所以作为开发者的我们就需要开发出更人生化的应用程序了。

相信许多人有使用微博的经验，像微博这样的社交平台，好的用户体验就变得尤其重要了。

例如：我们在发微博时，文本框会实时地提示我们剩余字符数，这样人性化的提示方便了用户知道微博字数的限制，同时也限制了用户的输入字数。

有一句话我们要牢记在心的是：凡是输入，必有限制；凡是输入，必须校验。

在接下来的博文中，我们将介绍如何实现输入字符实时提示功能和本地存储（localStorage）技术。

本文目录

• jQuery字符统计插件
• Web Storage

1.1.2 正文

jQuery字符统计插件

现在，我们以新浪微博发送微博输入框为例子，介绍使用jQuery实现实时提示用户剩余字符数。

新浪微博是限制140个中文（280个英文），当然还有各种其他字符空格的情况，在用户输入达到限制之前或达到了，好的用户体验应该提示用户接近或达到了限制，当然我们可以通过使用不同颜色或加粗字体方式提示用户。

图1新浪微博用户输入限制

字符数统计插件会在输入框后创建一个同级元素span，它用来显示当前剩余字符数，当触发输入框的keyup、keydown和change事件时，实时修改span中剩余字符数，如果剩余字符数接近“warning”（接近零）修改CSS样式提示用户接近输入限制。

当剩余字符达到“warning”时，在span元素中添加相应的样式类，当剩余字符等于或大于输入限制时，添加相应的样式类提示用户已经超出字符数限制。

我们通过字符数统计插件在页面中动态地插入如下代码：

<!-- adds element dynamic -->
<span counter',
counterElement: 'span',
cssWarning: 'warning',
cssExceeded: 'exceeded',
counterText: ''
};

上面，我们定义了defaults对象，它包含allowed、warning、css、cssWarning和cssExceeded等属性，通过修改defaults对象属性，我们可以很方便修改字符统计插件。

Allowed：允许输入的字符数。

Warning：提示用户剩余字符数接近限零。

Css：添加到counter元素的CSS样式类名。

cssWarning：警告提示样式。

cssExceeded：超出字符限制提示样式。

接下来，我们在字符统计插件中定义方法calculate()，它计算当前剩余字符数，如果到达了警告范围则在页面中增加样式类“warning”，当剩余字符数少于等于零时，在页面中增加样式“exceeded”。

/***
* Calculates the char
* @param obj
*/
function calculate(obj) {

// Get the count.
var count = getLength($(obj).val());
var available = options.allowed - count;

if (available <= options.warning && available >= 0) {
$(obj).next().addClass(options.cssWarning);
}
else {
$(obj).next().removeClass(options.cssWarning);
}
if (available < 0) {
$(obj).next().addClass(options.cssExceeded);
}
else {
$(obj).next().removeClass(options.cssExceeded);
}
$(obj).next().html(options.counterText + available);
}

我们又定义方法getLength()，当输入字符是中文时totLen加1，如果是英文字符或数字时totLen加0.5（默认允许输入140个中文字符）。

/**
* Get the length of char.
* @param str
* @return {Number}
*/
function getLength(str) {
var totLen = 0;
for (var i = 0; i < str.length; i++) {
// If the char is Chinese.
if (str.charCodeAt(i) > 256) {
totLen += 1;
}
else {
totLen += 0.5;
}
}
return Math.floor(totLen);
}

接下来，我们在控件中绑定keyup()，keydown()和change()事件方法，当页面对象触发keyup()，keydown()或change()事件方法时，调用calculate()方法计算当前剩余的字符数，并且添加相应的CSS样式到页面中。

// Binds text area keyup, keydown and change event.
this.each(function() {
$(this).after('<' + options.counterElement + ' + options.css + '">' + options.counterText + '</' +
options.counterElement + '>');
calculate(this);
$(this).keyup(function() { calculate(this), storeWeibo(this) });
$(this).keydown(function() { calculate(this), storeWeibo(this) });
$(this).change(function() { calculatea(this) });
});Web Storage

现在，我们基本实现了jQuery字符数统计插件功能了，相信许多人都注意到，如果我们在发微博时，没有发送出去的微博下次打开页面，发送框依然保存着我们未发送的微博，即使关闭浏览器重新打开页面，我们没发送的信息依然存在。

其实，要实现这一个功能方法是多种多样的，例如我们可以使用：Cookies，Session等技术。

随着HTML5规范的制定，与此同时W3C制定了网络存储（Web Storage）的规范，它提供将数据存储在客户端中，直到Session过期（会话存储）或超出本地容量（本地存储），它比传统的Cookies存储功能更强大、更容易实现和容量更大（大部分浏览器支持5M的本地存储）。

会话存储

会话存储：它将数据保存在会话中，一旦我们关闭浏览器选项卡时，会话中的数据将失效。

本地存储

本地存储：当数据需要持久地保存在客户端中，这时我们可以使用本地存储（Local Storage），它是以key/value 的形式来存储数据的，如果关闭了页面或浏览器后，重新打开页面数据依然存在，它提供了数据的持久保存。一个简单的应用是：记录用户访问页面的次数。

 

[2]javascript学习笔记[6]--面向对象

         今天又是宅在家中一天，看了面向对象编程，包含以下几个章节，创建类和使用类，类成员访问控制，继承和组合，静态成员和静态类，多态，原型链本质论。因为已经有了学习其他面向对象语言的经历，所以这边看的速度快了点，预计明天开始进入javascript内建类。

         有一件略微忧伤的事，昨天写的学习笔记【5】--函数2被博客园移出首页了，估计是那管理员看我一天发了三篇随笔，而且深度不够吧，所以看不下去了，却弄得我好忧伤，好忧伤，好了，这一节就尽量写的长一点，然后多一些自己的理解吧，简单的知识就不说了，哎，这种学习性的东西其实就是这样。。

         6.1面向对象--基础概念

              这里我不仔细说了，就罗列一些基础知识点：

               对象，实例，类（对象时类的实例）

               优点：可重用，易维护

               基本特征：封装，继承，多态（类一个方法多种形态），（抽象）

         6.2 创建类--构造器方法

               使用函数创建类，函数本身也被称为该类的构造器（也称为构造器方法，构造方法）。

               javascript是基于原型的面向对象----important.

             实例化就用new，Object，Array不需要使用new关键字就可以实例化。

        6.3 定义方法和属性

            1）this关键字---看上面的代码就是通过this定义属性（其实用this关键字的时候很容易犯错误，尤其是又有闭包函数，这边如果记得的话在总结一篇）

            2）prototype定义

 

            3）Object类，return扩展

                Object类直接定义一个实例，并为该对象赋属性和方法，很好的体现了javascript名值对的概念。见如下代码

              下面是用return语句定义方法和属性，还有使用prototype和Object配合定义方法和属性

 

        6.4 使用get和set存取器---java中的get，set方法相同

        6.5类和成员访问控制---public和private变量

        6.6 继承和组合

              继承：记住Child.prototype = new Father(),这就实现了继承，那些关于使用基类的构造器方法，实现其他语言中super方法就可以了。

             组合：记住把手，腿，头等其他部件组成人，这就是组合的思想，具体代码就不贴了，就是在组合的类中（人）实现方法中新建一个手，然后使用手的方法。

             这里有个概念，is-a和has-a。is-a是属于概念，has-a是包含概念。

        6.7 静态成员，静态类和枚举

              静态类：就是对比于现实中那些独一无二的东西。世界上就有一个月亮，所以它可以定义为一个静态类。如果想把成员声明为静态，只需将属性或者方法赋给类本身。就这样。还有一些注意事项就不说了。

        6.8 多态--重载和覆盖

              一个类中有多个方法名相同的方法---重载，但是在javascript中不支持直接定义多个方法来实现重载，下面的代码利用arguments.length判断参数个数，typeof判断参数类型来实现重载