这是一个简单的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. html5 Application Cache 机制以及使用

    那什么是Application Cache呢? 顾名思义,AppCache就是对app内存缓存的方案,具体表现为当请求某个文件时不是从网络获取该文件,而是从本地内存中获取. Application C ...

  2. java.io.Serializable 序列化接口

    什么是序列化.反序列化? Serialization(序列化)是一种将对象以一连串的字节描述的过程: 反序列化deserialization是一种将这些字节重建成一个对象的过程. 序列化通俗一点说就是 ...

  3. 在 Angularjs 中 ui-sref 和 $state.go 如何传递参数

    1 ui-sref.$state.go 的区别 ui-sref 一般使用在 <a>...</a>: <a ui-sref="message-list" ...

  4. Centos挂载第二块硬盘

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

  5. 85. Maximal Rectangle

    85. Maximal Rectangle Given a 2D binary matrix filled with 0's and 1's, find the largest rectangle c ...

  6. 【去除NSString 字符串中的空格换行符】

    @interface NSString (DeletWhiteSpace) // 返回一个去掉前后空格的字符串或者下划线,如果自己是一个nil 返回@“” - (NSString *)trimming ...

  7. Delphi的分配及释放---New/Dispose, GetMem/FreeMem及其它函数的区别与相同

    转载自:http://www.cnblogs.com/qiusl/p/4028437.html?utm_source=tuicool 我估摸着内存分配+释放是个基础的函数,有些人可能没注意此类函数或细 ...

  8. Duilib源码分析(四)绘制管理器—CPaintManagerUI—(前期准备三)

    接下来,我们将继续分析UIlib.h文件中其他的文件, UIContainer.h, UIRender.h, WinImplBase.h, UIManager.h,以及其他布局.控件等: 1. UIR ...

  9. ppmoney

    build/config.js 改 8080端口 build/webpack.dev.conf.js 改路径简写 alias:{ 'vux-components':'vux/dist/componen ...

  10. Tor网络突破IP封锁，爬虫好搭档【入门手册】

    本文地址:http://www.cnblogs.com/likeli/p/5719230.html 前言 本文不提供任何搭梯子之类的内容,我在这里仅仅讨论网络爬虫遇到的IP封杀,然后使用Tor如何对抗 ...