来自 软件资讯 2019-10-18 23:28 的文章
当前位置: 威尼斯国际官方网站 > 软件资讯 > 正文

前端编码习贯养成,大前端的自发性化学工业厂

我坦白我是标题党,SB只是SCSS-Bourbon的简写。

JS

  1. 命名

    变量、函数参数:使用Camel(驼峰)命名的方式。

    var isLogin = function(accountId) {
        // do something
    };
    

    常量:使用 全部字母大写,单词间下划线分隔 的命名方式。

    var GLOBAL_CONFIG = {};
    

    函数:使用 Camel命名法。

    function testFunc() {
        // do something
    }
    

    类、构造函数、枚举变量 使用 Pascal(帕斯卡)命名法

    // class
    function TestClass() {
        // do something
    }
    
    // 构造函数
    function TestClass(text) {
        this.text = text;
    }
    
    // 枚举变量:枚举属性全部采用大写加下划线的方式
    var Status = {
        DEFAULT: 0,
        NEW: 1,
        UPDATE: 2,
        READONLY: 3
    };
    

    boolean类型的变量使用 ishas 开头

    var isLoaded = true;
    var hasPermission  = false;
    

    jquery对象以$开头

    var $elem = $(selector);
    
  2. 注释

    单行注释
    必须独占一行。// 后跟一个空格,缩进与下一行被注释说明的代码一致。

    多行注释 避免使用 /*...*/ 这样的多行注释。有多行注释内容时,使用多个单行注释。

    文档化注释 使用 /**...*/ 形式的块注释中。

    /**
     * 函数描述
     *
     * @param {string} p1 参数1的说明
     * @param {string} p2 参数2的说明,比较长
     *     那就换行了.
     * @param {number=} p3 参数3的说明(可选)
     * @return {Object} 返回值描述
     */
    function foo(p1, p2, p3) {
        var p3 = p3 || 10;
        return {
            p1: p1,
            p2: p2,
            p3: p3
        };
    }
    

一. SASS/SCSS

SASS,也称为SCSS奥门威尼斯网址 ,,是CSS预编译语言的一种,常见的预编译语言还包括LESS,Stylus,除了语法风格之外它们之间没有什么太大的区别,从一种语言迁移到另一种语言只需要花半天通读一下文档就可以了。预编译语言为CSS提供了变量定义,函数定义,层级嵌套等等一系列扩展功能,使开发者更容易编写和管理项目中的CSS代码。笔者使用的是SCSS/SASS,因为相关工具库更全面一些,尽管名称偶尔会带来一些瑕疵(建议使用SCSS)。LESS在和Sublime集成时有一些小问题,可能是版本问题,stylus是新兴起的,开发生态并不完善。

CSS

  1. 用四个空格来代替制表符(tab)

  2. 为选择器分组时,将单独的选择器单独放在一行。

  3. 为了代码的易读性,在每个声明块的左花括号前添加一个空格。

  4. 声明块的右花括号应当单独成行。

  5. 为了获得更准确的错误报告,每条声明都应该独占一行。

  6. 所有声明语句都应当以分号结尾。

  7. 对于属性值或颜色参数,省略小于1的小数前面的0(例如,.5 代替 0.5;-.5px 代替 -0.5px)。

  8. 十六进制值应该全部小写,尽量使用简写的形式,例如,#fff 代替#ffffff。

  9. 为选择器中的属性添加双引号,例如,input[type="text"]

  10. 避免为0值指定单位,例如,用margin: 0;代替margin: 0px;

  11. 伪元素使用:的写法,如不需要兼容IE8及IE8以下浏览器,可使用::替换:的写法。例如::before替换:before

  12. 为每个需要控制的元素节点,添加对应的class进行控制,而不是使用元素选择器来进行控制,因为CSS的解释编译是从右往左进行的。

  13. 关于命名

    • class名称中只使用小写字符和减号-,—不使用下划线,也使用驼峰命名法—。
    • 文件命名同上
    • 使用有组织的或目的明确的名称,名称应当尽可能短,并且意义明确。例如:
    • 尽量全部用英语命名,不用英语中间参杂拼音,不会的单词可以Google。
  14. 使用LESS 或 SCSS 编写的时候不需要带前缀的属性声明,因为在对其进行编译的时候使用gulp-autoprefixer可自动为编译后的CSS加上对应的浏览器前缀。

建议css代码结构

/*单个选择器*/
selector {
    /*...*/
}

/*多个选择器,每个选择器都换行*/
selector1,
selector2,
selector3 {
    /*...*/
}

奥门威尼斯网址 1
原文链接:

养成好(dai)的(ma)习(gui)惯(fan)

Bitters——脚手架

♒ 通过npm install -g bourbon-bitters安装

Bitters是Bourbon工具家族里的脚手架,它将你的基础样式分拆为*_bass* , *_buttons* , *_forms* , *_layout* , *_lists* , *_media* , *_tables* , *_typography* , *_variables* 等几个不同的文件并提供一些初始样式,开发中可以将与基础模块相关的样式扩展写在这些文件中,这样的做法可以在一定程度上降低项目的维护难度。

当然你也可以直接引入normolize.css来对项目进行样式的重置。

CSS模块化,以及预编译语言的使用(LESS OR SCSS)

  1. 定义浏览器统一的默认样式:Normalize.css

  2. 布局类通用模块

    1. grid module,网格模块
    2. media module,媒体类数据展示
    3. slide module,轮播模块
    4. list module,列表类模块
  3. 工具类模块,例如

    /*清除浮动*/
    .clear-fix {
        *zoom: 1;
    }
    .clear-fix::before,
    .clear-fix::after {
        display: table;
        clear: both;
        content: "";
    }
    .clearfix::after { 
        clear: both; 
    }
    
  4. LESS OR SCSS 的使用

    1. 使用构建工具,如gulp来进行编译。

    2. 编写样式的时候无需加浏览器前缀。
      使用gulp-autoprefixer
      browserslist


Neat——网格工具

♒ 通过npm install -g bourbon-neat安装.

我们使用的第三方UI框架中,几乎都使用经典的12列布局,但总有些产品经理会提出希望将某一列的宽度扩展到1.5倍这种需求,或者有些场景下你希望对整个网页的布局进行更精细的控制,这个时候轻量级的网格工具Neat就派上用场了,轻量,强大,易用,轻松实现网格划分,网格嵌套,响应式布局等复杂的功能。具体的使用文档可以访问其官方网站Neat官方网址查看文档。

使用示例:

下面简单的几行代码编译为CSS后,就可以实现将页面分为间距为20px的10列,左侧边栏占2列,右侧内容区占8列;然后又将右侧内容区分为间距为10px的6列,每个表格项占1列。

@import "neat";
/*定义网格*/
$sidebar-layout:(
    columns: 10,
    gutter: 20px
);

$list-layout: (
    columns: 6,
    gutter: 10px
);
/*使用网格*/
.sidebar-layout{
    @include grid-container;
}
.sidebar-layout__sidebar{
    @include grid-column(2,$sidebar-layout);
}

.sidebar-layout__content{
    @include grid-column(8,$sidebar-layout);
}

.list-layout{
    @include grid-container;
    @include grid-collapse($list-layout);
}

.list-item{
    @include grid-column(1, $list-layout);
}

构建工具的使用

本文由威尼斯国际官方网站发布于软件资讯,转载请注明出处:前端编码习贯养成,大前端的自发性化学工业厂

关键词: