"芯航创意工作室"网站维护
概述：
- 该网站无法兼容IE，没有用框架，响应式开发；
- 涉及语言：HTML、CSS3、ES6+；
- 该网站对移动端双击缩放，强制竖屏，自动识别手机号、邮箱做了处理；
- 为提高网页性能，Loading 页面运用了异步加载模式，提前加载首页结构；个别页面应用了懒加载图像方式；
- 所用编辑器：Visual Studio Code ；
- Visual Studio Code 需要用到的插件：
- ① Live Server： 实时预览
- ② Easy Sass： 预处理器Sass编译
- ③ Autoproefixer： 后处理器
- Chrome 插件：
- ① WEB 前端助手 FeHelper： 最重要的一点，实时预览后，将本地地址改为上网IP，可生成二维码进行手机测试（内网）；
- 页面基本结构不能变，为防止移动端页面出现问题，body下包了一层 .handset-body 来解决定位问题。
文件：
- 文件命名规范：采用小写方式，下划线方式分隔。如："video_cove"；
- 2018年参与大广赛作品存放于 match_18 文件夹下，2019年20年可另建文件夹 match_19、match_20；
- 图片文件夹下的 视频封面/海报 名称于视频文件夹下的名称保持一致。若想将视频重新归类，请修改 video.js 文件代码。
- 为防止代码冗余，将共同用到的代码放在一个文件 / (reset.scss / reset.js) 这两个文件同样也是初始化文件、库；
- 需要懒加载功能，可直接调用 lazy.js ；
- 所用到的图片、视频文件一定要将图片压缩到最小可用大小；
- 所用图标在 http://www.iconfont.cn 下载，打包下载后替换 fonts 文件夹下文件；
- 页面名称相对应，如：
uphold.html --> uphold.css --> uphold.js ； - 上传网站时将无用的文件删除：scss、.vscode 。
开发规范：
- html、css、js代码结构分离；
-
- ① HTML只显示展示内容信息
- ② 不要引入一些特定的 HTML 结构来解决一些视觉设计问题，不要将img元素当做专门用来做视觉设计的元素
- ③ 样式上的问题应该使用css解决
- CSS 使用子选择器：.content .title ，合理使用ID；
- img 标签 alt 属性不能为空：网速太慢，src 属性中的错误，浏览器禁用图像，用户使用的是屏幕阅读器
- 命名：类名采用小写字母方式，中划线分隔，如：wrap-img ；SCSS、JS变量、函数采用小驼峰式命名方式，如：stopBubble ，并保证代码的可阅读性；
- JS 避免全局命名空间污染；
- 私有变量命名前面加下划线 _
- 方法在有参数的情况下，采用 /* @param */ 多行注释的方式标明参数的类型、作用：
/**
* 函数说明
* @param {number} len(参数) 数组的长度
*/ - 将 JS 代码作用块分开，推荐(函数式编程)，尽可能遵循 ES5 严格模式；
山西建筑职业技术学院 | 计算机工程系 | 2019 © 芯航创意工作室 | 制作维护
更 多