Code Monkey home page Code Monkey logo

codeguide's Introduction

CodeGuide

AlloyTeam代码规范

1. 为什么要有团队代码规范?

虽然这些细节是小事,不会有体验或者性能上的优化,但是却体现了一个coder和团队的专业程度 团队的愿景:成为业界卓越的Web团队!
所以不管团队有多少人,代码风格都应该师出同门!

2. 如何使用?

在使用之前花一点时间把规范看一遍是很必要的,
然后按照这里的步骤配置好编辑器和构建检查(目前仅提供了sublime3和grunt的配置)

主要使用到了jscs,jshint,sass-lint,csslint 四个规范检查插件,
JsFormat(它其实用的是jsbeautifier),CSScomb两个格式化的插件,
使用其他编辑器的话可以自己去搜一下相关的这些插件。

配置好后,保存的时候可以看到不合规范的代码行前面有明显的提示:

将光标移到该行,可以在状态栏中看到详细的错误信息:

建议在修改这些错误之前,js文件用JsFormat格式化一下(ctrl+alt+f),css文件用CSScomb格式化一下(ctrl+shift+c),可以减少很多工作量。

3. 觉得不合理或者有遗漏的地方?

如果觉得有不合理或者遗漏的地方,请访问这里

codeguide's People

Contributors

dntzhang avatar kundan28 avatar yuri4ever avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

codeguide's Issues

JS生成标签

在JS文件中生成标签让内容变得更难查找,更难编辑,性能更差。应该尽量避免这种情况的出现。

不完全理解这句,可否描述的更为具体一些,建议怎么来做。

请教一下

你们这个代码的规范是markdown自动生成的,还是手写的样式文件。

关于js变量命名的疑问

变量命名
标准变量采用驼峰式命名(除了对象的属性外,主要是考虑到cgi返回的数据)
'ID'在变量名中全大写
'URL'在变量名中全大写
'Android'在变量名中大写第一个字母
'iOS'在变量名中小写第一个,大写后两个字母
常量全大写,用下划线连接
构造函数,大写第一个字母
jquery对象必须以'$'开头命名

团队规范文档中提到的标准变量采用驼峰式命名(除了对象的属性外,主要是考虑到cgi返回的数据),想知道什么是cgi?

既然对象的属性不以驼峰的形式命名,那么是以什么方式命名?

youers

你怎样使用sea.js来规范代码?

关于 CSS 规范之属性声明顺序,好久没更新了

  1. 我看上面 declaration-order 并没有 flex 布局相关的属性,应该是太久没更新了;

  2. 都 2021 年了,估计很少人手写兼容各大平台的 CSS 属性了,都用 autoprefixer 去处理了,所以里面的 -webkit-、-ms- 这些前缀相关的属性是不是可以去掉了。

使用 CSScomb 一键排序的时候发现以上问题

javascript 中关于空行的规范

   // need blank line after blocks
   var obj = {
        foo: function() {
            return 1;
        },

        bar: function() {
            return 2;
        }
    };

   // not need blank line when in argument list, array, object
    var foo = {
        a: 2,
        b: function() {
            a++;
        },
        c: 3
    };

为什么第一个obj.foo 后面加空行,第二个foo.b后面又没有?

HTML 属性顺序

属性应该按照特定的顺序出现以保证易读性;

class
id
name
data-*
src, for, type, href, value , max-length, max, min, pattern
placeholder, title, alt
aria-*, role
required, readonly, disabled

建议修改为

属性应该按照特定的顺序出现以保证易读性;

class
id
name
data-*
src, type, href, value
placeholder, title, alt
 for,aria-*, role
required , max-length, max, min, pattern, readonly, disabled

因为for属性应该归类于ARIA
max-length等应该归类于表单校验

看到篇文章说资源文件用减号“-”比较好,有点儿困惑,请教一下~= ̄ω ̄=~

文件/资源命名

在 web 项目中,所有的文件名应该都遵循同一命名约定。以可读性而言,减号(-)是用来分隔文件名的不二之选。同时它也是常见的 URL 分隔符(i.e. //example.com/blog/my-blog-entry or //s.example.com/images/big-black-background.jpg),所以理所当然的,减号应该也是用来分隔资源名称的好选择。

来源: https://github.com/gionkunz/chartist-js/blob/develop/CODINGSTYLE.md

有一个地方不解.

// no space before '(', one space before '{', one space between function parameters

var doSomething = function(a, b, c) {
    // do something
};

我用standard语法检测插件会提示这样, 要求function名称后面加一个空格.

js-standard Warning Missing space before function parentheses.

虽然我更喜欢不带空格的语法, 问如何关闭着个提示?

css部分意见

  1. !important使用规则
    “!important”只能主动使用,不能被动使用。
    我们主动命名一些公共样式时,为了保证不被意外内容覆盖,可以使用"!important", 如:
.hidden {
  display: none !important;
}

而不是被动等问题发生后,用来取巧, 如:

<div class="content">
  <h2 class="heading-sub">...</h2>
</div>
.content h2 {
  font-size: 2em;
}

.heading-sub {
  font-size: 1.5em !important;
}

关于代码规范中-属性简写规范

你好 , 看了原文地址 , 有个疑问的地方:

原文地址 :
http://alloyteam.github.io/CodeGuide/#project-naming

关于:
属性简写

右侧有贴出优化的写法方案分别为
/* not good */
.element {
transition: opacity 1s linear 2s;
}

/* good */
.element {
transition-delay: 2s;
transition-timing-function: linear;
transition-duration: 1s;
transition-property: opacity;
}

问题:
虽然结构清晰 , 但是 , 简写的存在不是为了更方便维护代码吗 , 而且文件的大小也会相对应减少 ,why not good 哈

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.