前端开发中一些常用技巧总结

第一篇：前端开发中一些常用技巧总结

前端开发中一些常用技巧总结

自己前端开发中常用到的一些技巧及问题解决方法,会常更新,希望对前端路上的朋友有帮助.1.文章标题列表中日期居右显示的两种方法,方法A相对方法B省资源,但比方法B要多写两句代码,使用时请视情况而定: 方法A(经典论坛ariesjia提供的思路.感谢~):

@Mr.Think这是文章标题2010-10-10

p span{position:absolute;right:0} 方法B:

2010-10-10@Mr.Think这是文章标题

其实这两种方法可以延伸到很多情况下,很实用的一种写法;2.web标准中,同一页面中只能有一个h1标签.很多人知道这个概念,但做到的却很少;3.空白外边距互相叠加的问题:一般通过添加透明边框或者1px的内边距避免.详细解读:http://mrthink.net/css-margin-overlying-way/;4.ie6下max/min-width/height实现,_width: expression(this.width >600 ? “600px” : true);,height同理.5.html/class/id,最好统一以小写书写,这样更严谨(符合xhtml标准);6.不推荐用下面代码兼容IE8:

如果是非短期性页面,尽量避免使用,页面应尽可能保证向后兼容.更多兼容方法请详细阅读: http://mrthink.net/cssandhtml-hack-mainbrower/

