常用的前端文件的组织结构:

.js(放置javascript代码)

.lib(放置框架javascript文件)

.custom.js

.css(放置CSS样式代码)

.lib(放置框架CSS文件)

.images(放置用于样式中的背景图)

.reset.css(统一元素默认样式的样式文件)

.custom.css(业务相关样式文件)

.resource(放置页面图片文件以及其他类型资源文件)

.index.html

代码文件命名

  代码文件命名需要表明文件对应的模块内容、对应的版本号和文件格式等,例如:jquery的命名为:jquery-1.8.2.min.js,其中,jquery表明文件的内容,1.8.2表明文件的版本号,min表明此文件为文件的压缩格式版本。

前端代码重构过程:

1.删除无用的代码,精简代码。

  无用的代码主要集中在CSS和javascript文件中,包括已经不起作用的CSS样式和废弃的javascript函数。

2.前端代码规范化。

  页面HTML标签中还有大量的内联CSS样式,有些页面的head部分也有CSS样式,需要把这些样式放到独立的文件中;

  调整代码的层次缩进格式,不同层级按照4个空格来缩进;

  更改标准已不推荐的标签,如<center>、<b>等,改为由CSS样式控制;

  统一命名规则,这里主要涉及HTML中的id和class名称;

  在javascript中集中定义局部变量,并把部分全局变量转变为局部变量,缩小变量作用域。

3.整理基础库类

  重构的内容是统一UI插件的使用,统一基础方法的使用。

4.前端代码模块化

  按照模块归类CSS代码,放到模块对应的单独的CSS文件中

  按照模块分离javascript代码,按照模块定义不同的命名空间

  将javascript代码中的公共方法归类到独立的共通文件中,同时引入面向对象的思想来重构javascript代码,进一步明确公有接口和私有接口

5.提高页面的加载性能

  将部分不影响首页展示的javascript文件延迟到页面加载后加载

  删除页面中初始隐藏的区域,改为通过javascript按需动态生成

  页面中的部分图片延迟加载

  调整CSS和javascript文件中的引用顺序,即CSS在前javascript在后

  给静态文件设置缓存

  使用CSS sprint,合并首页背景图

  合并和压缩发布后的CSS和javascript代码文件

前端重构最佳实践

1、重构前一定要预估风险,如果没有足够的自动化测试,最好是先完善自动化测试代码

2、重构的目的和范围要明确,重构的目的主要是提高代码的可维护性、可读性和性能

3、最好是先易后难,循序渐进。首先修改诸如命名、格式等不涉及具体逻辑哦内容,然后考虑模块化和性能提升等与具体逻辑相关的内容

4、重构过程中要持续测试,在多个浏览器中测试,确保重构部分功能正确

5、如果性能提升,要事先检测网站的整理性能并量化,找出性能瓶颈,重构过程中要持续检测性能,并对比性能提升的效果

WEB学习笔记2-结构组织和文件命名的更多相关文章

  1. JAVA Web学习笔记

    JAVA Web学习笔记 1.JSP (java服务器页面) 锁定 本词条由“科普中国”百科科学词条编写与应用工作项目 审核 . JSP全名为Java Server Pages,中文名叫java服务器 ...

  2. [原创]java WEB学习笔记95:Hibernate 目录

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  3. [原创]java WEB学习笔记75:Struts2 学习之路-- 总结 和 目录

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  4. [原创]java WEB学习笔记66:Struts2 学习之路--Struts的CRUD操作( 查看 / 删除/ 添加) 使用 paramsPrepareParamsStack 重构代码 ,PrepareInterceptor拦截器,paramsPrepareParamsStack 拦截器栈

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  5. Java Web 学习笔记 1

    Java Web 学习笔记 1 一.Web开发基础 1-1 Java Web 应用开发概述 1.1.1 C/S C/S(Client/Server)服务器通常采用高性能的PC机或工作站,并采用大型数据 ...

  6. Java Web学习笔记之---JSP

    Java Web学习笔记之---JSP (一)JSP常用语法 (1)HTML注释 <!--所要注释的内容 --> 在客户端显示一个注释. (2)隐藏注释 <%--所要注释的内容--% ...

  7. java web 学习笔记 编码问题总结

       java web 学习笔记 编码问题总结 1.非form表单中提交的中文参数---------------------------传递给Servlet服务器时,默认以iso-8859-1解码 ...

  8. [原创]java WEB学习笔记11:HttpServlet(HttpServletRequest HttpServletRsponse) 以及关于 Servlet 小结

    本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当 ...

  9. Java NIO 学习笔记(六)----异步文件通道 AsynchronousFileChannel

    目录: Java NIO 学习笔记(一)----概述,Channel/Buffer Java NIO 学习笔记(二)----聚集和分散,通道到通道 Java NIO 学习笔记(三)----Select ...

随机推荐

  1. 使用Nome监控服务器各项指标

    使用Nome监控服务器各项指标     关于Nome的使用:         1)如何将nome压缩文件上传到服务器是,首选需要将压缩包下载到本地             a.创建文件夹Nome:mk ...

  2. 读《Tooth-Marked Tongue Recgnition Using Multiple Instance Learning and CNN Features》

    本人 组会汇报的一篇关于齿痕舌判定的文章,贴上PPT 涉及多示例学习和神经网络方面知识. 准确率有待提高哈哈.

  3. Treap标准模板

    这是Treap的模板程序,支持Left/Right Rotate,Find the maxnum/minnum,Find the predecessor/successor of a node,Add ...

  4. windows—IOCP

    一.重叠I/O回声服务器端 服务端: #include <stdio.h> #include <stdlib.h> #include <WinSock2.h> #d ...

  5. linux常用命令 命令管道符

    多命令顺序执行 多命令顺序执行 多命令执行符 格式 作用 : 命令1:命令2 多个命令顺序执行,命令之间没有任何逻辑联系 && 命令1&&命令2 逻辑与 当命令1正确执 ...

  6. 嵌入式单片机,ATmega328P,外部中断INT0,INT1,INT2,中断标志位介绍

    body, table{font-family: 微软雅黑; font-size: 13.5pt} table{border-collapse: collapse; border: solid gra ...

  7. 入门html第一次copy小米首页布局

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  8. python-数据类型练习题1

    1.有变量name = "aleX leNb" 完成如下操作:移除name变量对应的值两边的空格,并输出处理结果n1 = name.strip()print(n1) 结果:aleX ...

  9. *args和**kwargs的区别

    *args和**kwargs表示可变长度的参数. *args是元组类型: **kwargs是字典类型: 注意:arg.*args.**kwargs三个参数的位置必须是固定的,否则会报错.

  10. 第七次作业——numpy统计分布显示

    用np.random.normal()产生一个正态分布的随机数组,并显示出来. np.random.randn()产生一个正态分布的随机数组,并显示出来. 显示鸢尾花花瓣长度的正态分布图,曲线图,散点 ...