这是一个简单的javascript代码封装的示例以及封装后的调用方法：

var ticker={

            n:0,

            add:function()

            {

                this.n++;

            },

            show:function()

            {

                alert(this.n);

            }

        }

        ticker.add();

        ticker.add();

        ticker.show();

以下是案例中的代码封装方法，解决了一定的安全问题与代码冗余问题：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>Web SQL Database</title>

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

    </head>

    <body>

        <h2>Web SQL Database</h2>

        <div>

            <button id="btnCreateTable">创建表</button>

            <button id="btnDropTable">删除表</button>

            <table border="1" width="80%" id="tabGoods">

                <tr>

                    <th>编号</th>

                    <th>名称</th>

                    <th>价格</th>

                    <th>删除</th>

                </tr>

            </table>

            <fieldset>

                <legend>商品信息</legend>

                <p>

                    <label for="name">名称：</label>

                    <input type="text" id="name" value="" />

                </p>

                <p>

                    <label for="price">价格：</label>

                    <input type="text" id="price" value="" />

                </p>

                <p>

                    <input type="hidden" id="goodsId" />

                    <button id="btnInsert">添加</button>

                    <button id="btnUpdate">更新</button>

                </p>

            </fieldset>

        </div>

        <h2 id="msg"></h2>

        <script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>

        <script type="text/javascript">

          //定义当前应用的对象

          var dbApp={

               //打开数据库

               openDb:function()

               {

                   //创建名称为products，版本为1.0,描述为产品数据库，3M大小的数据库

                this.db = openDatabase("products", 1.0, "产品数据库", 1024 * 1024 * 3, function() {

                    this.log("创建或打开数据库完成");

                });

               },

               //初始化

               init:function()

               {

                   //打开或创建数据库

                   this.openDb();

                   //绑定事件

                   this.bindEvent();

                   //展示数据

                   this.select();

                   this.log("初始化完成");

               },

               //绑定事件

               bindEvent:function()

               {

                   //添加事件

                   $("#btnInsert").click(this.insert);

                   $("#btnUpdate").click(this.update);

                   $("#btnCreateTable").click(this.createTable);

                   $("#btnDropTable").click(this.dropTable);

               },

               //显示消息

            log:function(info) {

                $("#msg")[0].innerHTML += info + "<br/>";

            },

            //执行sql的通用方法 result.rowsAffected 影响行数

            //callback执行成功时的回调方法

            exeSql:function(sql,title,param,callback) {

                title=title||"操作";

                this.db.transaction(function(tx) {

                    tx.executeSql(

                        sql, param||[],

                        function(tx, result) {

                            dbApp.log(title+'成功');

                            if(callback){  //如果有参数

                                callback(result);

                            }

                        },

                        function(tx, error) {

                            dbApp.log(title+'失败' + error.message);

                        });

                });

            },

            //创建表

            createTable:function() {

                dbApp.exeSql("create table IF not EXISTS goods(id integer primary key autoincrement,name text not null,price double)","创建表");

            },

            //删除表

            dropTable:function() {

                dbApp.exeSql("drop table IF EXISTS goods","删除表");

            },

            //展示，加载数据

            select:function() {

                dbApp.exeSql("select id,name,price from goods","查询",[],function(result) {

                           //将表格中tr索引大于0的元素删除

                            $("#tabGoods tr:gt(0)").remove();

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

                                var tr = $("<tr/>");

                                $("<td/>").text(result.rows.item(i)["id"]).appendTo(tr);

                                $("<td/>").text(result.rows.item(i)["name"]).appendTo(tr);

                                $("<td/>").text(result.rows.item(i)["price"]).appendTo(tr);

                                var del = $("<a href='#' onclick='dbApp.del(" + result.rows.item(i)["id"] + ",this)' >删除 | </a>")

                                var edit = $("<a href='#' onclick='dbApp.edit(" + result.rows.item(i)["id"] + ",this)' >修改</a>")

                                $("<td/>").append(del).append(edit).appendTo(tr);

                                tr.appendTo("#tabGoods");

                            }

                            });

            },

            //插入数据

            insert:function() {

                //如果insert方法被绑定为事件，则this表示事件发生的对象

                dbApp.exeSql("insert into goods(name,price) values(?,?)","添加",[$("#name").val(), $("#price").val()],function(){

                    dbApp.select();

                });

            },

            //删除

            del:function(id, link) {

                dbApp.exeSql("delete from goods where id=?","删除",[id],function(result){

                    //查找a标签最近的一个tr父元素，移除

                    $(link).closest("tr").remove();

                });

            },

            //编辑

            edit:function(id) {

                dbApp.exeSql("select id,name,price from goods where id=?","编辑",[id],function(result) {

                            $("#name").val(result.rows.item(0)["name"]);

                            $("#price").val(result.rows.item(0)["price"]);

                            $("#goodsId").val(result.rows.item(0)["id"]);

                            dbApp.log("修改后请保存");

                    });

            },

            //更新

            update:function() {

                if($("#goodsId").val()) {

                    dbApp.exeSql("update goods set name=?,price=?  where id=?","更新",[$("#name").val(), $("#price").val(), $("#goodsId").val()],function(result) {

                                dbApp.select();

                                $("#goodsId").val("");

                    });

                } else {

                    dbApp.log("请选择要更新的记录 ");

                }

            }

          };

        dbApp.init();

        </script>

    </body>