7.空div在IE(FF中没有)是有默认高度的,可以用定义:div { witdh:100%;background:#9c0;font-size:0}的方式去掉默认高度;8.在使用table标签时应该尽可能的利用它本身的属性，最大限度的分离结构与样式.详细解读:http://mrthink.net/csshtml-colgroup-col-style/;9.充分利用表单中label标签提升用户体验;这一点对于页面中那些小的选项框,以及对残障人士阅读网站都有好处.细节是用户体验的第一步;10.fieldset, legend标签, 鲜为人知,却很实用的一组标签;它可以很明了的把一组元素框起来,主要用于表单;11.optgroup标签,鲜为人知,它对提升选择表单用户体验很有帮助.作用? 就是可以在有很多选项时,对这些选项分组:

one select two select

three select four select 效果演示:

12.表单都要加name值,name值是一个标示,不同于id,据我所发现,若是未定义name值,非IE浏览器下是无法通过document.formid获取到表单元素的.请看如下代码及注释:

第二篇：前端开发心得

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前端开发知识点总结

HTML知识总结

span

行级元素，多个

同行块级元素，独占

一行块级元素，前后

保留一行

标题标签，h1~h6表6个等级，加粗，前后保留一行width：设置宽

度height：设置高

度alt：图片加载失败显示的文本

div

文本类

p

h

图片标签img

color：颜色

水平线常用标签

hr

size：高度（粗

细）width：宽度（长度）herf：超链接转到的地址

超链接a

target

_self:默认值，在当前页面打开_blank:在新窗口

打开

带标题的框fieldsetlegend设置标题

disc：实心圆

无序列表

列表标签

有序列表

ul

square：小方块

olcircle：空心圆

tr表示行

th

表示标题单元格，居中、加粗

td

表格标签

caption

表示一个单元格

表示标题，定义在第一行，居中

rowspan

设置单元格占的行

数

colspan

设置单元格占的列

数

action表单提交地址

get：显示提交参数，将参数用?和&拼接到url上

带到服务器端

method

post：隐式提交参

数optgroup 表示分组,分组不能选,只能选分组中的option

下拉菜单

selected默认选中

multiple 设置下拉菜单为多选模式

表单项

rows: 显示文本的行数(高度)

文本域</p><p>cols: 显示文本的列</p><p>数(宽度)</p><p>name：参数名</p><p>size：显示字符长度（控制文本框长</p><p>度）maxlength：最大可</p><p>输入字符数</p><p>input文本框type=“text”</p><p>placeholder：提示</p><p>内容</p><p>disabled：不会被提交到服务器readonly：只读（会被提交到服务</p><p>器）</p><p>value：默认值</p><p>密码框</p><p>type=“password”单选按钮type=“radio”复选框</p><p>type=“checkbox”文件选择框type=“file”</p><p>按钮</p><p>type=“button”提交</p><p>type=“submit”checked：默认选</p><p>中</p><p>input</p><p>按钮</p><p>重置type=“reset”</p><p>noresize：不能改变框架大小</p><p>frame：表示框架</p><p>scolling：是否显示滚动条（yes、no、auto）设置框架集在纵向上的拆分策略设置框架集在横向上的拆分策略</p><p>rows</p><p>cols</p><p>border</p><p>框架集<frameset></p><p>框架边框的宽度</p><p>borderColor框架边框颜色</p><p>frameBorder</p><p>设置框架是否有边框(yes|no)_blank:新窗口中</p><p>打开_self:在当前窗口</p><p>打开</p><p>框架集中的超链接打开方式target_parent:父窗口</p><p>中打开_top在最顶层窗口中打开frameName：在对应name框架打</p><p>开</p><p>ifame</p><p>在页面中嵌入框架</p><p>dl、dt、dd其他标签</p><p><dl></p><p><dt>数码</dt> <!--dt不会缩进--><dd>手机</dd> <!--dd会缩进--></dl></p><p>marquee：滚动标签</p><p><img src=“usemap_img.jpg” usemap=“#yifuMap”></p><p><map name=“yifuMap” id=“yifuMap”><area</p><p>shape=“circle”</p><p>coords=“309,257,20”target=“_blank”</p><p>href=“http://5新标签</p><p>number：数字输入</p><p>date picker：日期选择</p><p>datalist：自动提示</p><p><datalist id=”arealist“><option>sichuan</option><option>chongqing</option><option>guangzhou</option><option>shanghai</option><option>beijing</option><option>tianjin</option></datalist></p><p><input type=”text“ list=”arealist“></p><p>video：动画</p><p>媒体</p><p>radio：音频</p><p>autocomplete：是否关闭自动提示（off |</p><p>on）html5新标签</p><p>autofocus: 自动获得</p><p>焦点</p><p>required: 表示控件</p><p>必须输入内容</p><p>controls : 播放控制条</p><p>autoplay ：自动播放</p><p>loop ：循环播放preload ：预加载，如果设置了autoplay，就可以不用设置preload</p><p>CSS知识点总结</p><p>内联：直接在标签的style属性上编写</p><p>样式<input type=”text“ style=”color: blue;background-color: #eeeeff;“>样式定义方式</p><p>样式块：在style标签中编写样式块，并通过一定规则（选择器）应用到对应的那些标签上(通常写在head中)</p><p><style>span {</p><p>color: green;</p><p>background-color: #eeffee;}</p><p></style></p><p>外部样式文件：将样式块编写在外部的css文件中(不用写style标签)* 在需要使用样式的页面通过link标签引入样式文件(通常写在head中)</p><p><link href=”hehe.css“ rel=”stylesheet“></p><p>id选择器#xxx 针对id为xxx的标签</p><p>类选择器.xxx 针对class属性为xxx的标</p><p>签</p><p>标签选择xxx 针对标签名为xxx的标签</p><p>*选择器选择所有元素选择器</p><p>后代元素关系选择selector1 selector2 {...} 针对selector1下的所有的selector2</p><p>子元素关系选择selector1 > selector2 {...} 只针对selector1的selector2子元素(如果有后代selector2元素则不会应用)</p><p>紧邻兄弟关系选择selector1 + selector2 {...} 只针对紧接在selector1后的selector2元素</p><p>所有随后的兄弟关系selector1 ~ selector2 {...} 针对selector1后的所有的selector2兄弟元素</p><p>color：字体颜色</p><p>font-size：字体大小</p><p>font-family：字体样式</p><p>字体</p><p>font-weight: bolder(加粗)| normal(不加粗)font-style: 设置字体倾斜(normal | italic | oblique)*italic和oblique实际显示效果</p><p>几乎一致font-variant: 设置字体显示为小型大写字母</p><p>text-align: 水平对齐方式(left | center | right)常用属性</p><p>vertical-align: 垂直对齐方式(top | middle |</p><p>bottom)</p><p>line-height: 设置行高(通常用于设置文本居</p><p>中)</p><p>white-space: nowrap 不换行, pre 当做pre标签</p><p>border: 边框(1px solid</p><p>red)</p><p>文本</p><p>width: 宽度</p><p>underline 下划线</p><p>height: 高度</p><p>overline 上划线</p><p>text-decoration: 文本装</p><p>饰</p><p>line-through 贯穿线(删</p><p>除线)</p><p>blink 闪烁</p><p>none 无</p><p>dtext-shadow: 3px 3px 5px red;第一个参数: 阴影水平位置(x轴上的偏移量)</p><p>text-shadow: 文本阴影</p><p>第二个参数: 阴影垂直位置(y轴上的偏移量)</p><p>第三个参数: 模糊程度第四个参数: 阴影颜色</p><p>padding：内边距</p><p>padding: xxpx;</p><p>padding: xxpx xxpx;</p><p>padding: xxpx xxpx xxpx;</p><p>padding: xxpx xxpx xxpx xxpx;padding: auto;</p><p>padding: xxpx auto;padding-toppadding-leftpadding-rightpadding-bottom盒子模型</p><p>margin：外边距</p><p>margin: xxpx;</p><p>margin: xxpx xxpx;</p><p>margin: xxpx xxpx xxpx;</p><p>margin: xxpx xxpx xxpx xxpx;margin: auto;</p><p>margin: xxpx auto;margin-topmargin-leftmargin-rightmargin-bottom</p><p>border：边框</p><p>color：颜色；width：宽度；</p><p>style：outset|inset|solid|double|dottedborder-radius: 10px;/* 同时设置4个角*/</p><p>background-color: 背景颜色</p><p>background-image: 背景图片</p><p>background-repeat: no-repeat | repeat-x |</p><p>repeat-y | repeat背景</p><p>background-position: xxxpx xxpx | xx%</p><p>xx%;(可以为负数)</p><p>background-size: xxxpx xxpx | xx% xx% |</p><p>cover | contain;(不能为负数)</p><p>cover: 拉伸,可以超出contain: 拉伸不能超出</p><p>background-attachment: scroll(随着内容</p><p>一起滚动)| fixed(不滚动)</p><p>hidden：隐藏</p><p>scroll：滚动</p><p>overflow：当内容溢出</p><p>时的处理方式</p><p>visible：直接显示</p><p>auto：如果溢出就滚动，否则不显示滚动条</p><p>visible 显示</p><p>visibility：设置元素是</p><p>否显示</p><p>hidden 隐藏，保留占位</p><p>none：隐藏，不保留占</p><p>位</p><p>block：设置为块级元</p><p>素</p><p>display：设置元素是否</p><p>显示</p><p>inline：设置为行级元</p><p>素</p><p>布局</p><p>inline-block：设置为行</p><p>内块元素</p><p>left 左浮动</p><p>float: 浮动right 右浮动</p><p>none 不浮动</p><p>left 不允许左边有浮动</p><p>clear: 清除浮动right 不允许右边有浮动</p><p>both 不允许两边有浮动</p><p>ul或ol 自带样式：</p><p>列表样式</p><p>list-style-type: 列表项的样式</p><p>margin: 16px 0px;padding: 0px 0px 0px</p><p>40px;</p><p>absolute：如果有父元素被定位按照父元素的原点进行定位，否则按照浏览器原点进行定位</p><p>position</p><p>定位</p><p>z-index: 设置z轴的值，越大越在最前</p><p>relative：相对定位参照元素本身的位置</p><p>fixed：固定位置，不</p><p>会滚动</p><p>link 超链接默认样式</p><p>hover 鼠标悬停样式</p><p>active 鼠标点击样式</p><p>visited 访问之后的样式（主要控制颜色）</p><p>伪类</p><p>focus 获得输入焦点的样式</p><p>first-child 第一个元素</p><p>last-child 最后一个元素</p><p>:not 不包含指定的选</p><p>择器</p><p>:noly-child 是父元素的唯</p><p>一子元素</p><p>cursor 鼠标样式</p><p>其他样式</p><p>box-shadow 阴影</p><p>translate:平移</p><p>rotate：旋转transform：变换</p><p>scale：缩放</p><p>skew：扭曲</p><p>matrix：以变换矩阵变换</p><p>第一个值表示需要过渡的样式属性transition 过渡</p><p>transition:transform2s,background-color.5s;</p><p>第二个值表示整个过渡过程需要的时间第三个值表示过渡时的贝塞尔曲线第四个值表示延迟多久才开始过渡animation 动画</p><p>@keyfarmes 关键帧用于定义动画的细节（每一帧如何显示）</p><p>@keyframes myanimation {0% { background-color: #cfc;}30% {</p><p>background-color: #ccf;border-radius: 50px;}80% {</p><p>width: 300px;</p><p>background-color: #fcc;}</p><p>100% {</p><p>width: 300px;height: 300px;</p><p>background-color: #000;}}</p><p>@-o-keyframes myanimation {}@-ms-keyframes myanimation {}@-moz-keyframes myanimation {}@-webkit-keyframes myanimation {}</p><p>需要显示动画的地方通过animation属性来使用声明的关键帧</p><p>.ac:active {</p><p>animation: myanimation 5s;-o-animation: myanimation 5s;-ms-animation: myanimation 5s;-moz-animation: myanimation 5s;-webkit-animation: myanimation 5s;}opacity透明度从0.0 ~ 1.0 0.0完全透明，1.0 完全不透明浏览器兼容前缀</p><p>-webkit-chrome，safari, opera-o-opera</p><p>-moz-firefox</p><p>-ms-ie（ie9以上）</p><p>JavaScript</p><p>javascript代码必须包含在<script></script>标签中</p><p>也可以书写到外部的.js文件中,通过<script src=”xxx.js“></script>来引入</p><p>script标签只能同时做一件事情.如果既有src属性也包含代码则只会执行外部文件的代码</p><p>通过alert来弹出提示框</p><p>通过document.write来输入文本到页面上(可以输入标签)Number: 数值型整数和小数Boolean: 布尔型(true |</p><p>false)</p><p>String: 字符串</p><p>字符串必须被”“或''包含必须对称</p><p>如果字符串中包含引号可以单引号中包含双引号或者是双引号中包含单引号</p><p>也可以使用'来表示一个单引号”来表示一个双引号</p><p>n 表示换行数据类型</p><p>t 表示制表符表示书写方式</p><p>NaN: Not A Number 当使用非数字来进行运算时的值</p><p>undefied: 未定义</p><p>null: 空值</p><p>substring 截取子串, 从start到end-1处,如果</p><p>没指定end则取到最后一个字符</p><p>toUpperCase 将所有字符变成大写</p><p>toLowerCase 将所有字符变成小写</p><p>indexOf 查找子串首次出现的位置, 如果找不到则</p><p>返回-1字符串处理</p><p>lastIndexOf 查找子串最后一次出现的位置, 如果找不到则返回-1charAt 取指定位置上的字符slice 也是取子串,效果和substring一样可以用-1,-2,-3...从末尾</p><p>开始计数split 将字符串按照指定的字符进行拆分成为数组</p><p>获取当前时间var now = new Date()</p><p>获取指定时间的日期对象</p><p>var date = new Date(yyyy,MM,dd,HH,mm,ss)</p><p>设置指定时间(将时间对象设置为一个指定时间)</p><p>now.setFullYear(yyyy,MM,dd,HH,mm,ss)</p><p>now.setMonth日期Date</p><p>now.setDatenow.setHours</p><p>...获取指定时间信息</p><p>now.getFullYear()// 年只能取出年份,如: 2015</p><p>now.getMonth // 月0-11月</p><p>now.getDate // 日</p><p>now.getDay // 星期0-6(0表示星期天)</p><p>now.getHours // 时24小时制</p><p>now.getMinutes // 分now.getSeconds // 秒now.getMilliseconds// 毫秒</p><p>通过new Array()来创建数组var names = new Array();</p><p>var names = new Array(“小王”, “大王”, “炸弹”);// 创建时给数组设置默认值</p><p>//用json格式表示数组</p><p>var names = [];</p><p>var names = [“小王”, “大王”, “炸弹”];数组Array</p><p>可以通过length来设置或获取数组的长度</p><p>push : 往数组末尾添加元素</p><p>pop: 删除并返回数组的最后一个元素unshift: 往数组的开头添加元素shift: 删除并返回数组的第一个元素reverse: 颠倒数组顺序</p><p>sort: 按“字符串”的自然排序规则进行升序</p><p>splice: 删除指定位置处的指定个数元素并将第三个参数之后的参数添加到被删除位置(设置第二个参数为0则实现只添加不删除, 之传入两个参数实现只删除不添加)</p><p>slice: 获取start到end处的子数组</p><p>join: 将数组元素以指定分隔符进行连接成为字符串</p><p>function xxx(....){</p><p>声明函数</p><p>....}</p><p>var xxx = function(...){</p><p>...函数变量</p><p>}var ooo = xxx;</p><p>ooo();函数</p><p>function fn(fx){</p><p>fx();</p><p>将函数作为参数</p><p>}fn(function(){</p><p>...});（function(...){</p><p>立即执行函数</p><p>....})(...);</p><p>getElementById 根据id获取唯一的元素var xx = document.getElementById(“xx”);DOM(Document Object Model)文档对象模型</p><p>获取元素</p><p>getElementsByTagName 根据标签名获取元</p><p>素数组</p><p>onclick 鼠标点击事件</p><p>getElementsByClassName 根据类获取元素数组(如果元素被改变了class值将会从数组</p><p>中删除)</p><p>onmouseover 鼠标进入事件</p><p>onmouseout 鼠标离开事件</p><p>onmousemove 鼠标被移动</p><p>onmousedown 鼠标按钮被按下事件机制</p><p>onmouseup 鼠标按钮被松开</p><p>onkeydown 某个键盘按键被按下</p><p>onkeyup某个键盘按键被松开</p><p>onload 一张页面或图像被完成加载</p><p>onchange 域的内容被改变</p><p>onfocus 元素获得焦点</p><p>onblur 元素失去焦点</p><p>setTimeout: 延迟执行(只会执</p><p>行一次)var xx = setTimeout(xxx, 1000);setTimeout(“fn();”, 3000);BOM(Browser Object Model)</p><p>window</p><p>清除使用clearTimeout(xx);setInterval: 定时执行(间隔指</p><p>定时间循环执行)</p><p>xx.offsetLeft获取元素的位置和尺寸(只读)</p><p>xx.offsetTopxx.offsetWidthxx.offsetHeight</p><p>var xx = setInterval(xxx,1000);</p><p>清除使用clearInterval(xx);</p><p>[] 表示[]中的字符任意取一个</p><p>在[] 中的^ 表示非不包含该字符</p><p>()表示将多个表达式合并为一个表达式</p><p>在()中的|表示将两个匹配条件进行逻辑“或”（Or）运算。+ 前一个表达式出现至少一次1~n {1,}* 前一个表达式出现任意次0~n {0,}? 前一个表达式出现0~1次{0,1}{n} 前一个表达式出现n次</p><p>{n,} 前一个表达式出现至少n次{n,m} 前一个表达式出现n~m次.任意字符(不包含rn)正则表达式</p><p>^ 匹配字符串的开头$ 匹配字符串的结尾</p><p>w 表示一个任意的单词字符包括_ [a-zA-Z0-9_] * 不包含破折号</p><p>W 对w取反(不包含单词字符)[^a-zA-Z0-9_]d 表示一个数字字符[0-9]D 对d取反[^0-9]s 表示一个任意空白字符空格中文状态的空格制表符全角空格</p><p>S 对s取反非空格n 换行符b 单词边界</p><p>B 不是单词边界(对b取反)</p><p>eval</p><p>执行字符串形式的代码。</p><p>for(var i in array){var item = array[i];</p><p>}</p><p>for(var key in obj){var value = obj[key];</p><p>}</p><p>迭代数组迭代出的值为数组的下标</p><p>for...in</p><p>迭代对象迭代出的值为对象的属性名其他</p><p>with</p><p>设置以某个对象为代码块作用域对象</p><p>delete attribute删除属性</p><p>isNaN</p><p>如果被判断值不是一个数字则返回true，否则为false</p><h2><a name="4" >第四篇：前端开发实习总结</a></h2><p>多种多样的Web应用跟随互联网Web2。0时代的兴起不断出现，Web前端出现了翻天覆地的变化，今天小编给大家整理了前端开发实习总结，谢谢大家对小编的支持。</p><p>前端开发实习总结篇一</p><p>今天就简单聊聊上面的Struts+Spring+Hibernate吧。</p><p>Struts 代表：表示层；Spring代表：业务逻辑层；Hibernate则代表持久层。他们是目前在Java Web编程开发中用得最多的框架，其实这样区分是为了适应软件开发过程中各个分工部门之间保持一致性的需要。说得简单点就是大家都在一个模式下写代码，这样就能保证写出来的程序能被每一个人都能够读懂，而且有些基本的东西它可以自动帮你生成，不用你自己一个一个的敲了，达到了代码复用。这样保证可读性的同时也提高了开发效率，从而降低了成本。Struts这个框架其实就是Java MVC设计模式中（简称Model1与Model2）Model2的一个具体实现，Spring 则通过提供ICO（控制反转，也称依赖注入）实现了对对象甚至事务（如声明式事务）的集中管理，此外还引入了AOP（对向切面编程），当然也完全兼容其它框架。Hibernate吗，就是一个实现对象与关系映射的中间件，大家知道，现在的主流数据库还是关系型的，但编程却已经采用了面向对象的思想，如何让编程人员能像操作对象一样，操纵数据库里的数据呢？Hibernate就是这样一种框架。以前Java程序员与数据库打交道都是通过JDBC，还要写 SQL语句，不过Hibernate彻底改变了这一切，它在JDBC之上又作了一次封装，从而实现了不用写SQL语句就可以实现操作数据库。</p><p>值得提醒的是，这三个框架都是轻量级的，没有侵入性或者侵入性很低，不像EJB这样的重量级框架，它们都能最大限度的实现代码的可复用。</p><p>前端开发实习总结篇二</p><p>以前在校很少自己做程序，对软件工程更是一无所知。来到公司，开始接触“大规模”（其实现在看来实习的项目其实还是很小的）软件开发，一时真的有些迷茫。比起VSS，MVC，QA，CMMI，我对JAVA，JSP，XML的一窍不通根本不值一提。大家都不想输在“起点”，所以都默契地在加班，这样一直持续了实习的两个月。</p><p>刚来的时候“始业教育”显得慢吞吞，我们还经常盘算去哪哪玩之类的。我和FLYSKY（20个新生里唯一一个南区的兄弟，软件学院的）还经常出去吃各种小吃，每到一处都尝尝本地的风味，这是他的习惯。之后开始的培训还不是很难过，JAVA，C++，ORACLE，老师们讲的很“好”，可以说是非常好，好得我们没有几个人能听懂。大家开始发愁，我也是每天晚上都基本看书到10点。</p><p>“我心说得亏哥们我还练过”，来之前的2月份我就自己买了一本THINKING IN JAVA，看懂看不懂怎么说也算是准备了一下JAVA，C++虽说没去上过课，但凭我的直觉我就一下看中这东西很有用，自己也看过一阵。至于ORACLE，虽然不了解，但毕竟因为佩服“云飞扬”的性格和敬业精神，咱SQL选修也不是白混的。专业倒还有点“基础”，再加上咱这自学能力也不是吹的，基本维持。可等到后来的日语课就全迷糊了：本就没有语言天赋，再加上记忆严重欠缺，总是特别害怕去上日语课。不过特别喜欢那个老师说话的感觉，加上她一直对我都很好，所以还是很用心的学着。</p><p>随着培训的收尾，我们开始正式进入项目。从需求分析，概要设计到详细设计，我们一步一步的开始接触软件开发的每个细节。最受不了的就是每天都要记“周报”，填写自己的劳动成果。因为这个我还被QA通报了好几次呢，真的很郁闷。其实现在我很感谢这种制度化的东西，某些情况下好习惯的养成是要靠强制来确保的。详细设计之后就是企盼已久的编码，我心想终于可以做点“正事”了。现在回头一看才知道，其实编码只占软件开发的整个过程劳动量的1/4左右，而且其他的环节也不是想象中的那么无足轻重。</p><p>编码我其实做的很不好，主要是因为需求分析阶段就没有认真仔细的理解需求和规格说明，加上编码时一个关键时段我回校和老同学叙旧。那阵项目经理（PM）就经常和我们说，“有问题自己想办法，不要经常问我”。PM其实是在叫我们自己酝酿，遇到难题只有“憋”一“憋”才能有真的收获。而我不在的那三天正好是大家技术/思路上的一个“跃迁”，很多难题的解决方法都基本成熟，大家的编码也接近50%了，所以回来时我感觉已经掉队很多。再一个就是编码中期时机器出问题，环境搭不上了，这使我更加紧张和急躁，大大影响了我的士气。后来利用五一其间的加班我终于赶完了自己的模块，达到了第一个里程碑。其实从发现落后到加班赶完这段经历，对我来说也具有里程碑的意义。不仅考验了我自己的能力和心理素质，也证明了我对集体的责任感和合作意识。我可以叫别人来帮我做赶上进度，但那样我会错过自己学习的机会，以后再遇到难题我还是不行；我也可以硬着头皮导致项目延期，那样我以后的日子保证不好过，而且这么做也不符合我的性格。事实证明我顶住压力独立完成任务不管是对集体还是对我个人都是一件大好事。</p><h2><a name="5" >第五篇：前端开发命名规范范文</a></h2><p>前端开发工作规范</p><p>为提高团队协作效率，便于后台人员添加功能及前端后期优化维护，输出高质量的文档，特制订此文档。本规范文档一经确认，前端开发人员必须按本文档规范进行前台页面开发。</p><p>【写在规则前面的话】</p><p>项目的可维护性第一。你不是一个人在做事，项目的维护和二次开发可能是直接的或间接的团队合作。好的可维护性，从四个方面下手：</p><p>1）代码的松耦合，高度模块化，将页面内的元素视为一个个模块，相互独立，尽量避免耦合过高的代码，从html,css,js三个层面都要考虑模块化。</p><p>2）良好的注释。</p><p>3）注意代码的弹性，在性能和弹性的选择上，一般情况下以弹性为优先考虑条件，在保证弹性的基础上，适当优化性能。</p><p>4）严格按照规范编写代码。</p><p>【命名规则】</p><p>为避免命名冲突，命名规则如下：</p><p>1）公共组件因为高度重用，命名从简，不要加前缀；</p><p>2）各栏目的相应代码，需加前缀，前缀为WD姓名拼音的首字母，例如：杰夫前缀为“jf_”，分隔符为下划线“_”，例如：“jf_imgList”;</p><p>3）模块组件化，组件中的class或id名采用骆驼命名法和下划线相结合的方式，单词之间的分隔靠大写字母分开，从属关系靠下划线分隔。例如：</p><p>html:</p><p><ul class=”textList”></p><p><li class=”textList_firstItem”>1)XXXXXXXXXXXXXX</li></p><p><li>2)XXXXXXXXXXXXXX</li></p><p><li>3)XXXXXXXXXXXXXX</li></p><p></u1></p><p>css:</p><p>.textList{}.text_list X{}</p><p>.textList_firstItem{ }.textListFirstItem X{}</p><p>4）命名清晰，不怕命名长，怕命名容易冲突，长命名可以保证不会产生冲突，所以css选择时可以尽量不使用子选择符，也能确保css优先级权重足够低，方便扩展时的覆盖操作：.textList_firstItem{}.textList.firstItem{}</p><p>5)命名要有意义，不要使用没有意义的命名。用英语命名，不要用拼音。</p><p>【分工安排】</p><p>1)分工原则为公共组件（包括common.css和public.JS）一人维护，各栏目其他人负责，每个栏目正常情况下一人负责，要详细写明注释，如果多人合作，维护的人员注意添加注释信息，具体注释细则，详见注释规则；</p><p>2)VD设计完设计图后，先和交互设计师沟通，确定设计可行，然后先将设计图给公共组件维护者，看设计图是否需要提取公共组件，然后再提交给相应栏目的WD。如果有公共组件要提取，公共组件维护者需对栏目WD说明。</p><p>3)如果确定没有公共组件需提取，交互设计师直接和各栏目的WD交流，对照着VD的设计</p><p>图进行说明，WD完成需求；</p><p>4)WD在制作页面的时候，需先去common文件中查询是否已经存在设计图中的组件，如果有，直接调用；没有，则在app.css和app.JS中添加相应的代码。</p><p>5)WD在制作过程中，发现有高度重用的模块，却未被加入到公共组件中，需向公共组件维护人进行说明，然后工作组件维护人决定是否添加该组件。如果 确定添加，则向WD们说明添加了新组件，让WD们检查之前是否添加了类似组件，统一更新成新组件的用法，删除之前自定义的css和js。虽然麻烦，但始终 把可维护性放在首位。</p><p>6)公共组件维护者的公共组件说明文档，需图片和说明文字配套，方便阅读。</p><p>【注释规则】</p><p>1.公共组件维护者和各栏目WD都需要在文件头部加上注释说明：</p><p>/**</p><p>*文件用途说明</p><p>*作者姓名、联系方式（旺旺）</p><p>*制作日期</p><p>**/</p><p>2.大的模块注释方法：</p><p>//================</p><p>// 代码用途</p><p>//================</p><p>3.小的注释；</p><p>//代码说明</p><p>注释单独一行，不要在代码后的同一行内加注释。</p><p>例如：</p><p>//姓名</p><p>var name = “abc”;V</p><p>var name =”abc”;//姓名 X</p><p>4.维护人员的注释方法：尽量根据注释说明，找到代码的原作者，让原作者进行维护，原作者进行维护可以无需添加额外说明，直接进行修改。如果因为特殊原因，无法让原作者进行维护，需添加额外说明进行注释。说明文字为：“/*change by xxx)原代码如下：</p><p><{源代码}>.新代码如下:*/</p><p>新代码：</p><p>如：var name = “abc”;这段代码，要将name由“abc”变成“123”，原作者可直接改var name=”123”;非原作者修改，需改成：</p><p>/*(change by 杰夫)原代码如下：<{</p><p>var name = “abc”;</p><p>}>新代码如下：*/</p><p>var name =”123”;</p><p>修改时添加的注释，在项目通过测试之后，上线前，可以优化掉。</p><p>【js规范】</p><p>1)底层JS库采用YUI 2.6.0；</p><p>2)统一头部中只载入YUI load组件，其他组件都通过loader对象加载；</p><p>3)js尽量避免使用全局变量，复杂应用写成组件，通过构造函数实现多态，写在公共组件或</p><p>外部js中，简单应用直接写在init函数中，通过命名空间或匿名函数将变量包进闭包中。</p><p>【切图规范】</p><p>1．尽量把页面的背景图及小图标整合到一张图片，用CSS定位方法。（这样以减少http请求，从而降底网站的下载速度。）</p><p>2．尊从内容与页面样式的脱离，如需要，同样也要做到布局与color的脱离。（什么样的图片属于内容：从数据库里取出来的图片。凡是不属于内容的图片请都用背景。）</p><p>1）页面代码，做到精简，逻辑性清楚；（公用部位可以引入进来，比如头部，脚部）</p><p>2）CSS逻辑清析，精简。可在不改变功能的前提内，做到能更换页面布局及换色。</p><p>CSS样式每个页面引入不超过两个文件，一个是common：它包含整个站点都需用到的公用部分，如整体布局，头部，脚部，框，按扭等。另一个是当前页的CSS。（CSS文件引入在2个之内，减少http请求）避免CSS的表达式。</p><p>3．将脚本放在底部。（这样页面就可以逐步呈现，而且页面中的可视组件可以尽早下裁。）配合程序开发人员我们需要注意的（xhtml）：</p><p>1．了解用户可编辑上传修改的“图片”，“文字”区域的需求。根据需求来定位控制，以保证页面的稳定显示。</p><p>如图片，需了解：</p><p>1）宽度是否是固定大小，2）宽度最大限度，3）大小不一样时的居中显示</p><p>如文字，需了解：</p><p>1)文字的最大长度。及加“…”省略号区域,2)在测试中经常也会碰到英文无空格情况，得用overflow: hidden的方法隐藏溢出部分。</p><p>2．每个页面加上正确显示的TITLE。（这个是我经常容易忽视的）</p><p>3．在页面中尽量完成每步交互效果，包括既时响应的。</p><p>4．提交程序员的demo必须是连贯的，交互效里齐全，而且经过自已在IE6.0，IE7.0，IE8.0，FIREFOX等浏览器的一次以上的整体测试。</p><p>用户体验方面需要注意的：</p><p>1．每个连接，按钮要做上鼠标hover时的一个变化效果（如果hover时是换一张背景图片，请把这两张图片整合在一张图片中，以防止在hover时，页面还在download变化的那张图片，这样会出现那个按钮无图的间隔）；</p><p>2．Input有个label，可以让用户在点击字时，光标自动跳入相应input中；</p><p>3．图片应该有alt属性，以备图片阻止时，文字的替换。</p><p>本文由世纪淘商城()整理分享！版权归原作者所有！</p> </div> </article> <a href="#" tpid="25" target="_self" class="download_card jhcdown" rel="nofollow"> <img class="download_card_pic" src="//static.xiexiebang.com/skin/default/images/icon_word.png" alt="下载前端开发中一些常用技巧总结word格式文档"> <div class="download_card_msg"> <div class="download_card_title" style="text-decoration:none;">下载前端开发中一些常用技巧总结.doc</div> <div class="download_card_tip">将本文档下载到自己电脑，方便修改和收藏，请勿使用迅雷等下载。</div> </div> <div class="download_card_btn"> <img src="//static.xiexiebang.com/skin/default/images/icon_download.png"> <div class="downlod_btn_right"> <div>点此处下载文档</div> <p>文档为doc格式</p> </div> </div> </a> <div class="post-tags mt20 mb30"><span>相关专题</span> <a href="/tag/qdkfjdwtzj/" target="_blank">前端开发经典问题总结</a> <a href="/tag/qdymkfgzzj/" target="_blank">前端页面开发工作总结</a> <a href="/tag/qdkfgzzj/" target="_blank">前端开发工作总结</a> </div> <div class="single-info mb40"><span class="hidden-xs ">网址：https://www.xiexiebang.com/a1/2019051214/aa46f6be7c0a9052.html</span><br>声明：本文内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：645879355@qq.com 进行举报，并提供相关证据，工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。 </div> <div class="single-xg mb40"> <div class="con-title"> <h3><a name="6"></a>相关范文推荐</h3> </div> <div class="sticky mb20"> <ul><h2 class="mb20"><a href="/a1/201905123/439b1bac5d4afbcb.html" target="_blank">什么是前端开发工程师</a></h2><p>www.xiexiebang.com 什么是前端开发工程师 前端开发工程师是Web前端开发工程师的简称，是近五年才真正开始受到重视的一个新兴职业。Web前端开发技术是一个先易后难的过程，主要......</p><h2 class="mb20"><a href="/a1/201905127/ce6e732fd12c981b.html" target="_blank">WEB前端开发经验总结</a></h2><p>ASP.NET前端开发经验总结 通过此次大作业的设计到完成，我负责的是web前端的开发，经过此次作业和结合W3C上的自学，我渐渐有了一些对前端开发的小小经验（仅为个人意见）。 WEB标准是......</p><h2 class="mb20"><a href="/a8/2019051316/565bebef2a91166b.html" target="_blank">WEB前端开发经验总结</a></h2><p>WEB前端开发经验总结 发布时间：2009-04-20 09:05:33来源：作者：shengman点击：21015 这里跟大家谈谈个人对WEB前端开发的一些经验（当然都是个人的一些理解，有什么地方说的欠妥或不对......</p><h2 class="mb20"><a href="/a15/2019051513/100d80379c60323e.html" target="_blank">前端开发面试题及答案</a></h2><p>想要应聘前端开发的求职者，要做好完成面试题的准备。下面是由小编分享的前端开发面试题及答案，希望对你有用。前端开发面试题及答案1、对Web标准以及W3C的理解与认识?答：标签闭......</p><h2 class="mb20"><a href="/zongjie/qtzongjie/2d594ed43a5a0bf4.html" target="_blank">前端开发和美工工程师工作总结[本站推荐]</a></h2><p>前端开发和美工工程师工作总结作为公司的网站前端开发和美工，2017年本人主要负责的是经文保总队的各个系统的界面设计及动态页面制作，包括以下内容：一、吉林省单位内部安全保卫......</p><h2 class="mb20"><a href="/a1/2019051215/8bedfb12bd8b5bcd.html" target="_blank">Web前端开发学习笔记分享</a></h2><p>www.xiexiebang.com免费试学/ 一对一辅导/项目实训/就业保障 Web前端开发学习笔记 对于Web前端初学者而言，前人的学习经验及总结，能让自己的学习事半功倍；我在泛艺学苑学习Web......</p><h2 class="mb20"><a href="/a1/2019051215/5599684434896db4.html" target="_blank">一些前端开发优化的经验总结</a></h2><p>一些前端开发优化的经验总结 发现的一篇关于前端优化的文章，总结的很全面，要做到面面俱到很难，往往是想优化而没有时间去优化，就像我们公司，一个项目连着一个项目~新员工的培训都......</p><h2 class="mb20"><a href="/a1/2019051215/03392d54bf8fb3ad.html" target="_blank">web项目前端开发经验总结（大全）</a></h2><p>web项目前端开发经验总结 最近这一个月完成了自己的第一个java web项目，是给某杂志社做的在线投稿系统，虽然进度很慢，但是中间确实学到了不少东西，深刻体会到了自己看几个月书都......</p></ul> </div> </div> </div> </div> <div class="right-content-box wow fadeInRight delay300 right-content"> <script src="/e/member/login/loginjs.php"></script> <div class="sidebar"> <div id="sidebar" role="complementary"> <aside id="recent-posts-3" class="widget widget_recent_entries"> <h3 class="widget-title">猜你喜欢</h3> <ul class="new-list"><li><a href="/a6/2019051513/b88b4e7826bc5152.html" title="Web前端开发笔试题" target="_blank">Web前端开发笔试题</a></li><li><a href="/a1/2019051215/3ef300ef805c4ad6.html" title="Web前端开发培训中es5与es6语法知识点总结" target="_blank">Web前端开发培训中es5与es6语法知识点总结</a></li><li><a href="/zongjie/qtzongjie/cb8aaab26c6bb16f.html" title="前端开发和美工工程师工作总结五篇范文" target="_blank">前端开发和美工工程师工作总结五篇范文</a></li><li><a href="/a12/2019051420/c8748cadf2733c86.html" title="2017年前端开发面试题(含答案)5篇" target="_blank">2017年前端开发面试题(含答案)5篇</a></li><li><a href="/a4/201905125/91f0eb21ee1e3710.html" title="WEB前端开发工程师笔试试题（范文模版）" target="_blank">WEB前端开发工程师笔试试题（范文模版）</a></li><li><a href="/a12/201905145/232dbe70b90f8c4d.html" title="有线电视中数字电视前端设计" target="_blank">有线电视中数字电视前端设计</a></li><li><a href="/a1/2019051123/2bc3c60d716d950d.html" title="WEB前端开发经验总结1（写写帮推荐）" target="_blank">WEB前端开发经验总结1（写写帮推荐）</a></li><li><a href="/a10/201905147/89261fed7bac3b16.html" title="Web前端开发技术人才培养模式研究" target="_blank">Web前端开发技术人才培养模式研究</a></li><li><a href="/a1/2019051215/7150a1eb6ca3fbec.html" title="HTML5前端开发知识小结(面试知识大全)5篇" target="_blank">HTML5前端开发知识小结(面试知识大全)5篇</a></li><li><a href="/a1/2019051215/6ca6f49899da528b.html" title="前端课程阶段总结[★]" target="_blank">前端课程阶段总结[★]</a></li></ul> </aside> </div> </div> </div> </div> </div> </section> <section id="footer" class="p30"> <div class="container"> <div class="footer-top clearfix"> <div class="copyr"> <div class="footer-menu clearfix mb10"> <ul class="footer-menu-con"> <li><a href="/a1/">1号文库</a></li><li><a href="/a2/">2号文库</a></li><li><a href="/a3/">3号文库</a></li><li><a href="/a4/">4号文库</a></li><li><a href="/a5/">5号文库</a></li><li><a href="/a6/">6号文库</a></li><li><a href="/a7/">7号文库</a></li><li><a href="/a8/">8号文库</a></li><li><a href="/a9/">9号文库</a></li><li><a href="/a10/">10号文库</a></li><li><a href="/a11/">11号文库</a></li><li><a href="/a12/">12号文库</a></li><li><a href="/a13/">13号文库</a></li><li><a href="/a14/">14号文库</a></li><li><a href="/a15/">15号文库</a></li> </ul> </div> <p>Copyright © 2018 <a href="/">写写帮文库</a> All Rights Reserved   <a target="_blank" href="http://www.beian.miit.gov.cn" rel="nofollow"> 浙ICP备11058632号</a>   <script type="text/javascript" src="//static.xiexiebang.com/skin/default/js/tj.js"></script></p> </div> </div> </div> </section> <script type='text/javascript' src='//static.xiexiebang.com/skin/default/js/superfish.js'></script> <script type='text/javascript' src='//static.xiexiebang.com/skin/default/js/jquery.slicknav.js'></script> <script type='text/javascript' src='//static.xiexiebang.com/skin/default/js/xs.js'></script> <div class="right_bar hidden-xs "> <ul> <li class="rtbar_li1" style="left: 0px;"><a><img src="//static.xiexiebang.com/skin/default/images/rtbar_liicon3.png"><span id="call_tel"></span></a></li> <li class="rtbar_li2"> <a href="javascript:void(0);"> <img src="//static.xiexiebang.com/skin/default/images/rtbar_liicon4.png"> </a> <div class="rtbar_shwx" style="display: none;"> <img width="188" height="188" alt="微信二维码" src="//static.xiexiebang.com/skin/default/images/wechat.png"> </div> </li> <li class="rtbar_li3" style="left: 0px;"> <a href="tencent://message/?uin=2261362615&Menu=yes"> <img src="//static.xiexiebang.com/skin/default/images/rtbar_liicon2.png"> 点击咨询 </a> </li> <li class="rtbar_li5"><a href="#1">第一篇</a></li> <li class="rtbar_li6"><a href="#2">第二篇</a></li> <li class="rtbar_li7"><a href="#3">第三篇</a></li> <li class="rtbar_li8"><a href="#4">第四篇</a></li> <li class="rtbar_li9"><a href="#5">第五篇</a></li> <li class="rtbar_li10"><a href="#6">更 多</a></li> <li class="rtbar_li4 gotop"> <a href=""><img src="//static.xiexiebang.com/skin/default/images/rtbar_liicon1.png"> </a></li> </ul> </div> </body> </html>