您的位置:奥门新浦京网址 > Wed前段 > 10个简化HTML5编码的在线工具,那些事儿

10个简化HTML5编码的在线工具,那些事儿

发布时间:2020-01-03 06:40编辑:Wed前段浏览(157)

    客户端(浏览器端)数据存储技术概览

    2017/03/09 · 基础技术 · 2 评论 · 存储

    原文出处: dwqs   

    在客户端(浏览器端)存储数据有诸多益处,最主要的一点是能快速访问(网页)数据。(以往)在客户端有五种数据存储方法,而目前就只有四种常用方法了(其中一种被废弃了):

    • Cookies
    • Local Storage
    • Session Storage
    • IndexedDB
    • WebSQL (被废弃)

    JSON Schema 那些事儿:基本概念

    2016/01/27 · HTML5 · JSON

    原文出处: 淘宝前端团队(FED)- 邦彦   

    图片 1

    10个简化HTML5编码的在线工具

    2011/08/18 · HTML5 · 1 评论 · HTML5

    HTML5 肯定是会彻底改变我们创建网站和Web应用程序。在这篇文章中,Jean-Baptiste Jung收集整理了10个非常强大的工具,可以简化和增强HTML5编码。

    0. HTML5 Reset

    HTML5 Reset是帮助你节省开始新项目时间的一组文件(HTML、CSS等)。好消息,HTML 5 空白WordPress主题模板也免费了。

    图片 2

    1. Initializr

    Initializr会为你生成一个干净的可定制的模板,基于Boilerplate。

    2. HTML5 Demos

    想知道firefox支持HTML5 canvas吗? 或者是Safari可以运行HTML5聊天客户端嘛?HTML5demos 帮你快速知道哪些属性可以用在特定的浏览器上。

    3. HTML5 Tracker

    想要保留与HTML5连接?那要用用这个跟踪器吧。

    4. HTML5 visual cheat sheet

    需要迅速找到一个标签或属性吗?只要看看在这个非常酷的小抄,就大功告成了!所有Web开发人员的必备小工具。

    5. Switch To HTML5

    Switch To HTML5 是个模板生成器,如果你想开始一个新项目,访问网站,获取免费的HTML5网站模板吧。

    6. Cross browser HTML5 forms

    表单是网站的重要组成部分,HTML5包括日历,色板,滑动部件,客户端验证等很好的特性。但是一个问题不容忽视,不是所有的浏览器都支持这些特性。Cross browser HTML5 forms 就派上了用场,解决跨浏览器兼容问题。

    7. HTML5 Test

    您的浏览器是否准备好HTML5的革命呢? HTML5 Test将让你知道。该网站将提供关于你使用的浏览器是否具备视频、音频、Canvas等能力的报告。

    8. HTML5 Canvas cheat sheet

    Canvas元素是HTML5中一个非常重要并有趣的部分,因为它允许你在屏幕上绘图。如果你需要任何关于canvas元素的帮助,就用HTML5 Canvas cheat sheet吧。

    9. Lime JS

    LimeJS是HTML5的游戏框架,支持触摸屏和桌面浏览器。非常棒,必须一试。

    赞 收藏 1 评论

    图片 3

    Cookies

    Cookies 是一种在文档内存储字符串数据最典型的方式。一般而言,cookies 会由服务端发送给客户端,客户端存储下来,然后在随后让请求中再发回给服务端。这可以用于诸如管理用户会话,追踪用户信息等事情。

    此外,客户端也用使用 cookies 存储数据。因而,cookies 常被用于存储一些通用的数据,如用户的首选项设置。

    引子

    在早期的淘宝 TMS 页面搭建系统中,为了解决页面模板和数据的分离问题,机智的先知们扩充了一系列灵活的 PHP 标签函数,得以将数据的定义从模板视图中解耦出来。以其中一个最为常用的函数为例:

    JavaScript

    _tms_custom('{"name":"TextLinks","title":"文字链接","group":"文字链接","row":"10","defaultRow":"5","fields":"text:文字:string,href:链接地址(URL):href"}');

    1
    _tms_custom('{"name":"TextLinks","title":"文字链接","group":"文字链接","row":"10","defaultRow":"5","fields":"text:文字:string,href:链接地址(URL):href"}');

    当调用 _tms_custom(...) 函数并传入指定格式的 JSON 参数,交由翻译引擎处理后,会构建出这样的编辑表单:

    图片 4

    而通过编辑表单录入的数据,最终会在页面中以 PHP 数组的形式填充和占位:

    JavaScript

    array(5) { [0]=> array(2) { ["text"]=> string(6) "淘宝网" ["href"]=> string(22) "" }, ... }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    array(5) {
    [0]=>
    array(2) {
    ["text"]=>
    string(6) "淘宝网"
    ["href"]=>
    string(22) "http://www.taobao.com/"
    },
    ...
    }

    从标签函数到数据对象的运转流程,可以用一张图简单予以概括:

    图片 5

    这种模板和数据分离的方式,在早些年那是相当先进的。它用简单的语法,描述了模板所需的数据格式,还可以根据标签定义,直接构造出模拟数据,方便在开发阶段使用 “标签 + 模拟数据” 的方式调试页面。

    描述数据格式构造模拟数据 的角度,这和我们要谈的 JSON Schema 不谋而合。我们用 JSON 格式来重写数据对象,应该是酱紫的:

    JavaScript

    [ { "text": "淘宝网", "href": "" }, ... ]

    1
    2
    3
    4
    5
    6
    7
    [
    {
        "text": "淘宝网",
        "href": "http://www.taobao.com/"
    },
    ...
    ]

    如果用 JSON Schema 语法描述这份数据,可以完全替代标签函数的方案。这也正是淘宝 TMS 页面搭建系统在数据这块的演化过程:即从使用标签函数定义数据的方式,转变为使用 JSON Schema 描述数据。

    Cookies 的 基本CRUD 操作

    通过下面的语法,我们可以创建,读取,更新和删除 cookies:

    JavaScript

    // Create document.cookie = "user_name=Ire Aderinokun"; document.cookie = "user_age=25;max-age=31536000;secure"; // Read (All) console.log( document.cookie ); // Update document.cookie = "user_age=24;max-age=31536000;secure"; // Delete document.cookie = "user_name=Ire Aderinokun;expires=Thu, 01 Jan 1970 00:00:01 GMT";

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    // Create
    document.cookie = "user_name=Ire Aderinokun";  
    document.cookie = "user_age=25;max-age=31536000;secure";
     
    // Read (All)
    console.log( document.cookie );
     
    // Update
    document.cookie = "user_age=24;max-age=31536000;secure";
     
    // Delete
    document.cookie = "user_name=Ire Aderinokun;expires=Thu, 01 Jan 1970 00:00:01 GMT";

    什么是 Schema?

    当我们在描述 文字链接 的时候,需要约定数据的组织方式,比如,需要知道有哪些字段,这些字段的取值如何表示等,这就是 JSON Schema 的来源。

    我们以 文字链接 为例,它对应的 JSON Schema 大概如此:

    JavaScript

    { "type": "object", "properties": { "text": { "type": "string", "title": "文字" }, "href": { "type": "string", "title": "链接地址(URL)" } } }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    {
    "type": "object",
    "properties": {
    "text": {
    "type": "string",
    "title": "文字"
    },
    "href": {
    "type": "string",
    "title": "链接地址(URL)"
    }
    }
    }

    JSON Schema 定义了如何基于 JSON 格式描述 JSON 数据结构的规范,进而提供数据校验、文档生成和接口数据交互控制等一系列能力。它的特性和用途,可以大致归纳为以下几点:

    Cookies 的优点

    • 能用于和服务端通信
    • 当 cookie 快要自动过期时,我们可以重新设置而不是删除

    1. 用于描述数据结构

    在描述 JSON 数据时,如果数据本身的复杂度很高,高到三维四维,普通的标签函数已经无法表示这种层级结构了,而 JSON Schema 利用 objectarray 字段类型的反复嵌套,可以规避掉这个缺陷。

    当然,除了键值等基本信息,规范层面还提供了丰富的关键词支持,如果想通过自定义扩展字段,解决特定场景的业务需求,也是非常方便的。

    Cookies 的缺点

    • 增加了文档传输的负载
    • 只能存储少量的数据
    • 只能存储字符串
    • 潜在的 安全问题
    • 自从有 Web Storage API (Local and Session Storage),cookies 就不再被推荐用于存储数据了

    2. 用于构建人机可读的文档

    计算机领域有个概念叫做自描述。所谓自描述,可以理解为:文档本身包含了自身与其他文档交互相关的描述信息,不需要其他的配置文件或者额外信息来描述。

    而 JSON Schema 就是自描述的,它本身就是一份很完善的说明文档,字段的含义说明、该如何取值、格式的要求等都清晰明了。

    浏览器支持

    所有主流浏览器均支持 Cookies.

    3. 用于生成模拟数据

    通过标签函数生成模拟数据,只能解决基本的格式要求。比如 string 类型的字段,模拟出来的数据,无非是一个随机字符串。

    但在 JSON Schema 中,由于字段的描述不仅仅是类型,更多的约束条件,可以确保模拟数据更接近于真实数据。

    Local Storage

    Local Storage 是 Web Storage API 的一种类型,能在浏览器端存储键值对数据。Local Storage 因提供了更直观和安全的API来存储简单的数据,被视为替代 Cookies 的一种解决方案。

    从技术上说,尽管 Local Storage 只能存储字符串,但是它也是可以存储字符串化的JSON数据。这就意味着,Local Storage 能比 Cookies 存储更复杂的数据。

    4. 用于校验数据,实现自动化测试

    接口数据的校验工作,往往依赖于测试代码逻辑和用例。如果用 JSON Schema 描述一个数据接口,就不需要再编写测试代码了,所有的逻辑都可以移植到 JSON Schema 中维护。配合 jsvtv4 等二方校验工具,接口测试可以真正自动化。

    本文由奥门新浦京网址发布于Wed前段,转载请注明出处:10个简化HTML5编码的在线工具,那些事儿

    关键词:

上一篇:深入理解,HTML发展与UI组件设计进化

下一篇:没有了