这是一个简单的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. 源码安装php

    php安装扩展源yum install epel-releaseyum updateyum install libmcrypt libmcrypt-devel mcrypt mhash -yyum i ...

  2. Python下Json和Msgpack序列化比较

     最近用Python时,遇到了序列化对象的问题,传统的json和新型序列化工具包msgpack都有涉及,于是做一个简单的总结: 通俗的讲:序列化:将对象信息转化为可以存储或传输的形式:反序列化:把这个 ...

  3. java的异常总结

    异常:在java程序中也出现不正常的情况,这个就叫异常.java是面向对象的语言.任何事物都可以用类来描述,同样异常也是一种事物,java中提供了很多异常类 很多异常堆积起来叫做异常体系 Throwa ...

  4. Vi命令备忘

    备忘 Ctrl+u:向文件首翻半屏: Ctrl+d:向文件尾翻半屏: Ctrl+f:向文件尾翻一屏: Ctrl+b:向文件首翻一屏: Esc:从编辑模式切换到命令模式: ZZ:命令模式下保存当前文件所 ...

  5. Centos挂载第二块硬盘

    作为一个初创小公司的架构师,工作内容纷繁复杂,涉及了系统管理员.数据库管理员.架构师.高级软件工程师.项目经理的部分.   今天的任务是安装公司的服务器,使用centos6.7.安装过程就不用细讲了. ...

  6. 用U盘安卓esxi虚拟机出现 error loading /s.v00 错误解决办法

    前段时间用 一个 白色的 东芝U盘 给戴尔 R720服务器安装 esxi 6.0时,在加载到/s.v00 找个文件时出现错误,大致为: error loading /s.v00 compressed ...

  7. llvm-summary

    llvm 学习总结 Type define int类型 IntegerType::get(mod->getContext(), 32) long类型 IntegerType::get(mod-& ...

  8. C# 正则表达式总结

    正则表达式 是一种匹配输入文本的模式..Net 框架提供了允许这种匹配的正则表达式引擎.模式由一个或多个字符.运算符和结构组成. 下面列出了用于定义正则表达式的各种类别的字符.运算符和结构. 字符转义 ...

  9. react native 键盘遮挡按钮点击事件

    在做项目的时候,我遇到一个很奇怪的问题,我先描述一下问题,在InputText输入内完成以后,点击按钮进行下一步的操作的时候,第一次点击的时候,按钮没有响应,第二次点击的时候才会响应.这样对用户体验有 ...

  10. WebGL入门教程(五)-webgl纹理

    前面文章: WebGL入门教程(一)-初识webgl WebGL入门教程(二)-webgl绘制三角形 WebGL入门教程(三)-webgl动画 WebGL入门教程(四)-webgl颜色 这里就需要用到 ...