2022-06-15 来源：华纳网 责任编辑：谷雨 人气：
核心提示：知识点： 在H5中直接执行SQL语句
知识点：

在H5中直接执行SQL语句
 

本课内容：

大家好，欢迎来到谷雨课堂，

 

本节我们来讲一下，

如何在浏览器中直接使用SQL，

供助于WASM,

我们甚至可以直接在网页（H5）里缓存一个真正的数据库，

  •  
  •  
  •  
  •  
  •  
  •  
db.run("insert into users (uid,dept) values('user"+i+"','部门"+i+"') "); db.each("SELECT * from users",             function (row){                s+="<hr>"+JSON.stringify(row);            }        );

 

我们正式开始，

首先我们引用一个JS文件

  •  
<script src="./js/sql-wasm.js"></script>

 

没错，

只需要引用这一个文件，

然后我们初始化一下

  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
var db;    initSqlJs({locateFile: file => `./js/${file}`    }).then(function(SQL){            db = new SQL.Database();            db.run("CREATE TABLE users (uid,dept);");                    }    );

以上代码中的第6行，

得到的db，

就可以执行任意的SQL码了，

哪怕上万条记录，

在一般的电脑上也是飞快的

 

下面是完整代码

  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
<!DOCTYPE html><html><head><title>No.19 在H5中直接执行SQL语句</title><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><script src="./js/sql-wasm.js"></script><script>var db;    initSqlJs({locateFile: file => `./js/${file}`    }).then(function(SQL){            db = new SQL.Database();            db.run("CREATE TABLE users (uid,dept);");for(i=1;i<=100;i++){                db.run("insert into users (uid,dept) values('user"+i+"','部门"+i+"') ");            }
        }    );  function show_sql(){        s="";        db.each("SELECT * from users", function (row){                s+="<hr>"+JSON.stringify(row);            }        );document.getElementById("info").innerHTML=s;    }</script></head><body><input type="button" onclick="show_sql()" value="查询"><div id="info"></div></body></html>

 

WASM是个神奇的技术，

利用WASM我们甚至可以直接在网页中用C或Python来编写程序

现在是2022年，VMWARE等公司，

也计划把WASM当做虚拟机来用

 

各位小伙伴们有空一定要多学多看

 

延伸阅读（关于WASM）

高效

WebAssembly 有一套完整的语义，实际上 wasm 是体积小且加载快的二进制格式， 其目标就是充分发挥硬件能力以达到原生执行效率

 

安全

WebAssembly 运行在一个沙箱化的执行环境中，甚至可以在现有的 JavaScript 虚拟机中实现。在web环境中，WebAssembly将会严格遵守同源策略以及浏览器安全策略。

 

开放

WebAssembly 设计了一个非常规整的文本格式用来调试、测试、实验、优化、学习、教学或者编写程序。可以以这种文本格式在web页面上查看wasm模块的源码。

 

标准

WebAssembly 在 web 中被设计成无版本、特性可测试、向后兼容的。WebAssembly 可以被 JavaScript 调用，进入 JavaScript 上下文，也可以像 Web API 一样调用浏览器的功能。当然，WebAssembly 不仅可以运行在浏览器上，也可以运行在非web环境下。

 

 

完整的源代码可以登录【华纳网】下载。

 

https://www.worldwarner.com/






 





免责声明：本文仅代表作者个人观点，与华纳网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
精彩推荐