Be a Pure Person, Enjoy a Simple Life

01月 24

优雅降级&渐进增强

优雅降级(graceful degradation):一开始就构建站点的完整功能,然后针对浏览器测试和修复。

渐进增强(progressive enhancement):一开始只构建站点的最少特性,然后不断针对各浏览器追加功能。

01月 23

做只绅士的前端工程狮 -- 页面制作中的细节养成

我们常以“整齐”,“易读”,“亲切”,“易于维护”,“复用性强”等来形容一些优秀的开发者所写的代码。现在,对代码的好评还有一个更为时尚的词“优雅”,是不是听起来觉得很亲切呢?

页面是互联网产品的表现层面,不仅讲求外观,而且会应对更新迅速的互联网产品需求。要成为一名优秀的开发者,经验积累是必不可少的,而一部分经验归纳起来正是在工作过程中的细节。下文介绍的即是在页面开发流程中的多方面的细节内容,希望对这些细节内容的探讨,可以帮助各位页面开发者做得更出色,以更优雅的姿态来书写页面。 

 

从Photoshop开始

 

从UI设计稿到静态页面一般都称作“切图”。这个词很容易令人联想到Photoshop中的“切片工具”,但现在切片工具用得并不多,大部分在页面中需要用到的视觉元素,都需要拼合到一个或多个单独的图片中。

视觉元素的分离和拼合

 快速更新的互联网产品需求使得UI设计师需要优先保证UI设计稿的视觉效果,也因此有时候没有时间整理UI设计稿源文件。所以,拿到手边的UI设计稿,可能存在图层缺少命名,分组混乱等问题。

如何快速找到需要分离的视觉元素所在的图层?这时候应该使用的是Photoshop的“自动选择”。另外要注意的是,某些边缘阴影及高光是由图层样式生成的,在选取这些部分时应选取旁边的实际绘图内容。

Photoshop的“移动工具“,在使用时勾选一个“自动选择”的复选框即可。此外可以设置是自动选择图层还是图层所在的分组。

拼合是在一个新建立的psd源文件上进行,命名应当与最后输出的图片命名相同。拼合时应当使用网格做整齐的排列(快捷键Ctrl + ‘ 切换网格显示)。整齐的拼图不仅方便多人编辑,而且css代码中的背景坐标定位会更加快捷(谁都喜欢有规律的数字)。

在Photoshop的编辑→首选项中可以设置合适的网格尺寸。

为方便后续编辑,拼图源文件应适当保留原UI设计稿图层(如保留文本图层,不做图层合并,方便以后的文本更改),同时做好图层命名和分组。此外,推荐在底部增加2个图层:底色层和网格尺寸描述层。

底色层:Photoshop默认的表示透明区域的网格背景(和前面的尺寸标识的“网格”不同)中,子网格的边线不容易看清。而加上一个铺满全画布的底色,网格线就很容易辨识了。底色一般用纯白色即可,对于部分颜色偏白的UI元素,可以填充黑色作为底色。底色层只是方便排列元素,在输出图片时,底色层设置为不可见再输出。

网格尺寸描述层:空白图层,采用“20×20”这种格式的命名,说明使用的网格尺寸大小。这样,多人编辑时,可以方便别人很快的设置出适合编辑此拼图源文件的的网格尺寸。

拼图源文件一定要保存到开发目录中,可以在images目录中,单独建立命名为_psd的目录,然后相关的拼图源文件都保存在这个目录中。

对应的,在静态页中用作图片占位和示意的临时图片(如用户头像),可以保存在命名为_temp的目录中。

gif与png-8图片的杂边

为什么gif和png-8格式的图片存在杂边?这是因为,gif和png-8格式的图片使用的是索引颜色编码,而索引颜色中,只存在全透明索引颜色(用来绘制全透明的像素点,也即空白点),而不存在半透明索引颜色。但是,一般的视觉元素的边缘都存在半透明的像素点以形成视觉上的平滑过渡,这些半透明点要保留到gif和png-8,就必须指定用一种实色替代。这也就是Photoshop中的杂边选项的意义。

Photoshop的这个颜色表中可以看到,只有这一个全透明索引色。

Photoshop中也可以选择杂边为“无”,这时半透明点会被丢弃,不再保留到输出的图像中。由于边缘缺少用作过渡的像素点,这样的图像可能会有明显的锯齿,多数情况下效果不佳。

点击“杂边”旁边的小箭头,下拉菜单中即可以选择“无”。

如果选择一个颜色作为杂边色,Photoshop在生成索引颜色表时会把图像中的半透明像素点也考虑进去,并用合适的索引颜色(参考选定的杂边色)替换这些半透明像素点。存在杂边色的gif和png-8图中的视觉元素,处于和杂边色相同的背景色中的时候,效果最佳,所以杂边色的选取应参考最终元素所在的背景。

如果有多种类别的背景而无法保证效果,应使用png-24。这里的png-24实际上基本都是png-32,即应包含透明度alpha通道。这样表述也是因为在Photoshop中,只用了一个复选框的设置来区分png-24和png-32。

勾选“透明度”后,实际上保存的是png-32。

针对不支持png-32的IE6,单独输出一个效果较差的png-8或gif,在一定程度上保证IE6的正常外观。这也是针对不同浏览器的“渐进增强”开发思想的体现。

为IE6单独保存的png-8图。

 

书写内容与HTML

 

在写html之前,仔细阅读UI设计稿是必要的。一方面,理清页面的各个组成部分以及这些组成部分相互之间的联系。另一方面,分析页面及页面的组成部分应该用怎样的DOM结构实现。

页面的DOM结构因人而异。从基础的层面来说,只要能够实现UI设计稿的意图,用什么DOM结构都是可行的。而从专业的层面来说,页面的DOM结构不仅要易于其他的开发者辨识和读取,方便协同开发,而且要有良好的可维护性和拓展性,方便后续的增减和更新。

语义化or非语义化
“语义化”的意思是说,在写html时,依照页面的内容,选取最合适的html标签,以体现html标签的本意。如<p>表示文本段落,那么如果一段文本确实是段落,那么就应该把它们放在<p>标签中,而不是使用没有语义的<div>。

 

语义化,不仅有利于SEO,而且更重要的是使网页内容层次和结构清晰,在可读性上十分友好。试想一下,如果一个页面的<em>标签中的内容,从上下文看确实就是emphasis(强调)的内容,会不会觉得这个页面很整洁很亲切呢?



 

