前端规范（二）

/**前端代码风格规范 */
/**

>规范目的：提高代码规范性和可维护性，统一团队编码规范和风格，同时保证项目有良好的可移植性，可跨平台。

开发工具推荐：
  Visual Studio Code(VS code) 

  •HTML，CSS，JS 的 tab 统一四个空格，保持代码的一致性。
  •设置项目编码或文件编码为 UTF-8。

一、命名规则：
   >文件名不得含有空格
   >文件夹/文件的命名统一小写；不建议使用大写字母。(为了醒目，某些说明文件的文件名，可以使用大写字母，比如 README、LICENSE。)
   >文件名包含多个单词时，单词之间建议使用半角的连词线 ( - ) 分隔。
   >功能模块命名简单而有意义；
 
二、文件路径：
  >因为文件命名统一小写，引用也需要注意大小写问题
  >引入资源使用相对路径，不要指定资源所带的具体协议 ( http:,https: ) ，除非这两者协议都不可用。
  
   不推荐：
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
   推荐：
    <script src="//code.jquery.com/jquery-3.4.1.min.js"></script>

三、HTML 通用约定
  >使用 HTML5 的文档声明类型 : <!DOCTYPE html>

  >html统一使用小写标签，属性使用 双引号 <input type="text">>
  >引入CSS和JavaScript 可以省略 type 属性(text/css,text/javascript)
  >注意标签可选闭合及必须闭合标签
  >Class与ID， ID作为页面唯一标识，尽量使用class指定样式 对于多个单词组成时，采用中划线 “ - ” 分隔；
  >属性顺序推荐，HTML 属性应该按照特定的顺序出现以保证易读性。
    id(避免使用)
    class, name
    data-*
    src, for, type, href, value
    title, alt
    role, aria-*

      <a id="..." class="..." data-modal="toggle" href="###"></a> 
      <input class="form-control" type="text">

  >语义化，语义化编程，在代码中很少有人完全使用正确的元素。使用语义化标签也是有理由的-SEO。
   语义化是指：根据元素其被创造出来时的初始意义来使用它。
   意思就是用正确的标签干正确的事，而不是只有div和span
   
   不推荐：
   <div class="top-navigation">
     <div class="nav-item"><a href="#home">Home</a></div>
     <div class="nav-item"><a href="#news">News</a></div>
     <div class="nav-item"><a href="#about">About</a></div>
   </div>
   
   推荐：
   <header>
     <h1>My page title</h1>  //标题
   </header>


  >js和css放到指定位置，css在head标签里边，js 在结束标签body上边
    所有浏览器中推荐: 
    <html>
      <head>
        <link rel="stylesheet" href="main.css">
      </head>
      <body>
        <!-- body goes here -->

        <script src="main.js" async></script>
      </body>
    </html> 
  
   >结构、表现、行为三者分离
     HTML只关注内容
     尽量在文档和模板中只包含结构性的 HTML；而将所有表现代码，移入样式表中；将所有动作行为，移入脚本之中


四、CSS 通用约定
  >定义页面样式，使用class,禁止使用id
  >尽量使用缩写属性
  >0后面不带单位
  
  >命名简洁而有意义
  >多个词拼接使用 "-" 中划线，不建议使用驼峰
  >css层级不要超过三层（从右到左匹配）
  >建议使用bem规范 模块__元素--修饰符  (https://blog.csdn.net/love_lovelove/article/details/79462952)

   通常我们最常用主要命名有：
      wrap（外套、最外层）、
      header（页眉、头部）、
      nav(导航条)、
      menu(菜单)、
      title(栏目标题、一般配合h1\h2\h3\h4标签使用)、
      content (内容区)、
      footer(页脚、底部)、
      logo（标志、可以配合h1标签使用）、
      banner（广告条，一般在顶部）、
      copyRight（版权）。其它可根据自己需要选择性使用



五、JavaScript 通用约定
  >小驼峰式命名方法（变量、函数）
  >避免全局命名空间污染  
  >函数命名采取前缀动词(can\has\is\get\set)

    动词  含义  返回值
    can 判断是否可执行某个动作 ( 权限 )  函数返回一个布尔值。true：可执行；false：不可执行
    has 判断是否含有某个值 函数返回一个布尔值。true：含有此值；false：不含有此值
    is  判断是否为某个值  函数返回一个布尔值。true：为某个值；false：不为某个值
    get 获取某个值 函数返回一个非布尔值
    set 设置某个值 无返回值、返回是否设置成功或者返回链式对象 

  >常量全部大写，使用大写字母和下划线来组合命名，下划线用以分割单词。
    var MAX_COUNT = 10;
    var URL = 'http://www.baidu.com';

  >  单行注释 ( // )
     多行注释 ( / 注释说明 / )
     
     斜杠** 
      * 函数说明 
      * @关键词 
      *斜杠
      
      常用注释关键字

      关键词 描述
      @auhor  作者
      @param  参数
      @example  示例
      @link 链接
      @namespace  命名空间
      @requires 依赖模块
      @return 返回值
      @version  版本号
 
      示例：
     斜杠** 
      * 函数说明 
      * @param name {String} 名字
      * @param age {String} 年龄
      * @param sex {String} 性别
      * 
      *斜杠
   
  >真假判断
    js中以下内容为------假：

      •false
      •null
      •undefined
      •0
      •'' (空字符串)
      •NaN

  >不使用eval()函数
      就如eval的字面意思来说，恶魔，使用eval()函数会带来安全隐患。
      eval()函数的作用是返回任意字符串，当作js代码来处理。

  >this 使用场景
   .作为对象属性执行
   .作为构造函数执行
   .作为普通函数执行
   .call，apply，bind可以改变this的指向
  
   >三元条件判断 代替if快捷方法

    // 不推荐
    if(x === 10) {  
      return 'aa';
    } else { 
      return 'bb';
    }

    // 推荐
    return x === 10 ? 'aa' : 'bb'



*/

  

posted on 2019-09-18 21:02  Mc525  阅读(173)  评论(0)    收藏  举报

导航