这是一个简单的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. RakNet基本教程

    官方网址:http://www.jenkinssoftware.com/raknet/manual/tutorialsample3.html Tutorial code sample 3 Remote ...

  2. 各种webservice调用地址

    http://www.webxml.com.cn/zh_cn/web_services.aspx

  3. ORA-12541:TNS:no listener 客户端tnsnames.ora配置，以及服务端listener.ora配置

    需求:客户端(192.168.25.1)需要访问服务端(192.168.7.215)的Oracle库ORCL. 步骤一:配置客户端tnsnames.ora 步骤二:配置服务端listener.ora ...

  4. Swift - UIBezierPath

    使用UIBezierPath可以创建基于矢量的路径.使用此类可以定义简单的形状,如椭圆.矩形或者有多个直线和曲线段组成的形状等.主要用到的该类的属性包括 moveToPoint: //设置起始点 ad ...

  5. locate 最快的查找文件的命令　NB

    我见过最NB的查找文件最快的命令 [root@NB data]# locate teamviewer. /data/Software/teamviewer.i686.rpm /home/ok/.loc ...

  6. Delphi容器类之---TOrderedList、TStack、TQueue、TObjectStack、TObjectQueue

    TOrderedList.TStack.TQueue Contnrs单元还定义了其他三个类:TOrderedList.TStack.TQueue TOrderedList TOrderedList = ...

  7. SOUI Editor使用教程

    感谢网友"指尖"为SOUI开发的UiEditor, 目前该UI编辑器已经基本可用, 源代码在soui svn demos\uieditor. 下面是"指尖"提供 ...

  8. Spring MVC类型转换

    类型转换器引入 为什么页面上输入"12",可以赋值给Handler方法对应的参数?这是因为框架内部帮我们做了类型转换的工作.将String转换成int 但默认类型转换器并不是可以将 ...

  9. [leetcode] 提醒整理之进制

    12. Integer to Roman Given an integer, convert it to a roman numeral. Input is guaranteed to be with ...

  10. Oracle的tnsnames.ora配置(PLSQL Developer)

    首先打开tnsnames.ora的存放目录,一般为D:\app\Administrator\product\11.2.0\client_1\network\admin,就看安装具体位置了. 步骤阅读 ...