Web前端高效开发最佳实践总结一：前端开发综述

论文件命名的重要性

在开发项目中遵循恰当的命名规范与整齐的格式能够让代码呈现出一种有序的状态这不仅有助于提升可读性更能体现出开发者的专业素养就文件命名与代码布局而言并不存在固定的模式但即便对于任何代码它们都必须遵循某个原则即在同一个项目中保持代码结构清晰是一个原则而在文件命名方面则需要遵循一定的规范与意义

HTML命名规范以及格式规范

所有的标签名和属性都应该为小写，属性值最好使用双引号闭合

在为元素命名时，请参考其语义和DOM树中的层级结构来确定合适的名称。所有名称应采用小写字母形式。具体来说，在id属性名中使用的关键词应通过下划线_进行分隔，在class属性名中使用的关键词则需通过连字符-进行连接。这一规则有助于减少名称重复的风险。如果某个标签仅用于JavaScript钩子功能，则应在名称中添加js-前缀标识。

针对层级中的class类命名时

    <div class="main">
    <div class="main-head">
        <div class="main-head-top">
            <div class="main-top-one"></div>
            <div class="main-top-two"></div>
        </div>
    </div>
    <div class="main-body"></div>
    <div class="main-foot"></div>
    </div>
    
      
      
      
      
      
      
      
      
      
      
    
    代码解读

CSS命名规范以及格式规范

在CSS中设置类样式时，类名和{左括号间隔一个空格

多个css类单独放一行，如下：

    .main,
    .container,
    body {
    font-size: 16px;
    ...
    }
    
      
      
      
      
      
      
    
    代码解读

类样式定义应当依照模块结构进行组织管理, 例如将元数据块分为头信息区, 正文内容区以及脚本执行区等部分. 建议控制一个css文件的代码量在200行以内, 如果规模较大则采用分块策略, 将其划分为三个部分: 头信息区, 正文内容区以及脚本执行区

    /*main head*/
    .main-head {
    ...
    }
    .main-head div{
    ...
    }
    ...
    
    /*main body*/
    ...
    
    /*main foot*/
    ...
    
      
      
      
      
      
      
      
      
      
      
      
      
      
      
    
    代码解读

JS命名规范以及格式规范

JS中的局部变量命名通常遵循首字母小写的规则，并且每个单词的首字母大写（例如mainHeadContainer这样的名称）。为了提高代码可读性与可维护性，“命名需具有一定的意义”。此外，在编写代码时无需过多担心变量名称过长可能导致的JS脚本文件变大问题，在发布阶段可以通过JS脚本混淆或压缩等技术来减少文件大小。

建议采用JavaScript面向对象编程方式，在具体实施时可参考以下命名规范：遵循以下命名规范：公有接口名称采用首字母大写的习惯（如Class常量），私有接口名称则采用首字母小写的表示方式（如ClassName）。

    普通js
    var info, title;
    var getContent = function(){
    ...
    };
    ...
    
    使用面向对象编程的方式定义js
    Reader.Content = function(){
    //定义私有变量
    var info, title;
    var getContent = function(){
        ...
    };
    };
    
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
    
    代码解读

对于jQuery框架，其定义的jQuery变量前面应该都添加上$前缀

无论在使用代码块时（不论多少行）的代码都有建议在开头添加{}以确保语法正确性 即使只有单行代码也需要如此处理

    for(var i=0; i<10; i++) {
    console.log(i);
    }
    
      
      
      
    
    代码解读

在JavaScript脚本中，当注释不需要占据多行时，建议采用//形式而非*/形式进行标注。为了提高可读性，注释应独立成行，并避免与代码在同一行排布。

前端代码重构概念

源代码重写是指在不影响外部功能的前提下对原始源代码进行调整，在源代码重写之前最关注的问题是确保外部功能不受影响

重构的过程

删除无用代码以精简代码

前端代码规范化：将前面所述的HTML、CSS以及JavaScript的相关命名规范与格式规范整合在一起，并对那些不符合标准且应避免使用的标签进行调整。
统一标签命名有助于提高代码模块化水平。
在JavaScript中集中定义局部变量，并将部分全局变量改为局部变量以减小作用域范围。

优化基础库：在网站初期阶段以加快开发进度为目标引入了多套技术架构方案，在这些方案中可能存在部分技术之间存在功能重复较为明显的情况；例如像ExtJS与jQuery这样比较常见的技术组合就具备这种特性；这种架构策略调整的主要目的是实现统一的UI插件调用策略以及统一的基础功能方法集的实现

前端开发中的代码模块化：主要目的是对JavaScript和CSS代码进行功能上的分类，并使后续的维护与更新更加便捷

优化页面加载性能：将不影响展示的JavaScript文件推迟至页面加载后进行处理，并将其放置在body尾部之后；对网页中的某些图片实施推迟加载策略；为静态资源建立缓存机制；采用CSS Sprite技术整合背景图像资源以降低HTTP请求频率

参考文献

Web前端开发最佳实践一书