个人前端规范——开篇

时间 2019-11-29

标签个人前端规范开篇栏目快乐工作繁體版

原文原文链接

　　博客原文：https://www.jianshu.com/p/105a74443304javascript

　　个人前端规范——开篇：http://www.cnblogs.com/shcrk/p/9271561.htmlcss

　　个人前端规范——HTML篇：http://www.cnblogs.com/shcrk/p/9271613.htmlhtml

　　个人前端规范——CSS篇：http://www.cnblogs.com/shcrk/p/9271608.html前端

　　个人前端规范——JavaScript篇：http://www.cnblogs.com/shcrk/p/9271620.htmlvue

大纲

　　前言
　　一、规范的重要性
　　二、关于注释
　　三、关于文件夹/文件java

前言

　　规范对于一个项目来讲是很重要的，统一的规范对代码的一致性、项目的质量、工做的协调都有很大的帮助，并且有时候能够规避不少意料不到的错误。
　　固然，规范是死的，人是活的。我总结的前端规范是我认为对我来讲比较适合的，我又承认的，因此我能比较好的接受和使用。可是，不一样的团队，不一样的项目须要遵照的规范也许就是不同的。规范的做用是让项目的代码看起来更有统一性，让团队的协做更方便，所以，根据具体的状况制定统一的规范才是最合理的，而这里我给出的也只是我认为比较符合我风格和习惯的，至于具体的规范仍是要依据具体的状况来总结制定。
　　单独写成一篇的话篇幅很大，所以我会将个人总结写成：开篇、css、html、js四篇，让有须要的读者可以更方便的查找到想要的知识。浏览器

一、规范的重要性

　　说了那么多，也许有些读者仍是不觉得意的认为规范也只是一些如不是很重要的东西，那么如下一个例子来告诉你，规范有时候起到的做用不只仅是约束你代码的做用，他还能帮助你规避一些意想不到的bug。框架

<!--
    这段代码对<p>的首字符样式定义在IE6上看是没有效果的,
    而在p:first-letter和{font-size:300%}加上空格，
    也就是p:first-letter {font-size:300%}后，显示就正常了。 

    这个问题主要是出如今IE6浏览器中，并且这位朋友也说明了一些必要的触发条件： 
        一、IE6浏览器 
        二、选择符是带有伪类的 
        三、伪类中必须是有链接符“-”的，例如:first-letter 
        四、是否有空格的存在
    来源： http://www.cnblogs.com/hustskyking/articles/css-bug-in-IE6.html
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="//www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <style type="text/css"> 
    p{font-size:12px;} 
    p:first-letter{font-size:300%}
    </style> 
</head> 

<body> 
    <p>
      对于世界而言，你是一我的；可是对于某我的，你是他的整个世界。纵然伤心，
      也不要愁云满面，由于你不知是谁会爱上你的笑容。
    </p> 
</body> 
</html>

二、关于注释

　　2.一、文件注释

一、文件注释要标明做者、文件版本、建立/修改时间、重大版本修改记录
二、函数描述
三、文件版本、建立或者修改时间、功能、做者
//例子
/**
 * @file Image.js
 * @description 功能详细描述
*/
四、函数或者类等都要添加头描述
//实例
/**
 * 简述
 *
 * 功能详细描述
 *
 * @param <String> arg1 参数1
 * @param <Number> arg2 参数2，默认为0
 * @return <Boolean> 看xxx是否成功
 */
function fooFunction (arg1, arg2) {
}

　　2.二、操做注释

一、单行注释,写在代码上面
二、多行注释
//例
/*
* 注释操做说明
*/
for( var i = 0; i < obj.lenght; i++) {
}
三、注释标签参考
标签                  描述
@addon              把一个函数标记为另外一个函数的扩张，另外一个函数的定义不在源文件中。
@argument           用大括号中的自变量类型描述一个自变量。
@author             函数/类做者的姓名。
@base               若是类是继承得来，定义提供的类名称。
@class              用来给一个类提供描述，不能用于构造器的文档中。
@constructor        描述一个类的构造器。
@deprecated         表示函数/类已被忽略。
@exception          描述函数/类产生的一个错误。
@extends            表示派生出当前类的另外一个类。
@fileoverview       表示文档块将用于描述当前文件。这个标签应该放在其它任何标签以前。
@final              指出函数/类。
@ignore             让jsdoc忽视随后的代码。
@link               相似于@link标签，用于链接许多其它页面。
@member             定义随后的函数为提供的类名称的一个成员。
@param              用大括号中的参数类型描述一个参数。
@private            表示函数/类为私有，不该包含在生成的文档中。
@requires           表示须要另外一个函数/类。
@return             描述一个函数的返回值。
@returns            描述一个函数的返回值。
@see                链接到另外一个函数/类。
@throws             描述函数/类可能产生的错误。
@type               指定函数/成员的返回类型。
@version            函数/类的版本号。
来源： http://www.jianshu.com/p/8d291d823cc0

三、关于文件夹/文件

　　3.一、命名规范

一、文件夹命名：
    英文单词的驼峰法命名
    
二、文件命名：
    所有用小写的英文单词，单词之间用“-”链接。尽可能规避数字、拼音以及可能被拦截的单词
命名，如： ad、ads、adv、banner、sponsor、gg、guangg、guanggao。(不少浏览器会将
含有这些词的做为广告拦截： ad、ads、adv、banner、sponsor、gg、guangg、guanggao等
页面中尽可能避免采用以上词汇来命名。)

　　3.二、文件分层

一、文件的分层依据：
           是以业务逻辑为划分基础，在此基础上进行文件的划分
           
    二、这里的分层不必定适用于全部项目，好比有些项目采用了框架(如angular\vue)，那么
这样的项目就不是很适合于这样的分层结构了。
    
root
    -----js（JavaScript脚本

    -----css（样式表

    -----img（图片

    -----swf（flash

    -----src（源文件目录

    -----dep（引入的第三方依赖包目录

    -----font（引入字体目录

个人前端规范——开篇

相关文章

大纲

前言

一、规范的重要性

二、关于注释

2.一、文件注释

2.二、操做注释

三、关于文件夹/文件

3.一、命名规范

3.二、文件分层

　　2.一、文件注释

　　2.二、操做注释

　　3.一、命名规范

　　3.二、文件分层