萬盛學電腦網

 萬盛學電腦網 >> 網絡編程 >> php編程 >> SQL語句在JavaScript中的應用

SQL語句在JavaScript中的應用

最近一直在用javascript在做項目 
可是做著做著 
感覺很多功能代碼都是重復的。 

比如對javascript數組的排序 
還有對數組數據的刪選以及分組 

所以,後來興致以上來。 
一發不可收拾。 

寫了一個能在javascript中應用的 SQL 庫 

關於JSQL的開源問題

其實目前我已經在考慮這個問題

如果開源了,能有更多的好朋友一起來維護

 JSQL 目前的大概結構是這樣的

 YESBRAIN - 命名空間
          |
         JSQL - 就是本類庫啦!
              |
             Memory - JSQL 在 Objects array 中的應用封裝
              |
             Server - JSQL 在 遠端 SQL server 中的應用封裝
              |
             Client - JSQL 在 浏覽器 sqlite 中的應用封裝
              |
             DOM - JSQL 在 對 W3C DOM 的的應用封裝

有興趣的朋友可以
QQ: 85302520 聯系我
或者 Email : gongji at qq dot com

已經開放了
SVN checkout 地址:http://code.google.com/p/jsql-javascript/source/checkout

裡面有幾個例子和全部JSQL得源代碼
 

 


後來又想,怎麼不能用javascript直接連接數據庫呢? 
又做了一個javascript直連Sql數據的類庫 

後來,又想到其實還可以用SQL語句來操作HTML DOM模型 

再再再後來,又看到了HTML5中對web DB的實現 
所以對webDB,就是chrome和safari中的sqlite的封裝 

於是乎就有了: 

1.從服務器上獲取數據、執行SQL操作: 

 _SQLPROXYURL_ = 'SQLProxy.php';
 _SQLSERVERHOST_ = 'localhost';
 _SQLUSERNAME_ = 'root';
 _SQLPASSWORD_ = '';
 _SQLDATABASE_ = 'HotelManageMent';

 var result = "select * from Room".OnServer().executeSQL();
 for(var i=0; i<result.length; i++) {
     //do something here.... using result[i];
 }

2.操作Javascript Object Array 、執行SQL操作:

 var Room = [
   {
    ID: 'bot',
    name: 'test',
    sex: true
   }, {
    ID: 2,
    name: 'test8',
    sex: true
   }, {
    ID: 3,
    name: 'test5',
    sex: false
   }, {
    ID: 4,
    name: 'test2',
    sex: true
   }];

 SQL = "select Max(id) as bid,Sum(id) as total from records where name like "test%" group by sex order by id desc,name asc";
 var result = SQL.executeSQL();
 for(var i=0; i<result.length; i++) {
     //do something here.... using result[i];
 };
 "create table mytable".executeSQL();
 for(var j=0; j<100; j++) {
  "insert into mytable (id,name,sex) values(2,'zhangsan',true) ".executeSQL();
 };

操作Object Array
其實還可以這樣操作:

var Room = [
   {
    ID: 'bot',
    name: 'test',
    sex: true
   }, {
    ID: 2,
    name: 'test8',
    sex: true
   }, {
    ID: 3,
    name: 'test5',
    sex: false
   }, {
    ID: 4,
    name: 'test2',
    sex: true
   }];
"update Room set name = 'man' where sex=true".executeSQL();

支持的SQL語句有 SELECT INSERT UPDATE DELETE CREATE TABLE DROP TABLE

3.上回說道我發現DOM其實也可以用SQL操作
  比方說,你可以直接插入100個圖片element操作如下:

  'create table logolist'.ForDOM().executeSQL();
  for(var i=0;i<100;i++) {
   "insert into logolist(nodename,title,src) values ('img','google','images/google.gif')".ForDOM().execute();
  };

  或者是DELETE這些符合條件的元素:

 ("delete from logolist where title='google'").ForDOM().execute();

  亦或是充當selector:

 var result = ("select * from logolist").ForDOM().execute();
 for(var i=0;i<result.length;i++) {
  result[i].src = 'baidu.gif';
 };

 接上文說道的JSQL

4.當然隨著HTML5的普及,web DB 已經是大勢所趨了

所以,JSQL封裝到:

 _CLIENTDATABASE_ = 'HotelManage';
 _CLIENTDBVERSION_ = '0.1';
 _CLIENTDBDESC_ = "First Client DataBase";
 _CLIENTDBSIZE_ = 10240;


 JSQL("create table sqllite(id int)").OnClient().execute();

 for (var i = 0; i < 1000; i++) {
  JSQL("insert into sqllite (id) values ("+i+")").OnClient().execute();
 };
 var result = ("select * from sqllite").OnClient().executeSQL();
 //alert(result);
 for(var i=0;i<result.length;i++) {
  //do something using result[i] 
};

當然web DB 的sqlite同樣支持Insert / select / update / delete / create / drop table
甚至更加牛逼的sql語句。

最後附上我用JSQL庫做的兩個案例:

此案例均在浏覽器客戶端用js實現,沒有經過服務器上的php等任何服務端語言處理:

1.JSQL簡單example,批量圖片切換。其實這個example也很簡單,
就是根據where後的條件批量修改element的屬性,此處為Img元素

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="../src/YESBRAIN.js"></script>
<script type="text/javascript" src="../src/JSQL.js"></script>
<script type="text/javascript" src="../src/JSQL-DOM.js"></script>
<title>Switch Logo Images</title>
</head>
<body>
 <button onClick="switchlogos();"> 切換 LOGOS </button>

 <script type="text/javascript">
  title1 = "google";
  title2 = "baidu";
  logo1 = "images/google.gif";
  logo2 = "images/baidu.gif";
  function switchlogos() {
   //alert('switch');
   var tmplogo = logo1;
   var tmptitle = title1;

copyright © 萬盛學電腦網 all rights reserved