[原创]变换皮肤的JS插件实现过程

这几天做了一个变换皮肤的JS插件
写了6个版本。自己也碰到了很多问题，在这里和大家分享
在我的心里还有一款HTML5版(完全JS且只能chrome浏览器上)这两天比较忙，所以下周二会写好，敬请期待。

刚开始的三个版本写的很随性因为是为自己服务的，后来受不了自己决定应该写一个插件什么的
基本上是功能的堆叠，以至于在写的时候很多问题就暴露出来
最严重的问题就是，写的太多自己都懒得看了

规划
所以我想在写基本较大的程序的时候最好先有好的规划。
首先得先想好有哪些功能
其次在架构好要实现哪些函数。
画好UML图，最好有个鸭辨式的接口为接下来做准备其实就是定义一下方法。
在可移植和课扩充的方面做些设计。（分离好变量）
开始编写。（省略）
开始调试。（除了bug外最好每个动作进行测试，进行单元测试作者用J3Unit）
进行性能优化。（进行性能的设计，最好用firebug测试一下各个方法的时间）
最后也是最重要的一步那就是写好说明文档。和联系方式。。。（有空在进行升级...）

交互内容
我的插件是换肤插件。
所以先分析一下交互所要涉及到的内容。
一。当点击皮肤标签的时候。
点击时将进行css的导入以更改皮肤（css标签内容根据用户自定义从标签获取【前几个版本作者从a标签的href标签里获取】或者给标签的属性赋值【作者在这里最后用到的是jquery的data函数】）
然后将css标签加入缓存。
用ajax把css的标签植入用户的数据库中。（作者在这里将数据库用户名的最后一个字段添加了皮肤字段用的是PHP和mysql数据库【技术太烂囧】）

排除两种问题
当多次点击同一根按钮的时候，只执行一次。
前几个例子中用到了点击的冒泡，在这种情况下要注意点击为空的时候的情况要排除

二。当刷新页面的时候。
如果有缓存则从缓存里获取。
如果没缓存通过用户名的cookie值从

三。
当用户登陆的时候，将用户名加入缓存。并通过ajax查找字段下的皮肤值设定cookie值。
退出登录的时候。清除皮肤和姓名的cookie值。
P.S当注册的时候首先进行face的cookie查询如果有如果无就写入默认值就将其写入数据表（后来作者觉得不符合用户体验所以就去掉了）

设计功能和函数
根据以上内容进行函数的设计和分配。（第一次写的时候是凭感觉划分的函数...惆怅啊...）
取值函数 data
赋值函数 setdata //用户定制
ajax设置函数 ajaxTran
cookie设置函数 setcookie
显示函数 display
最后总结的结果就是差不多进行上述函数的架构，可是在刚开始的时候并并没有优化的那么好。

我的六个版本分别是。
1.命名空间版JS换肤效果的实现
2.特权函数和静态函数类JS插件的编写
3.类函数和变量分离JS换肤插件的编写（从这里开始可以成为插件了）
4.在3的version基础上进行了优化，可以定制一些属性。
5.完全用jquery插件的方式写了一个完全的jquery插件。
6.用jquery插件和类结合的方式以闭包的形式在动作中访问初始化的类（这次算是比较满意了，所以就把之间的历程发上来吧）

其实只要看一个版本后面的版本都会很快的理解的。

辅助工作
我的登陆和注册功能都是模拟的所以写的比较简单，数据库设计的也非常简单。
登陆和注册集成到了一张页面，而且是以js作为控制器用ajax传值的非常之胖的客户端
先写一下我的几个辅助的功能。
登陆及注册html

 <form id="test">
 <label class="labelText">Username:</label>
<input class="username_input" name="user" type="text"/>
           <label class="labelText">Password:</label>
<input class="username_input" name="pwd" type="password" />
     <a class="login_btn" name="log">Login</a> 
     <a class="reg_btn" name="reg" href="#">Register</a>       
 </form>

登陆及注册php

<?php
header("Content-type:text/html;charset=utf-8");
include 'conn.php';

$select = "SELECT * FROM `user` WHERE `name` = '".$_GET['user']."'";
$result = mysql_query($select);
$row = mysql_fetch_array($result);

if($_GET['type']=="reg_btn"){
    if(is_array($row)){
         echo 'sorry 用户名重复';
    }else{
        $insert = "INSERT INTO `user`(`id`,`name`,`password`,`face`) VALUES (null,'".$_GET['user']."','".$_GET['pwd']."','".$_GET['face']."')";
         mysql_query($insert);
         setcookie("user","$_GET[user]",time()+3600);
    }
}

if($_GET['type']=="login_btn"){
    if(!is_array($row)){
        echo "无此用户，请注册";
    }else if($row['password']==$_GET['pwd']){
        setcookie("user","$_GET[user]",time()+3600);
    }else{
        echo "密码错误";
    }
}
?>

conn文件我就不用说了，就是数据库连接文件
登陆及注册sql

CREATE TABLE IF NOT EXISTS `user_b` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(11) NOT NULL,
  `password` varchar(11) NOT NULL,
  `face` varchar(11) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;

其实这些只是为了能够多设置几个用户名检验一下不同用户名调用字段的效果

接下来我就开始制作各个版本的内容解析，会配有链接。

最后感谢一下jquery库和jquery.cookie插件(P.S本来作者自己写了一个cookie的插件，可是发现相比之下弱爆了，所以用了这个，推荐一下)