但是,语义化也不是绝对的。微博的新的的站外组件(widget),并不遵从语义,仅使用限定的标签,如块元素只使用<div>,非链接行内元素只使用<cite>,图标只使用<u>。如下图所示最近的新版集体微博组件。


新版集体微博组件的标题部分(红线圈出部分)的代码:

这样无视语义并限定标签的使用,是为了尽可能减少组件被引用的站点的样式,对组件本身样式的干扰。<cite>和<u>都是很少使用的标签,<div>又是非语义的标签,这样,站点css中以标签作为选择器写的样式,就很少会影响到组件(没有多少站点会直接对<div>等非语义标签写reset或默认样式)。


完备的class命名

 先来看使用Firebug查看的以下一段html代码。(取自开发中的微博话题组件)

能看出特别的地方吗?没错,就是所有的html节点,不管位于DOM结构中多深的位置,都有自己的class命名。
为什么要这么做?

首先,需要明确,少一些class命名,通过节点之间的相互关系,当然也可以实现对正确的html节点设置样式。这也是我们过去写html一般的做法,并认为这样可以精简html。事实的确如此,但现在我们应该认识到,精简的html却会带给我们越来越麻烦的css维护。

CSS Wizardry的Harry Roberts对此做了简单的解释说明。


Imagine a teacher trying to control a class of kids who have no names. That’s how we used to write HTML >.<


意思是说,就像我们为什么给人取名字一样,当事物被精确地命名后,事情会变得容易许多。稍微想一下就可以理解,直接说“皮卡丘”比说“小智一直带在身边的神奇宝贝”要简单地多。更重要的是,如果节点的位置发生了改变,原来的基于节点位置的写法就不再正确了,但使用名字的写法则不会存在这个问题。

把一些工作推给html,让css更加容易一些吧。想象自己是一个班级的老师,有什么会比每一位同学的名字更方便表示每一位同学呢?


外观与CSS


CSS本身很容易写,但合理的CSS架构却不是一个简单的事情。要保持CSS的可维护性,最简单的做法就是追求CSS的复用性,尽可能减少CSS量。

任何时候,都要写CSS注释
CSS一般来说可读性较差,因此需要我们多写CSS注释。注释内容越丰富和细致越好,而且建议结合ASCII Art(字符画)。如果有时间,甚至可以在一个CSS文件中写一个目录。

如果是后续增加更改,还可以附上时间和项目相关信息,这在多人协作中很有用。

优雅的CSS选择器

 优雅的CSS选择器不仅看起来亲切,而且也可以提升浏览器的样式渲染效率。
主要使用类名(CLASS)作为选择符,不做额外的限定。

上图中下一种写法更好是因为非<p>标签元素也有效,标签可以随意替换,而且样式渲染时更加高效。

避免不必要的继承关系。继承写法是为了避免相同命名的选择符的样式相互影响,但在层级使用上要注意适度。

浏览器样式渲染引擎是按照从右向左的顺序来解析CSS选择器,最右边的选择符称为关键选择符(Key Selector),每一个额外的继承选择符都会增加样式渲染引擎的查找匹配时间。而且,如果没有额外的继承关系,子元素会有更好的重用性。


总结


在实际的经历中,我们开发者所遵循的,主要是在经验积累中的成果,称为“最佳实践”。在心中明确这样一种“最佳实践”的理念,就可以帮助自己培养良好的习惯,在页面书写上做得更加自然,更加“优雅”。
期待和各位前端开发者共同进步!

(文中截图取自Photoshop,Firebug,Sublime text 2)

<!-- 原文来自 微博UDC  锦上添花——多个细节帮助你更优雅地书写页面 -->

01月 21

js window.onload 冲突!

好吧,刚才文章没发布成功,再写一次……

今天碰到一个 两段js有一段没有生效的问题,苦逼的找了N久,终于发现原来是window.onload冲突了,借用别人的js终究是不靠谱啊~

解决方案:

if(IE){

     window.attachEvent('onload',function(){alert('aa');});

}else{
     window.addEventListener('load',function(){alert('bb');},false);

}

 

12月 24

web上渐进使用jQuery Mobile中animate相关CSS

一、关于animate.css

在介绍主人公之前,先说说他的亲戚。

有个叫“蛋一灯(Dan Eden)”的人弄了个名叫

animate.css

的开源项目,实际上就是使用CSS3 animation实现了各种蛋疼或菊紧的动画效果。

官方主页地址:http://daneden.me/animate
github地址:https://github.com/daneden/animate.css

该项目不错之处在于,你可以自定义你自己需要的CSS效果,自定义页面访问点击这里

自定义你需要的动画效果 张鑫旭-鑫空间-鑫生活

在目标浏览器下,鼠标移到文字上即可预览到效果,勾选与去勾选,点击最下面的”Build it”按钮,可以生成你自己需要的效果的CSS文件。如下示意:
生成自定义的animate.css动画文件 张鑫旭-鑫空间-鑫生活

然而,从实际的角度来讲,这个项目基本上属于华丽包装的中国式礼品,除了让我们学习如何写效果相对应的CSS3代码。换句话说,有技术学习的价值,缺少实际应用的价值!因此,本文的主人公不是他,而是她!

 

二、jQuery Mobile中animate.css

 

jQuery Mobile中也有animate相关的CSS代码(没有animate.css之类名称,标题这么写是是为了与前一个标题呼应)。

虽然同是animation相关动画的CSS代码,但是,jQuery Mobile中的这个显然更简单更实用,更值得一说!

我抽了点拉便便的功夫,把jQuery Mobile项目中的这部分CSS代码提出来了,放在了一个独立的CSS文件中(有改动,兼容、命名、属性等),您可以狠狠地点击这里查看或下载:animate.css

其中,相关animation动画有:spin, fade, pop, slide, flip, turn, flow. 至于具体分别指代什么,下面会讲,稍安勿躁!

有了animate.css, 实现一些动画效果那是非常的简单——几个class类名的切换而已,就算是不懂JavaScript的人,松松的几十分钟,也可以弄出效果来。

对于大多数同行,虽未实践过animation动画,但肯定也有所耳闻,这些CSS3属性IE6~9甚至Opera浏览器都不支持,顶多手机项目或者iPad项目上用用,至于传统Web上,啧啧,估计吃翔的可能性居多!

所以,可能“米娜桑”现在对于animation等东西更多的是观望,了解或等待之类!No, no, no, 诸位,今天我就要告诉大家,就算是需要支持IE6浏览器,面向各类普通用户的传统web项目,animate也是可以渐进使用的,而且使用成本相当相当的低的哦!哟,还不信,咱们骑驴看唱本——走着瞧!

注解:① 大家的意思。

 

三、 热热身 – slide相关CSS与幻灯片切换效果

 

面对新事物,鲜活的实例远比生僻头大的代码、陈述之类更加吸引人。

您可以狠狠地点击这里:slide动画与幻灯片切换浏览效果demo

在Chrome浏览器或者FireFox浏览器下(或360,遨游,搜狗浏览器的极速模式),点击图片,您会看到图片们向左不停地、以流畅动画形式,显示啊显示啊显示……
slide效果在FireFox浏览器下的截图 张鑫旭-鑫空间-鑫生活

在不知CSS3为何物的浏览器下,例如IE7这厮,图片也会一个一个切换,只是木有动画效果而已——对于实际应用而言,足够了!!——我们平时的效果基本上就是这样的,FireFox等浏览器更加better而已!

实现
要说如何实现的,咳咳,说穿了真是简单地让人吐血。

 

  1. 显然的,调用我提出并编辑过的animate.css文件,如下代码:

    <link rel="stylesheet" href="http://www.zhangxinxu.com/study/css/animate.css" type="text/css" />
  2. 给要动画的元素添加几个关键的类名,例如这里是slide效果,因此加一个名叫

    slide

    的类名,如下截图:
    添加关键的类名slide示意图 张鑫旭-鑫空间-鑫生活
  3. 下面就是JS把

    in



    out

    两个类名切换切换就结束了!
    JS切换in和out类名实现animation动画效果 张鑫旭-鑫空间-鑫生活

 

好了,可以去吃晚饭了 – 

 

四、animate.css回锅再炒

 

上面的例子作用有2个:1. 提起兴趣;2. 大致认识。

于是,现在,到了可以好好讲讲

animate.css

相关内容了:

 

  • animate.css

    驱动下的各种动画效果都是通过切换类名实现的;
  • 类名分为三类:公用类名、动画关键字类名以及可有可无的两个3D视角类名。
    公共类名有3个:

    in



    out



    reverse

    . 分别指无到有、有到无、反向。
    关键字类名9个:

    fade



    pop



    slide



    slidefade



    slidedown



    slideup



    flip



    turn



    flow

    . 各个效果后面有展示;
    3D视角类名2个:

    viewport-flip



    viewport-turn

    . 从名字就可以看出,是

    flip

    效果和

    turn

    效果需要的。
  • 虽说IE10也会支持animation动画,但是,这里只有moz, webkit前缀驱动,因此,IE10下无效果(您自然可以添加更多CSS使IE10以及后续的Opera浏览器支持)。
    仅有moz和webkit前缀截图示意 张鑫旭-鑫空间-鑫生活
    从实际应用的角度讲,为了可以准确判断向下不支持的浏览器,这样的命名是比较推荐的。但是,5年之后,必然,这里的命名等需要大动。
  • flip

    效果和

    turn

    效果属于3D变幻的范畴,因此父级元素上有必要设置:

    perspective: 1000px


    您可以使用

    animate.css

    中的

    viewport-flip



    viewport-turn

    或者使用自己定义的类名。因此,我说对于

    animate.css

    而言,

    viewport-flip



    viewport-turn

    不是必须的。

  • animate.css

    中的每一行的CSS代码都是比较高级的CSS3属性,因此包括IE9在内的浏览器都是根本不认识的。这种完全不认识性,使得我们的兼容性处理就变得相当简单了。

 

in, out, reverse类名的理解
各种动画效果的实现的本质就是“使用JavaScript对in, out, reverse三个类名颠来倒去切换”。

一般而言,

in

表示元素从看不见到出现的动画效果。例如

fade + in

的动画效果就是淡入(图片透明度从0到1)。而

out

指代元素隐藏,逝去,例如

fade + out

的动画效果就是淡出(图片透明度从1到0)。

类似的

slide+in

效果就是移入,

slide+out

效果就是移出;

pop+in

效果就是弹出;

pop+out

效果就是收进去;等等!

reverse

的作用是反向。举个例子,最简单的slide效果:进来是

slide+in

,即从右往左。如果移出是

slide+out

则还是从右往左移出,如果移出是

slide+reverse+out

,则是从左往右移出,也就是原路返回

因此,

reverse

一般用在独立元素的交互效果上,例如弹框出现和弹框关闭的效果应该是完全相反的,这时候就需要用到类名

reverse

.

在以前的jQuery版本中,in, out动画的时间都是一样的,如下代码:

 

.in, .out {<br />    -webkit-animation-timing-function: ease-in-out;<br />    -webkit-animation-duration: 350ms;<br />}

 

不过现在做了不同处理,默认动画进入

350

毫秒,动画移出

225

毫秒。至于为什么做这番修改,我也不得而知,总之对相关并木有什么糟糕的影响,我们仍可从容使用之。

 

五、animate.css的向下兼容

 

前面说过,包括IE9, Opera浏览器在内的浏览器都是不支持

animate.css

的动画CSS的,如果保证这些浏览器的显示也是正常的。

其实很简单,只要让这些浏览器有下面这一行CSS代码就可以了:

 

<span style="color: #cd0000;">.out { display: none!important; }</span>

 

animate.css



out

类名的本质就是以动画形式让元素隐藏(不可见);其本质与直接的元素隐藏(

display:none

)是一样的。

然后,什么

in



out

之类的切换就完全不会影响在低版本浏览器上的显示了。

下面问题来了,如何让非目标浏览器上渲染

display:none

呢?

考虑到CSS hack太难搞,@supports目前仅FireFox17支持,我是借助JavaScript实现的,完整代码如下:

 

var BROWSER = function() {<br />    var ua = navigator.userAgent.toLowerCase();<br /><br />    var match = /(webkit)[ \/]([\w.]+)/.exec( ua ) ||<br />        /(opera)(?:.*version)?[ \/]([\w.]+)/.exec( ua ) ||<br />        /(msie) ([\w.]+)/.exec( ua ) ||<br />        !/compatible/.test( ua ) && /(mozilla)(?:.*? rv:([\w.]+))?/.exec( ua ) ||<br />        [];<br /><br />    return { browser: match[1] || "", version: match[2] || "0" };<br />}();<br /><br />if ((BROWSER.animate = (BROWSER.browser !== "mozilla" && BROWSER.browser !== "webkit"))) {<br />    <span style="color: green;">// 不是目标浏览器,创建CSS向下兼容</span><br />    var oStyle = document.createElement("style"), cssText = ".out{display:none!important;}";<br />    oStyle.type = "text/css";<br />    if (BROWSER.browser === "msie") {<br />        oStyle.styleSheet.cssText = cssText;<br />    } else {<br />        oStyle.innerHTML = cssText;<br />    }<br />    document.getElementsByTagName("head")[0].appendChild(oStyle);<br />}

 

建议代码放在页面的头部,或者在头部放入如下的JS文件链接代码:

 

<script src="http://www.zhangxinxu.com/study/201210/animate-fix.js"></script>

 

如果您的头部已经链接了例如jQuery框架,更简单,直接(未测试):

 

if (!$.browser.webkit && !$.browser.mozilla) $("head").append('<style>.out{display:none!important;}</style>');

 

六、fade以及slidefade动画体验

 

fade动画效果

fade

效果可以说是最好理解,最易识别的效果了。淡入淡出效果为jQuery内置动画效果,如果两者画个等号的话,类似这样:

 

$().fadeIn() = $().addClass("fade in");<br />$().fadeOut() = $().addClass("fade out");

 

您可以狠狠地点击这里:fade动画下的图片轮播效果demo

// zxx: 下面的N多demo中也夹杂着

fade

效果,同时

fade

动画是唯一没有

reverse

参与的动画类型。

slidefade动画效果

slidefade



slide

移动和

fade

淡入淡出效果的结合,您可以狠狠地点击这里:slidefade动画下的图片轮播效果demo

slidefade效果进行中的截图 张鑫旭-鑫空间-鑫生活

到目前为止展示的三个demo,唯一不同的就是HTML代码中的类名:
类名驱动的animation动画效果 张鑫旭-鑫空间-鑫生活

可见,CSS3 

animate.css

下的动画效果完全由类名驱动的。

对于多元素且有规律的动画效果,一般关键类名

reverse

是不参与进来的。

但是,对于单独的元素动画,

reverse

就不可或缺了。

 

七、slideup动画效果展示

 

这里展示

slideup

动画,同时更重要的是介绍以下几个知识点:

 

  1. CSS控制下的动画元素隐藏
  2. 定时器控制下的动画元素隐藏
  3. reverse

    使用的一般规律

 

您可以狠狠地点击这里:含提示的图片列表删除demo

本demo含有两个slideup效果,一个是鼠标经过图片时候出现的含有“删除”文字的黑色半透明提示条,如下截图:
slideup效果元素示意 张鑫旭-鑫空间-鑫生活

另外一个就是点击“删除”出现的“是否删除”的提示框,如下截图:
slideup效果元素示意

其中,前面slideup元素的隐藏是通过CSS限制实现的;后者是JavaScript定时器实现的。

在介绍两种元素隐藏方法之前有必要先要脱下

slideup

动画的衣服,好好窥视其真实的肌体。

slideup+in

效果是向上移动到当前位置,距离为自身高度。举个例子,一个身高170cm的妹子站在在二楼吹头发;则该妹子应用

slideup+in

动画的效果就是:妹子瞬间脑袋顶着1楼天花板,倏地向上移动到正好站在2楼的位置。如果我们在2楼的话,看到的就是妹子的脑袋开始从楼板上冒出来——一直到整个身体出现

妹子slideup效果示意 张鑫旭-鑫空间-鑫生活

1. CSS限制下的slideup效果
这类效果,需要容器(类似上面的楼层)限制(overflow:hidden), HTML结构如下:

 

外部限制容器(overflow:hidden)<br />    slideup效果元素(slideup + in/out)

 

于是,slideup动画执行时候我们就会看到元素慢慢“冒出来”的效果了。

如果没有外部容器的限制,slideup效果就是完整元素(妹子不会被楼层截掉)的上移或下降。这显然不是我们需要的,当

out

触发的时候,我们希望元素不可见(下降只是位置改变,元素依然可见)。这种情况,就需要借助JS脚本。

2. JavaScript定时器的限制
动画的执行的时候是固定的(CSS限制的),因此,我们可以使用JS让动画效果结束的时候,让元素不可见,如

display:none

. demo中相关代码如下:

 

<span style="color: green;">// 点击取消按钮</span><br />$("取消按钮").bind("click", function() {<br />    <span style="color: green;">// 提示框下移动画触发</span><br />    $("提示框").addClass("reverse out").removeClass("in");<br />    setTimeout(function() {<br />        <span style="color: green;">// 200毫秒后提示框隐藏</span><br />        $("提示框").hide();<br />    }, 200);<br />});

 

我们无需担心IE6~9之类浏览器的兼容性问题,因为,当元素添加类名

out

的时候,元素就已经隐藏了,所以延时什么的无需担心影响交互效果。

3. reverse的一般使用规律
如果您希望元素的out动画与in动画是“原路返回”的关系,则需要用到类名”

reverse

“. 例如demo页面提示框的显示与隐藏完全相反效果,则需要用到

reverse

.

其使用是一个路子(其他各种animate效果也是如此),我是这样操作的:
元素进入动画:

 

$("元素").addClass("in").removeClass("reverse out");

 

元素移出动画:

 

$("元素").addClass("reverse out").removeClass("in");

 

addClass



removeClass

顺序不分先后。

于是,完整流程的效果即可实现。

初始化的时候,我都是把

out



reverse

预先放在元素上了,例如这里的:

slideup reverse out

.

//zxx: 下面为广告~~注意不要勿点~~嘻嘻~~

 

 

八、pop效果和flow效果综合实例

 

pop效果是元素从正面弹出弹入;flow效果是元素先变小然后再向两侧偏移。

您可以狠狠地点击这里:pop/flow效果下的图片移入回车站demo

demo页面的pop-flow交互效果示意 张鑫旭-鑫空间-鑫生活

弹框提示为

pop

效果,图片移入移出回车站为

flow

效果。均使用到了

reverse

使动画效果镜像,

flow

效果使用了

setTimeout

定时器控制元素的隐藏。都是上面

slideup

提到的东西,不再赘述。

不过,回收站的摇动效果可能大家会比较感兴趣,该效果并不出自jQuery Mobile中的animate动画效果之列,而是来自文章一开始提到的那个“蛋一灯”的animate.css中的

tada

效果。

相关CSS代码demo页面有展示,该动画触发模式与jQuery Mobile更重用的

in/out

模式不同,其直接添加动画关键字类名就可以了,例如这里,直接:

 

$().addClass("tada");

 

就可以了。

 

九、3D效果之flip翻转

 

flip效果为中轴翻转,具有代表性的效果就是翻纸牌。

您可以狠狠地点击这里:flip动画与翻转纸牌动画效果

纸牌翻面效果截图 张鑫旭-鑫空间-鑫生活

因为是3D效果,如果希望呈现一定的3D视角,需要在父级元素上添加类名

viewport-flip

或者直接添加如下CSS:

 

-webkit-perspective: 1000px;<br />-moz-perspective: 1000px;

 

perspective

属性具体含义可参见我之前的“CSS3 3D transform详解”一文。

原理简述

 

  1. 当前在前显示的元素翻转90度隐藏, 动画时间225毫秒
  2. 225毫秒结束后,之前显示在后面的元素逆向90度翻转显示在前
  3. 完成翻面效果

 

也就是纸牌的前后面在两个不同的时间点进行flip效果,构成完整的纸牌翻面效果。

注:Chrome浏览器下需要让元素屏幕垂直居中,以保证元素均在视角内,避免部分区域不显示的情况发生。

 

十、3D效果之trun翻转

 

trun效果为沿着侧边翻转,类似翻书,开关门效果。

您可以狠狠地点击这里:trun动画与门的开关模拟效果demo

turn动画下的门开关效果截图 张鑫旭-鑫空间-鑫生活

与上面flip效果类似,父标签需要添加视角样式,或类名

viewport-turn

或自己写两行

perspective

相关CSS.

如果我们把page页面整个应用turn效果,web页面的浏览就像翻书那样,很酷的!

 

十一、其他相关的总结

 

绝对定位元素
所有这些animation动画效果,元素本身所占据的空间至始至终都是不变的。因此,类似幻灯片之类多元素切换的效果,势必需要将元素设为绝对定位元素,以占据同一垂直空间。

再考虑到动画会造成强烈的重绘与渲染,从性能角度讲,我们必须将动画元素脱离文档流,也就是设置成绝对定位元素(避免强烈的回流)。

因此,这里,我认为:如果您想让一个元素应用animation驱动的动画效果,请将其设置为绝对定位元素。

与transition动画对比

transition

也是有动画效果的,其特定是简单灵活,代码精简。不足之处在于:
1. 不同通过CSS控制动画的起点;
2. 不能设置动画的断点;
3. 动画的驱动与值类型甚至单位有关;
4. 动画只能是一次性的;
5. 动画不能延迟;

等。

各有裨益,这里不展开。

转载来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]

12月 09

我们为什么需要360这样的软件

相信许多中国的用户,不管你装的xp、win7还是win8,您的电脑上肯定装着或者装过360或者类似360这样的软件,比如说qq管家之类的,陈傻子是装着的,那么多年来一直是装着的。我们真的需要他们吗?I don't know。

这些软件我们是用来做什么的?安装软件?更新系统?清理垃圾?优化系统?防木马?还是看看开机速度?反正陈傻子能想到的并用过的也就这些功能。但是我们真的需要这样的软件来做这些事情吗?好像并不是一定需要的说。安装软件反正傻子是比较喜欢百度软件官网下载的,系统更新嘛,在ghost xp泛滥的年代,天朝人民怕死了温都死的自动更新,但是进入win7 win8时代,自动更新似乎好像并没有给我带来什么困扰。至于优化系统,你总不会天天在优化吧,一次优化完了这个功能也就差不多可以不用了。安全方面,温都死自带的防火墙似乎也不弱的,mse还是免费的哦。如果你上网自己注意点,裸奔又何妨。还有什么吗?好像没有了,清理垃圾我一直都不用360的,她干活并不彻底。 那个黄绿的小图标在你的右下角,每次开机告诉你用了多少秒击败了多少人,有意义吗?很多时候 他并不能给你优化建议,但是却告诉你落后于全国95%的人,你会怎么办,最后肯定是不了了之的。

So,我们真的需要360吗?

12月 06

365

事情总是不会按照你设想的发展,所以一切的细微的计划显得有些多余,甚至徒增伤感。可以如果不会计划一下,又容易陷入迷茫,给人得过切过的感觉,这事儿,不好弄

12月 03

寒(一)

林中跟我一样出生在那个村子,我们的幼年都是在那里度过的。我不知道那里算不算典型的南方山区的村子。她四面是海拔不算高的山,一条不算宽的河贯穿村子,灌溉了不算肥沃的田地,也带着人类生活的气息曲曲折折的逐渐壮大汇入几十里外的人工湖。一条路沿着河的方向起起落落的挂在山腰上,划过数不清的山脊山岭,宛如一条黄色的虫,啃噬着片深浅不一的绿。这是这几年的风景了,五年以前,公路还没有修到这个这个村子,那条最宽处不到两米的土路运载几代村民的视界。那时候是看不到黄虫啃翠的景致的,她总是被两旁旺盛的灌木掩盖。在那条小路上我们不知道留下过多少足迹和和哭泣,爬过了那个最高的山坳就能看到更多的房子就能看到那条单车道的公路,这是我们行走的信念,只要到了那个村子,我们就能坐上被称作“三卡”的三轮柴油车,然后颠簸着去镇子上或者更远的地方。

这个叫做东溪的村子,也许在战乱年代算是一个世外桃源,所以最初的几个“太公”们把家安顿在了这里。在村史上,这里是没有原住民的,都由其他地方迁徙而至,生根发芽。 最早在这里定居的是王姓的一家,几经发展之后形成了一个还算繁盛的家族,建起来一个较大的院落,我们称之为“台门”。然后另一个王姓的家族也迁至此。老王家就在这个台门东面延伸出了另一个台门,把现有的这个让给了小王家。虽不是迁自同一个地方,但是毕竟同属王姓,再上溯几代也许还能扯上些关联,老王家就豁达的让出了自己的住宅。老王家搬出他们的老台门之后,他们一家的繁衍速度却有些缓慢了,这是后话了。两王是这个村子较早拿到这个村子绿卡的家族,而后的百十年间陆陆续续几个姓氏迁徙至此,包括我们陈家和林中他们的林家。我们陈林两家在这里是属于少数名族的,一是迁入比较晚,我们这一代也不过是区区第四代。二是我们迁入的时候人丁也不算兴旺。相比林家,我们家还算是比较好一些的。我曾祖进村的时候至少还带了一双儿女的,而林家,据说迁来的时候只有林中的爷爷的爸爸领着半成年的儿子两个人的,哦,对了,据说还有一头干瘦的黄牛。

林老太爷他们来的时候,村里已经有些混杂了,几处位置比较好的地方都已经被占据了,先来后到,谁也左右不了什么,再加上他们来的时候,老王家已经有颓势了,想让谁让一块地方是很难的。所以他们父子俩在一个比较偏僻的山脚下带了个简陋的房子定居。不像小王家有老王的扶持,也不像我太公还算有点手艺夯墙盖房还能在村里找寻点活计,倒也不是为了赚银子,不过是搞点人情的原始积累而已,林家父子可是纯粹的从零开始自立更生。一点点的开垦,一点点的耕种,几年的没日没夜经营,倒也盖起了两间房。也为那已成年若干年的小子讨上一个老婆。

12月 03

HTML常用编码转换

var encoding = (function () {

   function ToASCII(str) {

       return this.ToNormal(str).replace(/[^\u0000-\u00FF]/g, function () {

  return escape(arguments[0]).replace(/(?:%u)([0-9a-f]{4})/gi, "\$1;") 

  });

   }

   function ToUnicode(str) {

       return this.ToNormal(str).replace(/[^\u0000-\u00FF]/g, function () { 

  return escape(arguments[0]).replace(/(?:%u)([0-9a-f]{4})/gi, "\\u$1") 

  });

   }

   function ToNormal(str) {

       return str.replace(/(?:)([0-9a-f]{4});|(?:\\u)([0-9a-f]{4})/gi, function () { 

  return unescape("%u" + (arguments[1] || arguments[2])); 

  });

   }

   function ToCss(str) {

       return this.ToNormal(str).replace(/[^\u0000-\u00FF]/g, function () { 

  return escape(arguments[0]).replace(/(?:%u)([0-9a-f]{4})/gi, "\\$1") 

  });

   }

   return {

       ToASCII: ToASCII,

       ToUnicode: ToUnicode,

       ToNormal: ToNormal,

       ToCss: ToCss

   };

})();

console.log(encoding.ToASCII("宋体"));

console.log(encoding.ToUnicode("宋体"));

console.log(encoding.ToNormal("宋\\u4F53"));

console.log(encoding.ToUnicode("宋体"));

console.log(encoding.ToCss('Arial , Helvetica ,"宋体", sans-serif'));

12月 03

前端开发流程及规范

这是陈傻子在上一家公司整理的前端开发流程和规范,虽然已经离开了那里,但是有些东西还是可以参考参考的

一、前言
1、目的
为了规范公司项目的开发、提高团队协作效率,便于开发人员功能添加和修改及前端后期优化维护, 输出高质量的文档,特制订此规范。 本规范既是一个开发规范,也是一个脚本语言参考,本规范并不是一个一成不变的必须严格遵守的条文,特殊情况下要灵活运用,做一定的变通。但是,请大家千万不要随意更改规范。如果有任何问题,请及时沟通,及时调整本规范的相关代码样例和文档。

2、基本准则
符合web标准,语义化html,结构表现行为分离,兼容性优良。页面性能方面,代码要求简洁明了有序,尽可能的减小服务器负载,保证最快的解析速度。
总之一句话,不以提高团队开发效率为目的的代码习惯就是耍流氓!^_^

二、前端的开发的一般流程
1、制作准备
1) 仔细研读PRD(需求文档),根据文档做好HTML的大体规划;
2) 对涉及到的相关JS交互效果进行初步设计和编写;

2、代码编写
1) 根据PRD和Prototype(原型图) 搭建大致的HTML结构;
2) 根据设计稿(PSD图)进行页面整体框架制作;
3) 页面细节的完善和优化(CSS 和 JS);
4) 页面兼容性和JS效果的初步测试

3、确认和测试
1) 提交需求提出者确认(交互效果和相关产品等),原则上此时不允许功能添加;
2) 提交SVN,Tester在测试环境中进行测试;
3) 根据PD和Tester的反馈进行相应的修正(兼容性处理和缺货产品替换等);

4、上线
1) 经PD和Tester确认后,将文件提交给运维组,上传服务器;
2) 上传之后Tester将会在正式环境中进行最后的确认,若发现问题,进行即时修正;
3) 后期维护(产品增删替换、功能修正等);
4) 对于已上线网站(活动)的修改。

5、下线
6、整理和归档

三、开发规范
(一)目录规范
目录建立的原则:在不改变现有结构的前提下,以最少的层次提供最清晰简便的访问结构。
1、 禁止随意改动各网站现有目录结构;
2、 活动相对目录不要超过三层;
3、 活动根目录文件尽量少,且必须包含一个默认页(如index.php或index.html);
4、 活动文件目录
a) 根目录/special/以上线日期为名的文件夹/活动名称。
b) 活动名称目录用小写英文标识,多个单词用‘-’连接,禁止出现空格、大小写混编、特殊字符;
c) 尽量不使用汉语拼音;

样例:special/20120305/bigsize-dress/

(二)命名规范
文件命名的原则:以最少的字母达到最容易理解的意义。

1、一般文件及目录命名规范:
1)每一个目录中应该包含一个缺省的html 文件,文件名统一用index.html文件名称统一用小写的英文字母、数字和下划线的组合;
2)尽量按单词的英语翻译为名称。

2、图片的命名规范:
1)名称分为头尾两两部分,用下划线隔开,
2)头部分表示此图片的大类性质。如banner,logo,button,nav,bg,menu等;
3)尾部分表示具体的含义,用英文字母表示;
样例:banner_top.jpg, logo_sohu.jpg,bg_main.jpg等
4)图片hover效果时,两张分别在原有文件名后加"_on"和"_off"命名。

3、html,css,js命名规范:
1)html文件命名: 英文命名, 后缀:.html
2)css文件命名: 英文命名,后缀:.css. 公共样式public.css, 首页index.css, 其他页面依实际模块需求命名,如非样式表极其庞大,不建议建立多个样式表;站内活动原则上只允许出现一个样式表文件;
3)JS文件命名: 英文命名, 后缀.js. 公共common.js, 其他依实际模块需求命名。如非特殊情况,js效果尽量写在一个js文件中。文件名须包含库名称及版本号及是否为压缩版, 比如jquery-1.4.1.min.js; 引入插件, 文件名格式为库名称+插件名称, 比如jQuery.cookie.js;

4、命名规范,见css书写规范 第七条;
5、其他命名规范
1)尽量不要以ad等字样为文件名,因为有些浏览器会将其当广告屏蔽;

(三)html书写规范
1、文档类型声明及编码:
1) 文档类型统一为:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Html5声明类型为<!DOCTYPE html>;
2) 编码统一为<meta charset=”utf-8” />;
3) 在html标签中添加语言声明:lang="**";
如:<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
各语种语言声明:
英语:lang="en";
法语:lang="fr";
德语:lang="de";
西语:lang="es";
韩语:lang=" ko";
日语:lang="ja";
俄语:lang="ru";
阿语:lang="ar";
中文:lang="zh";
2、 头部信息
活动页面添加独特的标题<title></title>,关键词<meta name=”keywords”>,描述<meta name=”description”>。

3、 文件引用
一般情况下,样式文件必须<head>标签内,以link方式调用;JavaScript文件在页面底部调用;

4、页面编写规范
1)所有编码均遵循xhtml标准, 标签 & 属性 & 属性命名 必须由小写字母及下划线数字组成, 且所有标签必须闭合, 包括br (<br />), hr(<hr />)等; 属性值必须用双引号包括;
2)充分利用无兼容性问题的html自身标签, 比如span, em, strong, optgroup, label,等等;尽量避免html5中已经不支持的标签,如font等(详见附件:HTML5 常用语法一览(列举不支持的属性).doc);
3)语义化html, 如 标题根据重要性用h*(同一页面只能有一个h1), 段落标记用p, 列表用ul, 内联元素中不可嵌套块级元素;
4)尽可能减少div嵌套,
如<div class=”box”& gt;<div class=”welcome”>欢迎访问XXX, 您的用户名是<div class=”name”>用户 名</div></div></div>
完全可以用以下代码替代: <div class=”box”><p>欢迎访问XXX, 您的用户名是<span>用户名</span></p>< /div>;
5)书写链接地址时, 必须避免重定向,例如:href=”http://chenchaojun.cn/”, 即须在URL地址后面加上“/”;
6)在页面中尽量避免使用内联样式,即style=”…”;
7)为含有描述性表单元素(input, textarea)添加label,
如<p> 姓名: <input type=”text” id=”name” name=”name” /></p>
须写成:< p><label for=”name”>姓名: </label>< input type=”text” id=”name” /></p>
8)能以背景形式呈现的图片, 尽量写入css样式中;
9)给区块代码及重要功能(比如循环)加上注释, 方便后台添加功能;
10)特殊符号使用: 尽可能使用代码替代,如空格 &nbsp等;
11)为图片及链接加alt 属性和title属性;分下面三种情况

i. 图片加链接: <a href=””><img src=”” /></a>,图片必须加alt,title属性。
<a href=””><img scr=”” title=”” alt=”” width=”” height=”” /> </a>

ii. 只有链接 : <a href=””>example</a>,链接可以不加title属性。

iii. 链接有css背景图: <a href=”” ></a> css: {background-image:url('paper.gif');},链接必须加上title及alt

<a href=”” title=”” alt=””> </a>

Alt的值也要尽可能的包含关键词。
12)页面中的一些重要内容,尽量使用文字而不是图形,FLASH,JS来显示重要的名称、内容或链接。
13)在网站的其他页面给活动页面的图片链接上也要加上alt和title属性,用来对活动描述,特别是网站首页的活动推广图片上。
14)尽可能的提高页面的加载速度,如:页面一次性显示产品超过40个,用异步加载,页面超过3屏,用异步加载。
15) 将页面中不重要内容相关的html代码放在页面的底部。
16)注意活动页面上不要存在死链接。
17)尽量不要使用图片热点图链接,如果需要使用的话,也要添加alt和title的值,对图片和链接进行描述。
18)请不要使用隐藏真实内容或欺骗性的重定向手段。
19)同一活动的不同页面使用不同的标题,关键词和描述。
20) 在<head>标签之间,给页面加上唯一链接标签,链接上不需要加任何跟踪性质的参数:
<link rel="canonical" href="唯一url" />
如:首页活动图链接的地址为http://chenchaojun.cn/special/20120302/spring/index.html?lcid=spring/summer-apparel
此页面中的标签应为:
<link rel="canonical" href=" http://chenchaojun.cn/special/20120302/spring/index.html " />

(四)css书写规范
1、CSS Rest
建议使用YUI(见附件:reset.css;活动可根据需要删减);

2、Css建议采用CSSRest+common.css+app.css形式;
3、为了方便组件模块化和提高弹性,正常情况下。为了避免边界冲突,组件不设置外边界!
4、为了避免组件上下边距重合问题和IE的haslayout引发的bug..无其他特殊要求,一般采用值设置margin-top设置上下边距;
5、优先对common.css 进行整合;
6、建议用一行的写法,不强求;css3属性建议用多行书写,写过后亲们会懂的;
7、样式命名:
尽量用驼峰式命名,如 main_nav;在不涉及到特效的样式命名时尽量避免 小驼峰式命名法,如 mainNav;重用性低或者只在一个box中调用的样式,可通过继承写法规避,如 #mainnav .firstnav{…….}(不建议过多使用继承,遇到过因继承引起的问题的亲们懂的);

8、css属性书写顺序
建议遵循 布局定位属性–>自身属性–>文本属性–>其他属性(此条可根据各位习惯书写, 但尽量保证同类属性写在一起);
属性列举:
布局定位属性主要包括: margin & padding & float(包括clear) & position(相应的 top,right,bottom,left) & display & visibility & overflow等;
自身属性主要包括: width & height & background & border;
文本属性主要包括: font & color & text-align & text-decoration & text-indent等;
其他属性包括: list-style(列表样式) & vertical-vlign & cursor & z-index(层叠顺序)  & zoom等。我所列出的这些属性只是最常用到的, 并不代表全部;
9、class与id的使用:
id仅使用在大的模块上, class可用在重复使用率高及子级中;
10、书写代码前, 考虑并提高样式重复使用率;
11、背景图片请尽可能使用sprite技术, 减小http请求, 考虑到多人协作开发, sprite按模块制作,并保存psd源文件;

12、使用table标签时(尽量避免使用table标签), 请不要用width/ height/cellspacing/cellpadding等table属性直接定义表现, 应尽可能的利用table自身私有属性分离结构与表现,
如thead,tr,th,td,tbody,tfoot,colgroup,scope; (cellspaing及cellpadding的css控制方法: table{border:0;margin:0;border-collapse:collapse;} table th, table td{padding:0;}

13、避免试用<meta http-equiv=”X-UA-Compatible” content=”IE=7″ />来兼容IE8;
14、使用css3属性时,请做好IE浏览器的兼容方案;
15、必须为大区块样式添加注释, 小区块适量注释;
16、少用或者不用CSS Hack;
17、以上规范,不适用于邮件制作,邮件 详见邮件制作规范;

(五)JavaScript书写规范
1、 原则上所有功能均根据项目需求原生开发, 以避免网上down下来的代码造成的代码污染(沉冗代码 || 与现有代码冲突 || …);对于常用代码,后期会统一建立一个代码库,按需调用,避免重复劳动;

2、库引入: 原则上仅引入jQuery库; 活动jquery库请调用网站根目录 js/ 下的jquery,没必要每个活动上传一个jquery;

3、命名规范
1)变量命名: 驼峰式命名. 原生JavaScript变量要求是纯英文字母, 首字母须小写, 如iLoveQm;jQuery变量要求首字符为’_', 其他与原生JavaScript 规则相同, 如: _iLoveQm;另, 要求变量集中声明, 避免全局变量。
2)类命名: 首字母小写, 驼峰式命名,如 iLoveQm;
3)函数命名: 首字母小写驼峰式命名. 如iLoveQm();
4)命名语义化, 尽可能利用英文单词或其缩写;

4、尽量避免使用存在兼容性及消耗资源的方法或属性, 比如eval() & innerText;
5、 后期优化中, JavaScript非注释类中文字符须转换成unicode编码使用, 以避免编码错误时乱码显示;
6、代码结构明了, 加适量注释. 提高函数重用率;
7、注重与html分离, 减小reflow, 注重性能;
8、页面内js注释,切勿使用 //;至于为什么,等你用了你就知道了 ^_^

(六)图片规范
1、所有页面元素类图片均放入易识别的 专用图片文件夹内,如imgages,img等;
2、制作时使用的demo图片,上传是即时删除;
2、图片格式仅限于gif || png || jpg;
3、命名全部用小写英文字母、数字、_ 的组合,其中不得包含汉字、空格、特殊字符;尽量用易懂的词汇, 便于团队其他 成员理解; 另, 命名分头尾两部分, 用下划线隔开, 比如banner_top01.gif,为了防止部分浏览器的广告过滤,不要试用 ad、ad_类似的文件名;
4、在保证视觉效果的情况下选择最小的图片格式与图片质量, 以减少加载时间;
5、尽量避免使用半透明的png图片;
6、运用css sprite技术集中小的背景图或图标, 减小页面http请求, 但注意, 请务必在对应的sprite psd源图中划参考线, 并在归档目录中存档。

(七)注释规范
1、公共组件和各个栏目在文件头部加上注释说明:
注释说明:demo:
/**
**文件用途
**作者姓名
**制作日期
**/
You’d better use English
2、html注释:
注释格式 <!-- 这儿是注释 -->, ’–’只能在注释的始末位置,不可置入注释文字区域;"<!--"这部分有且只能有两个-,后面跟个空格,如果“<!---” 形式,在火狐3.6中注释失效(血淋淋的教训啊~);模块头尾对应添加注释,并标注start和end;

3、css注释:
注释格式 /*这儿是注释*/;

4、JavaScript注释:
单行注释使用 ’//这儿是单行注释’ ,
多行注释使用 /* 这儿有多行注释 */;
需要压缩的js 禁用单行注释;英文站页面内js禁用当行注释;

(八)开发及测试工具约定
建议使用 Dw || notepad++, 亦可根据自己喜好选择, 但须遵循如下原则:
1、不可利用IDE的视图模式’画’代码,如DW的设计试图;
2、不可利用IDE生成相关功能代码, 比如Dw内置的一些功能js;
3、编码格式化
4、建议顺序浏览器兼容测试:FireFox–>IE9 –>IE8–>IE7 –> Chrome –> Opera–>Safari –>IE6;
5、欢迎加入Kill IE6的行列;但是功能性IE6不兼容,页面结构的IE6不兼容,是不能被容忍的;

四、流程规范
1、开发时请时刻关注是否有其他需求也涉及到你所修改的文件,优化需求请特别注意;

2、需求执行时请即时跟相关人员沟通;

3、开发和自测结束后,将代码通过svn提交到测试站,并告知运维同学切到可访问环境;
1)、svn提交代码前 必须先Update 代码,确保无冲突再提交;
2)、代码提交过程中如遇文件冲突,请仔细检查该文件代码,并找到冲突原因,并修正,严禁删除冲突文件中不是你修改的任何代码哪怕是一个小逗号;
3)、代码提交和切换后,将测试地址发给需求提出者确认和Tester 测试,并耐心及时修正发现的问题;

4、上传和发布规范
Tester和需求提出放反馈无误后,将需求所涉及到的文件 放入一个文件夹中,发给运维的同学
1、 打包(注:此打包非压缩包)文件夹命名:
20120310XX站前(后台)台文件上传-XXX,
如:20120310俄语站前台文件上传-陈XX;

2、需要上传文件的文件夹发给相关Tester,由Tester将文件提交给运维组同学,原则上禁止直接讲文件交给运维;

3、文件上传后再次在正式环境进行确认,确认无误后,再添加活动入口等操作;

(五)下线
活动结束或新版上线时,将下线和旧版活动页面做好本地备份;

(六)整理和归档
1、将需求相关文件(包括需求文档、PSD源文件,原型图等)整理到以上线日期为开头的文件夹中;2、对后期有修改的项目,在归档文件夹中作相关记录,同时保存原始版本和修改版本的相关文件。

五、后语
此规范自发布之日起执行,如有意见和建议请及时提出,并作相应的调整和修改;
祝大家愉快!