Skip to content

Latest commit

 

History

History
194 lines (138 loc) · 7.6 KB

前端开发规范.md

File metadata and controls

194 lines (138 loc) · 7.6 KB
Raw

sam的前端开发经验分享

此篇文章分两部分:

一、项目目录结构

二、模块的定义与模块命名规范

  • 模块是什么

  • 模块的命名

  • 模块的重用与扩展

  • 模块的种类

  • 注释对于模块的重要性

一、项目结构:

  • 此项目是由一个首页，多个栏目构成，为了让代码维护变得方便. 项目将公共文件抽离， 各栏目内也自建私有项目目录.
项目目录:

|-- node_modules        # node.js组件
|-- page                # 所有栏目的私有文件包
|   |-- index  # 栏目目录
|   |   |-- images      # 私有文件
|   |   |-- style       # 私有文件
|   |   |-- script      # 私有文件
|   |   |-- index.html  # 页面
|   |-- column          # 栏目目录
|   |   |-- images      # 私有文件
|   |   |-- style       # 私有文件
|   |   |-- script      # 私有文件
|   |   |-- index.html  # 页面
|   |   |-- page1.html  # 页面
|   |   |-- page2.html  # 页面
|-- public              # 公共文件包
|   |-- images          # 公共图片
|   |-- style           # 公共样式
|   |-- script          # 公共JS
|-- package.json        # node配置
|-- GruntFile.js        # Grunt配置文件

二、命名规则:

命名规则 (一):

  • 每个页面都是由很多的内容块(主题块:如 菜单 文章列表)组成的,我们把每个内容块看成一个独立的块，那么这种独立的块，就叫模块. 一个模块(内容块)一般由 头部，主体，脚步 三个部位构成

  • 命名: 模块的名字跟它自己是什么，有关系，比如一个模块是用来放最新新闻的一个列表模块，那么我们把这整个模块的CSS起名为:

m_ 前缀: 模块前缀, 表示这是一个模块, 这是此模块的最外层父级; m是module的意思;

newsList: 直接表明此模块的意思, 它是新闻列表模块;

  • 部位: 一个模块一般由 头部、主体、腿部组成，那么这三个部分遵循以下的命名规则:

命名规则 (二):

  • 模块内的元素命名: 模块内的元素命名，也应由元素是什么来定义

  • 如模块的主体是一个列表，那么

  • 如果模块主体是由一个图文介绍加一个列表组成，那么:

模块内的元素尽量按照自身的意思抽象化命名, 简洁, 可读性高

命名规则 (三):

####定义模块的命名:

1.模块命名一般按照模块的标题为主, 描述为辅来形象的命名, 如：

.m_newsList 【主】： news是这个模块的主要意思 　【辅】：list是辅助单词, 表示这个模块是列表类型

2.模块内部元素的命名以抽象化元素的意义为核心, 简短, 易懂为主,　如：

↓ 所属模块部位  ↓ 元素  
.arcList_bd  .listWrap{ xxxxxxx }  
↑ 子元素css挂上所属模块的部位，作为命名作用域

3.对于一个模块来说，模块的各部位可包含其他模块

.m_doctorCategory                   #　医生筛选模块
    .doctorCategory_hd
            .m_category             #　模块头部引入了category分类模块(类似京东的商品筛选的那种模块);
                .category_hd
                .category_bd
    .doctorCategory_bd
            .m_expertList           #  模块主体引入了 expertList专家列表模块 (图文列表，类似中关村产品列表页的列表);
                .expertList_hd
                .expertList_bd
                    ul.listWrap
                        li.item
                        li.item
                        li.item
                        ......

4.时刻控制好模块结构层级的深度, 尽量减少嵌套, 如果是多层级的模块, 模块内的元素的命名就要更注意，让元素的命名**个性化(复杂一些，长一些)***一些, 避免因为多个元素相同的抽象化命名而导致样式污染;

命名规则 (四):

  • 模块的重用与扩展:

**重用:**整站中, 可能会出现一些一模一样的, 或者结构相同样式不同的模块, 我们需要把这些重用的元素从模块中提取出来, 让它们成为独立的模块, 然后把这些独立的模块插入到其他模块的部位中, 来实现相同模块的重用.

扩展:即使能重用的结构放入了某些模块, 但未必能满足那个模块的需求, 有时候某些模块下的重用模块有一些个性化的定制样式, 那么这时候就需要将插入到这个模块内的重用模块(基本类)增加一个扩展样式(扩展类);

基本模块(基类, 基本类型)    eg: .m_arcRankList
                                    .arcRankList_hd
                                    .arcRankList_bd
                                            ul.listWrap
                                                li.item > span.rank + a
                                                li.item > span.rank + a
                                                li.item > span.rank + a

                                                    ↓ 扩展类 x1
扩展模块(扩展类, 扩展类型)  eg: .m_arcRankList.m_arcRankList_x1     # 在基类后面加一个扩展类的class
                                    .arcRankList_hd
                                    .arcRankList_bd
                                            ul.listWrap
                                                li.item > span.rank + a
                                                li.item > span.rank + a
                                                li.item > span.rank + a

扩展类的css样式写法规则:

扩展的模块的css块 放置在基本模块的 css块后面, 并加入注释, 注释中写入此扩展模块的描述与特性..

css eg:

命名规则 (五):

模块化内容块的结语一:

将内容块做成模块, 会让内容块的结构清晰可读, 并且独立性强

模块一般有两种情况(类型):

  • 当一个模块的含义跟功能固定不变动的时候, 可以让模块名为简短的模块英译名(方面识别), 如 个人空间: .m_personalZone

  • 当一个模块如果作为重用模块, 模块的标题文本总变动的时候, 那么将模块名变为抽象名会比较方便重用, 模块名字也显得更合理

模块化内容块的结语二:

注释: 无论是 HTML 还是 CSS(js), 都必须书写 简短, 意思明确的注释, 来划分模块的代码的区域(代码块在文件中开始和结束的位置), 提高模块的识别性

eg: