前端开发工作总结.docx
《前端开发工作总结.docx》由会员分享，可在线阅读，更多相关《前端开发工作总结.docx（11页珍藏版）》请在冰豆网上搜索。
前端开发工作总结
前端开发工作总结
篇一：
前端开发心得
web前端核心技术
从事前端开发工作1年多了，从最初的DIV+CSS学起，到现在学到html5、css3、javascript，jquery等等，我觉得前端要学的技术太多了，很多人认为前端开发要掌握的技能简单，就是网页制作，其实不然，前端开发是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript/ajax，现在最新的高级版本是HTML5、CSS3，以及SVG等。
JavaScript作为最难的语言之一，许多编程高手也不敢妄自菲薄、自封精通。
关于兼容性的问题我相信对于每个做前端开发的人来讲是一个很头疼的问题，互联网目前主流浏览器有IE6\7\8\9，Firefox，Chrome，Opera，Safari，遨游，包括国内主流的搜狗，腾讯TT，360等等；从内核上讲主要有IE的，遨游版IE，safari，firefox以及opera的，这些都是大家常见的。
所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。
在大多数情况下，用户用什么浏览器来查看同一网站，都应该是统一的显示效果。
所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。
这个时候就需要针对不同的浏览器写不同的CSS，这个过程叫CSShack。
虽然我们写代码都要求按照标准，不写hack代码，但实际工作中为了兼容主流浏览器，hack代码是免不了的，所以这也应该是每个前端开发人员必备的技能。
前端的开发工具很多，比较常见的有Dreamweaver，Notepad，webstrom，SublimeText等等，我现在在使用webstorm，强大的提示功能可以帮助我们很快的熟悉并掌握网页布局,检查错误等。
调试代码的工具我使用的Firebug。
Firebug是网页浏览器Mozillafirefox下的一款开发类插件，它集HTML查看和编辑、Javascript控制台、网络状况监视器于一体，是开发JavaScript、CSS、HTML和Ajax的得力助手。
Firebug如同一把精巧的瑞士军刀，从各个不同的角度剖析Web页面内部的细节层面，给Web开发者带来很大的便利。
Firebug也是一个除错工具。
用户可以利用它除错、编辑、甚至删改任何网站的CSS、HTML、Dom以及Javascript代码。
以上是自己做前端开发的一点心得，它所涵盖的知识面远远不止这些，我也在不断的学习，不断地丰富自己，希望自己能在前端这个职位上开阔自己的一片天地！
篇二：
WEB前端开发经验总结
前端开发经验总结
通过此次大作业的设计到完成，我负责的是web前端的开发，经过此次作业和结合W3C上的自学，我渐渐有了一些对前端开发的小小经验（仅为个人意见）。
WEB标准是什么？
说是WEB标准，不过我这里主要是对HTML5和的一些经验总结。
因为WEB含盖的内容实在是太多了，“WEB标准”是一系列标准的总称，包括、、、、、、、、等等。
所以这里要跟大家指出来一下，WEB标准不是我们所说的DIV+CSS。
刚刚上面提到了――DIV+CSS，这里要说明下，这样说其实是不正确的。
DIV+CSS准确的说法（个人的理解）应该是：
采用W3C推荐的WEB标准中的HTML5结合样式表制作页面的方法，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（前端的一项）部分的完整代码：
"name="description"/>
"name="keywords"/>
'>
[]
看出来什么没有？
（代码是很多）可能大家已经发现，整个页面里基本上都是用户要看的数据，其中只包含了很少（必要）的布局标签（请允许我这么说）。
整个页面基本都是由最基础的h1~h6、p、ul、ol、li、form、div标签来实现的。
说到这里就要讲到我在前面提到的“结构清晰、SEO优化、页面体积小、XHTML代码中基本上都是用户要看的数据”，看看我的这个例子做到了没有？
结构清晰--也就是我们常说的，HTML标签要结构化。
什么叫结构化？
由于个人认为这个知识点是十分重要的，我采用WEB标准的方法制作页面的优势就体现在页面结构清晰。
我以前用table布局的时候，我的表现（数据）和形式（布局样式）是混在一起的，有很多冗余的数据混杂在一起，而我上面给大家展示的代码，很明显，结构十分清晰。
h1~h6--如果你要显示的数据是作为标题显示的时候，就用这些标签，因为这个标签的意思就是说，这个是一个标题，不仅我们的用户很容易理解h-head的英文字母缩写，我们的另外一个用户搜索引擎也可以很容易理解它。
呵呵，看到了吧，一个充分结构化
的页面，对用户是十分友好的。
p--Paragraph（段落）
ul--unorglizedlist
ol--orglizedlist
li--listitem
form--表单
div--division
我写成这样就便于理解了，原来HTML标签是有着自己的意义的（至于其他的标签的语意义，大家可以自己到W3C看看它的解释，也可以查看语义化你的HTML标签和属性），所以我们讲要语意化的意思，就是用合理的标签来显示数据，比如前面提到的，是标题，就应该用h1~h6标签，如果是一个段落的介绍文字，那么就应该使用p标签，如果是显示的一个没有顺序的列表，就应该用ul标签，如此...
所以看这个例子里
标签导航实例详解
这么写就是很合理的，h2标签就说明这里是个标题。
而这么写：
复制内容到剪贴板代码:
.title{
font-size:
18px;
...
}
标签导航实例详解
虽然用了strong来强调说明这部分文字，但是还是没有h2标签来的直接明了。
还有这么写
Ajax标签导航实例详解
我并不喜欢写成这样，可以不用嵌套层的地方，我们尽量不要去过多的嵌套层，减少嵌套会让浏览器解析起来会更容易，速度更快。
所我们使用WEB标准开发页面，绝对不是单纯的把以前的table换成DIV就OK了。
而采用标准制作页面，也不意味着我们就不使用table。
只要把握我刚才说的原则，使用合理的标签显示相应特征的数据。
其实我的table标签是一个很好的用来显示二维数据的标签，而table标签也确实是设计出来用来显示数据的，而不是用来布局的，只是很多人都会用table标签来布局了。
篇三：
Web前端基础总结
的基本类型：
Undefined:
只有一个值undefined，它是变量未被赋值时的值，在JS中全局对象有一个undefined属性表示undefined，事实上undefined并非JavaScript的关键字，可以给全局的undefined属性赋值来改变它的值。
Null:
只有一个值null,但是JavaScript为它提供了一个关键字null来表示这个唯一的值。
Null类型的语义是“一个空的对象引用”。
Number:
NaN是其一个特殊的属性值，typeofNaN//“number”）;
String:
其正式解释是一个16位无符号整数类型的序列，它实际上用来表示以UTF-16编码的文本信息。
Boolean:
有两种取值true和false。
0、NaN、空字符串、null、undefined转化为false，其余的全部为true。
Object:
最为复杂的类型就是Object，它是一系列属性的无序集合，Function是实现了私有属性[[call]]的Object，JavaScript的宿主也可以提供一些特别的对象。
typeof
*'3','344'+//‘Object’
关于null和undefined：
null是关键字；undefined不是关键字，undefined是Global对象的一个属性。
运算时null与undefined都可以被类型转换为false，但不等值于false：
;//true,true
;//false
;//false
;//true
nullinstanceofObject//false
typeofnull//Object
的类型转换
手动的转换有：
Number;Boolean;String;以及parseInt,parseFloat,toString,valueOf等等。
自动的转换：
如果“+”操作符的一个操作数是字符串，则会将另一个操作数转换为字符串，一元操作符“*”、“-”将操作数转换为数字，一元操作符“！
”将操作数转换为布尔值并取反。
‘hello’+5//‘hello5’
‘hello’+null//‘hellonull’
‘5’*5//25
‘hello’*5//NaN
X+””//等价于String
+X或者X-0//等价于Number
!
!
X//等价于Boolean
属性
四个参数：
上右下左
三个参数：
上、左右、下
两个参数：
上下、左右
一个参数：
四周
4.关于float问题，浮动元素后跟非浮动元素的情况。
后边非浮动元素若为行内元素且因为定位产生重叠时，行内元素边框、背景和内容都在该浮动元素“之上”显示，若为块级元素且因为定位产生重叠时，该块级元素边框和背景在该浮动元素“之下”显示，只有内容在浮动元素“之上”显示。
【有示例】。
Clear属性规定元素的哪一侧不允许其他浮动元素。
clear属性定义了元素的哪边上不允许出现浮动元素。
在
CSS1和CSS2中，这是通过自动为清除元素（即设置了clear属性的元
素）增加上外边距实现的。
在中，会在元素上外边距之上增加清除空间，而外边距本身并不改变。
不论哪一种改变，最终结果都一样，如果声明为左边或右边清除，会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。
5.绝对定位、相对定位与浮动定位
绝对定位：
absolute生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。
设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。
元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。
元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
相对定位：
relative生成相对定位的元素，相对于其正常位置进行定位。
设置为相对定位的元素框会偏移某个距离。
元素仍然保持其未定位前的形状，它原本所占的空间仍保留。
浮动定位：
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
示例代码就是最外层的div是relative，里面的就是absolute。
6.关于DOM元素
利用DOM，JS可以相对简单地寻找、访问和操纵HTML元素，从而动态地改变HTML页面的内容和外观。
节点常用的属性有parentNode,childNodes,firstChild,lastChild,
previousSibling,nextSibling。
7.关于函数
定义顺序：
函数的定义与其他的语句的定义不再同一个时间轴上面，计算机在开始执行语句之前，会先查找所有的function的定义，然后保存。
所以在函数后面定义的调用语句可以调用到定义在前面的函数。
局部变量与全局变量：
局部变量只适合于函数的参数和函数内部已var关键字定义的变量。
如果没有定义同名的局部变量，函数内部则可能访问全局变量。
闭包：
首先要知道在js中，函数在一旦定义的时候就会产生自己的一个作用域，而此后这个函数的执行也是要依赖于这个作用域的。
闭包的最常用的编程模式就是在一个函数中嵌套另一个函数，然后将这个嵌套的函数作为返回值返回，当然外部函数中的局部变量也就存在于这个返回函数的作用域中的，这样就起到了对局部变量的一个访问控制。
但是缺点在于增大了内存的开支。
而且其所派生的子类将不能访问其私有属性，破坏了继承性。
因此还是需要三思而行。
闭包可以用在许多地方。
它的最大用处有两个，一个是前面提到的保护函数内部的变量，另一个就是让在内存中维持变量。
我写的闭包主要用于实现一些插件，因为有一些变量需要避免被全局变量污染。
可选参数：
Js不会限制传入函数的参数数目。
如果传入的参数过多，多余的参数会被忽略掉。
如果过少，缺失的参数会默认为undefined。
apply和call的区别：
相同点:
两个方法产生的作用是完全一样的。
不同点:
方法传递的参数不同，applycall
原型：
所有对象都有一个原型，对象可以共享其原型的属性，但是这种共享是单向的，即原型的属性影响对象，改变对象确不会影响到原型。
原型污染：
使用for/in遍历对象的时候，会同时得到本来的属性和原型的属性，可以使用HasOwnPorperty方法来判断。
匿名函数：
一般用来写已加载就需立即执行的函数。
同时为了避免受全局变量的影响，在一个不是很熟悉的页面增加Javascript时非常有效。
和Span有何区别？
答：
两者最明显的区别在于DIV是块元素，而SPAN是行内元素。
所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。
当然这一点也可以通过设置display（block,inline,inline-block）来改变。
9.CSS+DIV开发Web页面的优势有哪些？
答：
1）
2）
3）CSS+DIV，这个网页设计模式中，DIV承担了网页的内容，CSS承担了网页的样式。
这样就使网页的内容和样式的分离开来。
有利于页面的维护升级。
有助于提高搜索引擎亲和力（快速找到需要的数据，而不是像在TABLE中一层层的查找）有助于页面的重构
与setTimeout的区别？
答：
setTimeout方法是定时程序，也就是在什么时间以后干什么。
干完了就拉倒。
setInterval方法则是表示间隔一定时间反复执行某操作。
及其优缺点：
答：
AsynchronousJavaScriptandXML”（异步JavaScript和XML）。
在浏览器中使用js进行服务器的请求与响应，使得可以在不更新整个页面的前提下维护数据。
其名字中的xml并非指只支持xml这一种文本格式，xml只是一个选择而已，其他还可以是表单与json。
这样做只是xml流行时的遗迹。
优点：
使用Ajax的最大优点就是可以实现页面的局部刷新，提高用户体验质量。
其他优点有使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。
3、可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。
并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。
4、基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。
缺点：
1.干掉了back按钮。
因为在未刷新页面的时候是无法使用back按钮的。
2.安全问题，将一些数据、逻辑暴露在了前台。
3.对搜索引擎的支持较弱。
4.违背了Url资源定位的初衷。
属性的相关注意问题与apply的使用
常用于实现继承。
Call与apply的作用相同，只是参数的形式不一样而已。
如对应的apply写法为：
Call的使用Apply的使用
中事件绑定，什么时候有前缀on，什么时候没有？
兼容性问题。
答：
下图显示了采用三种方式注册的事件。
兼容性问题可见：
注意这两句写法：
升级会员 