澳门金莎娱乐手机版 服务器 掣肘查看CSS文件,部分硬性约定见下一条书写标准

掣肘查看CSS文件,部分硬性约定见下一条书写标准

这种措施将CSS文件之处用Javascript来输出,并加密字符,大家试试看,什么艺术能够显得出那么些?好好用脑筋想哦.

1.正规表明

此为前端开拓团队遵照和预订的代码书写规范,意在拉长代码的标准性、扩充性、可维护性、阅读性,升高工效,提高个人技能。

此规范为参照标准,不全部是硬性供给,部分硬性约定见下一条书写标准,统一团队编码标准和风格。让抱有代码都以有规可循,并且能够拿走沉淀,收缩重复劳动。

阻止查看CSS文件

1.1组织表明

— 项目组织
—-|—- public公共静态文件夹
—-|—-|—- CSS文件夹
—-|—-|—- JS文件夹
—-|—-|—-|—- libs插件文件夹
—-|—-|—- images文件夹

固然如此不能够100%防下载或查看,不过对于新手推测费生机勃勃番不利了^

2.书写标准

[Ctrl+A 全选 注:如需引进外部Js需刷新能力试行]

2.1 样式与内容分别

2.1.1 项目协会

-——  根目录  
    |-——- 功能目录  
        |-——- index.html //功能入口页面  
    |-——- public/  
        |-——- CSS/  
            |-——- 对应功能样式目录  
        |-——- JS/  
            |-——- 对应功能JS目录

2.1.2 重构步骤

  1. index.html页面中的全体体制关联 class="xxx"
    制作静态页面的时候文件中不带有其余二个id=”XXX”
  2. index.html 书写CSS style [到这里页面重构完毕]
  3. 开始 index.html 书写JS交互作用文件,使用 id
    class平素成分来进行人机联作,倘若是单个成分操作 id 名的近期加上
    js,要是是操作成分的 class 则给 class 加上 js- 前缀
    [到这里页面交互作用达成]

2.1.3 命名标准

  • 文本甚至文件夹:全部用拉脱维亚语小写字母+数字或许是连接符“-_”,不可现身任何字符,比方:...---
  • 文件:调用 /libs 文件需包蕴版本号,压缩文件需富含 min澳门金莎娱乐手机版
    关键词,别的插件则不分包,比方:
    /libs/jquery.1.9.1.jsfileuploader.js
  • ID名:匈牙利(Magyarország卡塔尔(英语:State of Qatar)命名法
    &
    驼峰式大小写,假使是要博取有些ID的value,那那么些ID名最棒和后端提供的接口字段名大同小异,为了便利查看
    如:firstName aList
  • Class名:全体大写,用-连接符
    如:top-item main-box
  • 尽恐怕用语义鲜明的单词命名

2.1.4 格式&编码

  • 文本文件: .xxx UTF-8(无BOM)编码
  • 图表文件: .png png-24只怕png-8(依据事态而定) .jpg
  • 动态图表: .gif

2.2 CSS细化标准

2.2.1

-—— /css/
    |-——- base.css  CSS全局文件
    |-——- 功能样式目录

2.2.1 文件表达

  • base.css 这几个文件包涵了CSS
    reset部分、各类模块的体裁、各种margin padding width
    height…补丁
  • 成效样式目录中带有了风流倜傥一职能的体裁,目录遵照页面目录来分层
  • 为了方便查看页面引进的CSS文件,不建议选取 @import

2.2.2 CSS注释格式约定

/*
@name: 文件名
@description:文件描述
@require(可选): 依赖哪个文件
@author:作者
*/

2.2.3 CSS嵌套规则

/*推荐嵌套层级*/
.ui-icon-rarr{}
.ui-icon-larr{}
.ui-title{}
.ui-nav .ui-list{}
.ui-table .ui-list{}

/* 不推荐 */
.ui-icon-rarr{}
.ui-icon-larr{}
.ui-title{}
.ui-list{}
.ui-nav{}

2.2.4 补充表达

出于如今我们尚未利用 CSS预编译工具
,由此在付出的时候我们来得只考虑CSS的目录结构,中期要是大家采纳到了
CSS预编译工具 我们就须求有叁个预编写翻译文件对应的目录,如
LESS
SASS,编写翻译大家得以信任自动化构建工具来处理

2.3 HTML细化标准

2.3.1 HTML注释格式约定

<div id="header">
    <div class="xxx"></div>
</div> <!--头部结束-->
  • HTML换行缩进必得清楚,应用四个空格,假如以为按空格麻烦,能够在编辑器将
    Tab 键设为多个空格

2.3.2 第意气风发行统风华正茂选择HTML5正经

<!DOCTYPE html>
<html dir="ltr" lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <title>极客公园 | 创新者社区</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <link rel="shortcut icon" href="favicon.ico">

标签的施用就不在此备注了,避免采取老式的竹签,统生机勃勃规范闭合

2.4 JS细化典型

2.4.1 JS文件布局

-—— /js/
|-——- /libs/  使用到的JS插件以及库文件夹
|-——- base.js 全局函数和变量文件
|-——- api.js 存放所有的接口调用函数
|-——- 功能JS目录 对应视图文件的目录
  • 每叁个页面中的JS文件提出单独写三个,文件甚至文件目录对应视图像和文字件的目录,方便搜索以致保证
  • 提出将接口调用写成八个函数,这一个函数重返两种状态,成功 失败
    完成

3.前后端同盟正式

3.1 文档书写标准

  • 接口文档书写清晰,尽量防止错别字以至讲话歧义
  • 如有特殊情况,对接待口前面加以备注
标签:

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章

网站地图xml地图