前端程序员应该了解的项目经验分享

1：HTML

• 尽量使用语义化标签 header aside main footer 等
• 给a标签加上href：“javascript：；”就能禁止跳转
• 块级元素独占一行
• 除了div等那些，基本上都是行内元素
• 行内元素设置宽高边距无效
• img、input属于行内替换元素:height/width/padding/margin均可用。效果等于块元素
• button也是行内元素

2：CSS

• 引入清除样式
• 文字的居中，text-align，line-height
• 盒子的间隔可以考虑外边距margin，也可以考虑内边距padding。尽可能偏向内边距
• div的宽度尽量给百分比或者min-width/max-width
• 如果设置了相同的宽高，发现对不齐，考虑盒子的padding和boder ，设置box-sizing：border-box
• 图片是行内元素 可以直接在img标签上 有<img src="smiley-2.gif" alt="Smiley face" width="42" height="42"> 属性，或者veight设置居中，在img标签属性上写width:100%。能自动铺开
• 想给图片设置外边距，先设置display：block，变成块级元素，或者用div包裹图片
• 涉及到模态框的问题，点击空白处模态框关闭，事件冒泡不能解决的话，可以在子div加个同级的背景div，在背景div上面加关闭事件，背景div样式为宽高100%再加个颜色
• less嵌套语法加伪元素 加上&符号 和：
• less等语法 可以抽离公共部门。规定整个项目的颜色主题，规定一个变量@blue:#fff，在每个页面进行导入，通过@import 导入路劲。
• img是行内元素，虽然可以设置宽高，但是设置display:block减少边距
• 设置flex布局如果是justify设为space-bewteen，加上允许换行，会有样式错误。解决办法

• 嵌套伪元素选择器写法&:nth-child（第几个）
• 选择后代第几个&：nth-of-type（）
• 最后一个子节点不需要样式，&：last-chlid
• hover可以指定下面的具体类名加上样式（比如显示隐藏），一般配合trasform，和trantions
• 如果说hover给排列的item加样式，比如加边框，可能会出现样式重排。避免这种情况，在原始样式上设置对应的属性比如border的颜色为transparent，再hover的时候改颜色。

• 如果说给hover时鼠标移上去有bug

  可以在外层加一层div包裹

• 加了border后，要考虑盒子大小，box-sizing：border-box
• css3  filter 滤镜属性，可以给图片设置滤镜颜色
• user-select：none。
• 旋转loading动画，将图片360旋转

3：JavaScript

• 为了清除定时器，要给定时器取个变量名字赋值
• 定时器的第一个参数为自执行函数，例如调用别的函数就不要加（）。缺点：第一次函数不执行

  这样可以第一次执行该函数
  let a =1 
  
  setInterval(b(),8000)
  
  function b() {
  console.log(a)
  return b
  }
             

• 一般来说对于输入表单的字符串应该加个trim去掉空格
• js的逻辑无非是根据一个状态去区分写代码，这个状态我们可以自己定义一个变量去实现
• 对象的属性可以通过【】获得，括号里面是字符串类型，当属性是特殊字符串时使用【】
• vue本地图片的src  bind  使用require（““）导入
• 路径的携带参数？前面不需要/，后面拼接属性
• 纯粹的赋值使用或运算符，或运算符 就是相当于 一次三元运算符或者简单的if判断
• js splice会影响到原数组，比如截取，原数组会变少，slice不会影响原数组
• 获取视图窗口高度等

• 想给字符串在某一处添加字符串，可以考虑正则匹配出来一个字段替换成要加的字段拼接

• js事件：JS事件（event）处理

4：Vue

• 路由的监听，可以通过this.$route得到当前路由的信息，一般来说，路由的赋值变量可以在watch里面可以监听到赋值data，或者生命周期钩子里可以操作路由赋值data，组件里也可以直接通过this.$route获取路由信息
• watch监听拿不到路劲是 需要加上ine属性，让她第一次就监听
• route是能拿到路由的信息，比如route. params或者route. query取决你传参的形式
• 地址栏路劲可以通过route得到
• 路由传参适用于使用同个组件获取不同的值，一般来说我们都是不同组件的生命钩子里拿数据
• 根据某个状态做判断条件可实现样式控制或者js逻辑
• 动态组件或者其他子组件，他的生命周期都是在父组件里面的，切换子组件的显示隐藏，不能触发子组件的某些生命周期
• v-show无法和v-else配合使用
• Ifarme不能和v-if使用
• vue元素带有key属性，当key发生变化，这个元素会被重新加载，所以我们可以使用同个标签根据key绑定计算属性渲染不同的样式标签
• 也可以在routerview上携带key属性，达到每次key不同，既渲染不同组件，触发生命周期
• 样式相同值不同考虑是子组件传值，或者后端返回值再传给子组件，不同样式考虑组件的话就是动态组件，不同样式只是标签的话，建议v-show频繁切换不涉及生命周期
• 路由下的children子路由数组，默认展开一个时，在主路由处重定向路径到你需要展开的子路由路劲
• 刷新页面。。router.go(0)，，根据路由的变化，刷新页面

