营销网站认识,杭州市住建局官网,网页站点不安全怎么办,中国电信的视频播放器为什么要有开发规范#xff1a; 1.降低新成员融入团队的成本#xff0c;同时也一定程度避免挖坑 2.提高开发效率、团队协作效率#xff0c;降低沟通成本 3.实现高度统一的代码风格#xff0c;方便review#xff0c;另外可以提高项目的可维护性 4.规范是实现自动化的基础 5… 为什么要有开发规范 1.降低新成员融入团队的成本同时也一定程度避免挖坑 2.提高开发效率、团队协作效率降低沟通成本 3.实现高度统一的代码风格方便review另外可以提高项目的可维护性 4.规范是实现自动化的基础 5.规范是一个团队知识沉淀的直接输出 项目结构
node_modules //存放项目所有的依赖
public //存放静态资源项目打包的时候webpack不会编译这个文件夹
src //存放项目源代码assets //存放项目静态资源文件icon //存放项目图标文件images //存放项目图片文件styles //存放项目样式文件video //存放项目视频文件common //存放项目公共文件axios //存放项目axios文件commonJs //存放项目公共Js文件constant //存放项目常量文件controllers //存放项目控制器文件mixin //存放项目混入文件services //存放项目服务器文件vuex //存放项目vuex文件components //存放项目组件文件router //存放项目路由文件utils //存放项目工具文件views //存放项目视图文件
App.vue //页面的入口文件
main.js //程序入口文件
directive.js //存放自定义指令文件
index.scss //根样式文件 目录文件组件组件结构命名规范 目录命名 全部采用小写方式以中划线分隔有负数结构时要采用复数命名法缩写不用复数。 项目目录与其项目一级导航菜单统一便于管理二级导航放在一级导航文件夹下以此类推 文件命名 JS、CSS、SCSS、HTML、PNG命名全部采用小写方式以中划线分隔 组件命名 组件名以单词大写开头当多个单词拼写成的组件时采用驼峰式命名规则。一般是多个单词全拼减少简写的情况这样增加可读性。 组件结构 组件结构遵循从上往下template, script, style的结构 Template规范 1.尽量使用以.vue结束的单文件组件方便管理结构清晰 2.标签语义化避免清一色的div元素 3.DOM的层级数尽可能少优化渲染速度 4.多特性分行写提高可读性。即一个标签内有多个属性属性分行写。 5.自定义标签使用自闭标签的写法。 6.v-slot在vue2.6版本中slot与slot-scope已被弃用统一使用v-slot指令。 7.不使用v-html指令 8.不写过于复杂的表达式使用计算属性来代替 9.相同的卡片布局首先整合数据尽量使用循环方式去增加避免变更多处的问题。 10.v-for循环必须加上key属性在整个for循环中key需要唯一key一般使用index或者todo.id 11.避免v-if和v-for同时用在一个元素上性能问题以下为两种解决方案 1).将数据替换为一个计算属性让其返回过滤后的列表 2).将v-if移动至容器元素上比如ulol JS规范 1.在Script标签中应该遵守JS的规范和ES6规范 2.创建公共的JS封装公用的方法和工具类 3.声明变量必须赋值 4.使用let、const替代var 5.匿名函数使用箭头函数 6.避免回调地狱 7.方法返回Promise方便可以通过.then的方式进行链式调用 8.获取异步的数据按具体情况使用async/await操作 9.三元运算符不嵌套 10.使用map、object替代if、switch case条件取值 11.慎用setTimeout 12.无特殊情况下不允许使用原生API操作DOM谨慎使用this.$refs直接操作DOM 13.需要使用函数表达式的场合尽量用箭头函数代替。因为这样更简洁而且绑定了this。 14.尽量使用和! 15.整合数据时尽量使用ES6Object.assign和...扩展符psObject.assign()为浅复制 16.若循环中需使用函数请将函数定义在循环外部而非内部这样可以避免函数的反复创建。 17.Props定义提供默认值使用Type属性校验类型使用Props之前先检查Prop是否存在。 18.当在组件中使用data属性的时候除了new Vue外的任何地方它的值必须是返回一个对象的函数。 19.JS中统一使用反引号或是单引号不使用双引号“” 20.避免v-if和v-for用在一起 21.函数中统一使用_thisthis来解决全局指向问题 22.导入模块时不要省略后缀js除外这样有利于IDE感知特别是.vue 23.弹窗、select等需要大量代码去实现要以组件的方式引入 24.应该把复杂计算属性分割为尽可能多的更简单的属性 25.使用路由懒加载延迟加载机制 26.组件懒加载较复杂的组件可使用建议多使用 27.调试信息console.log(); debugger使用完及时删除 28.减少作用域链的查找减少全局变量、闭包的使用能用局部缓存的尽量用局部缓存 Css规范 1.需要加上scoped作用域 2.避免使用标签选择器效率低、损耗性能 3.CSS属性书写顺序先决定定位宽高显示大小再做局部细节修饰推荐顺序定位属性或显示属性display- 宽高属性 -边距属性margin, padding- 字体背景颜色等修饰属性的定义 图片规范 1.每个模块都要增加一个图片文件夹方便后期维护和处理图片文件命名尽量跟模块意义的相同尽量使用小写单词命名 2.图片格式常用png, jpg, gif 3.命名全部用小写字母数字及中划线组合其中不包含汉子、空格和特殊字符尽量用易懂的词汇便于团队其他成员理解命名分头尾两部分用中划线隔开例如ad-left01.png、btn-submit.png 4.在保证视觉效果的情况下选最小的图片格式与图片质量减少加载时间 5.PC端img图片必须填写width、height、alt属性 6.需要变动的文字禁止切到图片中如果不能确定是否需要变动请咨询接口人 7.需要程序后台动态生成的图片如道具图片、头像、奖品必须单独切割出来 8.装饰性图片合并成精灵图减少页面请求 API规范 1.API接口地址统一管理接口较少时可以单独写一个接口文件JS页面中使用哪些引入哪些 2.接口较多时可对接口按模块进行分类一个模块对应一个接口文件 其他 1.文字超出容器需要进行‘...’省略 2.图片显示无特殊要求时按原图宽高比显示尽量不要变形 3.涉及数据处理功能按钮增加防频繁点击处理 4.小图标尽量使用UI框架自带的icon图标 5.页面按钮颜色样式功能尽量统一 6.不同页面相同功能的提示文字尽量统一 命名规范 1.变量名文件名组件名文件名等遵循驼峰命名规则多单词拼接首字母小写如userInfo、productInfo同时遵循语义化规则能直观明白意图如getUserInfo;setUserName 2.变量声明var, let, const定义常量使用const定义变量尽量使用let Vue规范 编码规范使用es6风格进行编码 1.解构赋值 2.箭头函数 3.正确使用模块如果模块只有一个输出值就使用export default如果模块有多个输出值就不使用export default export default与普通的export不要同时使用 4.多个异步操作时使用Promise对象进行封装 Http基础知识 1.什么是httphttp是一种超文本传输协议 2.为什么要使用http来传输http是可靠的安全的 3.http协议的请求方式是什么http是一个基于TCP/IP通信协议来传递数据包括文件、图像、结果等即是一个客户端和服务器端请求和应答的标准。基本上用到的就是GET和POST充其量再遇到个option请求。 4.http和https有什么区别1https有ca证书http一般没有 2http是超文本传输协议信息是超文本传输协议信息是明文传输。https则是具有安全性的ssl加密传输协议 3http默认80端口https默认443端口 5.http协议有什么特点 1http无连接限制每次连接只处理一个请求服务端完成客户端的请求后即断开连接。传输速度快减少不必要的连接但也意味着每一次访问都要建立一次连接效率降低 2)http无状态对于事务处理没有记忆能力。每一次请求都是独立的不记录客户端任何行为 3)客户端/服务器端模型客户端支持web浏览器或其他任何客户端 4)简单快速 5)灵活可以传输任何类型的数据 6.cookies机制和session机制的区别是什么1cookies数据保存在客户端session数据保存在服务端 2cookies可以减轻服务器压力但是不安全容易进行cookies欺骗 3)session安全一点但是占用服务器资源 7.GET和POST的区别get地址栏可见post地址栏不可见 8.什么是Http协议无状态协议怎么解决Http协议无状态协议 无状态协议对于事务处理没有记忆能力。缺少状态意味着如果后续处理需要前面的信息。状态协议解决办法通过1.Cookie 2.通过Session会话保存 9.http协议中302状态http协议中返回状态码表示重定向。这种情况下服务器返回的头部信息中会包含一个Location字段内容是重定向到url 10.http协议由什么组成 请求报文包含三部分请求行包含请求方法、URI、HTTP版本信息请求首部字段请求内容实体。 Rem移动端适配原理 根节点html设置font-size 元素rem则是相对于根节点html font-size的大小进行计算 前端组件开发的注意事项 1.浏览器兼容性 2.响应式设计可以通过使用CSS媒体查询和流体布局来实现 3.前端性能优化 4.安全性 5.可访问性 6.代码维护性和可扩展性 前端性能优化 使用缓存压缩资源减少HTTP请求减少重绘和重排使用CSS Sprites使用CDN优化图片懒加载异步加载减少DOM操作使用Web Worker使用Service Worker使用浏览器缓存代码优化和测试优化等。通过这些方法可以帮助开发人员更好地优化网站性能提高用户体验。 Vue前端用户体验优化 1.使用合理的组件结构将页面分为多个小模块或组件每个组件负责特定功能。这样可以更好地管理和复用代码并提高项目的可维护性。 2.数据加载优化对于大量数据的展示场景可以使用虚拟列表Virtual List技术只渲染当前视口内显示的部分数据而不是全部加载到DOM中。同时也要注意及时清除无效的数据避免造成内存溢出等问题。 3.图片优化对于网站上的图片可以使用WebP格式、压缩算法等手段拉力减少文件大小从而提高加载速度。此外还应该根据设备像素比选择正确的图片版本以保证最佳的显示效果。 4.路由切换动画利用Vue Router提供的transition属性可以添加页面之间的过渡动画效果如淡入淡出、左右滑动等提升用户交互体验。 5.错误处理与反馈机制良好的错误处理机制可以有效避免因程序bug导致的页面崩溃或白屏现象。同时建立友好的反馈机制收集用户的意见和建议改进产品质量。 6.移动端适配对于需要支持多平台的移动端应用可以使用CSS媒体查询和Flex布局等技术自适应调整界面元素位置和大小以达到良好的显示效果。 7.接口优化对于后端API接口可以通过合理的参数传递、返回值控制等方式尽量减少服务器的计算和IO操作提高接口的响应速度和系统性能。 8.单页面SEO优化对于基于SPA的网站可以使用vue-meta库来生成HTML标签包括titile、description、keywords等信息以提高搜索引擎的收录和排名。 9.打包工具优化使用webpack等打包工具时可以按需加载所需的第三方库和组件减少初始加载时间同时还可以通过代码分割、Tree Shaking等技术来减小打包后的文件体积。 Vue开发建议如何优化前端性能和用户体验 1.合理使用Vue的响应式系统 避免频繁地对数据进行不必要的观察watch和更新 在处理大量数据时可以考虑使用Vue的计算属性将一些复杂或频繁变化的数据进行缓存避免重复计算 对于不需要监听的数据可以通过Object.freeze()或者Vue.set()等方式来禁止响应式系统对其进行监听提升性能 2.合理使用组件化开发 Vue提倡组件化开发这种开发模式有利于代码的复用和维护。但是如果组件划分不合理或者组件逻辑过于复杂在页面渲染和组件交互方面可能会存在性能问题。 为了优化性能应该将大型组件进行拆分将其划分为多个子组件并通过props和events来组织各组件之间的通信。此外还可以通过异步组件来延迟加载一些不是首次渲染必须的组件从而提升首屏加载速度。 3.合理使用路由和状态管理 在Vue应用中合理使用路由和状态管理如vuex同样对性能和用户体验至关重要。在设计路由和状态管理时需要避免过度嵌套和冗余数据的使用。 针对路由可以考虑使用路由懒加载来延迟加载不同页面所需的资源提升页面的加载速度。 对于状态管理可以避免过度使用全局数据和过多的状态共享。在实际应用中可以通过模块化的方式来划分状态将复杂的全局状态分解成多个模块这样可以更好地进行状态管理也能够在一定程度上提升性能。 4.优化网络请求和数据加载 尽量减少不必要的网络请求合并、压缩和缓存请求以提升页面加载速度和用户体验。 对于大量数据的加载可以采用分页加载和懒加载技术逐步加载数据减轻页面的压力避免一次性加载过多数据而导致页面响应缓慢。 5.进行性能优化和代码压缩 性能优化和代码压缩包括但不限于压缩JS/CSS使用CDN加速启用Gzip压缩使用缓存等技术手段来减少网络传输数据量提高页面加载速度。
