xml地图|网站地图|网站标签 [设为首页] [加入收藏]
rows属性和宽度高度关系研究,那些事儿
分类:web前端

Cookie、LocalStorge、SesstionStorge的区别和用法

2016/11/22 · JavaScript · 1 评论 · 存储

本文作者: 伯乐在线 - Damonare 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

JSON Schema 那些事儿:基本概念

2016/01/27 · HTML5 · JSON

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

图片 1

HTML textarea cols,rows属性和宽度高度关系研究

2016/02/06 · HTML5 · textarea

原文出处: 张鑫旭   

一、关于textarea元素的cols和rows属性

<textarea>元素,俗称“文本域”,或者“多行文本框”,其自带原生的HTML属性rows表示行的意思,可以改变<textarea>的可视区域高度,cols表示列,可以改变<textarea>的可视区域宽度。例如:

JavaScript

<textarea></textarea> <textarea cols="30" rows="5"></textarea>

1
2
<textarea></textarea>
<textarea cols="30" rows="5"></textarea>

图片 2
会发现,下面的尺寸明显比没有colsrows属性值的要大。

下面问题来了,我想很多小伙伴知道colsrows可以影响文本域的尺寸,那colsrows不同的数值和最终展示的像素尺寸之间有没有什么关系呢?可不可以通过公式计算呢?最终表现是否还受到其他CSS属性的影响呢?

我想,以上的问题就很少有人知道了,包括我在内,在写此文之前,也是模模糊糊的了解。

下面要扯点废话了,写这篇文章的时候,我其实内心是孤独的。这种感觉和自己一人去荒野寻找钓场的经历很像,你知道前方有一条河流,至于那里适不适合钓鱼,是不知道的,你想要知道结果,就需要亲自去确认。但是,前往河岸的道路之前没有一个人走过,也就是没有道路,而拦在自己面前的是齐人高的荒草地,它们是那么高那么远,似乎看不到头,你不知道草地中有什么危险,毒蛇野猪随时可能出现。然而,追随自己的热情的内心,还是毅然前去开拓者未知的道路,草木长得是那么的密集,自己只能用手用力拨开他们,狠狠踩在脚下才能前行,长着倒刺的茎藤,刀片般的叶子,在手上脸上留下一个个伤痕,当你前进了一半,到了整个荒草片野中间的时候,四周没有一个人,只有轻轻的风抹动草叶交织的嗦嗦声,一股孤独的感觉油然而生,在这一刻,再强大的内心也会犹豫,我要不要继续前进……

图片 3

对啊,我要不要继续前进呢!?最近一段时候,有一句话对我内心冲击很大,而且反复被提及,就是“你做这件事情的目的是什么?”

“拜托,不要搞这么功利,别搞这么累好不好,我就是追寻内心,我就是兴趣使然!”我心里的第一反应是这样的。

图片 4

然而,当突然抬头,发现周围没有一个人,满是荆棘的时候,内心就会犹豫,好比这篇文章,如果非要讲功利,讲目的,真的没什么,有价值吗?有人在意吗?花出去的时间值得吗?为什么搞些无人问津的东西?为何不去关注时髦的对项目有帮助的东西?为何别人在天上飞,你要在荆棘丛中孤独前行呢?(下面视频:路人在街头黑板上写下他们这辈子最大的遗憾)

 

图片 5

So, 统统out去吧,我继续我的前进,穿越未曾穿越过的草地,前往那召唤等待的河流,发现自己向往的垂钓处女地。

前言

总括:详细讲述Cookie、``LocalStorge、``SesstionStorge的区别和用法。

引子

在早期的淘宝 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 参数,交由翻译引擎处理后,会构建出这样的编辑表单:

图片 6

而通过编辑表单录入的数据,最终会在页面中以 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/"
},
...
}

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

图片 7

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

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

JavaScript

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

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

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

二、cols属性值和宽度

您可以狠狠地点击这里:textarea文本域cols属性和宽度关系demo

界面如下:
图片 8

我们可以选择下拉修改文本域的文字尺寸,字体以及字符间距等,看看会不会对文本域的宽度造成影响。结果结论如下:

Chrome IE FireFox
font-size
font-family × ×
letter-spacing ×

可以看见,Chrome浏览器只受到字符大小影响,对字体和字符间距视而不见;而FireFox浏览器则每一个都会影响之;而IE浏览器不受字符间距影响。

那最关心的问题来了,cols的值和最终呈现的宽度有没有什么比如的关系或者公式呢?

在simsun字体,也就是宋体下,我们可以很容易得看出之间的关系为:

  • Chrome: 8px * cols + 17px
  • IE: 8px * cols + 17px
  • FireFox: 8px * cols + 29px

由于CSS,HTML这些东西是老外发明的,因此,cols每个单位相对的宽度是相对于英文字符而言的,在宋体下,可以认为是8px,后面的17px其实很好理解,表示滚动条的宽度。在window系统下,默认,所有浏览器的滚动条所占据的宽度都是17像素。所以,对于Chrome和IE浏览器而言,文本域最终的宽度(paddingborder尺寸暂不考虑)就是单字符宽度*cols值+滚动条宽度。然而,FireFox浏览器下,增加的宽度是29px,这个不就搞不清楚问什么是29px了。

