web前端年终工作总结

1 / 12 web 前端年终工作总结 之前整理发表了 XMLHTTPRequest 的属性和方法简介 ,它 Ajax要使用的核心的技术之一，现在就来实际运用它。这个 Ajax 标签导航，是我很久前就写的一个脚本，很实用的，现在拿它来做实例讲解吧！当然个人能力有限，有什么不对的地方还请多包含 ! 效果大家看到了，核心功能有： 1、将当前选中标签以特殊的样式显示 2、将异步加载的页面信息显示到指定的 DOM 节点中 我们来看看处理脚本的代 码吧： 程序代码： 2 / 12 id=news- news就是我们的导航标签的 ID； id=newsCnt- newsCnt就是我们要写入信息的目标DOM节点； class=first - first当前标签的样式； id=news-0 - news-0 通过 -分开，我们就分别可以得到 news， 0 网站重构 - 超链接 - 标签间的分割线 我罗列的这些东西，相信大家开始看出了些头绪了，呵呵，不过别急！在我们看处理的脚本之前，先让我们来看看导航标签的样式，主要是看看我们对分割线的处理。 3 / 12 本来想偷个懒，让大家看我上边说的那篇文章，想想也就是 Ctrl+C&Ctrl+V,都贴出来吧！呵呵！ 不过还没有完，最后要说的就是 innerHTML 这个特性，这里我们还要感谢微软啊， innerHTML 就是它的专利，我们就是用它来改变指定 DOM涉及到。东西虽小，包含的知识可是都用到了啊，我把我会 的点东西都端出来了，呵呵！ 当然我很喜欢跟大家多交流，以后有时间，我们在来谈谈 CSS的 HACKS 技巧， Javascript DOM 编程等等的，今天就收工了，谢谢捧场先！ Copyright XX-XX href=, All rights reserved. Powered By: domain 看出来什么没有？可能大家已经发现，整个页面里4 / 12 基本上都是用户要看的数 据，其中只包含了很少的布局标签。整个页面基本都是由最基础的 h1h6、 p、 ul、 ol、 li、form、 div 标签来实现的。 说到这里就要讲到我在前面提到的结构清晰、 SEO优化、页面体积小、 XHTML 代码中基本上都是用户要看的数据，看看我的这个例子做到了没有？ 结构清晰 -也就是我们常说的， XHTML 标签要结构化。 什么叫结构化？ 由于个人认为这个知识点是十分重要的，所以请允许我在这里多罗嗦几句，我们采用 WEB标准的方法制作页面的优势就体现在页面结构清晰。我 们以前用 table 布局的时候，我们的表现和形式是混在一起的，有很多冗余的数据混杂在一起，而大家再看看我上面给大家展示的代码，很明显，结构十分清晰。 说了半天，还是没有说什么是结构化，什么才是结构清晰啊？不要急。还记得我刚才提到的那几个标签吗？ 的基本类型： Undefined:只有一个值 undefined，它是变量未被赋值时的值，在 JS 中全局对象有一个 undefined 属性表示undefined，事实上 undefined并非 JavaScript 的关键字，可以给全局的 undefined属性赋值来改变它的值。 Null:只5 / 12 有一个值 null,但是 JavaScript 为它提供了一个关键字null 来表示这个唯一的值。 Null 类型的语义是一个空的对象引用。 Number:NaN是其一个特殊的属性值， typeof NaN / 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 6 / 12 null instanceof Object /false typeof null/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 问题，浮动元素后跟非浮动元素的情7 / 12 况。 后边非浮动元素若为行内元素且因为定位产生重叠时，行内元素边框、背景和内容都在该浮动元素之上显示，若为块级元素且因为定位产生重叠时，该块级元素边框和背景在该浮动元素之下显示，只有内容在浮动元素之上显示。 【有示例】。 Clear 属性规定元素的哪一侧不允许其他浮动元素。clear 属性定义了元素的哪边上不允许出现浮动元素。在 CSS1 和 CSS2 中，这是通过自动为清除元素增加上外边距实现的。在 中，会在元素上外边距之上增加清除空间，而外边距本身并不改变。不论哪一种改变，最终结果都一样，如果声明为左边或右边清除，会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。 5.绝对定位、相对定位与浮动定位 绝对定位： absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。设置为绝对定位的元素框从文档流完全删除， 并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。 相对定位： relative 生成相对定位的元素，相对于其正常位置进行定位。设置为相对定位的元素框会偏移某个8 / 12 距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。 浮动定位：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中 ，所以文档的普通流中的块框表现得就像浮动框不存在一样。 示例代码就是最外层的 div 是 relative，里面的就是 absolute。 6.关于 DOM 元素 利用 DOM， JS可以相对简单地寻找、访问和操纵 HTML元素，从而动态地改变 HTML 页面的内容和外观。节点常用的属性有 parentNode, childNodes, firstChild, lastChild, previousSibling, nextSibling。 7.关于函数 定义 顺序：函数的定义与其他的语句的定义不再同一个时间轴上面，计算机在开始执行语句之前，会先查找所有的 function 的定义，然后保存。所以在函数后面定义的调用语句可以调用到定义在前面的函数。 局部变量与全局变量：局部变量只适合于函数的参数和函数内部已 var关键字定义的变量。如果没有定义同名的局部变量，函数内部则可能访问全局变量。 闭包：首先要知道在 js中，函数在一旦定义的时候9 / 12 就会产生自己的一个作用域，而此后这个函数的执行也是要依赖于这个作用域的。闭包的最常用的编程模式就是在一个函数中嵌套 另一个函数，然后将这个嵌套的函数作为返回值返回，当然外部函数中的局部变量也就存在于这个返回函数的作用域中的，这样就起到了对局部变量的一个访问控制。但是缺点在于增大了内存的开支。而且其所派生的子类将不能访问其私有属性，破坏了继承性。因此还是需要三思而行。 闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的保护函数内部的变量，另一个就是让在内存中维持变量。 我写的闭包主要用于实现一些插件，因为有一些变量需要避免被全局变量污染。 可选参数： Js 不会限制传入函数的参数数目。如果传入的 参数过多，多余的参数会被忽略掉。如果过少，缺失的参数会默认为 undefined。 apply 和 call的区别：相同点 :两个方法产生的作用是完全一样的。 不同点 :方法传递的参数不同， apply call 原型：所有对象都有一个原型，对象可以共享其原型的属性，但是这种共享是单向的，即原型的属性影响对象，改变对象确不会影响到原型。原型污染：使用 for/in 遍历对象的时候，会同时得到本来的属性和原型的属性，可以使10 / 12 用 HasOwnPorperty 方法来判断。 匿名函数：一般 用来写已加载就需立即执行的函数。同时为了避免受全局变量的影响，在一个不是很熟悉的页面增加 Javascript 时非常有效。 和 Span有何区别？ 答：两者最明显的区别在于 DIV 是块元素，而 SPAN是行内元素。所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行， 当然这一点也可以通过设置 display来改变。 9. CSS+DIV 开发 Web页面的优势有哪些？ 答： 1） 2） 3） CSS+DIV，这个网 页设计模式中， DIV 承担了网页的内容， CSS 承担了网页的样式。这样就使网页的内容和样式的分离开来。有利于页面的维护升级。 有助于提高搜索引擎亲和力 有助于页面的重构 与 setTimeout 的区别？ 答： setTimeout 方法是定时程序，也就是在什么时间以后干什么。干完了就拉倒。 setInterval 方法则是表示间隔一定时间反复执行某操作。 及其优缺点： 答： Asynchronous JavaScript and XML（异步 JavaScript 和 XML)。在浏览器中使用 js进 行服11 / 12 务器的请求与响应，使得可以在不更新整个页面的前提下维护数据。其名字中的 xml并非指只支持 xml这一种文本格式，xml只是一个选择而已，其他还可以是表单与 json。这样做只是 xml 流行时的遗迹。 优点：使用 Ajax的最大优点就是可以实现页面的局部刷新，提高用户体验质量。其他优点有使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。 3、可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻 服务器的负担， ajax的原则是按需取数据，可以最大程度的减少冗余请求，和响应对服务器造成的负担。 4、基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。 缺点： 1.干掉了 back 按钮。因为在未