xml地图|网站地图|网站标签 [设为首页] [加入收藏]
开发者才记得这些,前端的数据库
分类:web前端

前面一个的数据库:IndexedDB入门

2014/12/27 · 未分类 · IndexedDB

本文由 伯乐在线 - cucr 翻译,黄利民 校稿。未经许可,禁绝转发!
日语出处:www.codemag.com。应接参加翻译组。

应用程序须要多少。对许多Web应用程序来讲,数据在劳务器端协会和管理,客商端通过互连网央求获取。随着浏览器变得非常有本领,因而可选择在浏览器存储和垄断(monopoly)应用程序数据。

正文向您介绍名字为IndexedDB的浏览器端文档数据库。使用lndexedDB,你能够透过惯于在服务器端数据库大致同样的法子创立、读取、更新和删除大批量的记录。请使用本文中可职业的代码版本去体验,完整的源代码能够透过GitHub库找到。

读到本课程的尾声时,你将熟练IndexedDB的基本概念以致怎样兑现贰个利用IndexedDB实行总体的CRUD操作的模块化JavaScript应用程序。让我们多少亲呢IndexedDB并起始吧。

什么是IndexedDB

貌似的话,有二种不一样类型的数据库:关系型和文书档案型(也称得上NoSQL或对象)。关全面据库如SQL Server,MySQL,Oracle的多少存款和储蓄在表中。文书档案数据库如MongoDB,CouchDB,Redis将数据集作为个体对象存款和储蓄。IndexedDB是多个文档数据库,它在完全内放置浏览器中的一个沙盒境遇中(强制依据(浏览器)同源攻略)。图1来得了IndexedDB的数码,呈现了数据库的构造

图片 1

图1:开辟者工具查看四个object store

成套的IndexedDB API请参见完整文书档案

独有 90 时代的 Web 开采者才记得这个

2016/04/26 · 基本功技巧 · 2 评论 · WEB

本文由 伯乐在线 - dcscodelife 翻译,艾凌风 校稿。未经许可,制止转发!
斯洛伐克(Slovak)语出处:holman。应接参与翻译组。

你早已强行把 <blink> 标签放入<marquee> 标签呢?近年来皮克斯动画职业室获得了所有荣誉,不过在 90 时代那么些做法则是计算机动画的傲然挺立创举。通过整合二种标签,你成为了三个先行者。四个创新意识Infiniti的人。多少个令全体人都崇拜的人。

在 90 时期,你曾经是一个网页开拓者。

在及时,你精晓自个儿是一个绝妙的人选。伴随你而来的是不过大量的技能革新,从那时候起头,大家还没来得及做出喜好,技术就早已起来复制开来了。

让大家先放下 jQuery,抛开非关系型数据库不谈:大家有更首要的事务要切磋。

WebSocket 教程

2017/05/15 · 基础本领 · websocket

原著出处: 阮一峰   

WebSocket 是一种互联网通讯协议,比比较多高档功用都亟需它。

正文介绍 WebSocket 左券的使用方式。

图片 2

统一希图标准

IndexedDB的架构很像在有的风靡的劳动器端NOSQL数据库完毕中的设计规范类型。面向对象数据通过object stores(对象旅社)进行悠久化,全部操作基于须要同偶尔间在作业限制内实践。事件生命周期令你能够支配数据库的布局,错误通过荒唐冒泡来使用API管理。

1×1.gif

1×1.gif 相应得到庞大的格莱美大奖。或然普利策音讯奖。也许类似四年级体育课上公布的最好升高奖。除了链式链表,它是计算机科学史上最根本的姣好。它不是大家应得的前程,而是大家要求的以往(直到盒子模型透彻替代了它)。

纵然你还没不熟知大家的 1×1.gif 小把戏,请看上边:

图片 3

你能看出它呢,让大家加大学一年级些:

图片 4

The 1×1.gif

本条 1×1.gif – 要么 spacer.gif,或许 transparent.gif – 仅仅是贰个长度宽度都以三个像素的晶莹 GIF 图像。

JavaScript

<IMG SRC="/1x1.gif" WIDTH=150 HEIGHT=250>

1
<IMG SRC="/1x1.gif" WIDTH=150 HEIGHT=250>

通过上边的代码,你能够把成分放置在页面包车型大巴另外岗位上。

JavaScript

