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

最新推荐文章于 2025-05-18 00:00:00 发布

最新推荐文章于 2025-05-18 00:00:00 发布

CC 4.0 BY-SA版权

分类专栏： java-web开发 web前端高效开发高效的进行前端开发文章标签： html web前端前端开发开发人员

本文介绍了前端开发的命名规范，包括HTML、CSS和JS的细节，强调了代码整洁和一致性的价值。此外，还讨论了代码重构的概念，如删除无用代码、代码规范化、整理基础类库和代码模块化，以及提升页面加载性能的策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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>

.main,
.container,
body {
    font-size: 16px;
    ...
}

/*main head*/
.main-head {
    ...
}
.main-head div{
    ...
}
...

/*main body*/
...

/*main foot*/
...

普通js
var info, title;
var getContent = function(){
    ...
};
...

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

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

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

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

论文件命名的重要性

HTML命名规范以及格式规范

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

对于层级中的class类命名，可以使用连缀的形式，不过连缀最长不要超过三个。如下：

CSS命名规范以及格式规范

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

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

类样式定义可以按照模块划分，比如头部，内容和尾注，一个css文件最好不要过大，控制在200行以内，如果是在过大，可以分模块，比如将它分成三个文件（头部，内容和尾注）

JS命名规范以及格式规范

js局部变量命名采用首字母小写，其余单词首字母大写，形如mainHeadContainer，命名需要有意义，不用担心变量名太长而使js脚本文件变大，可以在发布阶段通过js脚本混淆压缩等手段来缩小文件

建议将js面向对象编程，原则上公有接口的命名为首字母大写，而私有接口的命名首字母小写，如下：

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

对于使用代码块的地方，不管代码块中的代码有多少行，都最好加上{}，即使只有一行

在JS代码中，如果注释未占有多行，优先考虑使用//而不是/**/。注释应该单独占用一行，而不是写在和代码相同一行的右边

前端代码重构概念

代码重构指的是在不改变代码外部行为的情况下进行源代码修改。重构之前最主要考虑的问题是如何才能保证外部行为不改变

重构的过程

删除无用代码以精简代码

整理基础类库：网站初期为了加快开发进度引入了多个框架，其中有些框架可能重复的功能较多，比如ExtJS和jQuery，这是重构的内容主要是统一UI插件的使用，统一基础方法的使用

前端代码模块化：主要是将前端的js和css代码进行功能划分，以便于后期维护和更新

提高页面加载性能：将部分不影响页面展示的js文件延迟到页面加载后加载（置于body中的内容后面）；页面中的部分图片进行延迟加载；给静态文件设置缓存；通过CSS Sprite技术合并页面背景图片，减少http请求次数等

参考文献

Web前端开发最佳实践一书