</html>

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　--老白菜原创

2016/11/17 周四 <javascript的封装简单示例>的更多相关文章

  1. 2016.11.17 NOI plus day0

    今天很乱乱乱乱 根本不想写代码 玩了一早上了 昨晚失眠了 今天又懵逼了 中午就要走了 明天就要考试了 考完试回来就要补文化课了 现在我的内心很平静 因为已经紧张的冻结了 你知道什么叫彷徨么? 机房里的 ...

  2. C++基础——类封装简单示例

    一.前言 在IC前端设计/验证领域,只会HDL远远不够.目前大多数项目使用已开发好的系统架构和IP Core,因此设计部分的工作量慢慢向系统集成和验证方向转移.而在集成和验证过程中,往往以各种脚本和面 ...

  3. github javascript相关项目star数排行榜(前30，截止2016.11.18)：

    github javascript相关项目star数排行榜(前30,截止2016.11.18): 前端开源框架 TOP 100 前端 TOP 100:::::https://www.awesomes. ...

  4. 第一百三十节，JavaScript，封装库--连缀

    JavaScript,封装库--连缀 学习要点: 1.连缀介绍 2.改写库对象 本章我们重点来介绍,在调用库的时候,我们需要能够在前台调用的时候可以同时设置多个操作,比如设置CSS,设置innerHT ...

  5. 第一百三十九节，JavaScript，封装库--CSS选择器

    JavaScript,封装库--修改元素选择器 就是将构造库函数修改成元素选择器,像css那样,输入#xxx .xxx xxx  (获取指定id下的指定class下的指定标签元素) 修改后的基础库 / ...

  6. JavaScript 继承 封装 多态实现及原理详解

    面向对象的三大特性 封装 所谓封装,也就是把客观事物封装成抽象的类,并且类可以把自己的数据和方法只让可信的类或者对象操作,对不可信的进行信息隐藏.封装是面向对象的特征之一,是对象和类概念的主要特性. ...

  7. U3D笔记11:47 2016/11/30-15:15 2016/12/19

    11:47 2016/11/30Before you can load a level you have to add it to the list of levels used in the gam ...

  8. 更新日志(建议升级到2016.12.17) && 更新程序的方法

    更新程序的方法: 1,在控制面板里点击备份当前数据库文件到磁盘,把当天获取的信息从内存写到磁盘/存储卡.2,下载最新版的源码 wget -O "infopi.zip" " ...

  9. 最新的 cocoapods 安装与使用（2016.11）

    cocoapods简介: cocoapods 是iOS的类库管理工具,可以让开发者很方便集成各种第三方库,而不用去网站上一个个下载,再一个个文件夹的拖进项目中,还得添加相关的系统依赖库.只需要安装好c ...

随机推荐

  1. WEB端实现打印

    首先需要下载一个JQ插件: 地址: http://files.cnblogs.com/files/SabWoF/jq%E6%89%93%E5%8D%B0%E6%8F%92%E4%BB%B6%E5%AE ...

  2. 把包发布到npm官网

    一.包 包就是多模块的集合,CommonJS的包规范给程序员提供了组织模块的标准,减少沟通成本. 规范: 所有的模块放在demo文件夹下(包名)的lib文件夹里面 在lib文件夹的同级目录下新建ind ...

  3. display:inline-block会产生空隙

    display:inline-block会产生空隙 解决方法:font-size:0;letter-spacing:-4px

  4. PHP Math 函数

    abs() 绝对值. 3 acos() 反余弦. 3 acosh() 反双曲余弦. 4 asin() 反正弦. 3 asinh() 反双曲正弦. 4 atan() 反正切. 3 atan2() 两个参 ...

  5. Nginx 相关

    删除 access.log 之后,要让 Nginx 重新加载一下,命令 killall -s USR1 nginx 无需新建 access.log ,这个命令会自动创建该文件 Nginx 的日志文件轮 ...

  6. ubuntu下更改鼠标移动速度

    ubuntu下,系统设置中,无法更改外接鼠标的移动指针速度,如图: 然后百度,终于找到一个靠谱打方法: 命令: xset m N 其中,N是速度,估计取值为0-10 该方法比起网上的某些攻略简单好多

  7. JavaScript浮动广告代码，容纯DIV/CSS对联漂浮广告代码，兼容性非常好的js右下角与漂浮广告代码

    基于JavaScript代码实现随机漂浮图片广告,javascript图片广告 在网上有很多这样的代码,不过未必符合W3C标准,因为在头部加上<!DOCTYPE html>类似标签之后,漂 ...

  8. JS技巧

    2016-08-09 200多个js技巧代码(Down) word下载 200多个js技巧代码 目录 1.文本框焦点问题... 6 2.网页按钮的特殊颜色... 6 3.鼠标移入移出时颜色变化... ...

  9. ***git自动化部署总结

    在网上搜了一堆没用找到太仔细的教程,于是花费2天时间,自己研究了下.现在分享如下: 思路:利用crontab定时去去执行git pull脚本 首先,用git clone命令将中央库的代码下载到阿里云 ...

  10. 解决select2在bootstrap的modal中默认不显示的问题

    在Bootstrap中的Modal,select2插件会有不显示,因为其z-index小于modal,还有另外一个问题是,修正z-index之后,select2不会自动失去焦点的问题.代码解决如下: ...