在IE浏览器下,如果``

overflow属性值为hidden, 则没有后面增加的17px,而其他浏览器没有此现象。

然后,当我们使用其他字体的时候,最终的宽度表现则比较微妙了。因此,单个cols对应的单位就不是整数了,可能是8.1px也有可能是7.7px~7.8px这样子的。

总结一下就是:
貌似在Chrome浏览器下才有点实用价值,因为其他浏览器下的宽度波动太明显,任何其他环境的变化都会导致宽度不一样,这个其实在网页布局中是很糟糕的。因为,网页是自上而下流式的,高度可以很长很长,但是,宽度一般是固定的,资源比较紧张,要求布局精确,因此,一旦出现宽度在各个浏览器下不一样的情况,势必大大影响其实用价值。因此,在实际web制作的时候,除非一些对宽度要求不高的情况,其余时候,还是使用CSS width属性来控制文本域的宽度。

1. 各种存储方案的简单对比

  • Cookies:浏览器均支持,容量为4KB
  • UserData:仅IE支持,容量为64KB
  • Flash:100KB,非HTML原生,需要插件支持
  • Google Gears SQLite :需要插件支持,容量无限制
  • LocalStorage:HTML5,容量为5M
  • SesstionStorage:HTML5,容量为5M
  • globalStorage:Firefox独有的,Firefox13开始就不再支持这个方法

    UserData仅IE支持, Google Gears SQLite需要插件,Flash已经伴随着HTML5的出现渐渐退出了历史舞台,因此今天我们的主角只有他们三个:Cookie,LocalStorge,SesstionStorge;

什么是 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 数据结构的规范,进而提供数据校验、文档生成和接口数据交互控制等一系列能力。它的特性和用途,可以大致归纳为以下几点:

三、rows属性值和高度

您可以狠狠地点击这里:textarea文本域rows属性和高度关系demo

界面如下:
图片 9

我们可以选择下拉修改文本域的文字尺寸,字体以及行高等,看看会不会对文本域的高度造成影响。结果结论如下:

Chrome IE FireFox
font-size × ×
font-family × ×
line-height ×

可以看见,Chrome浏览器和FireFox浏览器只受到行高大小影响,对字体和字符大小视而不见;而IE浏览器却是完全相反的处理,对line-height行高视而不见,但是,却对字符大小和字体有影响。

那最关心的问题来了,rows的值和最终呈现的高度有没有什么比如的关系或者公式呢(先不考虑paddingborder的影响)?

在Chrome浏览器下,最终的高度就是rows的值和line-height行高的乘积。正如上面的demo截图所示,rows值为2line-height20px的时候,最后的高度是40px, 就是他们的乘积。

在FireFox浏览器下也是类似的,但是有一点不同,就是高度需要再把滚动条的尺寸计算上去,因此,是下面这幅光景,高度都比Chrome浏览器高17px:
图片 10

在IE浏览器下,高度与行高没关系,更像是有文本的content area高度(inline box模型中的概念)决定的,因为当不同字体切换的时候,高度也会变高,例如,使用微软雅黑字体就会变高很明显,而微软雅黑的content area高度就是比一般字体要高。因此,要想确定文本域高度其与字符之间的关系,关键很难确定那个计算系数:高度=rows*系数。例如,16px的微软雅黑字体的系数近似21(见下图),宋体simsun则是18.2~18.5之间等。
图片 11

总结一下就是:
兼容性还是一团糟,没有任何两个浏览器是完全同一表现。但是最终表现设计要比cols要好那么一点点。更关键的问题是,高度这个东西一般要求没那么严,所以,我们有时候不想重新搞个CSS确认文本域的高度,使用rows属性值搞一下也是可以的。

2. Cookie

作为一个前端和Cookie打交道的次数肯定不会少了,Cookie算是比较古老的技术了,1993 年网景公司雇员 Lou Montulli 为了让用户在访问某网站时,进一步提高访问速度,同时也为了进一步实现个人化网络,发明了今天广泛使用的 Cookie。

1. 用于描述数据结构

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

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

四、最后的结束语

最后研究的结果是,兼容性很差,想要各个浏览器下表现一模一样成本很高。因此,如果对文本域的布局要求比较严格,还是使用CSS width/height属性精确控制。

唯一的收获就是,知道了各个浏览器如何兼容性不一,以及最终尺寸呈现的计算方法,相关因素等,说不定,对于日后某个功能实现提供了不一样的思路呢!

En,that’s all!

图片 12

本文为原创文章,包含脚本行为,会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,避免陈旧错误知识的误导,同时有更好的阅读体验。
本文地址:

(本篇完)

