通过对JavaScript的学习,知道它是由C语言演变而来的,而且在很大程度上借用了Java的语法,而Java又是由C和C++演生而来的,所以JavaScript和C有许多相似的语法特点。JavaScript的出现,可以使得信息和用户之间不仅只是一种显示和浏览的关系,而是实现了一种实时的、动态的、可交互的表达能力。从而基于CGI静态的HTML页面将被可提供动态实时信息,并对客户操作进行反应的Web页面取代。JavaScript 脚本正是满足这种需求而产生的语言。它深受广泛用户的喜爱和欢迎,它是众多脚本语言中较为优秀的一种。
JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言。使用它的目的是与HTML超文本标记语言、Java 脚本语言一起实现在一个Web页面中链接多个对象,与Web客户交互作用。从而可以开发客户端的应用程序等。它是通过嵌入或调入在标准的HTML语言中实现的。它的出现弥补了HTML语言的缺陷,它是Java与HTML折衷的选择,具有以下几个基本特点:
JavaScript是一种脚本语言,它采用小程序段的方式实现编程。像其它脚本语言一样,JavaScript 同样已是一种解释性语言,它提供了一个简易的开发过程。它的基本结构形式与C、C++、VB等语言十分类似。但它不像这些语言一样,需要先编译,而是在程序运行过程中被逐行地解释。它与HTML标识结合在一起,从而方便用户的使用操作。
JavaScript是一种基于对象的语言,同时以可以看作一种面向对象的。这意味着它能运用自己已经创建的对象。因此,许多功能可以来自于脚本环境中对象的方法与脚本的相互作用。
JavaScript的简单性主要体现在:首先它是一种基于Java 基本语句和控制流之上的简单而紧凑的设计, 从而对于学习Java是一种非常好的过渡。其次它的变量类型是采用弱类型,并未使用严格的数据类型。
JavaScript 是一种安全性语言,它不允许访问本地的硬盘,并不能将数据存入到服务器上,不允许对网络文档进行修改和删除,只能通过浏览器实现信息浏览或动态交互。从而有效地防止数据的丢失。
JavaScript 是动态的,它可以直接对用户或客户输入做出响应,无须经过Web 服务程序。它对用户的反映响应,是采用以事件驱动的方式进行的。所谓事件驱动,就是指在主页中执行了某种操作所产生的动作,就称为“事件”。比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后,可能会引起相应的事件响应。
根据JavaScript脚本编写的方式,脚本的执行也分为多种情况。当浏览器打开一个HTML文档时它将从头开始解释整个文档,而有一些脚本如函数function,则会在它们被调用的时候运行,脚本函数的调用往往都是通过事件来进行驱动的,如在一个HTML 文档被装载onLoad的时候可以执行脚本函数。
作为一名开发人员(WEB前端JavaScript开发),不规范的开发不仅使日后代码维护变的困难,同时也不利于团队的合作,通常还会带来代码安全以及执行效率上的问题。本人在开发工作中就曾与不按规范来开发的同事合作过,与他合作就不能用“愉快”来形容了。现在本人撰写此文的目的除了与大家分享一点点经验外,更多的是希望对未来的合作伙伴能够起到一定的借鉴作用。当然,如果我说的有不科学的地方还希望各路前辈多多指教。下面分条目列出各种规范要求,这些要求都是针对同事编码毛病提出来的,好些行业约定的其它规范可能不会再提及。
对于大型的JavaScript项目,一般会在产品发布时对项目包含的所有JavaScript文件进行压缩处理,比如可以利用Google Closure Compiler Service对代码进行压缩,新版jQuery已改用这一工具对代码进行压缩,这一般会去掉开发时写的注释,除去所有空格和换行,甚至可以把原来较长的变量名替换成短且无意义的变量名,这样做的目的是加快文件的下载速度,同时也减小网站访问带来的额外数据流量,另外在代码保护上也起到了一点点作用,至少压缩后的代码即使被还原还是没那么容易一下读懂的。要想代码能正确通过压缩,一般要求语句都要以分号正常结束,大括号也要严格结束等,具体还要看压缩工具的要求。所以如果一开始没有按标准来做,等压缩出错后再回去找错误那是浪费时间。
一般较为完善的开发工具(比如Aptana Studio)都有代码“自动格式”化功能,这一功能帮助实现统一换行、缩进、空格等代码编排,你可以设置自己喜欢的格式标准,比如左大括号{是否另起一行。达到这个要求的目的在于方便你的开发团队成员拿你代码的一个副本用IDE自动格式化成他喜欢或熟悉的风格进行阅读。你同事需要阅读你的代码,可能是因为你写的是通用方法,他在其它模块开发过程中也要使用到,阅读你的代码能最深入了解方法调用和实现的细节,这是简单API文档不能达到的效果。
这一要求算是最基本的,这有利于在方法调用处看到方法的具体传参提示,也可以利用配套文档工具生成html或其它格式的开发文档供其他团队成员阅读,你可以尝试使用jsdoc-toolkit。如果你自动生成的API是出自一个开放平台,就像facebook.com应用,那么你的文档是给天下所有开发者看的。另外编写完整注释,也更方便团队成员阅读你的代码,通过你的参数描述,团队成员可以很容易知道你编写的方法传参与实现细节。当然也方便日后代码维护,这样即使再大的项目,过了很长时间后,回去改点东西也就不至于自己都忘记了当时自己写的代码是怎么一回事了。
使用规范有意义的变量名可以提高代码的可读性,作为大项目开发成员,自己写的代码不仅仅要让别人容易看懂。开发大项目,其实每个人写的代码量可能都比较大,规范命名,日后自己看回自己的代码也显的清晰易懂,比如日后系统升级或新增功能,修改起代码来也轻松多了。如果到头发现自己当初写的代码现在看不太懂了,那还真是天大的笑话了。
当然,使用有意义的变量名也尽量使用标准的命名,比如像这里:var me = this也许没有var self = this好,因为self是Python中的关键字,在Python中self就是通常语言this的用法。再看下面一个例子,加s显然比没有加来的科学些,这样可以知道这个变量名存的是复数,可能是数组等:
var li = document.getElementsByTagName('li')var lis = document.getElementsByTagName('li')
JavaScript作为一门动态脚本语言,灵活性既是优点也是缺点,众所周知,动态语言不同层次开发人员对实现同样一个功能写出来的代码在规范或语法上会存在较大的差别。不管怎么样,规范编码少搞怪,不把简单问题复杂化,不违反代码易读性原则才是大家应该做的。比如这语句:typeof(b)== 'string' && alert(b)应该改为:if(typeof(b)== 'string')alert(b),像前面那种用法,利用了&&运算符解析机制:如果检测到&&前语句返回false就不再检测后面语句,在代码优化方面也有提到把最可能出现的情况首先判断,像这种写法如果条件少还好,如果条件较多而且语句也长,那代码可读性就相当差。
又比如:+function(a){var p = a;}('a')应该改为:(function(a){var p = a;})('a'),其实function前面的+号与包含function的()括号作用是一样的,都是起运算优先作用,后者是常见且容易看明白的防止变量污染的做法,比如好些流行JavaScript框架就是采用后面这种方式。
再说个降低代码可读性的例子,如:function getPostionTxt(type){return type == 2 ? “野外” :(type == 3 ? “商城” :(type == 4 ? “副本” : null));}应该改成:function
getPostionTxt(type){var typeData={“2”:“野外”,“3”:“商城”,“4”:“副本”};if(typeData[type])return typeData[type];else return null;}。如果type是从0开始不间断的整数,那么直接使用数组还更简单,这种结果看起来就清晰多了,看到前面那种多层三元表达式嵌套头不晕吗。
语句中不应该出现中文我想一般人都知道,虽然这样做不影响程序运行,但是显然有背行业标准要求,当然我们也不是在使用“易语言”做开发。关于这一个问题,我本来不想把它拿出来说的,但我确实遇到有人这样做的,也不知道是不是因为他的英语实在太烂了,至少还可以用拼音吧,另外寻求翻译工具帮忙也不错的选择。我举例如下,像以下写法出现在教学中倒还可以理解: this.user['名字'] = '张三' 或者 this.user.名字 = '张三'
固定数量参数的函数内部不使用arguments去获取参数,因为这样,你定义的方法如果包含较多的脚本,就不能一眼看到这个方法接受些什么参数以及参数的个数是多少。比如像下面: var $ = function(){return document.getElementById(arguments[0]);}应该改成:var $ = function(elemID){return document.getElementById(elemID);}
虽然知道事件可以动态绑定,比如使用addEventListener或者使用jQuery的bind方法,也知道采用动态事件绑定可以让XHTML更干净,但是一般情况下我还是建议直接把事件写在DOM节点上,我认为这样可以使代码变得更容易维护,因为这样做,我们在查看源代码的时候就可以容易地知道什么Element绑定了什么方法,简单说这样更容易知道一个按钮或链接点击时调了什么方法脚本。
不要过于依赖DOM的一些内容特征来调用不同的脚本代码,而应该定义不同功能的方法,然后在DOM上调用,这样不管DOM是按钮还是链接,方法的调用都是一样的,比如像下面的实现显然会存在问题:
因为JavaScrip是弱类型的,在编写函数的时候有些人对于返回类型的处理显得比较随便,我觉得应该像强类型语言那样返回,看看下面的两个例子: function getUserName(userID){ if(data[userID])
return “";} 这个方法如果在C#中定义,我们知道它准备返回的数据类型应该是字符串,所以如果没有找到这个数据我们就应该返回空的字符串,而不是返回布尔值或其它不合适的类型。这并没有影响到函数将来的调用,因为返回的空字符串在逻辑判断上可被认作“非”,即与false一样,除非我们使用全等于“===”或typeof进行判断。
使用标准肯定是有好处的,那么为什么还是有人不使用标准呢?我想这可能是懒或习惯问题。也许还会有人跟我说,少写引号可以减轻文件体积,我认为这有道理但不是重点。对于服务器返回的JSON数据,使用标准结构可以利用Firefox浏览器的JSONView插件方便查看(像查看XML那样树形显示),另外你如果使用jQuery做开发,最新版本jQuery1.4+是对JSON格式有更高要求的,具体的可以自己查阅jQuery更新文档。比如:{name:”Tom“}或{'name':'Tom'}都应该改成{”name“:”Tom“}。
当代码调整或重构后,之前编写的不再使用的代码应该及时删除,如果认为这些代码还有一定利用价值可以把它们剪切到临时文件中。留在项目中不仅增加了文件体积,这对团队其它成员甚至自己都起到一定干扰作用,怕将来自己看回代码都搞不懂这方法是干什么的,是否有使用过。当然可以用文档注释标签@deprecated把这个方法标识为不推荐的。
对于大型项目,一般会有部分开发成员实现一些通用方法,而另外一些开发成员则要去熟悉这些通用方法,然后在自己编写模块遇到有调用的需要就直接调用,而不是像有些开发者喜欢“单干”,根本不会阅读这些通用方法文档,在自己代码中又写了一遍实现,这不仅产生多余的代码量,当然也是会影响团队开发效率的,这是没有团队合作精神的表现,是重复造轮子的悲剧。比如在通用类文件Common.js有定义function $(elemID){return document.getElementById(elemID)}那么就不应该在Mail.js中再次出现这一功能函数的重复定义,对于一些复杂的方法更应该如此。
当有几个方法都可以实现同类功能的时候,我们还是要根据场景选择使用最合适的方法。下面拿jQuery框架的两个AJAX方法来说明。如果确定服务器返回的数据是JSON应该直接使用$.getJSON,而不是使用$.get得到数据再用eval函数转成JSON对象。如果因为本次请求要传输大量的数据而不得以使用$.post也应该采用指定返回数据类型(设置dataType参数)的做法。如果使用$.getJSON,在代码中我们一眼能看出本次请求服务器返回的是JSON。温馨提示:jQuery1.4后,如果服务器有设置数据输出的ContentType,比如ASP.NET C#设置 Response.ContentType = ”application/json“,那么$.get将与$.getJSON的使用没有什么区别。
{ ”name“:”Tom"}
1、JavaScript变量可以使用var事先进行声明,也可以用赋值语句隐藏声明。对于一个变量,它存在指的是它拥有值。检查一个变量是否有值的方法是使用Window对象,因为JavaScript声明或使用的变量都属于Window对象的属性。
2、JavaScript函数使用function命令声明,如果函数有返回值,在调用时就可以使用指定语
句获取返回值。当调用函数传入参数时,函数即使没有指明参数名称,也一样可以使用参数数组的对象arguments获取参数的个数和参数值。
3、局部变量:在函数内声明,只能在函数内的程序使用;全局变量:在函数外声明,整个
JavaScript程序的函数和程序代码都可以使用。
4、自定义JavaScript的对象:直接建立Object对象副本后,可新增所需的属性和方法;建
立对象的构造函数,定义属性和方法,使用new命令建立对象副本时,构造函数传入的参数是对象的属性值,如果在建立副本时未指定属性值,一样可以在建立副本后再设置对象的属性值。
5、JavaScript的内置对象:Array、Date、Function、Math、String···
6、DHTML对象模型:是将浏览器和HTML文件的标签都对象化,以便JavaScript程序代
码可以轻易地操控浏览器和访问HTML标签的对象。
版本3.xBOM、版本4.xDHTML=BOM+DHTML DOM、版本5.xBOM+W3C DOM7、DOM对象模型是一种拥有扩展性的文件架构
DOM Level 0-DHTML DOM、DOM Level 1 – W3C DOM
DHTML DOM 和 W3C DOM 的差异在于DHTML DOM只是将整份HTML文件都对象化,每一个HTML标签都对应有标签对象;W3C DOM属于一种通用的文件浏览和访问机制,可以将整份HTML或XML文件视为一种阶层架构的树状结构。
8、DHTML对象模型的完整架构是由BOM的根对象Window开始。
9、Window对象:浏览器的窗口对象
浏览器的状态栏:属性defaultStatus、status
定时器:方法setTimeout(express,time)clearTimeout()
只会运行一次,在经过设置的一段时间后,运行指定的函数或表达式
方法setInterval(express,time)clearInteval()
一旦启动就可以周期性地运行函数或表达式
窗口的打开与关闭:open(url,winName)方法可以打开一个全新的窗口,并且使用JavaScript程序代码获取新窗口的Window对象;在父窗口使用winID访问新窗口的属性和方法,Window对象的opener属性可以参考到父窗口的Window对象。
Close()方法可以关闭一个窗口。
10、Window对象内置对话框:
alert(message)显示一个警告信息的窗口,参数就是显示的信息内容。
confirm(message)一个确认的对话框,参数为信息内容,传回true表示单击”确认”按钮,false为”取消”按钮。
Prompt(msg,value)显示输入文字内容的对话框,参数msg为信息内容,value为默认值,传回用户输入的字符串。
showModelessDialog(url,arguments,features)显示一个新的窗口,参数url为显示的网页。arguments为传送到显示网页的参数,可以是任何数据,例如对象;在显示的网页中可以使用window对象的dialogArguments属性获取传递过来的参数。feature参数可以设置对话框的外观。
11、更改窗口的尺寸和位置:
Window对象的属性:screenLeft传回左边界的坐标 screenTop传回上边界的坐标
Window对象的方法:moveTo(x,y)将浏览器移到坐标x和y的位置
moveBy(offsetx,offsety)将浏览器目前的位置移动参数的位移量
resizeTo(width,height)将浏览器窗口调整为参数width和height的尺寸resizeBy(offsetx,offsety)将浏览器窗口尺寸放大或缩小
12、窗口内容的卷动
Window对象的方法:scroll(x,y)、scrollTo(x,y)滚动窗口内容到指定的位置
scrollBy(offsetx,offsety)从目前窗口内容的位置,滚动参数的位移量
13、Navigator对象:获取浏览器和系统资源的信息
14、History对象:保存历史记录
15、Location对象:保存目前URL网址的详细数据
属性:href 返回完整的URL字符串,重设该属性可以转向链接到其他的网址
方法:reload()重新加载现在打开的HTML文件,如同浏览器工具栏中的“刷新”按钮replace(url)转向到参数url的网址,如同设置href属性
16、Document对象:
打开与写入文件:方法open(“text/html”,”replace”)可以清除目前的文件内容,第一个参数是MIME类型,text/html就是html文件,第二个参数replace可以取代历史记录,浏览器就无法按工具栏的“上一页”按钮返回上一页。
方法 write()或writeln()输出HTML文件的内容
方法 close()显示输出的内容
获取文件的指定元素:getElementById()
17、JavaScript的Cookies处理:Cookies可以在客户端的计算机保存所需的数据,可以使用
Document对象的cookie属性处理Cookie的访问,返回的字符串使用“;”分隔每一个Cookie
新增Cookie函数:saveCookie(name,value,expires)
获取Cookie值函数:getCookie(name)
检查Cookie是否存在的函数:checkCookieExit()
删除Cookie函数:deleteCookie(name)
18、DHTML DOM的Collection对象:
document.all对象集合可以获取HTML文件中所有的标签对象,这是一个数组对象,依
照标签在HTML文件出现的顺序,可以使用索引值访问指定的标签对象,如document.all[i]。也可以直接使用id属性获取,如document.all(“myId”)或myId。
如果HTML文件拥有同名的id属性,获取的仍然是一个集合,还需要使用item()方法
获取指定的标签对象。
同理,myBody.all对象集合可以获取id为myBody的body区域块中的所有标签对象。在all对象集合的所有标签对象中,可以进一步使用tags()方法筛选出指定标签的对象集
合,如document.all.tags(“p”),可使用length属性获取共有多少个
标签。
19、HTML文件的阶层架构:
HTML文件中的标签属于一种阶层架构,可以使用parentElement属性获取上一层的标
签对象,用children对象集合获取下一层标签的对象集合,这个对象集合可以进一步使用item()方法获取指定的标签对象。
20、访问HTML标签的内容:
innerText()访问标签对象的内容
innerHTML()访问标签对象内的子标签和内容,不包含标签对象本身
outerText()访问标签对象的内容,可以用来取代整个标签对象
outerHTML()访问标签对象的子标签和内容,包括标签对象本身
21、访问HTML标签的属性:
在获取HTML标签的对象后,也可以访问标签对象的属性
22、CSS层级式样式表:
HTML标签都拥有默认的显示样式,CSS能够重新定义HTML标签的显示效果,也可以自定义新的样式名称。
如果是class属性,则定义的样式名称以”.”句点开始,可以定义多个值,并且可以应用到多个标签上
如果是id属性,则定义的样式名称以”#”开始,可以定义多个值,但只能应用到一个标签上
23、动态样式CSS:
CSS样式属性可以对应Style对象的属性,在获取HTML标签对象后,可以访问Style对象的属性,如:objEle.style.color24、DHTML的事件:
事件就是在浏览器显示和阅读HTML文件时,鼠标、键盘或文件加载等操作所触发的一些动作
鼠标事件:onclick 单击鼠标左键 ondbclick 双击鼠标左键 onmousemove 移动鼠标onmouseout 鼠标指针离开HTML标签
onmouseover鼠标指针进入HTML标签
onmousedown 按下鼠标键onmouseup 放开鼠标键
键盘事件:onkeydown 当按下键盘按键 onkeyup 放开键盘按键
其他常用事件:onload 当浏览器加载HTML文件后
onunload 当用户离开浏览器,或是加载其他网页时
onfocus 用户指定对象拥有处理权
onblur 用户离开拥有处理权的对象
onchange 用户更改对象的内容
onsubmit 用户发送窗体字段
onreset 用户重设窗体字段
onselect 用户选择了网页内容
25、JavaScript的事件处理:
方式一:在HTML标签的属性中设置JavaScript的事件处理函数
如:
方式二:在对象的属性中设置JavaScript的事件处理
如:document.myForm.myButton.onclick = showAlert;
如果事件是由Window或Document等上层对象所触发,此时只需设置对象的事件属性,就可以指定事件的处理函数
取消事件的处理:可以取消用户新增的事件处理函数,也可以取消浏览器默认的事件处
理函数。
当事件触发后,浏览器默认的事件处理函数就会进行事件的处理,拥有默认处理函数的 常见事件有:元素 事件onclick 单击可以显示其他URL网址的HTML文件元素
元素document 事件oncontextmenu 单击鼠标右键可以显示一个快捷菜单 方式一:将事件属性设为null
如:document.myForm.myButton.onclick = null;
方式二:使用自定义的事件处理函数,函数传回false时就可取消事件
如:return false;
方式三:将event对象的returnValue属性设置为false
如:event.returnValue = false;
26、Event对象:
当事件触发时就会产生一个Event对象,它的属性用来记录事件触发时的一些数据Event对象是一个全局属性,不能把Event对象作为参数传递给事件处理函数属性:srcElement 返回事件触发时的标签对象
returnValue 设置和取消事件的返回值
27、DHTML DOM的窗体对象的架构
使用字段名称访问窗体字段:如 document.myForm.myUserName.value
使用forms和elements对象访问字段:如 document.forms[0].elements[0].value28、Form对象
属性:name、action、method、target
方法:submit()发送窗体字段到服务器reset()重设窗体的各字段为默认值
29、Input对象
属性:name、type、value、disabled、form、readonly、maxlength
针对单选按钮和复选框的属性:checked
方法:blur()设置Input对象失去处理权focus()设置Input对象拥有处理权
select()选择Input对象click()触发其他字段的onclick事件
30、Select对象
属性:name、disabled、length、options、selectedIndex、size、multiple
方法:blur()设置Select对象失去处理权focus()设置Select对象拥有处理权
add(objOption, index)新增一个
使用构造函数建立Option对象:var objOption = new Option(text, value)
remove(index)删除参数索引值的选项
31、Option对象
属性:value、text、selected32、Textarea对象
属性:cols、rows
方法:blur()设置Textarea对象失去处理权focus()设置Textarea对象拥有处理权
select()选择Textarea对象
33、JavaScript的窗体字段验证
验证属性: 文字、密码和备注 value
单选按钮和复选框 checked
下拉式菜单selected
方法:submit()onsubmit事件
34、Table对象
属性:border、cellPadding、cellSpaing、rows
方法:insertRow(index)在表格插入一个新行,插入的位置是在参数的行号之前deleteRow(index)在表格删除传入参数行号的表格行
35、TableRow对象
属性:cells、rowIndex
方法:insertCell(index)插入单元格,是插在传入的单元格编号之前
deleteCell(index)删除传入单元格编号参数的单元格
36、TableCell对象
属性:colSpan、rowSpan、cellIndex37、Window对象的frames对象集合当浏览器显示框架页时,框架页的每一个框架都是一个Window对象,使用frame[]对象集合获取各框架的Window对象,也可以直接使用框架标签的名称来获取各框架的Window对象。
Window对象的属性:self 返回目前的Window对象
parent 返回目前框架的上一层对象
top 如果是一个嵌套框架,top就是最上层的Window对象
38、FrameSet对象
属性:name、cols、rows39、Frame对象
属性:name、src40、Iframe对象
属性:name、src41、Anchor对象
属性:href、target 访问显示的框架名称或窗口(默认值有_blank _self _parent)方法:blur()设置Anchor对象失去处理权focus()设置Anchor对象拥有处理权
42、W3C DOM浏览节点
DHTML DOM 和W3C DOM最主要的差异就是获取节点的方式
DHTML DOM需要使用id/name属性或者对象集合等不同方式才能获得标签对象
W3C DOM提供一致的走访方式,只要建立好树状结构,所有能走访到的节点就是标签
对象
只读属性:firstChild、lastChild、parentNode、nextSibling、previousSibling、nodeName读/写属性:nodeValue访问文字节点的内容
对象集合:childNodes子节点的对象集合、attributes节点属性的对象集合43、Ajax应用程序架构
传统Web应用程序架构:浏览器向web服务器提出HTTP请求,web服务器处理后产生HTML文件,就可以传回浏览器来显示。服务器可能单纯传回请求的HTML文件,或运行服务器网页技术ASP、JSP等,动态产生或进一步从数据库取出所需数据来建立相应的HTML文件。在客户端浏览器只是单纯显示HTML网页内容,而且浏览器需要等待服务器响应后,才能显示网页内容。
Ajax应用程序架构:最大差异是在客户端新增JavaScript编写的Ajax引擎来处理HTTP请求,并获取服务器的响应数据,更新网页接口的部分内容。用户不再需要等待服务器的相应,就可以进行其他操作。
44、XML的基础
XML是可扩展的标识语言,用来描述数据,需要自行定义描述数据所需的各种标签。XML文件的组成元素:
元素、属性、实体参考:< <> >& &'„" “
批注:PCDATA:XML文件的文字内容
CDATA区块: 通常用来保存程序代码数据
PI: 允许XML文件包含传送给应用程序的命令。
DTD:XML文件的验证机制,可以检查XML标签和文件架构是否正确。
45、XHTML的基础
XHTML仍然使用HTML4.0版的标签,它是W3C制定用来取代HTML4.0版的下一代HTML。XHTML文件是良好格式的HTML,它必须遵循XML文件的编写规则: ·不可以省略结尾标签,保证所有标签都成对出现
·标签和属性都是使用小写的英文字
·属性值需要使用引号括起来
·name属性使用id属性取代
46、XML DOM
XML DOM是W3C DOM针对XML文件所提供应用程序的标准的程序接口,可以通过接口来访问各种节点对象。
两个基本点
1.择重避轻,有所取舍。
核心优先
通常来讲,系统是都是庞大的,不要太完美主义,先抓住重点,理解那些是我们的核心页面,那些页面对我们来说是最重要的,那些页面访问量最高,核心优先。
主要问题在那,抓住瓶颈点。
治病要医本。优化前,需要进行细致的分析,抓住主要瓶颈点,对症下药。优化那么多的方子,别全采用,通常几个就能达到效果 2.简单有效才是硬道理
越是简单的东西越容易控制,越不容易出错,尽量避免将系统设计的过于庞大,过于复杂,记住,这是在做产品,而不是在搞研发。很多看似很蠢的方法,往往越是有效。
新技术,新方法的引用是具备一定的风险的,要评估,要慎重。
Js处理
1.尽量放到页面尾部
Js的加载时阻塞页面的,没下载完毕后面的内容不会出来,所以尽量避免把JS放到页面头部,按照经验估计,整个页面中所用的JS逻辑,90%都是可以放到页面尾部。2.延迟加载(按需加载)
很多的业务逻辑并非每次都使用也不是要立即使用,首次加载过程中仅仅加载那些必须的,只有当必要的条件触发,才去加载请求必要的JS.比如说权限验证通过,加载管理模块。点击发表文章按钮,加载与发表文章有关的验证和处理函数。
如果写过C++的肯定会接触过动态库和静态库,这个与之类似,什么时候需要什么时候再加载,首次打开页面肯定会清净了许多,而且业务逻辑也由此分离开来,管理和维护也会方便很多,毕竟减少了那么多的耦合。
按照BBS项目经验估计,普通页面的所有业务逻辑中需要在首次请求中加载的不到50%,我们的JS又由此砍掉了一半。3.合并JS,减少请求
请求多个小文件的效率远小于请求一个大文件的效率,因为需要多次DNS解析,多次连接,浏览器和server端也需要进行多次开启进程、权限验证和预处理,以及 http请求在数据包传递上的一些问题。
所以尽量避免在页面中加载一堆的js 文件,需要先讲需要的小的JS合并成一个大的JS文件统一输出,页面因此被卡住的时间肯定会减少很多。
为了提高开发效率,合并建议不要每次都手动来进行,导致之后维护成本很大,相信些个XML配置文件,确定合并规则以及依赖关系后,用程序自动合并效率会高很多,后面有我附上的一个配置示例,仅作参考形式不重要
4.JS压缩 此手段属前端特有,毕竟流量意味着速度,意味着金钱。是在降低代码的可读性为前提。但事物的两面性告诉我们,可读性差也意味着安全,而且可读性可以通过保存压缩前的源文件来解决。
所谓的压缩,就是把场的变量名换成短的变量名,去掉没用的空格和换行符,从而节省我们JS程序的长度,不过目前这种处理已经很成熟,通过搜索可以搜出很多相关的工具。不再细说
经验值,能压缩50%以上,视程序与压缩工具而论。
5.尽量少用第三方库
在我的印象中,很多框架都是很庞大20K以上,虽然很强大很方便,但如果不是做企业级应用,不要用,因为我们也许只可能用到其中很少的一部分功能却加载了整个框架。
不过框架中的很多方法是可以提取出来滴,或者精简成一个轻量级的框架,比如说trimPath,完全可以精简到4k.6.合并ajax请求
Ajax请求的数据,如果涉及请求多种数据,尽量考虑到将其合并。
7.合理的使用缓存
缓存视乎是server端的事,但是js中也是经常用的。
一种是缓存在一个全局变量中,一些很复杂的计算和查找操作可以这样做。如果大家在使用模板类trimPath经常是需要对模板进行预处理,这种预处理的结果是可以被缓存的。这种缓存的缺点是页面刷新后数据就会失效。
另外一种是缓存在window.name或cookie里面,经常用来缓存一些AJAX调用的结果,避免反复请求server端,比如一些用户的权限验证信息,就没必要总是调用server端接口,缓存了也就减少了请求,提高了性能,但cookie大家要慎用,存于一些数据比较小的还行,每次http请求他是占用上行带宽的。
还有一种缓存的实现是借助于flash或其他的第三方组件,特点是可以缓存超大的数据,但是适应场景优先,需要特殊的平台支持,不过FLASH目前已经很通用了。
8.能静态化输出,尽量少用JS渲染输出
页面制作
1.素材合并
尽量把页面中的图片合并在一起,利用css sprite切割。这样减少了请求的次数。通常合并成3长大的图片,一张是有固定宽高的(比如说按钮),另外两张是分别横向或纵向平铺的1像素的小图,用来做背景用。2.CSS压缩处理
道理同JS压缩,也是有很多工具实用的可用。
3.图片背景切割与平铺
切图是很有讲究的,很多区域能切成用1像素平铺,尽量用1像素小图平铺,尽量用一个较大的图片设置成背静。4.少用iframe和frameset 首先一点frame会阻塞页面,第二,产生额外的请求,第三,如果涉及交互,增加开发维护成本,第四对搜索引擎优化不好 5.CSS尽量放到页面头部
浏览器只有等CSS下载完毕后,才会真正的显示页面,所以为了让页面尽快有所输出,把CSS放到头部,而且浏览器对CSS的处理时并行的,不会像JS那样会阻塞页面。
Server处理
1.启用gzip压缩,约能压缩70%~80% 2.js,css,图片添加过期头,让浏览器能缓存。能减少1/3以上的请求。3.静态页面、js、css等静态文件单独迁移
第一,可以针对静态文件做专门优化,比如说squid反向代理,nginx代替apache做静态server。
第二,便于管理和维护,以后迁移和拓展方便。
4.js、css、图片等静态文件与当前应用放到不同的域名下。
不再传递那些无必要的cookie,减少传输。
5.图片服务器分多域名。
浏览器对同一域名的只允许使用2个并发,如果页面图片过多,会由于并发排队从而阻塞页面。但域名也不能太多,会消耗DNS解析的时间,建议4个为佳。
附加
1.JS合并配置文件示例
2.常见分析与调试工具
IE Httpwatch Firefox firebug
本文地址 http://user.qzone.qq.com/165162897/blog/1248096280