## 前端开发规范 前端人员建议详细阅读本规范以及常见的采坑的地方，避免做项目时总是出现问题。 **1、网站上所有文字都应该从后台调出来：** 每个字后台都可以修改，避免后期修改时麻烦； **2、使用info标签时限制条数：** 避免后台资料加多时网站无限制的调用信息显示； **3、网站上每个链接都要可达：** 网站上避免出现死链接及报错链接； **4、手机版内页图片检查变形：** 手机版内页（特别是新闻内容页）里面的图片是否出现变形，是否没有取消高度限制； **5、不在网站头部引用JS：** js文件方头部引用会使页面加载较慢，js文件全部放底部加载； **6、不允许引用本项目除外的外部链接：** 避免外部链接挂了之后网站出错； **7、网站前端页面颜色主色调色值统一：** 一个网站出现多种色值第一网站不好维护，第二网站丑、不协调； **8、网站banner图片压缩在上传，包括测试阶段：** 图片太大会影响网站加载速； **9、备案号跳转链接：** 更好的查询备案号信息； **10、手机站详情页及单篇页特殊数据宽度限制：** 避免页面出现横向滚动条，图片做好限制 **11、最好不要先HTML页面中出现Js：** 页面中写js影响代码美观和影响后期维护； **12、不在HTML页面中写行内样式和内部样式：** 页面中写js影响代码美观和影响后期维护； **13、减少JS引用数量，能不用尽量不用：** 太多的JS引用会增加页面的负载，会使页面加载的满； **14、不允许在页面上重复引用外部文件：** 多次引用增加页面负载，重则导致页面出错 **15、代码书写工整：** 代码做好缩进，以免后期维护困难 **16、代码写好注释：** 代码写注释，是每一个程序员的良好美德！！！ **17、做好图片兼容性处理：** 避免网站大小拖动之后图片变形； **18、做好适当的过渡效果：** 页面太死板显得特别俗气； **19、信息列表数据做好超出隐藏：** 不管是单行数据还是多行数据，都需要根据设计稿做到超出隐藏，避免数据太多页面出错； **20、移动端网站多图滚动需要做到触摸滑动：** 移动端滚动模块触摸可以滑动； **21、PC站点轮播需要做到鼠标放入还会轮播：** 避免幻灯片太大鼠标放入轮播不动没有效果； **22、PC站点轮播幻灯片需要使用背景图片：** 避免网站缩放后图片变形 **23、移动端底部菜单平均分配：** 导航发布不均匀页面显得错乱 **24、PC轮播添加切换按钮：** 方便用户切换手动切换轮播图 **25、列表数据需要整块都可以跳转：** 包括列表数据里的标题、图片、简介点击都可以跳转 **26、列表数据为空的时候显示无数据图片：** 无数据的时候展示图片体验效果更好 ## 某前端人员做某项目时遇到的问题： 电脑站问题： 1、在线咨询，直接点提交，不输入任何内容时，有两次提示，说明ajax请求了两次。 2、在线咨询，提交成功后跳转到了/message/0.html 此页面报错。 此页面为留言页面，发生此问题原因应为：没有留言模板的原因。 3、搜索类型定义问题：搜索类型名称为“新闻动态”，后端设置的选择栏目确是全部栏目，如果后端选择用全部栏目，则名称应为“全站搜索”。 4、电子地图栏目，地图板块超出，盖住了底部版权信息一部分，影响用户体验。 5、新闻列表页中，有两个返回按钮，一个是“返回”，一个是“返回上一级”，其中返回上一级，应该是返回上级栏目，而非返回上级页面。 6、info标签未定义条数限制，导致页面排版错乱，导致首页调出500多条新闻，严重影响打开速度。 7、后台的栏目定义中出现“首页”这个栏目并且展示在了后台左侧导航条上，影响客户体验。 8、搜索结果页没有定义banner，访问时bannner是一个灰色的颜色块，影响用户体验。 9、搜索结果页搜索结果列表中带图的没有定义图片宽度，导致图片叠加到后方描述文字背后去了，影响用户体验。 10、首页专家只有点击在线咨询时能进到内页，点击专家头像、姓名、职称均无法进入内页，影响用户体验。 11、首页同时放了：医院简介、党支部简介、特色专科简介，而这些简介的“更多”链接，未统一式样，未统一文本，影响用户体验。 12、首页多种不同尺寸的图片使用的默认图都是同一张，导致默认图变形，影响用户体验。 13、在幻灯片位置调用图片数量不固定，导致调了很多图片出来，肉眼无法分辨调了多少图，必须看代码才能看出来，严重影响打开速度，降低用户体验。 手机站问题： 1、点击logo回不到首页，当内页中头部使用了LOGO的情况下，点击LOGO必须要能返回首页； 2、新闻内容页出现横滚动条，党群工作出现横滚动条，党基建活动的内容页图片高度严重变形，严重影响用户体验。 3、医院风采、医院荣誉，列表模板样式丑陋，图片不应该三个一排，而是使用图文列表模板，或者两个一排的排版方式。 4、右上角三个横的菜单，未能与LOGO保持垂直居中，丑陋。 5、手机版搜索结果页中，再次点击“搜索”按钮点不动，点击其他搜索类型时也点不动。 6、首页医院简介内容应改为不能点击进入，否则影响用户体验。 7、专家介绍页面排版错乱，刘成立专家—周锦泉专家之间样式有问题。 8、医院简介，很多文字叠在一起了，影响用户体验。