相关文章

  • CSSOM视图模式(CSSOM View Module)相关整理 (0.663)
  • CSS流体(自适应)布局下宽度分离原则 (0.422)
  • 翻译:CSS中的糟粕 (0.422)
  • textField – jQuery文本域操作集插件展示 (0.337)
  • div模拟textarea文本域轻松实现高度自适应 (0.337)
  • 基于HTML模板和JSON数据的JavaScript交互 (0.337)
  • 有意思:textarea resize属性下纯CSS交互效果 (0.337)
  • css行高line-height的一些深入理解及应用 (0.241)
  • CSS float浮动的深入研究、详解及拓展(一) (0.241)
  • 纯CSS实现侧边栏/分栏高度自动相等 (0.241)
  • 内容loading加载后高度变化CSS3 transition体验优化 (RANDOM – 0.241)

    1 赞 2 收藏 评论

图片 13

2.1 Cookie的特点

我们先来看下Cookie的特点:

  • 1)cookie的大小受限制,cookie大小被限制在4KB,不能接受像大文件或邮件那样的大数据。
  • 2)只要有请求涉及cookie,cookie就要在服务器和浏览器之间来回传送(这解释为什么本地文件不能测试cookie)。而且cookie数据始终在同源的http请求中携带(即使不需要),这也是Cookie不能太大的重要原因。正统的cookie分发是通过扩展HTTP协议来实现的,服务器通过在HTTP的响应头中加上一行特殊的指示以提示浏览器按照指示生成相应的cookie。
  • 3)用户每请求一次服务器数据,cookie则会随着这些请求发送到服务器,服务器脚本语言如PHP等能够处理cookie发送的数据,可以说是非常方便的。当然前端也是可以生成Cookie的,用js对cookie的操作相当的繁琐,浏览器只提供document.cookie这样一个对象,对cookie的赋值,获取都比较麻烦。而在PHP中,我们可以通过setcookie()来设置cookie,通过$_COOKIE这个超全局数组来获取cookie。

cookie的内容主要包括:名字,值,过期时间,路径和域。路径与域一起构成cookie的作用范围。若不设置过期时间,则表示这个cookie的生命期为浏览器会话期间,关闭浏览器窗口,cookie就消失。这种生命期为浏览器会话期的cookie被称为会话cookie。会话cookie一般不存储在硬盘上而是保存在内存里,当然这种行为并不是规范规定的。若设置了过期时间,浏览器就会把cookie保存到硬盘上,关闭后再次打开浏览器,这些cookie仍然有效直到超过设定的过期时间。存储在硬盘上的cookie可以在不同的浏览器进程间共享,比如两个IE窗口。而对于保存在内存里的cookie,不同的浏览器有不同的处理方式。

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

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

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

2.2 Session

说到Cookie就不能不说Session。

Session机制。session机制是一种服务器端的机制,服务器使用一种类似于散列表的结构(也可能就是使用散列表)来保存信息。当程序需要为某个客户端的请求创建一个session时,服务器首先检查这个客户端的请求里是否已包含了一个session标识(称为session id),如果已包含则说明以前已经为此客户端创建过session,服务器就按照session id把这个session检索出来使用(检索不到,会新建一个),如果客户端请求不包含session id,则为此客户端创建一个session并且生成一个与此session相关联的session id,session id的值应该是一个既不会重复,又不容易被找到规律以仿造的字符串,这个session id将被在本次响应中返回给客户端保存。

保存这个session id的方式可以采用cookie,这样在交互过程中浏览器可以自动的按照规则把这个标识发送给服务器。一般这个cookie的名字都是类似于SEEESIONID。但cookie可以被人为的禁止,则必须有其他机制以便在cookie被禁止时仍然能够把session id传递回服务器。经常被使用的一种技术叫做URL重写,就是把session id直接附加在URL路径的后面。比如:http://damonare.cn?sessionid=123456还有一种技术叫做表单隐藏字段。就是服务器会自动修改表单,添加一个隐藏字段,以便在表单提交时能够把session id传递回服务器。比如:

JavaScript

<form name="testform" action="/xxx"> <input type="hidden" name="sessionid" value="123456"> <input type="text"> </form>

1
2
3
4
<form name="testform" action="/xxx">
    <input type="hidden" name="sessionid" value="123456">
    <input type="text">
</form>

实际上这种技术可以简单的用对action应用URL重写来代替。

3. 用于生成模拟数据

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

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

2.3 Cookie和Session简单对比

Cookie和Session 的区别:

  • 1)cookie数据存放在客户的浏览器上,session数据放在服务器上。
  • 2)cookie不是很安全,别人可以分析存放在本地的cookie并进行cookie欺骗,考虑到安全应当使用session。
  • 3)session会在一定时间内保存在服务器上。当访问增多,会比较占用你服务器的性能考虑到减轻服务器性能方面,应当使用cookie。
  • 4)单个cookie保存的数据不能超过4K,很多浏览器都限制一个站点最多保存20个cookie。
  • 5)所以建议:
    • 将登陆信息等重要信息存放为SESSION
    • 其他信息如果需要保留,可以放在cookie中

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

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

本文由澳门新葡亰手机版发布于web前端,转载请注明出处:rows属性和宽度高度关系研究,那些事儿

上一篇:没有了 下一篇:没有了
猜你喜欢
热门排行
精彩图文