【Web前端开发最佳实践系列】前端代码推荐和建议
一、常用的前端文件的组织结构:
1、js (放置JavaScript代码)
- lib(放置框架JavaScript文件)
- custom.js
2、css(放置CSS样式代码)
- lib(放置框架CSS文件)
- images(放置用于样式中的背景图)
- reset.css( 统一元素默认样式的样式文件)
- custom.css(业务相关样式文件)
3、resource(放置页面图片文件以及其他类型资源文件)
4、index.html
代码文件整体按照文件类型的不同归类,同一类型的代码文件则需要安装具体的业务模块来划分,切记把多个模块的代码编写到同一个文件中。划分的粒度已最大代码复用为标准,这样易于维护和管理。不同模块的代码放置到不同的文件中叶更有利于多人协作开发。
如果每种分类下面的文件过多,则可以根据对应的模块来归类到不同的模块文件夹中。例如,某个项目业务模块很多,导致前端JavaScript脚本文件数量过多,如果放置于同一文件夹下,将会增加维护的难度。我们可以分模块,分模块的话会使得文件增多增加请求时间,所以在发布时需要对文件进行压缩和合并。
- 雅虎公司的YUI Compressor(Java开发的)
- 微软公司的Web Optimization(.NET开发的)
代码文件的命名原则主要是需要表明文件对应的模块内容,对应的版本号和文件格式等。
二、前端重构的最佳实践
1、重构前一定要预估风险,如果没有足够的自动化测试,最好是先完善自动化测试代码
2、重构的目的和范围要明确,切记盲目修改。前端代码的重构目的主要是提高代码的可维护性,可读性和性能。
3、最好是先易后难,循序渐进。首先修改诸如命名、格式等不涉及具体逻辑的内容,然后考虑模块化和性能提升等与具体逻辑相关的内容
3、重构过程中要持续测试,在多个浏览器中测试,确保重构的部分功能正确。切记在大量重构后再进行测试,因为大量重构后基本很难记得重构的逻辑,也就有肯遗漏部分测试用例
4、如果是性能提升,要事先检测网站的整体性能并量化,找出性能瓶颈。重构过程中要持续监控性能,并对比性能提升的效果。
三、Web前端性能分析
常用的Web前端性能分析工具有YSlow、PageSpeed及各浏览器知道的开发工具等,
1、雅虎的YSlow的特性:
- 基于不同的规则评定网站整体性能评分
- 给出提高网页性能的建议
- 统计页面加载的组件
- 页面的统计信息视图
- 相关性能分析的工具集,如JSLint、Smush.it等
2、chrome自带的开发工具:
- NetWork中可以查看各资源请求和下载所用的时间。
- Timeline中可以查看网页渲染和交互过程中各步骤所花费的时间,从资源的加载到JavaScript的解释执行、样式的额应用和绘制。
- Profiles中可以查看网页的CPU及内存占有情况报告
- Audits中提供了各种资源和配置优化的建议和未使用CSS规则的列表。
四、代码和资源的压缩与合并
发布的时候,一般会压缩前端HTML、CSS、JavaScript代码及用到的资源文件(主要是图片文件),目的是加快文件在网络中的传输,让网页以更快的速度展现。当日,CDN分发、缓存等方式也是加快代码或资源文件传输的方式,但是压缩代码和资源文件是最有效的手段。
在HTTP中允许客户端可以选择从服务器上下载压缩的内容,Gzip就是其中一种支持的格式。Gzip是一种常见的压缩算法,目前Gzip得到了大部分主流的Web服务器(IIS Nginx Apache Lighttpd等)和主流的浏览器的支持。服务器配置人员可以查看服务器对应的配置文档,开启Gzip压缩,服务器启用了Gzip压缩后,代码文件有更小的体积,尤其是文本文件。Web服务器开启Gzip压缩后,会在Response的header中增加Content-Encoding:gzip.可以通过检查此header项来判断服务器是否开启了Gzip压缩。
2、JavaScript代码压缩
JavaScript压缩的原理一般是去掉多余的空格和回车、替换长变量名、简化一些代码写法等。JavaScript代码压缩工具很多,有在线工具、应用程序、编辑器插件等。使用最多的就是UglifyJS、YUI Compressor、Closure Compiler【Google公司的】.UglifyJS不仅仅是一个压缩工具,同时具有JavaScript语法分析和代码美化功能,包括代码缩减、代码转化等。
3、CSS代码压缩
CSS代码压缩原理和JavaScript代码压缩的原理类似,也是去掉不必要的空格、回车、注释等,并同时欧化合并一个CSS规则定义,让规则更简洁(CSS Compressor)。
4、HTML代码压缩(HtmlCompressor):关于此项,褒贬不一。
5、图片资源压缩
TinyPNG压缩PNG格式图片,JPEGmini压缩JPG格式图片。本地应用程序推荐使用ImageOptim。
目前比较流行的前端自动化构建工具Grunt也可以集成代码和资源的压缩工具。
五、前端代码基本命名规范和格式规范
- HTML代码的所有的标签名和属性都应该为小写。
- 给所有的关键元素定义元素的id和class,便于和CSS、JavaScript交互。因为id名称和class名称有可能作为检索值用在JavasCRIPT代码中,
- 推荐使用语义和DOM树的层级关系来定义合适的名称,名称中全部使用小写,id名称中的关键词用下划线连接,class的关键词使用-连接
- 给HTML代码添加必要的注释。
- 为了避免class命名的重复,命名时去父元素的class名作为前缀。
- 多个选择器具有相同样式声明时。每个选择器应该单独占一行,便于阅读和维护。
- JavaScript局部变量命名采用首字母小写,其他单词首字母大写的方式。
【Web前端开发最佳实践系列】前端代码推荐和建议的更多相关文章
- Web前端开发最佳实践系列文章汇总
Web前端开发最佳实践(1):前端开发概述 Web前端开发最佳实践(2):前端代码重构 Web前端开发最佳实践(3):前端代码和资源的压缩与合并 Web前端开发最佳实践(4):在页面中添加必要的met ...
- 【WEB前端开发最佳实践系列】CSS篇
一.有效组织CSS代码 规划组织CSS代码:组织CSS代码文件,所有的CSS都可以分为2类,通用类和业务类.代码的组织应该把通用类和业务类的代码放在不同的目录中. 模块内部的另一样式规则:样式声明的顺 ...
- 【Web前端开发最佳实践系列】标准的HTML代码
一.验证代码是否符合标准 优点: 标准的页面会保证浏览器正确的渲染 网页能更容易被搜索引擎搜索,提高网站的搜索排名 提高网站的易用性 网页更好维护和扩展 常用工具: W3 Validator HTML ...
- 【WEB前端开发最佳实践系列】JavaScript篇
一.养成良好的编码习惯,提高可维护性 1.避免定义全局变量和函数,解决全局变量而导致的代码“污染”最简单的额方法就是把变量和方法封装在一个变量对象上,使其变成对象的属性: var myCurrentA ...
- 【WEB前端开发最佳实践系列】高可读的HTML
一.HTML语义化 HTML5中增加了很多标签都是基于此类原则设计的(article nav header footer).页面标签语义化的优点是使得搜索引擎以及第三方抓包工具等更容易读懂页面 ...
- Web前端开发最佳实践(9):CSS代码太太乱,重复代码太多?你需要精简CSS代码
前言 提高网站整体加载速度的一个重要手段就是提高代码文件的网络传输速度.之前提到过,所有的代码文件都应该是经过压缩了的,这可提高网络传输速度,提高性能.除了压缩代码之外,精简代码也是一种减小代码文件大 ...
- Web前端开发最佳实践(2):前端代码重构
前言 代码重构是业内经常讨论的一个热门话题,重构指的是在不改变代码外部行为的情况下进行源代码修改,所以重构之前需要考虑的是重构后如何才能保证外部行为不改变.对于后端代码来说,可以通过大量的自动化测试来 ...
- Web前端开发最佳实践(3):前端代码和资源的压缩与合并
一般在网站发布时,会压缩前端HTML.CSS.JavaScript代码及用到的资源文件(主要是图片文件),目的是加快文件在网络中的传输,让网页更快的展现.当然,CDN分发.缓存等方式也是加快代码或资源 ...
- Web前端开发最佳实践(1):前端开发概述
引言 我从07年开始进入博客园,从最开始阅读别人的文章到自己开始尝试表达一些自己对技术的看法.可以说,博客园是我参与技术讨论的一个主要的平台.在这其间,随着接触技术的广度和深度的增加,也写了一些得到了 ...
随机推荐
- Python——getpass
getpass模块提供了可移植的密码输入,一共包括下面两个函数: 1. getpass.getpass() 2. getpass.getuser() getpass.getpass([prompt[, ...
- XSD 数据类型
字符串数据类型(String Data Type) 字符串数据类型可包含字符.换行.回车以及制表符. 下面是一个关于某个 scheme 中字符串声明的例子: <xs:element name=& ...
- MySQL时间戳时间
MySQL中: now():获取当前时间:例:SELECT now(); unix_timestamp():将时间转换为时间戳:例: SELECT unix_timestamp(now());
- Linux 找不到php.ini
在部署环境中利用phpinfo()查看,显示php.ini 路径为/usr/local/php5/lib 但是到对应路径中,找不到php.ini文件,在网上找到相关方法,留下备注. Configura ...
- Js参数值中含有单引号或双引号解决办法
<script type="text/javascript"> function Display(LoginEmail, UserName, ID) { ...
- 腾讯爱玩某处csrf导致骚扰用户(QQ弹窗+QQ会话+微博)
点击提醒,然后抓包: POST /dyid_proc.php HTTP/1.1 Host: tx.qq.com User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW ...
- win8 关闭防火墙
http://jingyan.baidu.com/article/b87fe19eddb4da5218356894.html
- Visual Studio快捷键大全
快捷键的使用可以简化大家的操作,在一定程度上提高工作的效率,下文中将为大家介绍一些VS中经常用到的快捷键,希望对大家有用. 方法/步骤 关于解决方案和项目 用于快速跳转 用于代码的文本编辑 ...
- ActiveMq持久化数据
A:持久化为文件 这个你装ActiveMQ时默认就是这种,只要你设置消息为持久化就可以了.涉及到的配置和代码有 <persistenceAdapter> <kahaDB direct ...
- centos7 安装keepalived
node1 192.168.5.101 node2 192.168.5.102 1.安装 openssl openssl-devel yum install openssl openssl-devel ...