• 尽量不要对数据源进行操作
• vue组件的this指向该组件的实例，在main,js导入了资源时，在该组件实例调用vue的原型属性时，加上$符号，比如导入了路由就是this.$router，this.$store，this.$set
• vue事件修饰符：https://blog.csdn.net/io_123io_123/article/details/122975610
• 面包屑组件的写法使用默认插槽，父组件v-for遍历出来放在面包屑子组件的默认插槽里
• router-view其实和动态component标签一样，相当于一个子组件标签。变化动态的
• tabs标签选中的样式一般基于后端返回的字段绑定class，如果后端没有返回，我们可以在data里面定义一个变量去和v-for的index做比较，然后再点击事件里设置这个data里面的变量等于index（绑定方法里传入index），就可以为真加上样式了
• 全局搜索的思路，把输入框的绑定值当成路由传参到浏览器路劲上，监听路由变化或者刷新页面拿到路劲参数的值进行请求啊哈哈哈
• 修改数组里面的某项值时，可能会出现数据更新，页面不刷新的问题，这是因为vue监测不到对象和数组的变化，一般用Vue.set（）去改 ，或者用下面这个方法
• this.$forceUpdate()作用：强制更新方法,作用是触发vue的update方法。可以用在解决数据对象新增属性和数组新增数据,出现页面不渲染的问题。
• 一般来说{{}}v-text里可以做js逻辑计算，如果复杂的话 可以写传参的计算属性 返回一个函数
• 路由路径path：“*”，则为剩余路径
• 图片懒加载可以使用插件，在：src的属性上改为v-lazy就行，注意图片地址为服务器路径，不是本地相对路劲
• 在export default 外面定义变量考虑两点。1：使该变量成为当前页面的全局变量，2：不需要该变量响应式变化，3：可以做一个存储，将后端返回的值存储下来，全局变量使用
• 页面的监听事件在mounted钩子内定义，定义的是window监听，要在该页面销毁前清空这个监听，不然会影响到别的页面，类似于清空定时器一样。减少性能损耗。另外，在不满求判断条件的情况下，要取消监听。避免bug，比如什么时候开启监听，什么时候不需要监听，要充分考虑一下。

• vue中列表循环，你想给选中的item加上active样式，可以考虑在data里定义一个属性，然后绑定class，当点击方法时，将这个属性等于列表循环的index，三元表达式加上active

• 

封装组件思路：样式根据传参变化。都是根据状态动态的渲染

4-1：路由守卫

全局守卫要在router实例以后调用，调用beforeeach方法，传一个箭头函数

5：http状态码，和数据传参

状态码：

• 1xx：临时响应
• 2xx：成功
• 3xx：重定向
• 4xx：请求错误---401需要权限，403拒绝请求，404路劲不对
• 5xx：服务器报错，502，无法响应，504超时

500：1服务器问题。2前端传参格式错误

传参问题：

参数格式（对象字符串还是qs字符串），请求头类型，传参类型（params，data，路径）

参数格式参考：VUE项目，什么情况要使用qs，序列化 - javascript9527 - 博客园

因为设置的headers格式是 application/x-www-form-urlencoded

这种格式是form提交的格式 name=zhangsan&age=4

所以要把json {name:zhangsan,age:4}格式转换为name=zhangsan&age=4的格式      

因为后端是根据一个字段识别，所以我们传对象，将属性作为识别器，值为值 

一般来说我们只需要定义一个对象参数就行  然后写请求方式

根据id进行接口查询方式

接口文档的：

 js的请求方法写法如下：

路径后面拼接参数

是只需要传值的情况( 根据id进行查询 )

// 删除Modeler
export function delModeler(id) {
  return request({
    url: '/modeler/remove/' + id,
    method: 'delete'
  })
}

只需要传id的值  
           

路劲括号携带参数

路径写成模板字符串形式

const getName = (id)=> getAction(
   `/safety-service/hiddendanger/thTCheckarea/details/${id}` );


 //根据id获取checkName
 getName(event.node.dataRef.checkId).then((response) => {
        this.form.parentCheckName = response.result.parentCheckName
      })
           

 其实两种方法结果一样，都是拼接，无非就是看接口文档选择的两种写法

6：前端实现微信登陆

7：报错信息

 报  of  undefined，先全局搜索该项，一般来说这个属性本身不会错，考虑这个属性的前面的问题，比如指向作用域或者拿不到。亦可能考虑后端返回值字段

报 not  defined  是该属性未定义

8：项目配置即打包发布

在package.json里面输入打包node命令

 可以在dist下面的html，用vscode打开右键open in serve  可以看看结果