一个Web页面的问题分析
一个Web页面的问题分析
几个月之前我接到一个新的开发任务,要在一个旧的Web页面上面增添一些新的功能。在开发的过程中发现旧的代码中有很多常见的不合适的写法,结合这些问题,如何写出更好的,更规范的,更可维护的代码,就是这篇文章要阐述的内容。
首先我查看了该Web页面的HTML代码,发现了一些典型的问题:
- HTML页面中包含了很多Javascript和CSS代码
- HTML页面中引用了大量的外部Javascript文件和CSS文件
接下来就这些问题,我们逐个讨论一下:
HTML页面中包含了很多Javascript和CSS代码
一个正常的Web页面通常有以下三部分组成,HTML,CSS,Javascript,其中HTML是数据,CSS负责样式,而Javascript负责交互,三者的关系如下图:
在构建Web页面的过程中,要尽量让这三者保持松耦合的关系,不要牵一发而动全身,一个层面小的改动需要改动另外两个层面。首先要从文件级别上隔离这三部分,在HTML中通过引入文件的方式导入Javascript和CSS。
要做到三者的松耦合,开发中需要注意的地方又如下几点:
- 在CSS代码中不要包含Javascript
- 在Javascript代码中不要包含CSS
- 在HTML代码中不要包含Javascript
- 在Javascript中不要包含HTML
CSS代码中不要包含Javascript,指的是在CSS代码中慎用可计算的样式,如IE 8的 expression,CSS3的calc等等,从使用角度来讲全是很强大,从代码维护的角度来看,不推荐使用。出现了Bug的时候,需要同时Check Javascript和CSS代码。
Javascript代码中不要包含CSS,我们经常需要在Javascript中去动态改变某一个Dom元素的样式,经常写出如下代码:
element.style.color = 'red';
这样的代码会导致当需求改变的时候,需要在Javascript代码中全文检索 red 关键字,深怕漏掉一点。推荐的做法如下:
//在CSS文件中定义样式类型 .red-class{color: red; }//Javascript中改变样式 element.className += " red-class"; // jQuery $(element).addClass("red-class");
在Javascript中操纵Dom对象的Class来改变样式,需求改变的时候,只需要调整CSS文件就可以了。
HTML代码中不要包含Javascript:
<input type="button" value="click me" id="mybutton" onclick="do()"/>
推荐使用下面的代码:
var btn = document.getElementById('mybutton'); btn.addEventListener("click", do);
Javascript代码中不要包含HTML:
var div = document.getElementById("my-div"); div.innerHTML = "<h3>Error</h3><p>Invalid e-mail address.</p>";
在Javascript代码中完全隔绝HTML很难,这一点可以根据实际情况来权衡使用。Javascript 模版技术就是一种有效隔离HTML和Javascript代码的手段,如下是jQuery Template的用法:
// HTML <script id="bookTemplate" type="text/x-jQuery-tmpl"><div><img src="BookPictures/${picture}" alt="" /><h2>${title}</h2> price: ${formatPrice(price)}</div></script>// Javascript // Create an array of books var books = [{ title: "ASP.NET 4 Unleashed", price: 37.79, picture: "AspNet4Unleashed.jpg" }]; // Render the books using the template $("#bookTemplate").tmpl(books).appendTo("#bookContainer");function formatPrice(price) {return "$" + price.toFixed(2); }
HTML页面中引用了大量的外部Javascript文件和CSS文件
HTML页面中引用了大量的外部Javascript文件和CSS文件,我们知道每一个引用外部文件的<script>或者<style>都会引起一个HTTP请求,而一个HTTP请求的代价其实是很高昂的,下图是HTTP请求的整个过程:
首先要通过DNS Server把域名变为IP,然后在浏览器与服务器之间建立TCP链接,建立TCP链接之后,浏览器向服务器发送HTTP请求,服务器处理完请求后,将结果返回给浏览器,最后关闭TCP链接。整个HTTP的请求的代价还是很大的,更多关于HTTP和TCP的信息,请参考:http://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol,http://en.wikipedia.org/wiki/Transmission_Control_Protocol。
另外浏览器对于HTTP请求的并发数量是有限制的,每个浏览器不等,基本在4个左右。
当HTML页面中引用了大量的外部Javascript文件和CSS文件,我们可以考虑通过合并以及压缩Javascript,CSS文件来达到减少HTTP请求数量,以及HTTP结果的目的。
Grunt是一个基于任务的JavaScript项目命令行构建工具,通过Grunt可以将多个文件合并成一个文件,并且进行压缩处理。Grunt没有开发平台的限制,只要是前端项目,都可以使用Grunt来配置任务。Grunt有着广泛的社区支持,有很多的现有的插件。
另外如果你是ASP.NET的项目的话,ASP.NET 4.5加入了Bundle,通过Bundle技术合并压缩Javascript和CSS。关于Bundle技术可以参考 http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification。
Javascript代码全局变量
看完了HTML代码之后,又过了一下页面主要的Javascript代码,发现的问题主要是Javascript代码引入了太多的全局变量。JavaScript全局变量在很小的程序中可能会带来方便,但随着程序越来越大,它很快变得难以处理。因为一个全局变量可以被程序的任何部分在任意时间改变,使得程序的行为被极大地复杂化。在程序中使用全局变量降低了程序的可靠性。
定义Javascript的方式有三种:
// 在所有函数外部使用var定义变量 var foo = 10;// 没有使用var,直接声明变量 foo = 10;window.foo = 10;
其中第二种隐式的声明了全局变量,尤其需要注意。
我们应该尽量少的引入全局变量,jQuery也不过提供了两个全局变量:$, jQuery。那么有没有可能在注入Javascript到HTML页面之后,实现零个全局变量的引入那?
通过立即执行函数可以达到这一点,参见下面的代码:
(function(win) {"use strict";var doc = win.document;// declare other variables here// other code goes here }(window));
如果你需要将该对象返回,可以使用如下的方式:
var module1 = (function(){var _count = 0;var m1 = function(){//... };var m2 = function(){//... };return {m1 : m1,m2 : m2}; })();
这样的话只会引入一个全局变量 module1,而且该对象具有很好的封装性,其内部变量“_count”,在外部是无法访问的。
整个页面其实也还有一些其他小的问题,在这里就不一一赘述了。
说了半天老代码的问题,其实没有对老代码有任何偏见,因为不论它是否美丑,都在为系统服务,都在产生价值。我们只是在追求更好的代码,更可读,更易维护的代码。
转载于:https://www.cnblogs.com/tedzhao/p/3944774.html
一个Web页面的问题分析相关推荐
- 一个WEB页面的访问过程
在了解web的访问过程之前,我们需要了解几个简单的概念: DNS工作原理:每个IP地址都可以有一个主机名,主机名由一个或多个字符串组成,字符串之间用小数点隔开.有了主机名,就不要死记硬背每台IP设备的 ...
- 原型设计如何直接生成html,使用原型设计工具 Axure RP创建一个web页面框架
前言 什么是原型呢? 原型设计是交互设计师与PD.PM.网站开发工程师沟通的最好工具.而该块的设计在原则上必须是交互设计师的产物,交互设计以用户为中心的理念会贯穿整个产品.利用交互设计师专业的眼光与经 ...
- 一个Web服务的性能瓶颈分析及对策
1. 引言 QoS(Quality of Service,服务质量)控制技术作为下一代网络的核心技术之一,越来越成为计算机网络中研究与开发的热点问题.QoS控制的基本目标是为Internet应用提供性 ...
- 分享一个web页面背景全屏的jquery插件Fullscreen Background
简单测试了下,直接谷歌 IE10 IE6 http://gayadesign.com/scripts/fullscreenbackground/ 下载地址:https://github.com/Gay ...
- django 第一个web页面
主要参考 http://www.djangobook.com/en/2.0/chapter03.html http://blog.csdn.net/thinkinside/article/detail ...
- 像数据分析一样写 Web 页面,这个 Python 库做到了!
作者|刘早起 来源|早起Python 提起用 Python 写一个 web 页面,总是会想起Django/Flask等这样的大家伙. 他们确实好用,但就是流程繁琐,比如有时就想写一个简单的页面,比如问 ...
- 前端app调起摄像头 只显示在页面_猫也能看得懂的教程之一分钟使用Vue搭建简单Web页面...
本教程适合人群: 已经了解过过html.js.css,想深入学习前端技术的小伙伴 有前端开发经验.但是没有使用过Vue的小伙伴 有过其他编程经验,对前端开发感兴趣的小伙伴 学习本教程之后你将会: 了解 ...
- WebKit如何加载web页面
转自http://blog.csdn.net/keensword007/archive/2010/09/03/5860837.aspx 在WebKit能够渲染web页面之前,它必须从网络加载页面和子资 ...
- http --- Web页面请求的历程(如何根据URL寻找到需要的资源)
HTTP概况: // 超文本传输协议(HyperText Transfer Protocol,HTTP):是Web的应用层协议,它是Web的核心. // 客户端和服务器运行在不同的端系统中,通过交换H ...
最新文章
- 服务化部署框架Paddle Serving
- 【Leetcode】刷题之路3(python版)
- 详解数组中的reduce方法
- iphone8p百度云认证_探秘百度数据工厂Pingo的多存储后端数据联合查询技术
- Spring Boot——集成Swagger2
- 基于弹性计算的AI推理
- 本期课程已满,欢迎关注后续期次 | 临床基因组学数据分析实战助力解析Case,快速发表文章...
- Ubuntu安装指定版本clang-format
- 盒模型bug的解决方法
- 【CDOJ1330】柱爷与远古法阵(高斯消元+卡精度+概率dp?)
- 星空之翼游戏的设计与实现
- java数青蛙_LeetCode 1419. 数青蛙
- 【Apache运维基础(4)】Apache的Rewrite攻略(1)
- Shiro的简单入门(一)
- python妹子图软件下载_python3下载妹子图,你懂的。
- mac 查看 ssh key
- 计算机毕业设计Java企业员工考勤系统的设计与实现(源码+系统+mysql数据库+lw文档)
- 不经一番寒彻骨,安得梅花扑鼻香?
- java爬虫实例_关于java爬虫以及一些实例
- phpstorm 快捷键记录
热门文章
- PL/SQL Virtual Machine Memory Usage
- GAE上使用Struts2
- NetBeans 时事通讯(刊号 # 109 - Jul 17, 2010)
- 按需生产 ,我们准备好了吗?
- [原] XAF How to Edit multiple objects in a ListViewAndDetailView
- Sharepoint学习笔记—ECMAScript对象模型系列-- 9、组与用户操作(二)
- 3D图形学的线性代数的通俗解释。
- 判断一个数是否是2的倍数----------面试算法
- Android JetPack Lifecycle源码解析
- Android 使用CornerPathEffect绘制圆角矩形