这是一个简单的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. linux添加私有的ip

    在虚拟机上的网络适配器设置为仅主机模式,重启linux系统,ifconfig查看所得的就是linux自动配置的私有ip.

  2. js如何求一组数中的极值

    这是一个很简单的问题,现在我们从循环开始,例如一组数[5,2,1,3,4];求其中的最大值,那么首先我们要定义一个max的中间变量,遍历数组,当遇到比max值大则赋值给max,直到循环结束,就能获取这 ...

  3. PHP中的date()函数

    d  月份中的第几天,有前导零的 2 位数字 01 到 31 D  星期中的第几天,文本表示,3 个字母 Mon 到 Sun j  月份中的第几天,没有前导零 1 到 31 l  ("L&q ...

  4. javascrip中cookie的使用详细分析

    JavaScript中的另一个机制:cookie,则可以达到真正全局变量的要求. cookie是浏览器 提供的一种机制,它将document 对象的cookie属性提供给JavaScript.可以由J ...

  5. Hadoop单机模式安装-(2)安装Ubuntu虚拟机

    网络上关于如何单机模式安装Hadoop的文章很多,按照其步骤走下来多数都失败,按照其操作弯路走过了不少但终究还是把问题都解决了,所以顺便自己详细记录下完整的安装过程. 此篇主要介绍在虚拟机设置完毕后, ...

  6. C++ 系列：多线程资源收集

    Copyright © 1900-2016, NORYES, All Rights Reserved. http://www.cnblogs.com/noryes/ 欢迎转载,请保留此版权声明. -- ...

  7. Windows8 UI MessageBox In DevExpress

    // custom messagebox using System; using System.Drawing; using System.Windows.Forms; using DevExpres ...

  8. unicode 和 utf8

    关于 unicode utf8 文章来自于 http://blog.csdn.net/tge7618291/article/details/7599902 ascii 主要来表示英文.但是要全世界那么 ...

  9. 整理几种在axure里使页面居中的方法

    1. 用动态面板固定浏览器功能. 很简单方便. 但缺点是 当浏览器窗口大小小于页面时, 由于会强制居中,导致页面2边是在显示范围外并且是无法通过滚动条滚动的(滚动条是没有的). 2. 使用页面属性里的 ...

  10. MSP430FR4133/4131/4132单片机破解芯片解密多少钱？

    德州仪器MSP430FR4133/4131/4132单片机破解芯片解密多少钱? MSP430FR4133.MSP430FR4131.MSP430FR4132 ####[微信:icpojie]#### ...