前端架构整理

1.css（UI库）

（1）始始化CSS

（2）基础：不添加类名时的样式

（3）布局：布局相关的类

（4）模块：可复用的样式（核心）

（5）状态：不同状态的样式

（6）主题：相当于皮肤

（7）命名规则：组件内推荐BEM（块名__元素--修饰符(状态)：toogle__details--active）的命名规范

2.JS

（1）框架选择：根据项目选择适合的框架和第三方插件

（2）代码规范：可参考Airbnb、googole、javascript Standard

（3）可复用性：提取公用函数、设计模式

（4）可扩展性：模块化、设计模式

3.组件：

（1）保证组件内的 html/css/js 独立和解耦

（2）CSS命名规则：BEM

4.性能优化

（1）服务器层面：CDN、多域名、GZIP

（2）页面层面：

        <1>减少http请求：

            [1]设置缓存

            [2]资源合并与压缩

            [3]图片进行压缩并使用懒加载，有需要可用图片精灵

            [4]图标用SVG

        <2>JS置底

        <3>CSS置顶

        <4>减少http跳转和重复请求

（3）代码层面

        <1>JS

            [1]减少DOM操作，避免重排和重绘

            [2]避免全局变量：避免全局变量污染和作用域的变长

5.代码管理

（1）项目目录规范

（2）版本管理控制

（3）代码环境：开发环境和生产环境构建

6.文档规范