<TABLE> <TR> <TD><IMG SRC="1x1.gif" WIDTH=300> <TD><FONT SIZE=42>Hello welcome to my <MARQUEE>Internet Web Home</MARQUEE></FONT> </TR> <TR> <TD BGCOLOR=RED><IMG SRC="/cgi/webcounter.cgi"> </TR> </TABLE>

1
2
3
4
5
6
7
8
9
<TABLE>
  <TR>
    <TD><IMG SRC="1x1.gif" WIDTH=300>
    <TD><FONT SIZE=42>Hello welcome to my <MARQUEE>Internet Web Home</MARQUEE></FONT>
  </TR>
  <TR>
    <TD BGCOLOR=RED><IMG SRC="/cgi/webcounter.cgi">
  </TR>
</TABLE>

1×1.gif 让您毫不费事地在页面包车型客车任何位放置元素。直到今日与世长辞,它依旧是独一的垂直居中元素的法子。

JavaScript

          

1
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

图片对于你来说是还是不是太高端了?《HTML For Dummies》是或不是截止第四章才介绍 <IMG> 标签?今后好了,你是幸好的:&nbsp; 标签来了!

你能够对和谐说,“小编通晓全数 HTML 实体编码。这一个弱不禁风的潮男来此地干嘛的?”

听着,小编相亲的灵性的摄人心魄的读者对象,那是贰个现行的年轻人未有给予丰盛注重的更新:不断重复 &nbsp;。很像 1×1.gif 的小把戏,你能随随便便地扩充 &nbsp; 并用在别的你要求的地点:

JavaScript

PLEASE SIGN <BR>       MY GUESTBOOK BELOW: <HR><HR>

1
2
3
PLEASE SIGN  <BR>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;MY GUESTBOOK BELOW:
<HR><HR>

在 90 时代,若是自身每写下一个 &nbsp; 就赢得五美分,笔者就能有丰裕的钱支付来自U.S.A.在线的每月超额支出账单了。

一、为啥必要 WebSocket?

第一接触 WebSocket 的人,都会问相同的标题:大家早就有了 HTTP 合同,为何还亟需另叁个磋商?它能带动怎么着好处?

答案很简短,因为 HTTP 公约有一个败笔:通信只可以由顾客端发起。

譬释迦牟尼讲来讲,大家想打听明天的天气,只好是客商端向服务器发出恳求,服务器重回查询结果。HTTP 合同做不到服务器主动向顾客端推送消息。

图片 5

这种单方面央浼的特点,注定了一旦服务器有一而再的景况变化,客商端要获悉就非常劳累。大家只能利用“轮询”:每间隔一段时候,就发生多个打探,精晓服务器有未有新的音信。最优良的意况就是聊天室。

轮询的功用低,特别浪费能源(因为必需不停连接,或许 HTTP 连接始终开辟)。因而,程序员们直接在想念,有未有越来越好的格局。WebSocket 正是那般表达的。

对象仓库

object store是IndexedDB数据库的功底。要是你利用过关全面据库,经常能够将object store等价于三个数目库表。Object stores包蕴贰个或多少个目录,在store中据守一对键/值操作,那提供一种高效牢固数据的方法。

当你布署三个object store,你无法不为store采用二个键。键在store中能够以“in-line”或“out-of-line”的形式存在。in-line键通过在数额对象上援用path来维持它在object store的唯一性。为了表明那一点,想想几个回顾电子邮件地址属性Person对象。您能够配备你的store使用in-line键emailAddress,它能保障store(长久化对象中的数据)的唯一性。此外,out-of-line键通过单独于数据的值识别唯一性。在这里种气象下,你能够把out-of-line键比作八个卡尺头值,它(整数值)在关周密据库中担当记录的主键。

图1显示了义务数据保存在义务的object store,它利用in-line键。在此个案例中,键对应于对象的ID值。

点下划线,边界效应

在 HTML 快走到他的白银时代的漏洞时,CSS 登台了,它推动了八个剧情和体裁抽离的社会风气,从此大家也起先不停地拍卖苦难。

勇敢地自然是用 CSS 来删除链接的下划线效果。一夜之间,整个因特网都陷入了这些办法所拉动的泥泞之中,文本看起来像链接,链接看起来像文本。你不了解点何地,不过乌黑并未再三多长时间,因为我们注明了光标效果(你还尚无活到你的鼠标有11个火球尾巴的时候)。

