一个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}"  />
            <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_Protocolhttp://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”,在外部是无法访问的。

整个页面其实也还有一些其他小的问题,在这里就不一一赘述了。

说了半天老代码的问题,其实没有对老代码有任何偏见,因为不论它是否美丑,都在为系统服务,都在产生价值。我们只是在追求更好的代码,更可读,更易维护的代码。

时间: 2024-10-08 22:24:06

一个Web页面的问题分析的相关文章

python使用Django制作第一个web页面

第一步:打开pycharm,点击File>New File 选择Django,填写完点击Create创建如下图: 第二步:项目名和应用名都写的web,目录列表如下: 第三步:将web目录下面的view.py改成 from django.http import HttpResponse def hello(request): return HttpResponse("<h3>使用Django的第一个web页面</h3><hr>") 第四步:将ur

使用NodeJS+AngularJS+MongoDB实现一个Web数据扒取-分析-展示的系统

说到Web爬虫,Python占了半壁江山.但是Web页面不是Python的强项了,如果需要扒取Web数据,再Mashup出来一个自己的系统,全端JS是个不错的解决方案(其实不用Python扒数据是因为我只能熟练掌握Python的HelloWorld编写). 那么开始做了. 00.要做一只麻雀 想做一个五脏俱全的系统先设计一下结构吧.思路是要扒数据先要配置怎么扒,然后去把扒来的数据处理成想要的东西,再然后存起来慢慢蹂躏.来张UML活动图压压惊.数据CRUD和如何展现不在设计图中,这部分打算做一个类

J2EE或MyEclipse简单配置以及第一个web页面

首先打开你下载安装好的MyEclipse,配置你开发需要的环境. 大致分为3步:①配置编码:Window-->preferences-->General-->Workspace-->Other-->"utf-8"-->Appley Web-->JSP Files-->Encoding(utf-8),联动的HTML Files的编码也变化了  ②配置jdk:Java-->Installed JREs-->Add,找到你的JDK,

一个Web页面的生命周期 ,面试常常被问到

常规页生命周期阶段 一般来说,页要经历下表概述的各个阶段.除了页生命周期阶段以外,在请求前后还存在应用程序阶段,但是这些阶段并不特定于页.有关更多信息,请参见 ASP.NET 应用程序生命周期概述. 页请求 页请求发生在页生命周期开始之前.用户请求页时,ASP.NET 将确定是否需要分析和编译页(从而开始页的生命周期),或者是否可以在不运行页的情况下发送页的缓存版本以进行响应. 开始 在开始阶段,将设置页属性,如 Request 和 Response.在此阶段,页还将确定请求是回发请求还是新请求

一个web页面的访问的过程

Browers是如何在浩瀚的互联网上找到我们需要的资源呢? 以下将记录这个过程,这个过程是web编程需要需要熟知的. 用户打开浏览器输入目标地址(比如http://www.sina.com),那么接下来发生什么事情呢? 1,浏览器首先会查询本机的系统,获取主机名对应的IP地址. 2,若本机查询不到相应的IP地址,则会发起DNS请求,获取主机名对应的IP地址. 3,使用查询到的IP地址,直接访问目标服务器. 首先说说访问目标地址的两种方式: 第一,使用目标IP地址访问.比如你可以直接在浏览器中输入

web页面中可以包含多个对象

# encoding=utf-8 #python 2.7.10 #xiaodeng #web页面中可以包含多个对象 #HTTP权威指南 10页 #应用程序完成一项任务时通常会发布多个http事务.如:web浏览器会发布一系列http事务来获取一个包含了丰富的图片的web页面. #http事务怎么运作呢? 1.执行一个事务来获取描述页面布局的html框架 2.然后发布另外的http事务来获取嵌入的图片.图像.java小程序.这些资源可能在不同的服务器上. 因此: 一个web页面不是单个资源,通常是

web页面的优化

众所周知,一个web页面通常会包括HTML(XHTML.XML).CSS.Javascript,而其中HTML(XHTML.XML)为结构化语言,用于构建页面结构和相关数据:CSS则负责页面的样式,即页面的表现形式:Javascript则负责页面的行为,即完成页面的各种交互. 页面的这三个部分是相辅相成的,在构建web页面的过程中,要尽量保持三者松耦合的关系,从而实现对一个部分的改动而不影响另外两个部分. 要实现三者的松耦合,首先必然是从文件级别上隔离三个部分,即在HTML页面中引入相关的CSS

asp.net多线程在web页面中简单使用

需求:一个web页面 default.aspx 里面有两个控件GridView1,GridView2,通过两个线程分别加载绑定数据. 绑定GridView1:void BindCategory()    { SqlConnection conn = ReturnSqlconn();        SqlCommand comm = new SqlCommand("select * from category", conn);        conn.Open();        Sql

用Chrome devTools 调试Android手机app中的web页面。

(1) 手机要满足Android系统为4.4或更高版本,低版本不支持这种方式.(2) 确保App已经开启了webview的debug调试模式,由Android工程师协助.(2) 用usb数据线连接好手机与电脑.(3) 将手机中的 设置 - 开发人员工具 - USB调试功能打开.(4) 打开chrome://inspect/#devices,即单击chrome右上角控制按钮 - 更多工具 - 检查设备 - 勾选上 Discover USB devices(5) 在app中访问一个web页面,对应的