HTML常用标签含义及对应中英文

标签标签含义英文英文含义备注
h标题headline标题 
p段落paragraph段落 
hr水平分割线horizontal rules水平分割线 
b加粗bold加粗/粗体 
strong加粗(强调语义)strong强壮的 
i倾斜incline倾斜 
em倾斜(强调语义)emphasize [‘emfəsaɪz]强调用倾斜来起到强调作用
u下划线underline下划线 
ins下划线(强调语义)insert插入ins标签准确来说是:插入字效果
s删除线strikethrough删除线
del删除线delete删除 
br回车换行break打破/折断 
img插入图image图片 
src图片路径source源头img标签的属性
width宽度width宽度标签属性
height高度height高度标签属性
title提示内容title标题img标签的属性
alt替换的内容alternative替换/交替img标签属性
border边框线border边界标签属性
a超链接anchor  [‘æŋkə]锚点 
href超链接地址hypertext reference超链接a标签的属性
target超链接在哪个窗口打开target目标a标签的属性
_blank新窗口blank空白target属性值
_self当前窗口self自己target属性值
空格符non-breaking space不间断空格
ul无序列表unorder list无序列表 
li列表项list item列表条目 
ol有序列表order list有序列表 
dl自定义列表defined list自定义列表 
dt自定义列表标题defined title自定义标题
dd自定义列表详情defined detail自定义详情 
table表格table表格 
trtable row表格行 
td单元格table data表格数据单元格 
radio单选按钮radio收音机收音机的按钮只能按下一个(单选)
rows行数rows行的复数textarea属性
cols列数columns列的复数textarea属性
getget请求方式get获取 
postpost请求方式post提交
css层叠样式表(样式)Cascading Style Sheet 层叠样式表 
font-family字体font-family字体族/字体类型 
text-align内容对齐text-align文字对齐 
text-indent文字首行缩进text-indent文字缩进 
background背景background背景笔记中记录background为背景色,其实准确来说是背景.这个属性除了可以设置背景颜色,还可以设置背景图片等.
display显示模式display显示 
block块级block 
inline行内inline内联的 这里可以这样理解:line是行,in是在…里边.inline就是在行里边(行内)
none隐藏none没有/消失display属性值:none可以理解为消失(不占位置隐藏)
visibility显示visibility能见度 
hidden隐藏hidden隐藏占位置隐藏(隐身)
class类样式class 
style行内样式style风格/设计 
link外链式link关系/连接 
rel关系relationship关系/关联
stylesheet样式单stylesheet样式  床单
important提权功能(变为最重要)important重要 
italic倾斜italic斜体字font-style属性值
normal正常normal正常font-style属性值
text-decoration文字修饰属性decoration修饰/装饰 
overline顶划线overline上划线text-decoration属性值
line-through删除线/贯穿线through穿过text-decoration属性值
word-break强制打散单词换行beak折断
visited访问后visited访问后超链接伪类
hover鼠标以上hover悬浮/盘旋超链接伪类
active点击状态active激活/积极超链接伪类
solid实线solid固体的border边框线条样式
dashed虚线dashed虚线border边框线条样式
repeat平铺repeat重复background属性值
fixed背景图固定fixed固定的background属性值
margin外边距margin边缘边缘可以理解为盒子外边的距离(盒子与盒子之间的距离)
padding内边距padding填补/填充填充意味着属于盒子内部的距离
auto自动(自适应宽高)auto自动margin/padding取值
list-style列表样式list,style列表,样式 
overflow溢出overflow溢出 
hidden隐藏hidden隐藏overflow属性值(visibility属性值)
float浮动float浮动
position定位position位置 
relative相对定位relative相对position的属性值
static静态定位static静态的 
absolute绝对定位absolute绝对的 
cursor鼠标样式cursor光标 
pointer小手pointer指针 
border-radius边框半径(制作圆角矩形)radius半径
filter滤镜filter过滤器
alpha透明度alpha透明度 
opacity透明度opacity不透明度虽然翻译是不透明度,但是css中还是当做透明度处理了
css spritecss精灵图sprite精灵/雪碧 
background-attachment背景图固定attachment附着 
wrap包裹wrap包裹 
banner广告条banner标语/横幅广告
prefect完美prefect完美 
course课程体系course课程
pilot领航者pilot飞行员/领航者 
vertical-align垂直对齐方式vertical垂直的
  • 26
    点赞
  • 100
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
最重要的是——请给我30分钟,如果你没有使用正则表达式的经验,请不要试图在30秒内入门——除非你是超人 :) 别被下面那些复杂的表达式吓倒,只要跟着我一步一步来,你会发现正则表达式其实并没有你想像中的那么困难。当然,如果你看完了这篇教程之后,发现自己明白了很多,却又几乎什么都记不得,那也是很正常的——我认为,没接触过正则表达式的人在看完这篇教程后,能把提到过的语法记住80%以上的可能性为零。这里只是让你明白基本的原理,以后你还需要多练习,多使用,才能熟练掌握正则表达式。 除了作为入门教程之外,本文还试图成为可以在日常工作中使用的正则表达式语法参考手册。就作者本人的经历来说,这个目标还是完成得不错的——你看,我自己也没能把所有的东西记下来,不是吗? 恢复格式 文本格式约定:专业术语 元字符/语法格式 正则表达式 正则表达式中的一部分(用于分析) 对其进行匹配的源字符串 对正则表达式或其中一部分的说明 隐藏边注 本文右边有一些注释,主要是用来提供一些相关信息,或者给没有程序员背景的读者解释一些基本概念,通常可以忽略。 正则表达式到底是什么东西? 字符是计算机软件处理文字时最基本的单位,可能是字母,数字,标点符号,空格,换行符,汉字等等。字符串是0个或更多个字符的序列。文本也就是文字,字符串。说某个字符串匹配某个正则表达式,通常是指这个字符串里有一部分(或几部分分别)能满足表达式给出的条件。 在编写处理字符串的程序或网页时,经常会有查找符合某些复杂规则的字符串的需要。正则表达式就是用于描述这些规则的工具。换句话说,正则表达式就是记录文本规则的代码。 很可能你使用过Windows/Dos下用于文件查找的通配符(wildcard),也就是*和?。如果你想查找某个目录下的所有的Word文档的话,你会搜索*.doc。在这里,*会被解释成任意的字符串。和通配符类似,正则表达式也是用来进行文本匹配的工具,只不过比起通配符,它能更精确地描述你的需求——当然,代价就是更复杂——比如你可以编写一个正则表达式,用来查找所有以0开头,后面跟着2-3个数字,然后是一个连字号“-”,最后是7或8位数字的字符串(像010-12345678或0376-7654321)。 入门 学习正则表达式的最好方法是从例子开始,理解例子之后再自己对例子进行修改,实验。下面给出了不少简单的例子,并对它们作了详细的说明。 假设你在一篇英文小说里查找hi,你可以使用正则表达式hi。 这几乎是最简单的正则表达式了,它可以精确匹配这样的字符串:由两个字符组成,前一个字符是h,后一个是i。通常,处理正则表达式的工具会提供一个忽略大小写的选项,如果选中了这个选项,它可以匹配hi,HI,Hi,hI这四种情况中的任意一种。 不幸的是,很多单词里包含hi这两个连续的字符,比如him,history,high等等。用hi来查找的话,这里边的hi也会被找出来。如果要精确地查找hi这个单词的话,我们应该使用\bhi\b。 \b是正则表达式规定的一个特殊代码(好吧,某些人叫它元字符,metacharacter),代表着单词的开头或结尾,也就是单词的分界处。虽然通常英文的单词是由空格,标点符号或者换行来分隔的,但是\b并不匹配这些单词分隔字符中的任何一个,它只匹配一个位置。 如果需要更精确的说法,\b匹配这样的位置:它的前一个字符和后一个字符不全是(一个是,一个不是或不存在)\w。 假如你要找的是hi后面不远处跟着一个Lucy,你应该用\bhi\b.*\bLucy\b。 这里,.是另一个元字符,匹配除了换行符以外的任意字符。*同样是元字符,不过它代表的不是字符,也不是位置,而是数量——它指定*前边的内容可以连续重复使用任意次以使整个表达式得到匹配。因此,.*连在一起就意味着任意数量的不包含换行的字符。现在\bhi\b.*\bLucy\b的意思就很明显了:先是一个单词hi,然后是任意个任意字符(但不能是换行),最后是Lucy这个单词。 换行符就是'\n',ASCII编码为10(十六进制0x0A)的字符。 如果同时使用其它元字符,我们就能构造出功能更强大的正则表达式。比如下面这个例子: 0\d\d-\d\d\d\d\d\d\d\d匹配这样的字符串:以0开头,然后是两个数字,然后是一个连字号“-”,最后是8个数字(也就是中国的电话号码。当然,这个例子只能匹配区号为3位的情形)。 这里的\d是个新的元字符,匹配一位数字(0,或1,或2,或……)。-不是元字符,只匹配它本身——连字符(或者减号,或者中横线,或者随你怎么称呼它)。 为了避免那么多烦人的重复,我们也可以这样写这个表达式:0\d{2}-\d{8}。 这里\d后面的{2}({8})的意思是前面\d必须连续重复匹配2次(8次)。 测试正则表达式 其它可用的测试工具: • RegexBuddy • Javascript正则表达式在线测试工具 如果你不觉得正则表达式很难读写的话,要么你是一个天才,要么,你不是地球人。正则表达式的语法很令人头疼,即使对经常使用它的人来说也是如此。由于难于读写,容易出错,所以找一种工具对正则表达式进行测试是很有必要的。 不同的环境下正则表达式的一些细节是不相同的,本教程介绍的是微软 .Net Framework 2.0下正则表达式的行为,所以,我向你介绍一个.Net下的工具Regex Tester。首先你确保已经安装了.Net Framework 2.0,然后下载Regex Tester。这是个绿色软件,下载完后打开压缩包,直接运行RegexTester.exe就可以了。 下面是Regex Tester运行时的截图: 元字符 现在你已经知道几个很有用的元字符了,如\b,.,*,还有\d.正则表达式里还有更多的元字符,比如\s匹配任意的空白符,包括空格,制表符(Tab),换行符,中文全角空格等。\w匹配字母或数字或下划线或汉字等。 对中文/汉字的特殊处理是由.Net提供的正则表达式引擎支持的,其它环境下的具体情况请查看相关文档。 下面来看看更多的例子: \ba\w*\b匹配以字母a开头的单词——先是某个单词开始处(\b),然后是字母a,然后是任意数量的字母或数字(\w*),最后是单词结束处(\b)。 好吧,现在我们说说正则表达式里的单词是什么意思吧:就是不少于一个的连续的\w。不错,这与学习英文时要背的成千上万个同名的东西的确关系不大 :) \d+匹配1个或更多连续的数字。这里的+是和*类似的元字符,不同的是*匹配重复任意次(可能是0次),而+则匹配重复1次或更多次。 \b\w{6}\b 匹配刚好6个字符的单词。 表1.常用的元字符 代码 说明 . 匹配除换行符以外的任意字符 \w 匹配字母或数字或下划线或汉字 \s 匹配任意的空白符 \d 匹配数字 \b 匹配单词的开始或结束 ^ 匹配字符串的开始 $ 匹配字符串的结束 正则表达式引擎通常会提供一个“测试指定的字符串是否匹配一个正则表达式”的方法,如JavaScript里的RegExp.test()方法或.NET里的Regex.IsMatch()方法。这里的匹配是指是字符串里有没有符合表达式规则的部分。如果不使用^和$的话,对于\d{5,12}而言,使用这样的方法就只能保证字符串里包含5到12连续位数字,而不是整个字符串就是5到12位数字。 元字符^(和数字6在同一个键位上的符号)和$都匹配一个位置,这和\b有点类似。^匹配你要用来查找的字符串的开头,$匹配结尾。这两个代码在验证输入的内容时非常有用,比如一个网站如果要求你填写的QQ号必须为5位到12位数字时,可以使用:^\d{5,12}$。 这里的{5,12}和前面介绍过的{2}是类似的,只不过{2}匹配只能不多不少重复2次,{5,12}则是重复的次数不能少于5次,不能多于12次,否则都不匹配。 因为使用了^和$,所以输入的整个字符串都要用来和\d{5,12}来匹配,也就是说整个输入必须是5到12个数字,因此如果输入的QQ号能匹配这个正则表达式的话,那就符合要求了。 和忽略大小写的选项类似,有些正则表达式处理工具还有一个处理多行的选项。如果选中了这个选项,^和$的意义就变成了匹配行的开始处和结束处。 字符转义 如果你想查找元字符本身的话,比如你查找.,或者*,就出现了问题:你没办法指定它们,因为它们会被解释成别的意思。这时你就得使用\来取消这些字符的特殊意义。因此,你应该使用\.和\*。当然,要查找\本身,你也得用\\. 例如:unibetter\.com匹配unibetter.com,C:\\Windows匹配C:\Windows。 重复 你已经看过了前面的*,+,{2},{5,12}这几个匹配重复的方式了。下面是正则表达式中所有的限定符(指定数量的代码,例如*,{5,12}等): 表2.常用的限定符 代码/语法 说明 * 重复零次或更多次 + 重复一次或更多次 ? 重复零次或一次 {n} 重复n次 {n,} 重复n次或更多次 {n,m} 重复n到m次 下面是一些使用重复的例子: Windows\d+匹配Windows后面跟1个或更多数字 ^\w+匹配一行的第一个单词(或整个字符串的第一个单词,具体匹配哪个意思得看选项设置) 字符类 要想查找数字,字母或数字,空白是很简单的,因为已经有了对应这些字符集合的元字符,但是如果你想匹配没有预定义元字符的字符集合(比如元音字母a,e,i,o,u),应该怎么办? 很简单,你只需要在方括号里列出它们就行了,像[aeiou]就匹配任何一个英文元音字母,[.?!]匹配标点符号(.或?或!)。 我们也可以轻松地指定一个字符范围,像[0-9]代表的含意与\d就是完全一致的:一位数字;同理[a-z0-9A-Z_]也完全等同于\w(如果只考虑英文的话)。 下面是一个更复杂的表达式:\(?0\d{2}[) -]?\d{8}。 “(”和“)”也是元字符,后面的分组节里会提到,所以在这里需要使用转义。 这个表达式可以匹配几种格式的电话号码,像(010)88886666,或022-22334455,或02912345678等。我们对它进行一些分析吧:首先是一个转义字符\(,它能出现0次或1次(?),然后是一个0,后面跟着2个数字(\d{2}),然后是)或-或空格中的一个,它出现1次或不出现(?),最后是8个数字(\d{8})。 分枝条件 不幸的是,刚才那个表达式也能匹配010)12345678或(022-87654321这样的“不正确”的格式。要解决这个问题,我们需要用到分枝条件。正则表达式里的分枝条件指的是有几种规则,如果满足其中任意一种规则都应该当成匹配,具体方法是用|把不同的规则分隔开。听不明白?没关系,看例子: 0\d{2}-\d{8}|0\d{3}-\d{7}这个表达式能匹配两种以连字号分隔的电话号码:一种是三位区号,8位本地号(如010-12345678),一种是4位区号,7位本地号(0376-2233445)。 \(0\d{2}\)[- ]?\d{8}|0\d{2}[- ]?\d{8}这个表达式匹配3位区号的电话号码,其中区号可以用小括号括起来,也可以不用,区号与本地号间可以用连字号或空格间隔,也可以没有间隔。你可以试试用分枝条件把这个表达式扩展成也支持4位区号的。 \d{5}-\d{4}|\d{5}这个表达式用于匹配美国的邮政编码。美国邮编的规则是5位数字,或者用连字号间隔的9位数字。之所以要给出这个例子是因为它能说明一个问题:使用分枝条件时,要注意各个条件的顺序。如果你把它改成\d{5}|\d{5}-\d{4}的话,那么就只会匹配5位的邮编(以及9位邮编的前5位)。原因是匹配分枝条件时,将会从左到右地测试每个条件,如果满足了某个分枝的话,就不会去再管其它的条件了。 分组 我们已经提到了怎么重复单个字符(直接在字符后面加上限定符就行了);但如果想要重复多个字符又该怎么办?你可以用小括号来指定子表达式(也叫做分组),然后你就可以指定这个子表达式的重复次数了,你也可以对子表达式进行其它一些操作(后面会有介绍)。 (\d{1,3}\.){3}\d{1,3}是一个简单的IP地址匹配表达式。要理解这个表达式,请按下列顺序分析它:\d{1,3}匹配1到3位的数字,(\d{1,3}\.){3}匹配三位数字加上一个英文句号(这个整体也就是这个分组)重复3次,最后再加上一个一到三位的数字(\d{1,3})。 IP地址中每个数字都不能大于255,大家千万不要被《24》第三季的编剧给忽悠了…… 不幸的是,它也将匹配256.300.888.999这种不可能存在的IP地址。如果能使用算术比较的话,或许能简单地解决这个问题,但是正则表达式中并不提供关于数学的任何功能,所以只能使用冗长的分组,选择,字符类来描述一个正确的IP地址:((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)。 理解这个表达式的关键是理解2[0-4]\d|25[0-5]|[01]?\d\d?,这里我就不细说了,你自己应该能分析得出来它的意义。 反义 有时需要查找不属于某个能简单定义的字符类的字符。比如想查找除了数字以外,其它任意字符都行的情况,这时需要用到反义: 表3.常用的反义代码 代码/语法 说明 \W 匹配任意不是字母,数字,下划线,汉字的字符 \S 匹配任意不是空白符的字符 \D 匹配任意非数字的字符 \B 匹配不是单词开头或结束的位置 [^x] 匹配除了x以外的任意字符 [^aeiou] 匹配除了aeiou这几个字母以外的任意字符 例子:\S+匹配不包含空白符的字符串。 ]+>匹配用尖括号括起来的以a开头的字符串。 后向引用 使用小括号指定一个子表达式后,匹配这个子表达式的文本(也就是此分组捕获的内容)可以在表达式或其它程序中作进一步的处理。默认情况下,每个分组会自动拥有一个组号,规则是:从左向右,以分组的左括号为标志,第一个出现的分组的组号为1,第二个为2,以此类推。 呃……其实,组号分配还不像我刚说得那么简单: • 分组0对应整个正则表达式 • 实际上组号分配过程是要从左向右扫描两遍的:第一遍只给未命名组分配,第二遍只给命名组分配--因此所有命名组的组号都大于未命名的组号 • 你可以使用(?:exp)这样的语法来剥夺一个分组对组号分配的参与权. 后向引用用于重复搜索前面某个分组匹配的文本。例如,\1代表分组1匹配的文本。难以理解?请看示例: \b(\w+)\b\s+\1\b可以用来匹配重复的单词,像go go, 或者kitty kitty。这个表达式首先是一个单词,也就是单词开始处和结束处之间的多于一个的字母或数字(\b(\w+)\b),这个单词会被捕获到编号为1的分组中,然后是1个或几个空白符(\s+),最后是分组1中捕获的内容(也就是前面匹配的那个单词)(\1)。 你也可以自己指定子表达式的组名。要指定一个子表达式的组名,请使用这样的语法:(?\w+)(或者把尖括号换成'也行:(?'Word'\w+)),这样就把\w+的组名指定为Word了。要反向引用这个分组捕获的内容,你可以使用\k,所以上一个例子也可以写成这样:\b(?\w+)\b\s+\k\b。 使用小括号的时候,还有很多特定用途的语法。下面列出了最常用的一些: 表4.常用分组语法 分类 代码/语法 说明 捕获 (exp) 匹配exp,并捕获文本到自动命名的组里 (?exp) 匹配exp,并捕获文本到名称为name的组里,也可以写成(?'name'exp) (?:exp) 匹配exp,不捕获匹配的文本,也不给此分组分配组号 零宽断言 (?=exp) 匹配exp前面的位置 (?<=exp) 匹配exp后面的位置 (?!exp) 匹配后面跟的不是exp的位置 (?<!exp) 匹配前面不是exp的位置 注释 (?#comment) 这种类型的分组不对正则表达式的处理产生任何影响,用于提供注释让人阅读 我们已经讨论了前两种语法。第三个(?:exp)不会改变正则表达式的处理方式,只是这样的组匹配的内容不会像前两种那样被捕获到某个组里面,也不会拥有组号。“我为什么会想要这样做?”——好问题,你觉得为什么呢? 零宽断言 地球人,是不是觉得这些术语名称太复杂,太难记了?我也有同感。知道有这么一种东西就行了,它叫什么,随它去吧!人若无名,便可专心练剑;物若无名,便可随意取舍…… 接下来的四个用于查找在某些内容(但并不包括这些内容)之前或之后的东西,也就是说它们像\b,^,$那样用于指定一个位置,这个位置应该满足一定的条件(即断言),因此它们也被称为零宽断言。最好还是拿例子来说明吧: 断言用来声明一个应该为真的事实。正则表达式中只有当断言为真时才会继续进行匹配。 (?=exp)也叫零宽度正预测先行断言,它断言自身出现的位置的后面能匹配表达式exp。比如\b\w+(?=ing\b),匹配以ing结尾的单词的前面部分(除了ing以外的部分),如查找I'm singing while you're dancing.时,它会匹配sing和danc。 (?<=exp)也叫零宽度正回顾后发断言,它断言自身出现的位置的前面能匹配表达式exp。比如(?<=\bre)\w+\b会匹配以re开头的单词的后半部分(除了re以外的部分),例如在查找reading a book时,它匹配ading。 假如你想要给一个很长的数字中每三位间加一个逗号(当然是从右边加起了),你可以这样查找需要在前面和里面添加逗号的部分:((?<=\d)\d{3})+\b,用它对1234567890进行查找时结果是234567890。 下面这个例子同时使用了这两种断言:(?<=\s)\d+(?=\s)匹配以空白符间隔的数字(再次强调,不包括这些空白符)。 负向零宽断言 前面我们提到过怎么查找不是某个字符或不在某个字符类里的字符的方法(反义)。但是如果我们只是想要确保某个字符没有出现,但并不想去匹配它时怎么办?例如,如果我们想查找这样的单词--它里面出现了字母q,但是q后面跟的不是字母u,我们可以尝试这样: \b\w*q[^u]\w*\b匹配包含后面不是字母u的字母q的单词。但是如果多做测试(或者你思维足够敏锐,直接就观察出来了),你会发现,如果q出现在单词的结尾的话,像Iraq,Benq,这个表达式就会出错。这是因为[^u]总要匹配一个字符,所以如果q是单词的最后一个字符的话,后面的[^u]将会匹配q后面的单词分隔符(可能是空格,或者是句号或其它的什么),后面的\w*\b将会匹配下一个单词,于是\b\w*q[^u]\w*\b就能匹配整个Iraq fighting。负向零宽断言能解决这样的问题,因为它只匹配一个位置,并不消费任何字符。现在,我们可以这样来解决这个问题:\b\w*q(?!u)\w*\b。 零宽度负预测先行断言(?!exp),断言此位置的后面不能匹配表达式exp。例如:\d{3}(?!\d)匹配三位数字,而且这三位数字的后面不能是数字;\b((?!abc)\w)+\b匹配不包含连续字符串abc的单词。 同理,我们可以用(?<!exp),零宽度负回顾后发断言来断言此位置的前面不能匹配表达式exp:(?<![a-z])\d{7}匹配前面不是小写字母的七位数字。 请详细分析表达式(?<=).*(?=),这个表达式最能表现零宽断言的真正用途。 一个更复杂的例子:(?<=).*(?=)匹配不包含属性的简单HTML标签内里的内容。()指定了这样的前缀:被尖括号括起来的单词(比如可能是),然后是.*(任意的字符串),最后是一个后缀(?=)。注意后缀里的\/,它用到了前面提过的字符转义;\1则是一个反向引用,引用的正是捕获的第一组,前面的(\w+)匹配的内容,这样如果前缀实际上是的话,后缀就是了。整个表达式匹配的是和之间的内容(再次提醒,不包括前缀和后缀本身)。 注释 小括号的另一种用途是通过语法(?#comment)来包含注释。例如:2[0-4]\d(?#200-249)|25[0-5](?#250-255)|[01]?\d\d?(?#0-199)。 要包含注释的话,最好是启用“忽略模式里的空白符”选项,这样在编写表达式时能任意的添加空格,Tab,换行,而实际使用时这些都将被忽略。启用这个选项后,在#后面到这一行结束的所有文本都将被当成注释忽略掉。例如,我们可以前面的一个表达式写成这样: (?<= # 断言要匹配的文本的前缀 # 查找尖括号括起来的字母或数字(即HTML/XML标签) ) # 前缀结束 .* # 匹配任意文本 (?= # 断言要匹配的文本的后缀 # 查找尖括号括起来的内容:前面是一个"/",后面是先前捕获的标签 ) # 后缀结束 贪婪与懒惰 当正则表达式中包含能接受重复的限定符时,通常的行为是(在使整个表达式能得到匹配的前提下)匹配尽可能多的字符。以这个表达式为例:a.*b,它将会匹配最长的以a开始,以b结束的字符串。如果用它来搜索aabab的话,它会匹配整个字符串aabab。这被称为贪婪匹配。 有时,我们更需要懒惰匹配,也就是匹配尽可能少的字符。前面给出的限定符都可以被转化为懒惰匹配模式,只要在它后面加上一个问号?。这样.*?就意味着匹配任意数量的重复,但是在能使整个匹配成功的前提下使用最少的重复。现在看看懒惰版的例子吧: a.*?b匹配最短的,以a开始,以b结束的字符串。如果把它应用于aabab的话,它会匹配aab(第一到第三个字符)和ab(第四到第五个字符)。 为什么第一个匹配是aab(第一到第三个字符)而不是ab(第二到第三个字符)?简单地说,因为正则表达式有另一条规则,比懒惰/贪婪规则的优先级更高:最先开始的匹配拥有最高的优先权——The match that begins earliest wins。 表5.懒惰限定符 代码/语法 说明 *? 重复任意次,但尽可能少重复 +? 重复1次或更多次,但尽可能少重复 ?? 重复0次或1次,但尽可能少重复 {n,m}? 重复n到m次,但尽可能少重复 {n,}? 重复n次以上,但尽可能少重复 处理选项 在C#中,你可以使用Regex(String, RegexOptions)构造函数来设置正则表达式的处理选项。如:Regex regex = new Regex(@"\ba\w{6}\b", RegexOptions.IgnoreCase); 上面介绍了几个选项如忽略大小写,处理多行等,这些选项能用来改变处理正则表达式的方式。下面是.Net中常用的正则表达式选项: 表6.常用的处理选项 名称 说明 IgnoreCase(忽略大小写) 匹配时不区分大小写。 Multiline(多行模式) 更改^和$的含义,使它们分别在任意一行的行首和行尾匹配,而不仅仅在整个字符串的开头和结尾匹配。(在此模式下,$的精确含意是:匹配\n之前的位置以及字符串结束前的位置.) Singleline(单行模式) 更改.的含义,使它与每一个字符匹配(包括换行符\n)。 IgnorePatternWhitespace(忽略空白) 忽略表达式中的非转义空白并启用由#标记的注释。 ExplicitCapture(显式捕获) 仅捕获已被显式命名的组。 一个经常被问到的问题是:是不是只能同时使用多行模式和单行模式中的一种?答案是:不是。这两个选项之间没有任何关系,除了它们的名字比较相似(以至于让人感到疑惑)以外。 平衡组/递归匹配 这里介绍的平衡组语法是由.Net Framework支持的;其它语言/库不一定支持这种功能,或者支持此功能但需要使用不同的语法。 有时我们需要匹配像( 100 * ( 50 + 15 ) )这样的可嵌套的层次性结构,这时简单地使用\(.+\)则只会匹配到最左边的左括号和最右边的右括号之间的内容(这里我们讨论的是贪婪模式,懒惰模式也有下面的问题)。假如原来的字符串里的左括号和右括号出现的次数不相等,比如( 5 / ( 3 + 2 ) ) ),那我们的匹配结果里两者的个数也不会相等。有没有办法在这样的字符串里匹配到最长的,配对的括号之间的内容呢? 为了避免(和\(把你的大脑彻底搞糊涂,我们还是用尖括号代替圆括号吧。现在我们的问题变成了如何把xx <aa aa> yy这样的字符串里,最长的配对的尖括号内的内容捕获出来? 这里需要用到以下的语法构造: • (?'group') 把捕获的内容命名为group,并压入堆栈(Stack) • (?'-group') 从堆栈上弹出最后压入堆栈的名为group的捕获内容,如果堆栈本来为空,则本分组的匹配失败 • (?(group)yes|no) 如果堆栈上存在以名为group的捕获内容的话,继续匹配yes部分的表达式,否则继续匹配no部分 • (?!) 零宽负向先行断言,由于没有后缀表达式,试图匹配总是失败 如果你不是一个程序员(或者你自称程序员但是不知道堆栈是什么东西),你就这样理解上面的三种语法吧:第一个就是在黑板上写一个"group",第二个就是从黑板上擦掉一个"group",第三个就是看黑板上写的还有没有"group",如果有就继续匹配yes部分,否则就匹配no部分。 我们需要做的是每碰到了左括号,就在压入一个"Open",每碰到一个右括号,就弹出一个,到了最后就看看堆栈是否为空--如果不为空那就证明左括号比右括号多,那匹配就应该失败。正则表达式引擎会进行回溯(放弃最前面或最后面的一些字符),尽量使整个表达式得到匹配。 < #最外层的左括号 [^]* #最外层的左括号后面的不是括号的内容 ( ( (?'Open'<) #碰到了左括号,在黑板上写一个"Open" [^]* #匹配左括号后面的不是括号的内容 )+ ( (?'-Open'>) #碰到了右括号,擦掉一个"Open" [^]* #匹配右括号后面不是括号的内容 )+ )* (?(Open)(?!)) #在遇到最外层的右括号前面,判断黑板上还有没有没擦掉的"Open";如果还有,则匹配失败 > #最外层的右括号 平衡组的一个最常见的应用就是匹配HTML,下面这个例子可以匹配嵌套的标签:]*>[^]*(((?'Open']*>)[^]*)+((?'-Open')[^]*)+)*(?(Open)(?!)). 还有些什么东西没提到 上边已经描述了构造正则表达式的大量元素,但是还有很多没有提到的东西。下面是一些未提到的元素的列表,包含语法和简单的说明。你可以在网上找到更详细的参考资料来学习它们--当你需要用到它们的时候。如果你安装了MSDN Library,你也可以在里面找到.net下正则表达式详细的文档。 这里的介绍很简略,如果你需要更详细的信息,而又没有在电脑上安装MSDN Library,可以查看关于正则表达式语言元素的MSDN在线文档。 表7.尚未详细讨论的语法 代码/语法 说明 \a 报警字符(打印它的效果是电脑嘀一声) \b 通常是单词分界位置,但如果在字符类里使用代表退格 \t 制表符,Tab \r 回车 \v 竖向制表符 \f 换页符 \n 换行符 \e Escape \0nn ASCII代码中八进制代码为nn的字符 \xnn ASCII代码中十六进制代码为nn的字符 \unnnn Unicode代码中十六进制代码为nnnn的字符 \cN ASCII控制字符。比如\cC代表Ctrl+C \A 字符串开头(类似^,但不受处理多行选项的影响) \Z 字符串结尾或行尾(不受处理多行选项的影响) \z 字符串结尾(类似$,但不受处理多行选项的影响) \G 当前搜索的开头 \p{name} Unicode中命名为name的字符类,例如\p{IsGreek} (?>exp) 贪婪子表达式 (?-exp) 平衡组 (?im-nsx:exp) 在子表达式exp中改变处理选项 (?im-nsx) 为表达式后面的部分改变处理选项 (?(exp)yes|no) 把exp当作零宽正向先行断言,如果在这个位置能匹配,使用yes作为此组的表达式;否则使用no (?(exp)yes) 同上,只是使用空表达式作为no (?(name)yes|no) 如果命名为name的组捕获到了内容,使用yes作为表达式;否则使用no (?(name)yes) 同上,只是使用空表达式作为no 联系作者 好吧,我承认,我骗了你,读到这里你肯定花了不止30分钟.相信我,这是我的错,而不是因为你太笨.我之所以说"30分钟",是为了让你有信心,有耐心继续下去.既然你看到了这里,那证明我的阴谋成功了.被忽悠的感觉很爽吧? 要投诉我,或者觉得我其实可以忽悠得更高明,或者有任何其它问题,欢迎来我的博客让我知道. 最后,来点广告…… 网上的资源及本文参考文献 • 微软的正则表达式教程 • System.Text.RegularExpressions.Regex类(MSDN) • 专业的正则表达式教学网站(英文) • 关于.Net下的平衡组的详细讨论(英文) • Mastering Regular Expressions (Second Edition) 更新纪录 1. 2006-3-27 第一版 2. 2006-10-12 第二版 o 修正了几个细节上的错误和不准确的地方 o 增加了对处理中文时的一些说明 o 更改了几个术语的翻译(采用了MSDN的翻译方式) o 增加了平衡组的介绍 o 放弃了对The Regulator的介绍,改用Regex Tester 3. 2007-3-12 V2.1 o 修正了几个小的错误 o 增加了对处理选项(RegexOptions)的介绍 4. 2007-5-28 V2.2 o 重新组织了对零宽断言的介绍 o 删除了几个不太合适的示例,添加了几个实用的示例 o 其它一些微小的更改 5. 2007-8-3 V2.21 o 修改了几处文字错误 o 修改/添加了对$,\b的精确说明 o 承认了作者是个骗子 o 给RegexTester添加了Singleline选项的相关功能 6. 2008-4-13 v2.3 o 调整了部分章节的次序 o 修改了页面布局,删除了专门的参考节 o 针对读者的反馈,调整了部分内容 7. 2009-4-11 v2.31 o 修改了几处文字错误 o 添加了一些注释说明 o 调整了一些措词
工程硕士学位论文 基于Android+HTML5的移动Web项目高效开发探究 研究生姓名: 唐帅 导师姓名: 罗军舟 教授 苏生 教授 申请学位类别 工 程 硕 士 学位授予单位 东 南 大 学 工程领域名称 软 件 工 程 论文答辩日期 研究方向 Android+HTML5 学位授予日期 答辩委员会主席 评阅人 硕士学位论文 基于Android+HTML5的移动Web项目 高效开发探究 专业名称: 软件工程 研究生姓名: 唐帅 导师姓名: 罗军舟 校外导师: 苏生 THE RESEARCH OF EFFICIENT DEVELOPMENT OF MOBILE WEB PROJECTS BASED ON ANDROID AND HTML5 A Thesis Submitted to SoutheastUniversity For the Academic Degree of Master of Engineering BY Tang Shuai Supervised by Luo Junzhou and Su Sheng College of Software Engineering SoutheastUniversity February 2017 东南大学学位论文 独创性声明 本人声明所呈交的学位论文是我个人在导师指导下进行的研究工作及取得的研究成果。尽我所知,除了文中特别加以标注和致谢的地方外,论文中不包含其他人已经发表或撰写过的研究成果,也不包含为获得东南大学或其它教育机构的学位或证书而使用过的材料。与我一同工作的同志对本研究所做的任何贡献均已在论文中作了明确的说明并表示了谢意。 研究生签名: 日期: 东南大学学位论文使用 授权声明 东南大学、中国科学技术信息研究所、国家图书馆有权保留本人所送交学位论文的复印件和电子文档,可以采用影印、缩印或其他复制手段保存论文。本人电子文档的内容和纸质论文的内容相一致。除在保密期内的保密论文和在技术保护期限内的论文外,允许论文被查阅和借阅,可以公布(包括以电子信息形式刊登)论文的全部内容或中、英文摘要等部分内容。论文的公布(包括以电子信息形式刊登)授权东南大学研究生院办理。 研究生签名: 导师签名: 日期: 摘要 目前工业市场上认证检测领域,业务流程陈旧繁琐,用户与检测机构无法便捷有效的沟通。除此之外,用户需要亲临检测机构实地送检,在检测的每一个环节用户也无法有效的进行追踪,这些都制约着认证检测领域的进一步发展。鉴于市场上用户的手机型号、种类、屏幕分辨率等参差不齐,传统方式根据主流系统分别开发相应的系统耗时又耗力,为了高效开发并节约开发项目成本,本文采用Android+HTML5相结合的方式进行移动端Web系统的设计研发工作。 然而,由于HTML5的W3C标准规范还未制定,安卓系统中类浏览器Webview自身存在一些局限性,因此仍存在着诸多问题亟需解决,包括:(1)多窗口类浏览器模式问题。安卓上用于加载的Webview视图窗口只是作为类浏览器而存在,在安卓上更是只能同时运行一个Webview。(2)跨域数据交互问题。不同的Webview之间无法共享数据。(3)页面自适应问题。页面难以兼容适应不同分辨率的设备和浏览器。 本文研究并设计了基于Android+HTML5的在线认证检测系统,主要工作包括以下四个方面: (1)针对多窗口类浏览器模式问题,指出并分析了该问题存在的原因,利用Activity的运行机制,通过Fragment栈对主要模块的Webview进行管理,实现对不同模块之间切换的控制。 (2)针对跨域数据交互问题,指出并分析了跨域缓存交互问题出现的原因,通过在HTML5存储技术的基础上,重写LocalStorage,用移动端本地的Sqlite进行数据维护,实现跨域数据交互。 (3)针对页面自适应问题,本文结合渐进增强以及拥抱流式布局的思想,同时研究利用了移动设备的视口特性,实现跨分辨率、跨设备的页面自适应。 (4)针对系统的功能实现问题,通过结合利用原生态框架与HTML5的跨平台性,实现了“认我测”在线认证检测系统。 综上所述,“认我测”在线认证检测系统,率先填补了认证检测领域移动端的空缺,提供了Web浏览器+移动端的双端访问模式,给用户提供了多种访问途径,真正实现了用户和检测机构的随时随地在线下单检测。 关键词:HTML5,检测与认证,Android,多窗口浏览器模式,跨域处理,页面自适应 Abstract At present business processes are old and explicit in industrial market of certification and detection filed, as well as users can not have effective and convenient communication with detection institutions. Apart from these, customers have to come to detection institutions personally to send samples, and they can not take effective trace of each process during detection. All of these limit the advanced development of certification and detection field. As the versions, types and resolution of users' mobile phones vary in current market, conditional ways depending on systems respectively cost extra time and resources. In order to develop efficiently and save cost of projects, this paper combines android with HTML5 to design and start the development of mobile web system. However, due to standard specification of W3C of HTML5 hasn't been drafted, and browser-alike webview in android has several limits itself, there are still many problems to be solved. Including: (1) Multi-window browser pattern. Webview window in android used to load pages just works like browser, as well as there is only one webview running at the same time. (2)Cross-domain data interaction. Different webviews can not share data. (3)Self-adaption of pages. It is difficult for pages to adapt to devices and browsers of different resolution. This paper researched and designed an online certification and detecting system based on Android and HTML5. Four main parts are included as following: (1) Considering multi-window browser problem, this paper pointed out and analysed reasons of it. The running mechanism of Activity was used cleverly and webiews of main modules were managed through Fragment stacks, in order to control the switch among different modules. (2)Considering cross-domain data interaction problem, reasons of it were pointed out and analysed. LocalStorage was overrided based on HTML5 storage technics, and local sqlite was used to maintain data in order to realize cross-domain data interaction. (3)Considering self-adaption of pages, the system combined the ideas of progressive enhancement and embracing flow layout, aiming at personalitites of mobile facilities viewports, and realized respective solution. (4)Considering the implementation of system functions, the system took the advanteges of native frameworks as well as HTML5 crossing platforms, and developed "Finding Me Detecting" online certification and detecting system. In summary, "Finding Me Detecting" online certification and detecting system filled up blanks of mobile market in certification and detecting field, provoding double side access pattern, that is to say web browser together with mobile side, offering users various ways to access the system, and really realized the goal of whenever and wherever ordering to detect for users and detecting companies. Keywords: HTML5; Quality Authentication; Android; Multi-window browser; Cross-domain data; Page self-adaption 专业名词清单 专业名词 名词解释 HTML5 万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改 Android 一种基于Linux的自由及开放源代码的操作系统,主要使用于移动设备,如智能手机和平板电脑,由Google公司和开放手机联盟领导开发 IOS 由苹果公司开发的移动操作系统 Webkit 一个开源的浏览器引擎,在手机上的应用十分广泛 Webview WebView(网络视图)能加载显示网页,可以将其视为一个浏览器。它使用了WebKit渲染引擎加载显示网页 Activity Activity是一个应用程序组件,提供一个屏幕,用户可以用来交互为了完成某项任务,是一个负责与用户交互的组件 SSH 为 Struts+Spring+Hibernate的一个集成框架,是目前较流行的一种Web应用程序开源框架。其中使用Struts作为系统的整体基础架构,负责MVC的分离,在Struts框架的模型部分,控制业务跳转,利用Hibernate框架对持久层提供支持,Spring做管理,管理Struts和Hibernate。 WebStorage HTML新增的本地存储解决方案之一 LocalStorage 本地永久性存储数据,除非显式将其删除或清空 SessionStorage 存储的数据只在会话期间有效,关闭浏览器则自动删除 Sqlite 一款轻型的数据库,是遵守ACID的关系型数据库管理系统,它包含在一个相对小的C库中 W3C 万维网联盟,创建于1994年,是Web技术领域最具权威和影响力的国际中立性技术标准机构。主要的工作是发展 Web 规范,这些规范描述了 Web 的通信协议(比如 HTML 和 XHTML)和其他的构建模块。 NativeApp 使用传统原生态Android SDK来实现的应用 WebApp 基于浏览器来实现的一种应用 HybridApp 一种可以下载的Native App,其用户界面的全部或者部分元素在嵌入式浏览器组件(WebView之类的)里面运行 优雅降级 一开始就构建站点的完整功能,然后针对浏览器测试和修复。认为应该针对那些最高级、最完善的浏览器来开发网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段 渐进增强 一开始只构建站点的最少特性,然后不断针对各浏览器追加功能。先让网站能够正常工作于尽可能旧的浏览器上,然后不断为它在新型浏览器上实现更多的增强和改进。 Viewport 移动设备上的Viewport就是设备的屏幕上能用来显示网页的一块区域,即浏览器上用来显示网页的那部分区域。Viewport不局限于浏览器可视区域的大小,可能比浏览器的可视区域要大,也可能比浏览器的可视区域要小。 媒体查询 CSS媒体查询允许开发者基于浏览网站的设备的特性来应用不同的样式申明,最常用的特性是视口宽度。 GCF 谷歌内嵌浏览器框架, 使用此插件,用户可以通过Internet Explorer的用户界面,以Chrome内核的渲染方式浏览网页。Chrome Frame 会把最新版的Chrome Webkit 内核和JavaScript 引擎注入到IE中, IE浏览器将获得Chrome的性能和功能 目录 摘要 I ABSTRACT II 专业名词清单 III 第一章 绪论 1 1.1 研究背景与意义 1 1.2国内外相关研究现状 2 1.2.1 在线认证检测平台开发现状 2 1.2.2 HTML5 3 1.2.3 Android 3 1.2.4 Android移动Web项目开发的三种解决方案:Native, Web和Hybrid优缺陷分析 4 1.2.5国内外应用现状 6 1.2.6 研究现状总结 7 1.3研究目标与内容 7 1.3.1多窗口浏览器模式的实现机制 7 1.3.2跨域交互即缓存处理方法 7 1.3.3页面自适应机制,即设备自适应与浏览器自适应机制 8 1.3.4 “认我测”质检服务平台的设计和实现 8 1.4 本文的结构安排 8 第二章 多窗口类浏览器设计 11 2.1 多窗口类浏览器需求分析 11 2.1.1 Activity简介 11 2.1.2 Fragment简介 11 2.1.3 多窗口类浏览器需求 12 2.2 多窗口浏览器模式的实现机制 12 2.2.1安卓移动端多窗口浏览器框架 12 2.1.2多窗口浏览器模式实现机制 13 2.3 模块实现 13 2.3.1类浏览器模式 13 2.3.2多窗口类浏览器模式 14 2.4 本章小结 15 第三章 跨域交互缓存处理设计 17 3.1 跨域交互缓存处理需求 17 3.1.1 缓存技术WebStorage 17 3.1.2 跨域交互缓存处理需求 17 3.1.3 页面回退管理需求 17 3.2 缓存处理机制 18 3.2.1 跨域缓存处理 18 3.2.2页面回退管理 18 3.3 模块实现 19 3.3.1跨域缓存机制的主要实现 19 3.3.2.页面回退管理的实现 22 3.4本章小结 22 第四章 页面自适应机制设计 23 4.1页面兼容策略 23 4.2 页面自适应策略 24 4.2.1设备自适应 24 4.2.2.浏览器自适应 25 4.3 模块实现 25 4.3.1根据适口属性设计响应式布局: 26 4.3.2同分辨率范围内的流式布局设计 26 4.3.3移动端viewport属性设定 27 4.3.4组件样式的渐进增强设计 27 4.4 本章小结 27 第五章 认我测在线检测服务系统设计 29 5.1认我测在线检测服务系统需求分析 29 5.2 系统时序流程 29 5.3 系统功能模块图 30 5.4 本章小结 32 第六章 认我测在线检测服务系统实现与测试 33 6.1认我测在线检测服务框架设计 33 6.2 系统运行环境搭建及配置 34 6.2.1 AndroidManifest.xml主程序环境配置 34 6.2.2 移动端工程资源布局 35 6.3 认我测在线认证检测系统的主要功能实现 36 6.3.1用户查询 36 6.3.2订单操作 37 6.3.3个人信息维护 37 6.4.系统功能测试 38 6.4.1 首页功能模块 38 6.4.2 订单功能模块 38 6.4.3 个人信息模块 39 6.4.4页面自适应 40 6.5 本章小结 41 第七章 总结与展望 43 7.1 工作总结 43 7.2 研究展望 44 致谢 47 参考文献 49 第一章 绪论 1.1 研究背景与意义 目前市场业务中在产品以及其他项目的认证和检测方面存在诸多不便,用户需要实地考察并频繁与检测单位沟通,填写繁琐的纸质检测报告、当面送递样品,对于检测环节中存在的问题难以及时交互并处理。市场上相应的检测平台诸如检测通、凡特网等皆为pc端检测网站,并且操作繁琐不够人性化,用户在实地使用中存在很多问题。昆山工业技术研究院着眼于为委托用户和质检机构搭建良好的沟通桥梁,免去目前市场业务中企业用户需要实地地并频繁地与检测机构沟通,从而提出自己的委托乃至下委托单、等待检测报告等,设计并研发了市场上首款提供质检服务的移动端app,即“认我测”质检服务平台系统,用户只需在手机上安装轻盈小巧的系统app,即可方便快捷的进行委托服务,质检机构亦可便捷地处理请求订单,双方都可以实时追踪委托订单的状态变化。 考虑到目前市场上用户的手机型号、种类、屏幕分辨率等参差不齐,传统方式根据主流系统(如android、ios)分别开发相应的系统耗时又耗力,为了高效开发并节约开发项目成本、提高项目开发效率,并迎合近年来新兴的HTML5移动页面开发技术,公司采用Android+HTML5相结合的方式进行移动端系统的研发工作。系统的主体一次开发即可在不同设备,包括不同系统、不同型号、不同分辨率设备上运行,免去了大量冗余的开发工作,提高项目的开发效率,降低项目的开发维护成本,为用户提供便捷服务。项目的封装框架只需根据系统的不同稍微改动定制即可,传统的多套系统项目现在只需一次开发,即可适应于不同机型。此外系统还可以通过微信公众号推广链接进行访问,大大的增强了系统的可扩展性和用户操作的便捷性。 然而,由于HTML5的W3C标准规范还未制定,安卓系统中类浏览器Webview自身存在一些局限性,使得结合安卓与HTML5开发移动web项目仍处在探索研发阶段,还不够成熟和完善,相应的技术支持也比较有限,因此仍存在着诸多问题亟需解决,包括: (1)多窗口浏览器模式问题。安卓用于加载的Webview视图窗口只是作为类浏览器而存在,并不等同于pc浏览器,在安卓上更是只能同时运行一个Webview,每次加载新的页面都只能覆盖掉原先的页面,无法达到网页浏览器的多窗口模式。通过常规的pc浏览器窗口的相应open、close进行新增窗口、关闭窗口等操作,在Webview类浏览器窗口中都无法正常运作,甚至会导致Webview失去响应。为此,需要研究相应的解决方案,用于模拟用户适应的网页多窗口浏览器模式。(2)跨域交互问题,即缓存机制与浏览记录管理问题。不同于网页浏览器,用户的数据可以在不同的窗口之间共享,Webview由于其模块之间无法共享数据的机制为保存用户信息以及共享其他程序数据带来了巨大难题。为此需要区分数据是同模块内部共享还是跨域共享访问,并提供相应的解决方案。Webview通过模拟多窗口浏览器模式运作后,在不断的新开页面以及不同模块之间互相切换,会导致页面回退时历史浏览地址发生覆盖,使得不同模块无法回到相应的上级页面,为此需要有效的对页面的浏览历史进行管理,并提供切实可行的方案。(3)页面自适应问题,即设备自适应与浏览器自适应问题。针对移动设备繁杂的屏幕分辨率,如何让页面进行分辨率自适应,从而发挥相对于原生态安卓开发的优势,是一个需要探索和解决的问题。考虑到高效开发设计以及便于推广应用,HTML5的界面不仅仅需要适应基于Webkit内核的Webview,还要能够方便的应用于PC端的网页,如何让HTML5的网页能够适用不同的浏览器内核,也是一个亟待解决的问题。 为此,如何使得“认我测”质检服务平台中安卓与HTML5的结合开发满足多浏览器模式,并解决跨域之间的数据交互问题,同时提高页面的设备自适应和浏览器自适应能力,成为跨平台移动web项目高效开发所亟待解决的问题。 1.2国内外相关研究现状 1.2.1 在线认证检测平台开发现状 互联网界目前在检测领域存在部分在线检测认证的平台,诸如华强认证、检测通等,可以为用户提供一些简单的检测申请,以及为检测机构提供平台发布相关信息。 图1.1 华强认证检测平台首页 如上图所示,在华强认证平台上用户可以选择认证或者检测服务,针对相应类型进行筛选。根据待检测的种类不同,选择相应的检测机构资质、证书、检测周期等查询结果,根据查询结果选择检测机构进行检测委托。检测机构与平台合作,提供负责的检测服务项目、价格等信息,在平台上开设个人站点,提供数据给平台,用于用户检索。 与时下常见的电商网站类似,此类检测平台都提供检测方设计自己的网站主页以出售检测服务,同时为用户提供检索结果、显示可购买的检测服务,用户可以选择质检服务并加入购物车、下单、查看检测方详情、与卖家(检测方)沟通检测细节等操作,但是这些平台都存在着共同的问题——流程不够清晰明了、检测服务不够个性化、用户操作繁琐等,这些问题给用户和检测机构的使用以及交流带来了很多不便。平台提供的检测项目有限,很多时候用户无法确定自己需要检测的项目所属,也不能有效地与检测方进行沟通。与此同时,认证检测领域对于移动端的涉及基础为零,目前主流移动端市场没有相应的认证检测服务产品,随着移动产品愈发便捷,在移动端研发设计相应的认证检测产品,使得用户可以随时随地进行下单咨询变得愈发重要。 1.2.2 HTML5 为了方便用户的使用,“认我测”认证检测平台的PC端基于B/S架构,其设计和研发离不开浏览器内核支持,同时移动端的Web开发也同样需要HTML5语言的支持。利用HTML5的崭新特性,能够更好地为用户提供服务。 HTML5是用于取代1999年所制定的HTML4.01和XHTML1.0标准的HTML(标准通用标记语言下的一个应用)标准版本;现在仍处于发展阶段,但大部分浏览器已经支持某些HTML5技术。HTML5有两大特点:首先,强化了Web网页的表现性能。其次,追加了本地数据库等Web应用的功能。 HTML5广义上为包括HTML、CSS和JavaScript在内的一套技术组合。减少浏览器对于需要插件的丰富性网络应用服务,如Adobe Flash、Microsoft Silverlight与Oracle JavaFX的需求,并且提供更多能有效增强网络应用的标准集。目前HTML5已向开发人员提供了很多新的标签,如section,nav,article,header和footer等。这些标签语义化程度高,被广泛使用。 HTML5逐渐为移动Web开发所采纳,主要原因在于其适用移动项目开发的八大特性,即离线缓存、音频视频自由嵌入、地理定位、Canvas绘图、丰富的交互方式、低开发维护成本、CSS支持以及调用手机硬件。其中离线缓存可以看做是加强版的cookie,不受数据大小限制,有更好的弹性以及架构,可以将数据写入到本机的ROM中,还可以在关闭浏览器后再次打开时恢复数据,以减少网络流量。音频视频方面HTML5无需拆分开混排的多媒体内容,可以将文字、图片、音频、视频等放在一起进行处理。HTML5提供地理定位的支持,无需专属导航软件,通过缓存即可加载地图数据,方便灵活。在系统开发和维护方面,打开即可使用最新版本,免去重新下载升级包的麻烦,使用过程中就直接更新了离线缓存。除此之外,HTML5增强了对CSS样式的支持,极大的增强了界面的美化和友好性,提高了用户体验。 1.2.3 Android Android是一种基于Linux的自由及开放源代码的操作系统,主要使用于移动设备,如智能手机和平板电脑,由Google公司和开放手机联盟领导及开发。Android操作系统最初由Andy Rubin开发,主要支持手机。2005年8月由Google收购注资。2007年11月,Google与84家硬件制造商、软件开发商及电信营运商组建开放手机联盟共同研发改良Android系统。随后Google以Apache开源许可证的授权方式,发布了Android的源代码。2011年第一季度,Android在全球的市场份额首次超过塞班系统,跃居全球第一。 2013年的第四季度,Android平台手机的全球市场份额已经达到78.1%。 Android是一个真正意义上的开放性移动设备综合平台。它包括操作系统、用户界面和应用程序-移动电话工作所需的全部软件,而且不存在任何以往阻碍移动产业创新的专有权障碍。通过与运营商、设备制造商、开发商和其他有关各方结成深层次的合作伙伴关系,来建立标准化、开放式的移动电话软件平台,在移动产业内形成一个开放式的生态系统,这样应用之间的通用性和互联性将在最大程度上得到保持。 在开发之初,Android平台就被设计成一个由一系列应用所组成的平台。所有的应用都运行在一个核心的引擎上面,这个核心引擎其实就是一个虚拟机,它提供了一系列用于在应用和硬件资源间进行通讯的API。Android打破了应用之间的界限,开发人员可以把Web上的数据与本地的联系人、日历、位置信息结合起来,为用户创造全新的用户体验。此外应用程序不仅可以通过标准API 访问核心移动设备功能、互联网,应用程序还可以声明它们的功能供其他应用程序使用。 考虑到移动端市场主流操作系统的使用情况、移动领域的发展趋势以及Android操作系统的开源性,系统采用Android操作系统为研究对象,在其基础上进行设计和研发,使得认证检测产品能够为主流用户所使用,为用户带来便捷。 1.2.4 Android移动Web项目开发的三种解决方案:Native, Web和Hybrid优缺陷分析 Native app是用传统原生态Android SDK来实现的应用;Web app是基于浏览器来实现的一种应用。 Hybrid app是一种可以下载的Native App,其用户界面的全部或者部分元素在嵌入式浏览器组件(WebView之类的)里面运行。对用户来说,Hybrid App与Native App很难区别。二者都可以从应用程序商店或市场下载,存放在移动设备上,运行方式完全如同其他任何应用程序。但是对开发者来说,却存在巨大的差异,因为其无需为每一种移动操作系统从头开始重新编写应用程序,而是只要用HTML、CSS和JavaScript编写其中一部分应用程序代码,即可在多个设备上重复使用。 以下是三种技术各自的优缺点。 Native app Web app Hybrid app 系统特性 可以完美发挥系统特性(调用系统服务、内存管理等); 操控设备硬件(如相机、蓝牙、振动器等) 无法充分发挥系统特性(调用系统服务、内存管理等); 无法操控设备硬件(如相机、蓝牙、振动器等) 可以发挥大部分系统特性(调用系统服务、内存管理等); 可以通过JavaScript API操控设备硬件(如相机、蓝牙、振动器等) 用户体验 可提供最佳的用户体验,最优质的用户界面,最华丽的交互; 支持消息推送 用户体验较差; 图片和动画支持性不高; 不支持消息推送 可提供较好的用户体验; 支持消息推送 本地资源 可访问本地资源 不支持访问本地资源 可访问本地资源 应用更新 获得新版本时需重新下载应用更新,不够方便 跨平台开发、用户不需要下载安装App,开发速度快 可以下载新应用更新,也可在线更新 适用场景 适合制作游戏等性能要求比较高的应用 对于对界面的灵活性有较高要求的app 适用于对画面表现特别高以外的主流需求 开发成本 各平台不兼容,多平台的开发、移植比较复杂,开发成本高,开发周期长,开发成本高; 维护多个版本的成本比较高; 针对多种设备(不同分辨率、不同硬件配置等)的调试和适配较麻烦,维护成本高; 纯HTML5快速开发,较低的开发成本; 支持设备广泛,基于浏览器,跨平台性,维护成本低; Native+HTML5 针对不同系统制定系统外壳,页面部分可重用,大大降低开发成本; 可直接在线更新,更新成本低; 跨平台性,无需针对不同平台开发多个版本应用。 网络要求 支持离线使用 非常依赖网络,网络不稳定等其他环境时,用户请求页面的效率大打折扣 大部分功能依赖网络 考虑到系统需要提供较好的用户体验、用户与检测机构能够利用消息推送进行实时沟通、用户的查询和下单操作默认已具备网络环境等因素,因此为了更好地利用移动端本地硬件支持以及实现跨平台、跨设备的开发,系统采取了Hybrid混合开发模式。通过在原生态框架中嵌入Webview类浏览器,主体页面采用HTML5开发,由原生态定制系统框架,这样在更换移动端操作系统时,只需相应更换系统外壳,主体部分可以重复利用,极大地减少了研发成本,提高了系统的可复用性。系统主体部分更新时,无需在应用市场中重新下载,应用HTML5的特性在线更新缓存即可方便地获取最新版本,为用户带来了便捷。 1.2.5国内外应用现状 图1.2 智能手机操作系统分布数据 市场调研公司Kantar Worldpanel ComTech发布的智能手机操作系统数据显示,截至2016年2月末的三个月内,Android中国城市的销售份额从去年同期的73%增至76.4%。而在美国和欧洲五大市场(包括英国、德国、法国、意大利和西班牙),Android的市场占比继续保持增长态势。因此系统选取市场移动端主流操作系统Android作为基础,进行移动端认证检测产品的研发和设计。 随着移动浪潮的兴起,各种APP层出不穷,极速的业务扩展提升了团队对开发效率的要求,这时使用IOS&Andriod开发一个APP的成本相对过高,而HTML5的低成本、高效率、跨平台等特性马上被利用起来形成了一种新的开发模式:HybridAPP。 作为一种混合开发的模式,Hybrid APP底层依赖于Native提供的容器(UIWebview),上层使用Html&Css&JS做业务开发,底层透明化、上层多多样化,这种场景非常有利于前端介入,非常适合业务快速迭代。Hybdrid作为目前主流的移动端开发设计模式,能够极大的利用Native和HTML5的优势,将性能与用户体验相结合,缩短跨系统的产品研发周期,给用户和研发都带来极大的便利。混合型APP软件兼具“原生型APP软件良好用户交互体验的优势”和“网页型APP软件跨平台开发的优势”。市场上一些主流移动应用都是基于混合型APP软件的方式开发,比如工商银行、百度搜索、街旁、东方航空、微信、去哪儿等。 目前已有众多企业采用混合型APP软件技术开发APP应用,一方面是开发简单,另外一方面可以形成一种开发的标准。企业封装大量的原生型的原生插件如支付功能插件供Java调用,并且可以在今后的项目中尽可能的复用,从而大幅降低开发时间和成本。混合型APP软件的标准化给企业移动应用开发、维护、更新都带来了极高的便捷性。 混合型APP软件通常是基于第三方跨平台移动应用引擎框架进行开发,在国内开发者中比较知名的有PhoneGap、Titanium和AppCan。这些引擎框架一般使用HTML5和Java作为编程语言,调用引擎封装的底层功能如照相机、传感器、通讯录、二维码等。HTML5和Java只是作为一种解析语言,真正调用的都是原生型APP软件一样封装的底层功能,这是和网页型APP软件的最大区别和不同。因为使用了浏览器技术,所以混合型APP软件通常具有跨平台的特性,并且开发成本和网页型APP软件接近,开发效率也远高于原生型APP软件。根据国际科技媒体ReadWriteWeb 2015数据统计显示,截至2015,有80%的App全部或部分基于HTML5研发。大部分的App内容以网页的形式呈现,包括微信、Facebook、Twitter等。为此,Hybrid混合模式成为“认我测”在线检测服务平台移动端框架的开发和设计依赖。 尽管微信通过公众号的形式,使得Android+HTML5模式得以应用并推广,这项技术目前仍不够完善,利用web实现移动app存在一些瓶颈。(1)根据百度移动互联网发展趋势报告,iPhone下载一个1.407k的网页,建立连接耗时1.35s左右,传输耗时0.15s左右。这样,导致app在建立连接的时候,屏幕处于白屏状态。app在一秒多的时间内,完全处于白屏状态,加上3G、GPRS网络的不稳定,有时候等待app响应需要几秒甚至1几秒的时间,对于mobie app来说,这是个致命的缺陷。(2)难以实现本地存储。基于Android存在多版本系统,Android低版本中的Webkit对HTML5和CSS3不能够很好地支持。常用HTML5向后兼容方案是通过Javascript+CSS+Html来模拟HTML5的一些特性,但过多的js存在于移动app中会得不偿失。 Android+HTML5的混合开发模式对于移动端Web项目开发已经成为市场的主流和趋势,与此同时这项技术还存在着一些问题,需要不断的进行改进和完善。 1.2.6 研究现状总结 总而言之,Android操作系统在移动市场仍居主流,HTML5也为用户带来崭新的特性,Hybrid混合开发模式也逐渐成为移动Web开发的主流设计模式,大量的市场应用都成功的应用和推广了Android+HTML5。正是在这种背景下,“认我测”在线认证检测系统率先填补了移动端认证检测领域的产品空缺,采取了Hybrid混合开发模式。同时,利用Android+HTML5相结合开发移动端Web项目尚处于应用阶段,仍然存在很多问题,还不够成熟和完善。如何将这二者更有效的结合使用,并解决过程中存在的问题,提高项目开发的效率以及节约开发成本,是一个需要研究探索的问题,这也是本课题的意旨。 1.3研究目标与内容 1.3.1多窗口浏览器模式的实现机制 深入挖掘Webview作为类浏览器视图窗口与传统PC端浏览器的区别,针对安卓端同一视图区域单一运行Webview的特性,通过在原生态安卓中启用Fragment视图加载不同视图页面,在外部Activity中对Fragment进行管理控制。同时调整窗口加载及操作模式,适应移动端相关操作从而实现程序中加载多个Webview视图窗口并可以随意切换,实现类浏览器多窗口加载资源并交互的模式。 1.3.2跨域交互即缓存处理方法 针对Webview不支持多窗口间跨域访问的问题,重写缓存处理方式以替代网页端会话级缓存机制,模拟web端本地存储localStorage对本地缓存的处理方法,诸如setItem()、getItem()、removeItem()以及clear(),通过将持久化数据存储在移动端本地数据库来模拟网页端数据持久化存储,实现多Webview间跨域交互访问以及缓存数据保存和处理。 通过维护Webview的历史栈,根据需求进行过滤跳转或者重新加载页面。若当前为重定向后的链接,那么回退的时候就需要忽略上一级的链接,不使用Webview自带的回退方法goBack(),相对地移除重定向和重定向后的url,获取到初始页面链接后自行进行loadUrl()操作. 1.3.3页面自适应机制,即设备自适应与浏览器自适应机制 利用Viewport来控制页面的缩放比例、页面的初始大小,针对不同分辨率的移动设备实现网页页面自适应。通过渐进增强以及优雅降级机制来控制不同版本、不同浏览器之间的兼容问题,以及利用JavaScript库辅助修正相应的样式问题,从而实现浏览器适配的机制。 1.3.4 “认我测”质检服务平台的设计和实现 移动客户端通过安卓与HTML5结合开发设计委托方和质检方app,通过原生态安卓框架外壳嵌入Webview渲染加载页面,添加Java接口与消息会话模块,通过移动端Sqlite操作数据重写localStorage来实现缓存机制,利用Fragment视图层控制Webview的切换与运行来展现主要的功能模块—委托方App:首页模块、订单模块、消息模块和个人模块;质检方App—订单模块、消息模块和个人模块。 服务器端采用J2EE的SSH框架搭建项目,通过微信公共账号链接Html页面,为用户提供多种系统访问途径,增强了系统的可扩展性,为用户带来便利。 1.4 本文的结构安排 本文共分为七个章节。 第一章是绪论部分,介绍课题的研究背景,指出课题的研究意义。然后通过对HTML5研究、Android移动Web开发技术研究以及Hybrid开发问题研究来介绍该课题在国内外的研究现状。最后说明本文的研究目标与内容,以及论文的结构安排。 第二章介绍多窗口类浏览器模式策略的设计与实现。针对现有移动端单一窗口存在的不足,提出类浏览器多窗口解决方案,并对多窗口浏览器模式进行设计 第三章其次分析Webview的跨域数据交互问题,针对移动端类浏览器内核不支持跨域数据访问的不足,提出本地持久性存储替代web端缓存的解决方案,并对跨域访问模式进行设计。同时分析了页面重定向导致的页面无法正常访问问题,提出采用页面浏览历史栈的管理方案,针对回退时目标页面解析进行相应操作。 第四章是多分辨率多设备页面自适应策略设计。首先分析现有Web页面在移动端不同分辨率和设备显示存在的问题,针对页面难以在不同设备上保持兼容适应的不足,提出页面自适应解决方案,并通过渐进增强以及媒体查询等方式进行设计。 第五章是认我测系统的设计,包括系统的功能需求分析、业务流程展示以及功能模块设计。 第六章是系统的功能测试,介绍了相关的实现环境与工具,并对系统的主要功能模块以及主要解决方案进行了功能验证测试。 第七章是总结展望部分,总结本文的主要工作内容与创新点,并对本文写作与实验过程中的不足及后续研究进行展望。 第二章 多窗口类浏览器设计 2.1 多窗口类浏览器需求分析 2.1.1 Activity简介 在Android中一个Activity是一个应用程序组件,它提供一个屏幕,用户可以为了完成某项任务用来交互,例如拍照、拨号、看地图、发送邮件等。每一个Activity被系统给予一个窗口,在该窗口上面可以绘制用户接口。一个应用程序通常由多个Activities组成,他们通常是松耦合关系。通常首次启动应用程序的时候呈现给用户的Activity被指定为"Main Activity”。为了完成不同的动作,每一个Activity可以启动另一个其他的Activity。一个新的Activity启动,前一个Activity就被终止了,但是系统将Activity保存在一个栈上。当一个新Activity启动,它被推送到栈顶,取得用户焦点。栈的管理符合“后进先出”原则,所以,当用户完成当前Activity然后点击back按钮,它被弹出栈并且被摧毁,然后恢复之前的Activity。 若一个Activity因新的Activity启动而停止,系统通过Activity的生命周期回调函数,通知其这种状态转变。一个Activity根据它自己的状态变化可能会收到许多回调函数的通知信息,诸如系统创建、停止、恢复或者摧毁Activity,每个回调都使得开发者得以完成相应状态的指定工作。例如,当停止Activity的时候,应该释放所有大的对象,如网络数据库连接。当Activity恢复时,开发人员可以重新获得必要的资源和恢复被中断的动作。这些状态转换都是Activity的生命周期的组成部分。 2.1.2 Fragment简介 Android 3.0中开始引入Fragments 的概念,可以称为:碎片、片段。其目的是为了解决不同屏幕分辨率下动态和灵活的UI设计,大屏幕如平板、小屏幕如手机。平板电脑的设计使得其有更多的空间来摆放更多的UI组件,而多出来的空间存放UI使得这些组件会产生更多的交互,从而诞生了Fragments。 Fragments 的设计不需要开发者来亲自管理视图层的复杂变化,通过将Activity 的布局分散到Fragment 中,可以在运行时修改Activity 的外观,并且由Activity 管理保存其变化。当一个片段指定了自身的布局时,它能和其他片段配置成不同的组合,在活动中为不同的屏幕尺寸修改布局配置。小屏幕可能每次显示一个片段,而大屏幕则可以显示两个或更多。Fragment是Activity的界面中的一部分或一种行为。可以把多个Fragments组合到一个Activity中来创建一个多面界面并且可以在多个Activity中重用一个Fragment。除此之外,可以把Fragment认为是模块化的一段Activity,它具有自己的生命周期,接收它自己的事件,并可以在Activity运行时被添加或删除。 Fragment不能独立存在,它必须被嵌入到Activity中,而且Fragment的生命周期受到所在的Activity的影响。当Activity暂停时,它拥有的所有的Fragments都被暂停;当Activity销毁时,它拥有的所有Fragments都被销毁。然而,当activity运行时(在onResume()之后,onPause()之前),可以单独地操作每个Fragment,比如添加或删除它们。在执行上述针对Fragment的事务时,可以将事务添加到一个栈中,这个栈被Activity管理,栈中的每一条都是一个Fragment的一次事务。有了这个栈,就可以反向执行Fragment的事务,这样就可以在Fragment级支持“返回”键(向后导航)。 2.1.3 多窗口类浏览器需求 在Android中展现在用户面前的Activity同时只能存在一个,而由于类浏览器内核Webkit的特性,一个Activity中同时只能加载一个Webview用以渲染网页,如果用户想模仿Web浏览器新增一个浏览器标签窗口打开新页面,只能将原来的网页覆盖掉,无法在窗口间来回切换,用户也无法保持原有的浏览器使用习惯。为此,需要利用Activity栈的切换特点,将系统的主要模块分别设计在不同的Fragment上,通过各自的Webview进行加载渲染,在用户需要切换窗口时,通过管理切换Fragment达到目的的实现。 2.2 多窗口浏览器模式的实现机制 2.2.1安卓移动端多窗口浏览器框架 图2.1 多窗口浏览器模式系统框架图 如图4所示,系统安卓移动端由首页、订单、消息以及个人信息四个模块构成,每个模块对应一个视图层Fragment,在安卓Activity运行时一次加载一个视图Fragment,通过底部的原生态菜单栏BottomBar进行视图之间的切换。每个视图Fragment对应同一个位置的Webview类浏览器窗口,通过Webview加载所需要的页面,通过外部的Fragment对Webview的加载以及切换进行控制,从而实现类浏览器多窗口模式。 2.1.2多窗口浏览器模式实现机制 多窗口浏览器模式的实现原理为:安卓外部Activity控制视图层Fragment的加载和切换,Fragment内部加载和控制Webview对页面的渲染,同时调整Web端页面的窗口打开和关闭模式,通过页面重定向进行打开和关闭返回。 多窗口浏览器模式解决两个问题,一是安卓中的类浏览器窗口模式,二是浏览器多标签模式。在移动端的页面加载过程中,类浏览器内核Webview的运行机制为覆盖加载页面,一次运行期间只同时存在一个Webview,与PC端浏览器的运行模式不同,无法通过open打开一个新的浏览器标签页,也无法通过close关闭单个的标签页。为此需要通过loadUrl进行页面重定向,在关闭页面时通过loadUrl反重定向或者通过Webview本身的goBack方法进行回退。移动端的Webview在全局意义上等价于PC端的浏览器,但是通过close关闭的不是一个窗口,而是关闭了整个浏览器。安卓中Activity运行时只能加载一个Webview,因此无法同时展现不同的页面,为此需要通过外部对Webview序列的控制,模拟多窗口显示页面的模式。 在安卓Activity的视图View初始化过程中,实例化需要首次显示的视图层fragment (如首页),将其放入实例化的视图层管理容器HashMap,并通过changeFragmentFrom Menu方法控制用户对视图层Fragment的切换,将原有的视图层置为等待恢复状态,并激活新的视图层用以在Activity中展现,通过changeFragmentBack控制用户通过回退操作唤醒的首页视图层,以此来控制不同视图层,即类浏览器窗口之间的切换。在相应的Fragment视图层中,初始化视图InitView时渲染加载Webview,同时控制底部的菜单栏,通过Webview加载相应的本地网页或服务器端网页,设置Webview相应的属性进而控制页面由Webview加载,而非默认的系统浏览器加载。为Webview绑定页面与原生态安卓相交互的接口,从而可以在加载的页面内调用安卓的原生态功能。 2.3 模块实现 2.3.1类浏览器模式 该部分主要为安卓中通过Webview渲染加载网页的过程。主要包含以下过程: Fragment布局文件中声明控件Webview,绑定其资源ID,为Webview设置宽度和高度。 (1)在Fragment视图初始化initView部分,利用findViewById()通过资源ID获取到Webview控件,对其进行初始化,同时设置相关的webSettings属性,让Webview可以运行JavaScript脚本以及能与本机数据库进行交互。 (2)重写WebViewClient的shouldOverrideUrlLoading()函数,让应用程序的Webview直接加载网页内容,而不调用外部的浏览器。 (3)重写Webview网页对话框,构建一个Builder用以显示网页中的对话框,在点击确定按钮之后,继续执行网页中的操作,同时关闭Builder对话框。 (4)为JavaScript创建安卓接口。通过addJavaScriptInterface为Webview绑定底层Java接口,同时提供相应的接口方法名以及在页面中可以调用的句柄名称,通过该句柄和方法名,即可在Html5页面的JavaScript中访问该底层的Java方法,实现对页面上部和底部的系统外壳的展示管理。 (5)通过loadUrl进行对目标页面的渲染加载,可以加载访问服务器端的页面,也可访问放置在项目内部的页面文件,该模式需要将相应页面放置于系统的assets目录下。相对而言服务器端页面更加常用,也便于维护。 2.3.2多窗口类浏览器模式 图2.2 多窗口类浏览器模式原理图 (1)创建各个主功能模块的视图类Fragment,分别为主界面模块HomeFragment、订单模块OrderFragment、聊天咨询模块MessageFragment以及个人中心模块PersonalFragment,继承自基类BaseFragment。 (2)每个Fragment视图类中声明并初始化相应的Webview组件,对其进行属性设置,为其绑定JavaScript接口并覆盖渲染加载页面的方法,绑定相应的需要在页面调用的底层Java方法接口。重写默认的页面回退响应事件,对页面访问历史以及目标访问页面进行过滤判断,执行相应的处理方法。 (3)在MainActivity的初始化initView中声明并初始化Fragment管理容器HashMap,初始化主页视图HomeFragment并将其加入容器,设置其为默认加载视图。获取FragmentManager用以维护管理Fragment队列,调用beginTransaction方法开启事务。 (4)重写回退按钮响应事件。当页面回到各自模块的初始页面然后按下回退键时,判断当前模块所在的Fragment,由主页模块后退时,执行确认退出系统操作,若从其他模块进行后退,则回到主页模块。通过底部菜单栏setRadioChecked方法设定当前模块的选中标识。 (5)重写模块间切换的方法changeFragmentFromMenu,开启事务,对模块标识ftag进行判断操作,根据用户点击的模块图表将相应的模块视图Fragment通过onResume()进行恢复,同时通过show()将该模块进行展示,从Fragment管理容器中将主页模块以外的Fragment移除。将带有oflag暂停标识的Fragment视图进行暂停处理,通过hide隐藏取消该视图的展示。 (6)在各自的Fragment模块视图类中重写onResume方法,用以在模块恢复时进行用户是否登录判断。对Webview渲染加载的页面进行分析,判断是否包含index初始页面标识。根据flag标识进行是否需要登录操作,flag为1表示从其他Fragment跳转到该模块的Fragment视图并需要用户登录。 以上就是多窗口类浏览器模式的实现主要环节,通过Webview加载渲染服务器资源页面,控制碎片视图Fragment展现各自模块的Webview,在MainActivity对碎片容器以及碎片视图之间的切换进行管理控制,从而完成多窗口类浏览器模式的实现。 2.4 本章小结 本章分析并介绍了安卓中Activity的基本性质,对碎片视图Fragment进行了相关阐述和引出,综合分析了多窗口类浏览器模式的设计需求。随后对多窗口类浏览器模式的框架进行了设计,通过Activity运行管理Fragment的加载和切换,各个模块的Fragment视图独自加载运行相应的Webview,补充和完善不同模块之间切换和回退的业务逻辑。在模块实现部分详细描述了两个关键部分的实现环节,即类浏览器模式和多窗口类浏览器模式,介绍了过程中主要用到的方法以及实现思想。 第三章 跨域交互缓存处理设计 3.1 跨域交互缓存处理需求 3.1.1 缓存技术WebStorage 图3.1 WebStorage示意图 WebStorage 使得网站能够把信息存储到本地的计算机上,并在以后需要的时候进行获取。WebStorage和Cookie类似,区别在于WebStorage是为了更大容量存储而进行设计。Cookie的大小是受限的,并且每次当请求一个新的页面的时候,Cookie都会被发送过去。而WebStorage则存储在计算机上,网站在页面加载完毕后可以通过Javascript来获取这些数据。 WebStorage提供两种类型的API:localStorage和sessionStorage,区别在于localStorage是本地永久性存储的数据,除非显式将其删除或清空,否则将一直保存在本地。sessionStorage存储的数据只在会话期间有效,关闭浏览器则自动删除。两个对象都有共同的操作API。 3.1.2 跨域交互缓存处理需求 WebStorage存储技术针对的是同一个类浏览器Webview,系统在各模块之间由不同的Webview加载渲染,通过不同的Fragment进行管理,因此模块之间无法共享数据。然而通过多窗口浏览器模式构建的系统模块之间经常需要进行数据交互,如用户登录信息以及产品相关信息,Webview由于其特性仅支持自身内部的缓存数据交互。同Webview内不断的覆盖加载新页面以及发生页面回退时可以对缓存数据提供便捷高效的数据保存,使得在页面加载的过程中可以便利的处理需要交互的数据;相对的不同的Webview之间无法共享数据,无论是会话级缓存还是持久化缓存。为此需要重写web端的持久化存储localStorage,将交互的数据保存到移动设备本地数据库。 3.1.3 页面回退管理需求 对于初始页面为A,点击某个链接跳转到B(http://xxx.com.cn/),B页面重定向到C页面(http://xxx.com.cn/website/index.Html),当调用webview.goBack()时,页面回退到B,然后接着会重定向回C页面。这样会导致两个问题:无法回退到Webview的初始页面A以及无法正常退出Activity或者Fragment(只有还未加载完C时进行回退才能退出页面)。为此需要引入历史记录栈,对页面访问历史进行管理,在回退事件中判断该加载页面是否需要重定向并执行相应的操作。 3.2 缓存处理机制 3.2.1 跨域缓存处理 在移动端数据库Sqlite操作类LocalStorage中定义相应的数据库连接属性、创建和更新的操作以及数据库操作单例Instance,在视图访问基类BaseFragment中定义覆盖web端持久化存储localStorage的核心交互类LocalStorageJavascriptInterface。获得数据库操作单例,并覆盖localStorage对缓存的常用处理方法取值getItem(),修改值setItem(),删除值removeItem()以及清空缓存clear()。将页面上获得的数据键值对存入数据库,对其进行更新删除以及返回给页面使用。在Webview初始化时进行页面与后台交互绑定addJavaScriptInterface,并在页面初始化init过程中将页面的默认localStorage操作更换成覆盖重写的方法,即可在页面进行跨域访问时交互相应的数据。 跨域交互的缓存处理机制如图5所示: 图3.2 缓存处理机制原理图 3.2.2页面回退管理 安卓的回退按钮一般用于返回上一级菜单,不过在浏览器页面加载过程中却不能理想地返回上一级页面,默认的回退按钮是针对Activity的回退,对于Webview来说,回退按钮会致使浏览器调用finish()而结束自身的运行,因此需要覆盖Activity的onKeyDown()事件,在方法内部重新对浏览页面进行管理。 在页面的新建关闭以及重定向时,Webview的页面回退goBack()会受到干扰,不能正常回到前一个页面,甚至会发生前后两个页面间来回切换后退的死循环,并影响模块间的后退返回。为此需要对历史访问页面进行管理,采用如下实现方案。 在Fragment视图声明时定义一个用于管理保存历史浏览记录的历史栈ArrayList,将系统初始加载界面加入列表。在此后的页面加载过程中,每次加载页面都将其加入历史栈,在系统回退响应事件中,判断页面是否为重定向页面,如果为重定向页面,则移除历史栈中最后两个链接,加载操作后历史栈的最后一项;否则移除历史栈中最后一项,加载操作后历史栈的最后一项。 页面回退方案的流程图如图3.3所示: 图3.3页面回退管理机制图 3.3 模块实现 3.3.1跨域缓存机制的主要实现 图3.4 重写LocalStorage类示意图 (1)重写LocalStorage类。让LocalStorage继承自SQLiteOpenHelper类,声明LocalStorage对象实例以及其他数据库连接配置信息,如数据表名称、表中存储的数据Id与值Value、数据库名称、创建数据库语句等。通过Singleton单例模式维护LocalStorage实例,重写创建数据库和更新的相关操作。 (2)添加LocalStorage的底层JavaScriptInterface,供服务器资源页面进行访问。通过LocalStorageDBHelper对象获取到单例localStorage,声明上下文对象和SQLiteDatabase对象。重写HTML5存储技术LocalStorage的关键缓存数据操作方法getItem()、setItem()、removeItem()以及clear()。 图3.5 重写WebStorage核心方法示意图 1.重写getItem(),根据传入参数key获取相应的value值 ①判断传入的key是否为空。 ②若key不为空,通过localStorageDBHelper的getReadableDatabase()方法实例化数据库对象database。执行sqlite的数据库查询操作,返回数据库结果操作游标。 ③根据游标的moveToFirst判断查询结果是否为空,返回相应的value结果。关闭数据库连接。 2.重写setItem(),根据传入的参数key和相应值value更新数据库 ①判断传入的key和value是否为空,通过getItem()获取更新前的值。 ②实例化数据库对象database。声明ContentValues对象并将key和value相应赋值。判断更新前和key对应的值是否存在,若存在执行数据库的更新操作;若不存在,执行数据库的插入操作。关闭数据库。 3.重写remove() ①判断传入的key是否为空 ②实例化数据库操作对象,执行相应的数据库删除操作,关闭数据库 4.重写clear() 实例化数据库操作对象,执行数据库删除操作,清空整张数据库表。 在Fragment视图中初始化Webview时,通过addJavaScriptInterface为其绑定重写的底层LocalStorage操作接口,并将操作句柄设置为localStorage。设置webSettings属性,通过setDomStorageEnabled与setDatabaseEnabled启用本地存储功能。 在服务器资源页面JavaScript方法中,尝试用句柄LocalStorage替换window默认的localStorage。若发生异常,说明LocalStorage没有被添加至webview。然后即可像通常HTML5的localStorage对缓存数据进行操作。 3.3.2.页面回退管理的实现 (1)在MainActivity中覆盖模块间的回退响应事件。当模块页面回退至各自的初始页面时,点击回退按钮执行相应的模块切换策略,若该模块为主界面模块,则弹出退出系统确认框供用户选择是否退出;若为其他模块则将菜单栏切换到首页模块。 (2)在各自的Fragment中覆盖模块内部的回退响应事件。在页面初始化时定义并维护一个存放历史访问页面的历史栈loadHistoryUrls (ArrayList),把初始页面url加入到历史栈中,在覆盖加载方法shouldOverrideUrlLoading中将待渲染加载的页面加入到历史栈中。 (3)在Fragment内部的回退事件处理方法中,判断是否可以执行返回操作。然后判断历史栈存存放页面的前一页是否包含初始重定向页面,若包含该页面则移除加载栈中的最后两个链接,否则移除加载栈中的最后一个链接。最后加载重定向之前的页面。 3.4本章小结 本章首先分析了HTML5标准下缓存处理策略WebStorage,其包含本地存储LocalStorage与会话存储SessionStorage,并提供了相应的介绍和说明。然后分析了跨域数据交互问题问题存在的原因以及页面回退管理存在的问题。由于Webview的数据封闭性,不同的模块Webview之间无法共享访问数据,使得不同的模块无法正常交互,为此采用重写LocalStorage的方式,通过本地Sqlite数据库操作模拟HTML5中缓存的操作,重写LocalStorage关键的操作方法setItem()、getItem()、removeItem()以及clear(),并为Webview绑定相应的底层Java方法接口,在服务器页面资源中用重写的LocalStorage替换默认的localStorage,从而完成跨域数据的调用访问操作。由于页面的重定向作用,页面回退时会反复加载到重定向后的页面,导致页面无法正常回退,因此通过维护历史栈的方式,在页面回退时对回退目标页面进行分析判断,并执行相应的回退管理方法,从而使得模块内部的页面以及模块之间可以正常地进行返回操作。 第四章 页面自适应机制设计 针对移动设备分辨率和屏幕大小、设备型号迥异的现状,本章将在分析现有页面跨浏览器兼容方案的基础上,同时结合移动端对不同分辨率设备的支持特性,分析与设计跨机型、跨分辨率、跨浏览器的页面自适应机制。 4.1页面兼容策略 为了使页面能够适应不同版本的浏览器内核,诸如IE、Chorme、Firefox等,CSS3引入了两种常用的设计策略,即优雅降级和渐进增强。 优雅降级指的是在页面设计开始即构建页面的完整功能,然后针对不同的浏览器进行测试和修复。该观点认为应该针对那些最高级、最完善的浏览器来开发网站,同时把那些被认为过时或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段。在这种设计思想下,旧版的浏览器通常被认为仅能提供简单却功能没有大碍的页面浏览体验。虽然可以做一些小的调整来适应某个特定的浏览器,但由于这些调整并非开发过程中关注的焦点,因此浏览器间呈现的差异通常将被直接忽略。 渐进增强指的是在页面设计开始只构建页面的最少特性功能,然后不断针对各高级浏览器追加额外功能。渐进增强思想认为应该先让网站能够正常工作于尽可能旧的浏览器上,然后不断为它在新型浏览器上实现更多的增强和改进。随着时间的推移,当更多的用户逐渐开始升级浏览器,同时浏览器本身的支持度也不断提升时,就会有越来越多的用户体验到这些增强和改进,无需为了一个已经成型的网站在旧式浏览器下正常工作而做逆向开发。渐进增强观点认为网页的开发应关注于内容本身。这使得渐进增强成为目前一种更为合理的设计范例。 图4.1 优雅降级和渐进增强图例 对于优雅降级,功能衰减的设计从复杂的功能现状开始,不断减少用户体验的供给;而渐进增强则的设计是从一个非常基础的,能够发挥作用的版本开始,并不断地进行扩充,以适应未来环境的需要。功能衰减意味着往回看;而渐进增强则意味着朝前看,同时保证其根基安全牢固。 为了能够给用户提供更好的界面交互体验,同时适应不同版本的浏览器内核,系统采用了部分渐进增强的思想,利用媒体查询为不同的浏览器版本和内核提供相应的展现效果,同时保证基本的页面展现功能。 4.2 页面自适应策略 系统采用部分渐进增强的页面适配思想,以及拥抱流式布局策略,通过视口元素的媒体查询来控制不同分辨率阈值下页面的布局规划,调整页面元素的布局为百分比方式,包括组件宽度、字体以及高度、图片的动态大小来控制相同分辨率阈值范围下不同视口中组件的平滑缩放。同时对HTML5页面的移动端适配属性进行设置控制,针对需要达到的效果设置其Viewport的属性,包括宽和高、页面最初大小、初始缩放比例、屏幕像素密度等。使得系统在Web浏览器端以及移动端都有良好的展示效果。 4.2.1设备自适应 Viewport是指用以展现手机页面的区域。尽管Viewport的可见区域和屏幕大小是匹配的,但是它有着自己的尺寸(dimensions),这一尺寸决定了页面上可见的像素点。一个web页面在扩张到整个屏幕之前占用的像素数据是由Viewport的尺寸来定义的,而不是设备屏幕的尺寸。如一个设备的屏幕宽480像素,但是Viewport宽800像素,那么这个web页面需要在800像素宽的屏幕上才能完全展现。 在HTML5中可以使用 <meta> 标签来为页面定义Viewport 的属性。可以在 <meta> 标签的content 属性中,定义多个Viewport属性。例如,Viewport的高和宽,页面的最初大小,以及目标屏幕分辨率。Content 属性中的每个Viewport性质必须以逗号相隔。通过初始缩放initial-scale和用户调整缩放来控制页面的伸张以适当地填充移动端设备的显示区域。通过target density定义屏幕像素密度来控制安卓浏览器和Webview根据不同屏幕的像素密度对页面进行的缩放。 图4.2 视口属性设置示意图 4.2.2.浏览器自适应 通过拥抱流式布局的来使得页面在不同尺寸屏幕上良好的运行。从手机到电脑,设备的屏幕尺寸层出不穷,很难用传统意义上的统一布局来适应这些变动。拥抱流式布局倡导响应式界面设计,通过媒体查询(@media screen and...)来获得设备特性信息,从而灵活的控制不同尺寸屏幕的浏览器动态的调整页面元素的布局,以适应视口特性的变化。 同时根据“目标元素宽度/上下文元素宽度=百分比宽度”的模式将传统的固定像素式布局改为百分比布局,元素的固定像素宽度转换成百分比宽度。假定整个页面布局的宽度是960px,按照1024px屏幕分辨率做参照,百分比应是960/1024 = 93.75%。其他的组件宽度也可以按照960px为参照计算。若除下来的结果是很长的小数,如340/960 = 0.3541666666666667 ,无须对结果进行四舍五入,这样可以保持最高的精确度,这些小数应尽可能完整保留。 根据“目标元素尺寸/上下文元素尺寸=百分比尺寸”将文字的固定像素大小转换为等量的相对尺寸,现代浏览器默认的字体大小是16px,字体的相对大小用em为单位来表示。若某个div的字体大小为48px,则转化后为48/16=3em。结果为小数时的处理方式同上。 给图片设置阈值以使图片随着视口平滑缩放,为不同屏幕尺寸提供不同的图片,然后针对不同视口宽度修正设计,保证在响应式设计中内容始终优先。图片不是布局元素,它里面不包含子元素。另外,图片还有失真的问题,缩放不当都会造成失真。为此,需要给图片添加样式max-width:100% 以实现弹性图片,因为图片所处的容器可以自动缩放,只需让图片限制在父级的宽度之内,就可以随父级一起缩放。弹性图片仅用max-width无法实现,除此之外还需使用百分比宽度。处理方式同计算布局元素的宽度。在此过程中需要注意图片的失真问题,当用户使用的一个超宽屏幕时,图片被放大到原大小的两倍甚至更多,图片的质量会大幅下降。所以还需为图片设置绝对阈值,即宽度上限,因此一个弹性图片的样式组合应该为:width:30%; max-width:400px。 对于一个使用超宽屏幕的用户,按照正常的页面设计比例,这张图片被放大到了500px,但是现在只能显示最大宽度400px,依然是个问题。为此可以采用另一个组合,把max-width加到图片的父级元素上,从源头上就限制放大的最大值,这样图片与它的相邻元素的比例就不会失调了。这样的设计也是个权衡的结果,因为页面结构千变万化,具体的解决办法,还得分析具体页面。 为了防止放大的过宽,可以通过媒体查询来设置不同分辨率下的阈值。在处理各种浏览器兼容问题时,可以借助Modernizr,一个用于检测浏览器功能的开源JavaScript库,通过Modernizr追加的额外类名来辅助修正样式问题,以及通过检测浏览器是否支持媒体查询来按需加载资源,让老版本IE支持HTML5等。 4.3 模块实现 页面自适应主要的实现方式包含: 4.3.1根据适口属性设计响应式布局: ①加入兼容配置代码 <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">,通过chrome插件GCF(谷歌内嵌浏览器框架)控制IE以Webkit引擎及V8引擎进行样式排版,若用户未安装该插件则以IE最高文档模式进行展
JavaScript:定义行为和动作 (基于对象和事件驱动的客户端脚本语言;也是一种广泛应用于客户端Web开发的脚本语言) 基于对象:网页中的一切元素都是假象!不需要new,即可直接使用 事件驱动:JavaScript的执行都是由事件引发 解释执行:先读到的先执行,后读到的会替代先读的 可以使用任何文本编辑工具编写 JavaScript 代码,然后由浏览器解释执行。 JavaScript常用于实现如下功能: |--控制文档的外观和内容; |--对浏览器的控制; |--与 HTML 表单的交互; |--与用户的交互; |--执行计算等。 1.单击事件:定义在按钮的开始标签中 语法:onclick="js语句" 弹出警告:alert(‘字符串’) 强调:1.js区分大小写 2.字符串单双引号不区分 [removed]标签:页面中专门集中编写JavaScript的区域 js的方法定义:function方法名([参数列表]){ 方法体 [return 返回值] } 注意:js中的方法可以直接写在代码中,不需要“类”包裹 使用方法:方法名()-->方法调用-->立即执行 2.js文件:网页外专门保存js脚本的文件--推荐 强调:HTML、CSS、JS都要使用UTF-8编码保存(window系统) 使用js文件引入网页:[removed][removed] 强调:一旦定义src属性则其中的代码失效 解释执行:语句也可以直接写在js文件中,边解释边执行 3.***调试*** |--①.只有在执行时,才会报错 |--②.错误信息,浏览器页面看不到--没效果 | 解决:控制台--(工具-->JavaScript控制台或F12) | 包含错误信息;指向错误位置的超链接 |--③.打桩:在指定变量位置输出变量或对象的内容 console.log(内容);-->出现在控制台-->日志 4.变量:js中的变量不需要提前指定类型,由赋值时动态决定 所有的变量都用var声明 5.数据类型: |--String(字符串类型) |--Number(数字类型) |--Boolean(布尔类型)0、-0、null、""、false/undefined或NaN,则该对象设置为false。其余都可以当true 6.数据类型的隐式转换: |--数字 + 字符串:数字转换为字符串 |--数字 + 布尔值:true转换为1,false转换为0 |--字符串 + 布尔值:布尔值转换为字符串true或false |--布尔值 + 布尔值:布尔值转换为数值1或0 7.数据类型转换函数 :(方法前不需要对象调用的:全局函数) |--toString():转换成字符串。所有数据类型均可转换为 string 类型; |--parseInt():强制转换成整数。如果不能转换,则返回 NaN(not a number); |--parseFloat():强制转换成浮点数。如果不能转换,则返回 NaN(Not a Number) |--typeof():查询数值当前类型。 |--isNaN():判断是否为数字。返回 true:不是数字/false:是数字 | |--isNan(""):对空字符串不验证,直接返回false | |--如果输入的是字符串类型的数字,返回false--不能判断数据类型,只判断内容 | |--如果输入的是boolean,返回false。因为boolean可以和number类型直接做计算 | |--和任何数字计算都得NaN;和任何数字作比较都得false |--注:[removed]();节点输出,即在当前位置输出括号里的内容 *凡是从页面上进入js的都是字符串类型 8.查找元素:抓住根节点,就等于抓住整棵树 网页的根节点:document对象 要找元素,必须利用document对象(当前网页文件) 精确查找某个ID的元素:document.getElementById(id名); 9.null和undefined: |--null:一个特殊的值,表示“无值”--空对象。数据类型为Object |--undefined:表示声明了变量但从未赋值或者对象属性不存在 10.双等号(==)和全等号(===): |--“==”为确定两个运算数是否相等,“==”运算符会进行类型转换。转换后运算数相等就返回true,否则返回false |--“===”不执行类型转换,即,只有在无需类型转换运算数就相等的情况下,才返回true,否则返回false |--附:if(null)、if(defined)、if(NaN)都相当于if(false) -----猜数字游戏----- 失去焦点时,判断猜对猜错 获得焦点:onfocus 失去焦点:onblur 当事件就发生在获得内容的当前元素上: this直接获得当前内容对象。可以代替当前对象完成一切操作,拥有当前对象的所有属性 前端优化:js中最好用三目运算代替if else 11.String: |--查找:x.indexOf(‘关键字’[,开始位置下标]) | 每次只查找第一次出现的位置 |--替换:x.replace(‘关键字’[,‘替换内容’])--不会修改原x字符串 | 每次只替换第一次找到的 |--查找和替换所有:while循环 | |--String 对象的常用方法有: |--x.toLowerCase()、x.toUpperCase():大小写转换方法; |--x.charAt(index):返回指定位置的字符; |--x.charCodeAt(index):返回指定位置字符的Unicode编码; |--x.indexOf(findstr,index)、x.lastIndexOf(findstr,index): 获取指定字符; |--x.substring(start, end): 获取子字符串; |--x.replace(findstr,tostr):替换子字符串; |--x.split(bystr): 拆分子字符串。 |--String与正则表达式 |--str.match(regExp);--查找str中匹配正则表达式的关键字 | 返回:如果没找到,返回null。若找到,返回1个数组,数组的每个元素是每个找到的匹配关键 | |--str.replace(regExp,"替换值")--替换str中所有匹配的关键字 | 强调:replace方法不改变元字符串,只能返回新字符串。必须用变量接收新字符串 | |--js中正则表达式语法:/正则表达式/[属性后缀]--其中属性后缀,g:全局匹配 i:忽略大小写(仅英文有效) 如果不适用模式匹配方式,将执行原文匹配 结果:如果正则表达式写错,也将执行原文匹配 12.Array笔试题:js中数组声明方式: A new Array(7) B new Array(7,‘a’,true) C [7,'a',true]--js中所有[]都表示数组 D []--实例化一个空数组对象 实例化空数组:var arr=[]; 特点:元素个数不限定,元素类型不限制 13.Array 对象的常用方法: |--1.join()方法--用于把数组中的所有元素放入一个字符串   | eparato表示要使用的分隔符。如果省略该参数,则使用逗号作为分隔符 |--2.toString()方法--可把数组转换为字符串,并返回结果 |--3.concat()方法--用于连接两个或多个数组,该方法不会改变现有的数组 |--4.slice()方法--截取元素。根据给定的范围可从已有的数组中返回选定的元素 14.Function:js中一切都是对象,连方法都是1个对象!! 笔试题:js中方法定义集中方式: A:function compare(a,b){return a-b;}---*可以任意地方声明方法* B:var compare=function(a,b){return a-b;} ---| --其实方法名也是方法对象的变量名;等号右边其实就是1个匿名方法对象 |--*必须在传递之前声明方法对象* C:var compare=new Function('a','b','return a-b') ---| --其实js底层就是new Function;构造函数中的参数都是字符串 结论:所有的方法都是function类型的。 15.JavaScript中的所有事物都是对象,分为三类: |--简单对象:String、Number、Boolean |--组合对象:Array、Math、Date |--复杂对象:Function、Regex、Object等 16.Array排序: |--升序:function compare(a,b){return a-b;} |--降序:function compare(a,b){return b-a;} 比较器用法:arr.sort(比较器方法名); 遍历:for(var i=0;i<arr.length;i++)--等同Java Array倒转:arr.reverse();用于颠倒数组中元素的顺序 17.Array元素操作: |--arr.push(x);向数组增加1个新元素x(位于数组最后位置) |--arr.splice(开始位置,删除几个[,x1,x2,x3...]) |--arr.indexOf(x) 返回x在数组中的下标---经常用于判断元素是否存在。如返回-1,x则不在数组中 18.Number对象: |--x.toFixed(num):可把Number四舍五入为指定小数位数(num:0-20)的数字 |--x.toString():用于把一个 Number 对象转换为一个字符串,并返回结果 19.正则表达式对象:(专门用于查找和验证) reg.test(‘要验证的完整字符串’)匹配返回true,否则返回false 强调:如果正则表达式使用了^和$,必须完整匹配才行。反之则部分匹配 20.Date对象:(计算方法:先get,再计算,最后set回去) |--1.每个分量上都有一对get/set方法 |--2.命名:get|set年月日,单数;get|set时分秒,复数(s) |--3.除了日期从1开始到31结束外,其余都从0开始到-1结束 |--Date对象的常用方法 |--1.获取日期数据 getDate()、getDay()、getFullYear()等 |--2.修改日期数据 setDate()、setDay()、setFullYear()等 |--3.获取日期格式的字符串 toString()、toLocaleTimeString()、toLocaleDateString()等 21.argument参数:所有方法都隐藏的一个数组对象 作用:不设置任何的形参的情况下,自动接收所有传入参数 arguments.length:获得参数个数 arguments[i]:获得每个参数--都要判断和类型转换 22.全局函数:不用任何对象点(.)就可以调用--可用于所有的 JavaScript 对象 常用的全局函数有:parseInt/parseFloat、isNaN、eval、decodeURI/encodeURI等。 encodeURI和decodeURI: |--encodeURI:可把字符串作为 URI 进行编码 |--decodeURI:decodeURI()函数可对encodeURI()函数编码过的 URI 进行解码 eval() 函数可计算某个字符串,并执行其中的的JavaScript代码 23.BOM:操作浏览器窗口的对象模型。 --即浏览器对象模型 ,用来访问和操纵浏览器窗口,使 JavaScript 有能力与浏览器“对话” DOM:操作网页中元素对象的对象模型--即文档对象模型,用来操作文档 window对象的常用属性: |--document:窗口中显示的 HTML 文档对象 |--history:本次浏览过窗口的历史记录 | --前进:history.go(1);后退:history.go(-1);刷新:history.go(0); |--location:窗口文件地址对象(地址栏) |--event:事件对象 |--screen:屏幕对象 |--name:窗口名称 |--opener:打开当前窗口的 window 对象 |--navigator:有关浏览器的信息 |--cookieEnable:判断当前浏览器是否启用cookie |--userAgent:获得浏览器的名称和版本号 window 对象的常用方法有: |--alert();--警告框--只能点确认 |--confirm();确认框--可以选择确认或取消 |--prompt();对话框--用于显示可提示用户进行输入 |--window.open('url'[,'name']):打开1个选项卡 |--window.close():关闭当前选项卡 24.定时器:凡是网页中自动动态的效果都是用计时器实现的 |--周期性定时器:每隔一个时间段自动执行一次,循环执行 | |--setInterval() 启动-->用于启动一个周期性定时器 | 语法:timer=setInterval(方法名,间隔毫秒数) |--clearInterval() 停止-->用于停止一个周期性定时器 语法:timer=clearInterval(timer) |--1次性定时器:先等待一段时间,再自动执行一次,自动结束 |--setTimeout() 启动-->用于启动一个一次性定时器 |--clearTimeout() 停止-->用于停止一个一次性定时器 附: |--表单控件,读写内容:.value |--普通html元素,要想读写开始标签和结束标签之间的内容:[removed] 计时器:1.做什么事:方法; 2.一个变量:存计时器的线程号 3.何时启动计时器:事件 25.document:1.代表当前网页文档; 2.所有网页元素的根元素; 3.查找和操作元素,都要依靠document; 节点:nodeName--标签名或属性名 DOM操作样式:对象.className属性 等效于<标签class=""> DOM树:当前节点向上:txtObj[removed]() 向下:txtObj.getElementByTagName() 26.表单中查找控件对象:document.getElementsByName('name属性') DOM增加新节点:两种方法 创建新节点:document.creatElement('标签名') --此时新元素对象仅在内存中游离,页面看不见! 添加新节点:找到父元素! |--appendChild() 方法只能将新节点作为某节点的最后一个子节点 | --此时新元素追加到了父元素的末尾 |--parentNode.insertBefore()(新元素对象,A)--其中A为新元素要插入位置的后一位元素 DOM删除元素:node.removeChild(childNode)--node为父节点,childNode为要删除的节点 27.HTML DOM Select和Option对象: select对象:代表HTML表单中的一个下拉列表,每个<select> 标签即表示一个 Select 对象 |--属性: |--options:返回包含<select>元素中所有<option>的一个数组,每个元素对应一个<option>标签,索引从0开始 |--selectedIndex:设置或返回下拉列表中被选选项的索引号 |--size:设置或返回下拉列表中一次显示显示的选项数 |--方法: |--add(option):用于向<select>添加一个<option>元素。 |--remove(index):从下拉列表删除选项 Select对象有事件onChange当改变选择时调用的事件句柄。Select对象的onChange属性引用了一个事件句柄函数。当用户选 中一个选项,或者取消了对一个选项的选定时,就会调用该句柄。这个事件不会指定新的选项是什么,必须通过Select对象的 selectedIndex属性,或者各个Option对象的selected属性来确定这一点。 option对象:代表HTML表单中下拉列表中的一个选项,每个<option>标签表示一个Option对象 |--创建:var o = new Option(text,value); |--属性: |--index:返回下拉列表中选项的索引位置 |--text:设置或返回选项的文本值; |--value:设置或返回选项的值; |--selected:设置或返回选项的 selected 属性的值,该属性设置选项的当前状态,如果为 true,则该选项被选中 28.table对象: rows数组:表中所有行对象 方法:var row=table.iusertRow(i);--返回刚添加的新行 table.deleteRow(i); --i:行的下标。如果i取-1,即在表格末尾追加一行 tableRow对象: cells数组:当前行中所有单元格的对象 方法:var 刚添加的新单元格=tr.iusertCell(i); tr.deleteCell(i); tableCell对象:取单元格内容--td[removed] 29.事件冒泡: |--1.由外向内,捕获事件:记录哪级元素有什么事件 |--2.由内向外,冒泡执行:按记录的顺序由内向外执行 取消冒泡: |--1.获得事件对象!--event onclick="func(event)"--其中event和this都是关键字,表示事件对象 func(e)--此时e就是事件对象 |--2.取消冒泡:e.cancelBubble=true; 何时用:如果大量子元素拥有相同事件,应将相同事件统一定义在1个父元素上1次即可
js-validator 是 Laravel 风格的 JavaScript 对象验证库。使用 js-validator 来验证对象或者 JSON 是否符合规则非常方便,而且具有很好的可扩展性。举个例子var example = {       text: 'Hello world!',       date: '2015-07-07',       comments: null,     },     rules = {       text: 'required|string',       date: 'date|date_format:yyyy-MM-dd',       comments: 'integer',     }; console.log(Validator.validate(example, rules)); // => Object {status: "failed", field: "comments", rule: "integer"}基本用法引入validator.js(原生JavaScript)[removed] [removed]或[removed] [removed]初始化(非原生JavaScript)Node.jsnpm install ppoffice/js-validator --savevar validator = require('js-validator');RequireJSrequirejs(["../src/validator"], function(validator) {   ... });Sea.jsdefine(function (require, exports, module) {   var validator = require('./validator');   ... });制定验证规则对于同一个对象属性,你可以并列制定几个不同的规则进行限定,使用|作为不同规则间的分割符。var rules = {   text: 'required|string',   date: 'date|date_format:yyyy-MM-dd',   comments: 'integer', };验证validator.validate(object_to_be_tested, rules);如果待验证对象符合规则,validate函数返回true;否则返回带有验证状态、失败的属性和对应失败的规则信息的对象。添加验证器使用add方法为Validator添加验证器,第一个参数为验证器名称,第二个参数为验证方法,可以为正则表达式对象或者函数。当验证方法为函数时,其第一个参数必须为当前验证域的值,后面的参数根据需求而定,验证成功时结果返回true。validator.add('older_than', function (value, age) {   return value > age; });var rules = {   age: 'integer|older_than:17', };可用的验证规则验证规则规则含义accepted验证域必须为yes、on、1、或者true。 这个规则常用语验证“同意使用条款”表单。after:date验证的日期域的日期必须在指定日期之后。alpha验证域必须由纯英文字符组成。alpha_dash验证域必须由英文字符、数字、中划线或者下划线组成。alpha_num验证域必须由英文字符或者数字组成。array验证域必须为数组对象。before:date验证的日期域的日期必须在给定日期之前。between:min,max验证域的值必须在min和max之间,验证域可以是数字或者字符串。boolean验证域的值可以看作是布尔值,可以是true,false,1,0,"1","0",'1' and '0'。date验证域必须为日期字符串形式,可以被Date.parse方法解析。date_format:format验证域必须符合制定的日期格式,允许的日期格式参照源代码中的dateFormat方法。different:field验证域的值必须域指定域的值不同。digits:value验证域必须为数字,且其位数为给定的位数。digits_between:min,max验证域必须为数字,且其位数在min和max之间。email验证域必须为电子邮件地址格式。in:foo,bar,...验证域的值必须在给定的允许值列表中。integer验证值必须为整数。ip验证值必须为IP地址形式(支持IPv4与IPv6)。max:value验证域的值必须小于等于max,验证域可以是数字或者字符串。mimes:foo,bar,...验证值的扩展名必须在给定的扩展名列表中。min:value验证域的值必须大于等于min,验证域可以是数字或者字符串。not_in:foo,bar,...验证域的值必须不在给定的值列表中。numeric验证域必须为数字。regex验证域必须符合指定的正则表达式(JavaScript风格)。required验证域必须存在。required_if:field,value,...如果给定的域的值等于给定的值,验证域必须存在。这里的条件可以是多个域和值,它们之间的关系为“与”。required_with:foo,bar,...如果给定的域之中任何一个存在的话,验证域必须存在。required_with_all:foo,bar,...仅当所有给定的域存在时,验证域必须存在。required_without:foo,bar,...如果给定的域之中任何一个不存在的话,验证域必须存在。required_without_all:foo,bar,...仅当所有给定的所有域都不存在时,验证域必须存在。same验证域的值必须域指定域的值相同。size:value验证域的大小必须等于指定大小。对于字符串来说,验证域的字符串长度必须等于给定长度。对于数字来说,验证域的值必须等于给定值。string验证域必须为字符串。url验证域必须为URL地址。当前不支持含有非英文(中文等)字符的地址。测试文件入口./test/index.html     原生JavaScript支持测试./test/node.js        Node.js支持测试./test/requirejs.html RequireJS支持测试./test/seajs.html Sea.js支持测试 标签:jsvalidator

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值