高档工夫的运用是这么斐然,以致于大致我们全体人都从一起首就使用 CSS。笔者依旧在 3000 年的一份 index.shtml(对,正是SSI)文书档案中窥见了证据:

JavaScript

<style type="text/css"> <!-- a:hover {text-decoration: none; color: #000000} --> </style>

1
2
3
4
5
<style type="text/css">
<!--
a:hover {text-decoration: none; color: #000000}
-->
</style>

正是它了!当然,那是 CSS 的内嵌样式。那个样式令你的鼠标滑过链接时,删除链接的下划线何况链接的文字变黑。从此,交互式网址诞生了。

二、简介

WebSocket 公约在二零零六年落地,贰零壹叁年成为国际标准。全部浏览器都已经扶植了。

它的最大特征正是,服务器可以积极向客商端推送消息,顾客端也得以积极向服务器发送消息,是的确的双向平等对话,属于服务器推送技巧的一种。

图片 6

此外特色富含:

(1)组建在 TCP 和谐之上,服务器端的得以达成相比轻松。

(2)与 HTTP 公约抱有精良的包容性。暗许端口也是80和443,而且握手阶段选拔HTTP 公约,因而不轻易屏蔽,能经过种种 HTTP 代理服务器。

(3)数据格式相当轻量,质量开销小,通讯高效。

(4)能够发送文书,也能够发送二进制数据。

(5)未有同源限制,客商端能够与自由服务器通讯。

(6)公约标记符是ws(假若加密,则为wss),服务器网站正是 U奥迪Q3L。

ws://example.com:80/some/path

1
2
ws://example.com:80/some/path
 

图片 7

依据事务

差别于一些价值观的关全面据库的达成,每三个对数据库操作是在一个政工的上下文中实践的。事务限制贰次影响叁个或五个object stores,你通过传播多少个object store名字的数组到创造工作限制的函数来定义。

创造职业的首个参数是事情形式。当呼吁多个事务时,必得调整是遵照只读如故读写情势诉求访谈。事务是能源密集型的,所以借使您无需改换data store中的数据,你只要求以只读形式对object stores会集举行呼吁访谈。

清单2演示了如何采用格外的情势开创多少个职业,并在此片小说的 Implementing Database-Specific Code 部分开展了详尽座谈。

DHTML 动态超文本标志语言

就在大家富有了删除链接下划线的本事后,大家决定把它和二个有力作用整合起来,那个意义正是在页面加载的时候弹出一个音讯框 alert("Welcome to my website!")。组合 CSS 和 JavaScript 的双面力量,大家获取了多个能力怪兽:DHTML。

DHTML,表示“遍及式 HTML”,那是网页开荒工具的参天成就。它将经受住时间的考验,它能够使大家达成广大成效,比方雪花从页面最上部飘落下来,或许创立可折叠的菜单,动态的图片地图,又恐怕除了运用语义标签 <div>,我们仍然为能够自定义 <marquee> 标签。

DHTML 协理 Web 开垦从业余爱好发展到叁个早熟的规范领域。类似 Dynamic Drive 那样的网址使您能够独自经过复制粘贴贰个 50 行的代码块,就能够缓慢解决别的难点,而没有要求协和再思虑立异的消除方法。实际上, DHTML 正是特别时代的 Facebook Bootstrap 框架。

三、客商端的粗略示例

WebSocket 的用法极度轻巧。

上边是三个网页脚本的例证(点击这里看运转结果),基本上一眼就能够领略。

var ws = new WebSocket("wss://echo.websocket.org"); ws.onopen = function(evt) { console.log("Connection open ..."); ws.send("Hello WebSockets!"); }; ws.onmessage = function(evt) { console.log( "Received Message: " + evt.data); ws.close(); }; ws.onclose = function(evt) { console.log("Connection closed."); };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var ws = new WebSocket("wss://echo.websocket.org");
 
ws.onopen = function(evt) {
  console.log("Connection open ...");
  ws.send("Hello WebSockets!");
};
 
ws.onmessage = function(evt) {
  console.log( "Received Message: " + evt.data);
  ws.close();
};
 
ws.onclose = function(evt) {
  console.log("Connection closed.");
};      
 

基于要求

以致这里,有四个每每出现的主旨,您可能曾经注意到。对数据库的每一回操作,描述为通过三个哀告展开数据库,访问叁个object store,再持续。IndexedDB API天生是依附央浼的,那也是API异步天性提醒。对于你在数据库推行的历次操作,你必得首先为这么些操作成立贰个呼吁。当呼吁完毕,你能够响应由伏乞结果爆发的平地风波和谬误。

正文落成的代码,演示了哪些选择伏乞展开数据库,创建三个业务,读取object store的内容,写入object store,清空object store。

像素字体

卓殊时期的Computer显示屏不是相当大。我的意味是,纵然自从阴极射线管显示器 CRT 诞生后,显示器的尺寸的确比相当大,然则它们的分辨率不高。因而,为了丰硕利用像素,大家必须用 6 个像素点来代表任意字符。

图片 8

从字里行间我们得以见到,当面临着这么些简单的不能够再轻便的书体,况兼当开采到那些字体都以由像素结合的时候,Web 开发者们会渴望成为三个漫音乐家。所以您会在起步画面上看出这些诡异的等距像素插图,那几个开采者的时刻和钱财若是投到那多少个新上市的互连网公司会爆发越来越多的价值,实际不是稀疏在设置 Photoshop 软件上。

四、顾客端的 API

WebSocket 顾客端的 API 如下。

开垦数据库的伸手生命周期

IndexedDB使用事件生命周期管理数据库的张开和安插操作。图2演示了一个开发的伸手在必然的情状下发生upgrade need事件。

图片 9

图2:IndexedDB张开诉求的生命周期

全数与数据库的并行起头于二个开辟的伸手。试图展开数据库时,您必需传递叁个被呼吁数据库的版本号的整数值。在开荒乞请时,浏览器相比你传入的用来展开诉求的版本号与实际数据库的版本号。如果所必要的版本号高于浏览器中当前的版本号(或然今后从来荒诞不经的数据库),upgrade needed事件触发。在uprade need事件之间,你有空子通过增多或移除stores,键和索引来操纵object stores。

譬喻所央求的数据库版本号和浏览器的此时此刻版本号同样,只怕进级进度完结,一个开辟的数据库将回到给调用者。

按钮

本人深信不疑群众之所以讨厌IE浏览器,都是因为IE浏览器抛弃了当年这种最纯粹的标准

IE 4.0 是浏览器的圆满化身。它富有动态桌面。具有通道 Channels。对,便是高大的大道,那是最酷的本事,以前向来未有在市情上被选择过,一点都尚未。总的来说,IE 4 太理想了,无论你是还是不是喜欢它,你都应有把它装到你的计算机上。

当你属于精英团队时,你深远掌握完美的股票总市值,你有一种与生俱来的扼腕,你想告诉每多少个你遭受的人你的支配。你,也只是独有你有须要严正地做三个光辉的主宰。比如决定你的客户接Nash么浏览器浏览你的网址。

图片 10

那些按键随处可遇。就如军人服装上的绶带:向群众公布着他俩为了近来的荣誉,曾经是怎么样努力大战的典故。换句话说,无论你用哪贰个编辑器(当然是 FrontPage 98),无论你的 Web 服务器是怎样(二货,当然是 吉优Cities),无论是 Web 环的哪个部分(这么些开关无论怎么着都将抓牢你的网址排行)

笔者挂念这段美好的时节。近年来大家在 Javascript上拓宽抽象,在空虚之上又开展抽象。大家以至都不知道如何规范地拓宽测算。每当想起我们什么样走到后天这一步,都令人格外震惊。

让大家自豪地举起酒杯,帮大家叁个忙:复制一批 &nbsp; 到你的下多个代码提交中,让您的团协会成员惊诧出色吧。

1 赞 收藏 2 评论

4.1 WebSocket 构造函数

WebSocket 对象作为三个构造函数,用于新建 WebSocket 实例。

var ws = new WebSocket('ws://localhost:8080');

1
2
var ws = new WebSocket('ws://localhost:8080');
 

实行上边语句之后,客商端就能够与服务器举行连接。

实例对象的有所属性和措施清单,参见这里。

本文由澳门新葡亰手机版发布于web前端,转载请注明出处:开发者才记得这些,前端的数据库

上一篇:pwa重构上海地铁线路图,拖拽上传前传 下一篇:没有了
猜你喜欢
热门排行
精彩图文