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

  1. var ticker={
  2.             n:0,
  3.             add:function()
  4.             {
  5.                 this.n++;
  6.             },
  7.             show:function()
  8.             {
  9.                 alert(this.n);
  10.             }
  11.         }
  12.         ticker.add();
  13.         ticker.add();
  14.         ticker.show();

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

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <title>Web SQL Database</title>
  7.         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  8.     </head>
  9.  
  10.     <body>
  11.         <h2>Web SQL Database</h2>
  12.         <div>
  13.             <button id="btnCreateTable">创建表</button>
  14.             <button id="btnDropTable">删除表</button>
  15.             <table border="1" width="80%" id="tabGoods">
  16.                 <tr>
  17.                     <th>编号</th>
  18.                     <th>名称</th>
  19.                     <th>价格</th>
  20.                     <th>删除</th>
  21.                 </tr>
  22.             </table>
  23.             <fieldset>
  24.                 <legend>商品信息</legend>
  25.                 <p>
  26.                     <label for="name">名称：</label>
  27.                     <input type="text" id="name" value="" />
  28.                 </p>
  29.                 <p>
  30.                     <label for="price">价格：</label>
  31.                     <input type="text" id="price" value="" />
  32.                 </p>
  33.                 <p>
  34.                     <input type="hidden" id="goodsId" />
  35.                     <button id="btnInsert">添加</button>
  36.                     <button id="btnUpdate">更新</button>
  37.                 </p>
  38.             </fieldset>
  39.         </div>
  40.         <h2 id="msg"></h2>
  41.         <script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
  42.         <script type="text/javascript">
  43.           //定义当前应用的对象
  44.           var dbApp={
  45.                //打开数据库
  46.                openDb:function()
  47.                {
  48.                    //创建名称为products，版本为1.0,描述为产品数据库，3M大小的数据库
  49.                 this.db = openDatabase("products", 1.0, "产品数据库", 1024 * 1024 * 3, function() {
  50.                     this.log("创建或打开数据库完成");
  51.                 });
  52.                },
  53.                //初始化
  54.                init:function()
  55.                {
  56.                    //打开或创建数据库
  57.                    this.openDb();
  58.                    //绑定事件
  59.                    this.bindEvent();
  60.                    //展示数据
  61.                    this.select();
  62.                    this.log("初始化完成");
  63.                },
  64.                //绑定事件
  65.                bindEvent:function()
  66.                {
  67.                    //添加事件
  68.                    $("#btnInsert").click(this.insert);
  69.                    $("#btnUpdate").click(this.update);
  70.                    $("#btnCreateTable").click(this.createTable);
  71.                    $("#btnDropTable").click(this.dropTable);
  72.                },
  73.                //显示消息
  74.             log:function(info) {
  75.                 $("#msg")[0].innerHTML += info + "<br/>";
  76.             },
  77.             //执行sql的通用方法 result.rowsAffected 影响行数
  78.             //callback执行成功时的回调方法
  79.             exeSql:function(sql,title,param,callback) {
  80.                 title=title||"操作";
  81.                 this.db.transaction(function(tx) {
  82.                     tx.executeSql(
  83.                         sql, param||[],
  84.                         function(tx, result) {
  85.                             dbApp.log(title+'成功');
  86.                             if(callback){  //如果有参数
  87.                                 callback(result);
  88.                             }
  89.                         },
  90.                         function(tx, error) {
  91.                             dbApp.log(title+'失败' + error.message);
  92.                         });
  93.                 });
  94.             },
  95.             //创建表
  96.             createTable:function() {
  97.                 dbApp.exeSql("create table IF not EXISTS goods(id integer primary key autoincrement,name text not null,price double)","创建表");
  98.             },
  99.             //删除表
  100.             dropTable:function() {
  101.                 dbApp.exeSql("drop table IF EXISTS goods","删除表");
  102.             },
  103.             //展示，加载数据
  104.             select:function() {
  105.                 dbApp.exeSql("select id,name,price from goods","查询",[],function(result) {
  106.                            //将表格中tr索引大于0的元素删除
  107.                             $("#tabGoods tr:gt(0)").remove();
  108.                             for(var i = 0; i < result.rows.length; i++) {
  109.                                 var tr = $("<tr/>");
  110.  
  111.                                 $("<td/>").text(result.rows.item(i)["id"]).appendTo(tr);
  112.                                 $("<td/>").text(result.rows.item(i)["name"]).appendTo(tr);
  113.                                 $("<td/>").text(result.rows.item(i)["price"]).appendTo(tr);
  114.                                 var del = $("<a href='#' onclick='dbApp.del(" + result.rows.item(i)["id"] + ",this)' >删除 | </a>")
  115.                                 var edit = $("<a href='#' onclick='dbApp.edit(" + result.rows.item(i)["id"] + ",this)' >修改</a>")
  116.                                 $("<td/>").append(del).append(edit).appendTo(tr);
  117.                                 tr.appendTo("#tabGoods");
  118.                             }
  119.                             });
  120.             },
  121.             //插入数据
  122.             insert:function() {
  123.                 //如果insert方法被绑定为事件，则this表示事件发生的对象
  124.                 dbApp.exeSql("insert into goods(name,price) values(?,?)","添加",[$("#name").val(), $("#price").val()],function(){
  125.                     dbApp.select();
  126.                 });
  127.             },
  128.             //删除
  129.             del:function(id, link) {
  130.                 dbApp.exeSql("delete from goods where id=?","删除",[id],function(result){
  131.                     //查找a标签最近的一个tr父元素，移除
  132.                     $(link).closest("tr").remove();
  133.                 });
  134.             },
  135.             //编辑
  136.             edit:function(id) {
  137.                 dbApp.exeSql("select id,name,price from goods where id=?","编辑",[id],function(result) {
  138.                             $("#name").val(result.rows.item(0)["name"]);
  139.                             $("#price").val(result.rows.item(0)["price"]);
  140.                             $("#goodsId").val(result.rows.item(0)["id"]);
  141.                             dbApp.log("修改后请保存");
  142.                     });
  143.             },
  144.             //更新
  145.             update:function() {
  146.                 if($("#goodsId").val()) {
  147.                     dbApp.exeSql("update goods set name=?,price=?  where id=?","更新",[$("#name").val(), $("#price").val(), $("#goodsId").val()],function(result) {
  148.                                 dbApp.select();
  149.                                 $("#goodsId").val("");
  150.                     });
  151.                 } else {
  152.                     dbApp.log("请选择要更新的记录 ");
  153.                 }
  154.             }
  155.           };
  156.  
  157.         dbApp.init();
  158.         </script>
  159.     </body>
  160.  
  161. </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. android初练二

    android 之 Activity的启动方式 1.android的显示启动 显示启动一般用于在用自己的活动时进行页面跳转时常常使用到 public class MainActivity extend ...

  2. Dcloud HTML5 监听蓝牙设备 调用 原生安卓实现

    最近一直搞Dcloud ,这是HTML5版本的开发,打包时候,可以打包成 apk 和ipa 分别运行在安卓和ios 机器上面, 但是这里面的资料很少,遇到问题,之后只能自己钻研总结, 现在有这么一个需 ...

  3. Mac OS X系统安装盘制作

    本文来记录一下制作苹果系统安装盘的步骤: 1. 准备一个空白的U盘或移动硬盘和去App Store下载好最新版本的系统,现在最新的是:macOS Sierra,下载后会默认打开安装进程,退出不管即可, ...

  4. EChart数据的异步加载和更新

    ECharts是国内开发一款图标插件,在网页中我们经常要用到图标显示,直接引用十分方便. 直接到ECharts主页调用插件 <!DOCTYPE html> <html style=& ...

  5. pkcs1与pkcs8格式RSA私钥互相转换

    转自:http://blog.csdn.net/duan19056/article/details/52104966 1.PKCS1私钥生成 openssl genrsa -out private.k ...

  6. 使用PowerShell来修改文件访问,创建,修改时间属性

    Function Set-FileTimeStamps { Param ( [Parameter(mandatory=$true)] [string[]]$path, [datetime]$date ...

  7. GDB的常用命令

    定断点b line.会返回一个断点号(breakpoint-no). 输出p val.可以夹杂类型装换.解引用. 遇到断点自动执行命令commands breakpoint-no. 停止执行s. 退出 ...

  8. YUV格式介绍

    原文链接:http://www.cnblogs.com/azraelly/archive/2013/01/01/2841269.html YUV格式有两大类:planar和packed.对于plana ...

  9. 虚拟机下CentOS 配置IP地址的三种方法

    1.自动获取IP地址(我不是用的这种方法,不做过多介绍) 虚拟机使用桥接模式,相当于连接到物理机的网络里,物理机网络有DHCP服务器自动分配IP地址. #dhclient 自动获取ip地址命令 #if ...

  10. SSH框架整合（全注解）

    全部jar包    目录结构  配置案例 package cn.yzu.Tbook.action; import javax.annotation.Resource; import org.apach ...