前端备忘

·  阅读 128

由于公司内部要新做一个发布系统,项目紧急而且前端暂时未招到人,临时客串一下前端开发。在这开发期间碰到的一些问题的记录和总结。

官方文档上面写的非常详细,我是基本我其中有疑问的地方做的记录,如果是专业的,肯定还是将源码看一遍,这样才能真正理解其中的实现。

由于以前写过小程序,所以研究过前端的 css 布局,然后主要使用的 flex 布局,这个和 iOSAutoLayoutAndroidContraintLayout 很像,所以基本上写 UI 布局基本上没什么问题。

  1. 为什么 data 需要是一个函数?

防止多个相同同组件引用的是同一个对象,导致组件的修改会相互影响,组件data 相当于浅拷贝。 如果使用函数,每次返回都是一个新的实例,组件的修改不会相互影响,组件的 data 相当于深拷贝。

  1. 生命周期函数

beforeCreate->created->beforeMount->mounted->beforeDestroy->destroyed mounted->beforeUpdate->updated

  1. scoped 的原理

相当于生成一个 data-v-xxxx 的随机数,然后内部的选择器会加上含有这个随机数的选择器。

  1. popover

是渲染在最顶层的,所以会导致在 style 中加 scoped 无效,只能写成不加 scoped 的形式,内部的其他样式可以写在 scoped 中。

  1. v-model

其实就是 valueinput 的组合。 如果想更改成其他

model: {
    prop: 'prop',
    event: 'event'
},
复制代码
  1. $on 发布订阅者模式

  2. ref 可以获取一个具体的节点,然后获取他对应的属性,包括挂载的方法、属性、值...等

  3. filter 用于文本格式化,比如日期、大小写转换,多个可串联

{{ message | filterA | filterB }}
复制代码
  1. 高阶函数

filterreducesomeeveryforEachmapflatsort 这些函数基本上跟 swift 里面的一样

  1. 自定义组件中可以使用 slot 来进行内部细节的定制。

  2. flex 盒子中,如果最后一个居中可以 margin: auto;,如果居右可以使用 margin-left: auto;

原理也很简单,css 里面也解释了。

  1. 更改 inputplaceholder 的颜色
input::-webkit-input-placeholder {
    color: red;
}
复制代码
  1. hover 的时候,再显示某些元素
.a {
    display: none;
}
&:hover {
    .a {
        display: inline !important;
    }
}
复制代码

14. computed 传参数(其实本质还是返回不同的函数,无意义)

computed: {
    xxx() {
        return (xx) => {
            return xx.xxxxx
        }
   }
}
复制代码
  1. 文字和图片居中对齐
vertical-align: middle;
复制代码
  1. hairline 处理
@mixin hairline-border($border-color, $border-radius) {
  position: relative;
  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    transform: scale(0.5);
    transform-origin: 0 0;
    border: 1px solid $border-color;
    border-radius: $border-radius * 2;
  }
}

@mixin hairline-bottom($border-color) {
  position: relative;
  &::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    border-bottom: 1px solid $border-color;
    color: $border-color;
    transform: scaleY(0.5);
  }
}
复制代码
  1. img 标签和长文字在一排时,安卓机器上的图片会发生变形。

本来以为固定了图片的宽高之后,后面的文字会被压缩,其实在 iOS 上面也是这样的,但是安卓不行。后续有时间再探究一下这种恶心的问题。

flex-shrink: 0; // 我一点也不压缩
复制代码
  1. 还原初始数据
Object.assign(this.$data, this.$options.data())
复制代码

第二个需要 data(),相当于重新生成一个新的 data,然后复制给 this.$data

  1. 为什么 IFFE 前面需要加 ; 或者 !?
(function() {
  console.log('111')
})()
// 或者把调用的()写在里面
(function() {
  console.log('111')
}())
复制代码

但是如果这个前面其他

var a = 1
(function() {
  console.log('111')
})()
复制代码

其实这句话会被解释成 1()(),明显有问题,1 又不是函数,调用个什么劲呢? 但是 js 就是这么设计的,这个就是前面需要加 ; 的理由。

! 的效果也是异曲同工之处,相当于把后面的表达式取反,自然而然就是把这个表达式的结果执行了再取反,所以 ! 这个不需要加 () 了。

所以正确的写法应该是这样

;(function() {
    ...
}()) 
或者
!function() {
   ...
}()
复制代码
  1. flex: 1 表示什么?

flex: 1 1 0%,并不是 flex: 1 1 auto,如果是 auto 的话,其实只是平分剩余空间,挤压同等空间。

分类:
前端
标签:
分类:
前端
标签: