第一篇：前端开发命名规范范文
前端开发工作规范
为提高团队协作效率，便于后台人员添加功能及前端后期优化维护，输出高质量的文档，特制订此文档。本规范文档一经确认，前端开发人员必须按本文档规范进行前台页面开发。
【写在规则前面的话】
项目的可维护性第一。你不是一个人在做事，项目的维护和二次开发可能是直接的或间接的团队合作。好的可维护性，从四个方面下手：
1）代码的松耦合，高度模块化，将页面内的元素视为一个个模块，相互独立，尽量避免耦合过高的代码，从html,css,js三个层面都要考虑模块化。
2）良好的注释。
3）注意代码的弹性，在性能和弹性的选择上，一般情况下以弹性为优先考虑条件，在保证弹性的基础上，适当优化性能。
4）严格按照规范编写代码。
【命名规则】
为避免命名冲突，命名规则如下：
1）公共组件因为高度重用，命名从简，不要加前缀；
2）各栏目的相应代码，需加前缀，前缀为WD姓名拼音的首字母，例如：杰夫前缀为“jf_”，分隔符为下划线“_”，例如：“jf_imgList”;
3）模块组件化，组件中的class或id名采用骆驼命名法和下划线相结合的方式，单词之间的分隔靠大写字母分开，从属关系靠下划线分隔。例如：
html:
- 1)XXXXXXXXXXXXXX
- 2)XXXXXXXXXXXXXX
- 3)XXXXXXXXXXXXXX
css:
.textList{}.text_list X{}
.textList_firstItem{ }.textListFirstItem X{}
4）命名清晰，不怕命名长，怕命名容易冲突，长命名可以保证不会产生冲突，所以css选择时可以尽量不使用子选择符，也能确保css优先级权重足够低，方便扩展时的覆盖操作：.textList_firstItem{}.textList.firstItem{}
5)命名要有意义，不要使用没有意义的命名。用英语命名，不要用拼音。
【分工安排】
1)分工原则为公共组件（包括common.css和public.JS）一人维护，各栏目其他人负责，每个栏目正常情况下一人负责，要详细写明注释，如果多人合作，维护的人员注意添加注释信息，具体注释细则，详见注释规则；
2)VD设计完设计图后，先和交互设计师沟通，确定设计可行，然后先将设计图给公共组件维护者，看设计图是否需要提取公共组件，然后再提交给相应栏目的WD。如果有公共组件要提取，公共组件维护者需对栏目WD说明。
3)如果确定没有公共组件需提取，交互设计师直接和各栏目的WD交流，对照着VD的设计
图进行说明，WD完成需求；
4)WD在制作页面的时候，需先去common文件中查询是否已经存在设计图中的组件，如果有，直接调用；没有，则在app.css和app.JS中添加相应的代码。
5)WD在制作过程中，发现有高度重用的模块，却未被加入到公共组件中，需向公共组件维护人进行说明，然后工作组件维护人决定是否添加该组件。如果 确定添加，则向WD们说明添加了新组件，让WD们检查之前是否添加了类似组件，统一更新成新组件的用法，删除之前自定义的css和js。虽然麻烦，但始终 把可维护性放在首位。
6)公共组件维护者的公共组件说明文档，需图片和说明文字配套，方便阅读。
【注释规则】
1.公共组件维护者和各栏目WD都需要在文件头部加上注释说明：
/**
*文件用途说明
*作者姓名、联系方式（旺旺）
*制作日期
**/
2.大的模块注释方法：
//================
// 代码用途
//================
3.小的注释；
//代码说明
注释单独一行，不要在代码后的同一行内加注释。
例如：
//姓名
var name = “abc”;V
var name =”abc”;//姓名 X
4.维护人员的注释方法：尽量根据注释说明，找到代码的原作者，让原作者进行维护，原作者进行维护可以无需添加额外说明，直接进行修改。如果因为特殊原因，无法让原作者进行维护，需添加额外说明进行注释。说明文字为：“/*change by xxx)原代码如下：
<{源代码}>.新代码如下:*/
新代码：
如：var name = “abc”;这段代码，要将name由“abc”变成“123”，原作者可直接改var name=”123”;非原作者修改，需改成：
/*(change by 杰夫)原代码如下：<{
var name = “abc”;
}>新代码如下：*/
var name =”123”;
修改时添加的注释，在项目通过测试之后，上线前，可以优化掉。
【js规范】
1)底层JS库采用YUI 2.6.0；
2)统一头部中只载入YUI load组件，其他组件都通过loader对象加载；
3)js尽量避免使用全局变量，复杂应用写成组件，通过构造函数实现多态，写在公共组件或
外部js中，简单应用直接写在init函数中，通过命名空间或匿名函数将变量包进闭包中。
【切图规范】
1．尽量把页面的背景图及小图标整合到一张图片，用CSS定位方法。（这样以减少http请求，从而降底网站的下载速度。）
2．尊从内容与页面样式的脱离，如需要，同样也要做到布局与color的脱离。（什么样的图片属于内容：从数据库里取出来的图片。凡是不属于内容的图片请都用背景。）
1）页面代码，做到精简，逻辑性清楚；（公用部位可以引入进来，比如头部，脚部）
2）CSS逻辑清析，精简。可在不改变功能的前提内，做到能更换页面布局及换色。
CSS样式每个页面引入不超过两个文件，一个是common：它包含整个站点都需用到的公用部分，如整体布局，头部，脚部，框，按扭等。另一个是当前页的CSS。（CSS文件引入在2个之内，减少http请求）避免CSS的表达式。
3．将脚本放在底部。（这样页面就可以逐步呈现，而且页面中的可视组件可以尽早下裁。）配合程序开发人员我们需要注意的（xhtml）：
1．了解用户可编辑上传修改的“图片”，“文字”区域的需求。根据需求来定位控制，以保证页面的稳定显示。
如图片，需了解：
1）宽度是否是固定大小，2）宽度最大限度，3）大小不一样时的居中显示
如文字，需了解：
1)文字的最大长度。及加“…”省略号区域,2)在测试中经常也会碰到英文无空格情况，得用overflow: hidden的方法隐藏溢出部分。
2．每个页面加上正确显示的TITLE。（这个是我经常容易忽视的）
3．在页面中尽量完成每步交互效果，包括既时响应的。
4．提交程序员的demo必须是连贯的，交互效里齐全，而且经过自已在IE6.0，IE7.0，IE8.0，FIREFOX等浏览器的一次以上的整体测试。
用户体验方面需要注意的：
1．每个连接，按钮要做上鼠标hover时的一个变化效果（如果hover时是换一张背景图片，请把这两张图片整合在一张图片中，以防止在hover时，页面还在download变化的那张图片，这样会出现那个按钮无图的间隔）；
2．Input有个label，可以让用户在点击字时，光标自动跳入相应input中；
3．图片应该有alt属性，以备图片阻止时，文字的替换。
本文由世纪淘商城()整理分享！版权归原作者所有！
第二篇：前端开发心得
web前端核心技术
从事前端开发工作1年多了，从最初的DIV+CSS学起，到现在学到html5、css3、javascript，jquery等等，我觉得前端要学的技术太多了，很多人认为前端开发要掌握的技能简单，就是网页制作，其实不然，前端开发是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript/ajax，现在最新的高级版本是HTML5、CSS3，以及SVG等。JavaScript作为最难的语言之一，许多编程高手也不敢妄自菲薄、自封精通。
关于兼容性的问题我相信对于每个做前端开发的人来讲是一个很头疼的问题，互联网目前主流浏览器有IE6789，Firefox，Chrome，Opera，Safari，遨游，包括国内主流的搜狗，腾讯 TT，360等等；从内核上讲主要有IE的，遨游版IE，safari，firefox以及opera的，这些都是大家常见的。所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，用户用什么浏览器来查看同一网站，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。这个时候就需要针对不同的浏览器写不同的CSS，这个过程叫CSS hack。虽然我们写代码都要求按照标准，不写hack代码，但实际工作中为了兼容主流浏览器，hack代码是免不了的，所以这也应该是每个前端开发人员必备的技能。
前端的开发工具很多，比较常见的有Dreamweaver，Notepad，webstrom，Sublime Text等等，我现在在使用webstorm，强大的提示功能可以帮助我们很快的熟悉并掌握网页布局,检查错误等。调试代码的工具我使用的Firebug。Firebug是网页浏览器Mozilla firefox 下的一款开发类插件，它集HTML查看和编辑、Javascript控制台、网络状况监视器于一体，是开发JavaScript、CSS、HTML和Ajax的得力助手。Firebug如同一把精巧的瑞士军刀，从各个不同的角度剖析Web页面内部的细节层面，给Web开发者带来很大的便利。Firebug也是一个除错工具。用户可以利用它除错、编辑、甚至删改任何网站的CSS、HTML、Dom 以及Javascript代码。
以上是自己做前端开发的一点心得，它所涵盖的知识面远远不止这些，我也在不断的学习，不断地丰富自己，希望自己能在前端这个职位上开阔自己的一片天地！
第三篇：WEB前端开发经验总结
ASP.NET前端开发经验总结
通过此次大作业的设计到完成，我负责的是web前端的开发，经过此次作业和结合W3C上的自学，我渐渐有了一些对前端开发的小小经验（仅为个人意见）。WEB标准是什么？
说是WEB标准，不过我这里主要是对HTML5 和 CSS3.0的一些经验总结。因为WEB含盖的内容实在是太多了，“WEB标准”是一系列标准的总称，包括HTML5.0、HTML4.0、XHTML1.1、CSS3.0、CSS2.1、XML1.0、RSS2.0、ECMAScript1.1、DOM1.0等等。所以这里要跟大家指出来一下，WEB标准不是我们所说的DIV+CSS。刚刚上面提到了――DIV+CSS，这里要说明下，这样说其实是不正确的。DIV+CSS准确的说法（个人的理解）应该是：采用W3C推荐的WEB标准中的HTML5结合CSS3.0样式表制作页面的方法，DIV应该指的是HTML标签，而CSS显示是指的CSS样式表了。
采用WEB标准开发的好处
那么W3C为什么会推荐这样的页面制作方法呢？下面我们就简单的看看采用WEB标准开发（个人理解的）相对以前TABLE布局的优势有哪些？
1、节约运营成本
看看我们的WEB标准制作方法是如何做到的？
采用WEB标准制作，我们可以做到表现很形式的分离，我们用XHTML来表现（数据），用CSS来控制（页面元素呈现的）形式。写的好的页面，XHTML代码中基本上都是用户要看的数据，还其他修饰性的东西，全部由我们的CSS来控制。这样一来我们的（XHTML）页面的体积就大大减小了，这样你在带宽上的费用就会大家降低了，这个怎么降低的，你可以想象一下，YAHOO的首页小1K，100W个人一起访问，那么带宽节约了多少？而且可以更充分的利用带宽。
而我们的CSS控制了，所有的页面元素的样式，现在想改网站的整体风格，你只需要花几分钟修改一下一个CSS文件，就可以轻松搞定了。维护的成本也下来了，省了不少钱了吧？还有，你开这个页面的速度会快很多啊，一个让你等半分钟的页面，除非里面的信息对你很有用，不然我们大家基本都没有太多的时间去用来等待的。
2、对用户友好更友好，且有机会获得更多的用户 现在来说说用户友好。首先我想把我们的用户来分下类。第一类：普通用户（每个访问我们网站的人）； 第二类：搜索引擎；
采用WEB标准开发的页面，结构清晰，页面体积小，浏览器兼容性好。普通用户访问的时候，页面打开速度快，而且不管用户使用那种浏览器，都能够正常访问（显示）页面，且页面的结构清晰，要找的数据可以很方便的浏览到。
而对搜索引擎来说，一个好的采用WEB标准开发的页面，都是做过SEO优化的，它访问起来很友好，很容易理解你的页面中哪里是标题（H1~H6标签），哪里是段落（p标签），哪里是段落里要强调的内容（strong标签）等，它可以很容易的分析出来。而一个SEO好的站点，大家都知道，被搜索引擎收录的机会更多，这个也意味着您的网站会被更多的普通用户访问到，给你的站点带来更多的用户。
一个能帮我们省下大笔费用，提高工作效率。同时又能够提高页面浏览速度，对用户友好，甚至能够不花钱宣传，就能给你带来更多用户的技术。你说你会不会去使用它？这个也正式我们的W3C推荐使用WEB标准开放网站的原因啊。而这个技术也得到了我们广大用户的认可，所以现在需要学习WEB标准啊。合理的布局
前面我提到了一些知识点――“结构清晰、SEO优化、页面体积小、HTML代码中基本上都是用户要看的数据”。这些东西，都是我做了合理布局的结果。而且我个人觉得，我们采用WEB标准制作的一切都是从这个知识点开始的，所以我这里就先来说这个话题。
也许有人会问，怎样的一个页面，才算是合理的布局的呢？这个问题问题问得好，也是我们大家刚开始学用WEB标准的问得最多的问题之一，我也曾经常被这个问题所困扰，这里就说说我对合理布局的一些理解。
在开始讲合理布局的页面要达到的要素前，我们还是用个实例来讲解会更直观些。先来看看这个图片：
不错，这个是一个文章详细页，没有左右两栏布局，不过这里我重点要讲的是合理的布局。
这是此次实验中customer（前端的一项）部分的完整代码：
<%@ Page Language=“C#” AutoEventWireup=“true” CodeFile=“Customer.aspx.cs” Inherits=“Customer” %> <%@ Register Src=“Controllers/Bottom.ascx” TagName=“Bottom” TagPrefix=“uc4” %> <%@ Register Src=“Controllers/Top.ascx” TagName=“Top” TagPrefix=“uc1” %> <%@ Register Src=“Controllers/Left.ascx” TagName=“Left” TagPrefix=“uc2” %>
” name=“description”/> ” name=“keywords” />