刘大钰

刘大钰的个人日记

首页 关于

投顾学习笔记

2020-12-07 10 min read

代码评审总结

打印的消息在提交时都要去掉
多次重复使用的部分可以封装成一个组件,比如待调仓封装成一个组件多个地方使用
find,for of这些是ES6里面的语法,可以看一下打包后是否被转换成其他的函数,建议用es5的替代方法
双循环遍历可以把外面的数组做成keys,里面的直接用key去取会比较好
接口获取失败的情况下有些toast需要处理一下
相同路径的页面的跳转,传参时需要加一下usestorage是false.不然会走缓存,aftershow里就读不到参数了(仍可以用getviewParam获取)
缓存的情况是不同路径跳转(比如购买跳签约)且传输的数据比较大时可以使用,通过getviewparam从缓存的S_LIGHTVIEWDATA里获取参数,获取缓存时可以传个any: true
遍历对象不建议用for of,可以先object.keys获取keys然后forEach遍历
或者用封装好的$.each,对象和数据都可以用,也可以像find一样使用

$.each(jsonResult, (fund) => {
    if (fund.businflag == '020'  || fund.businflag == '022' ) {
        isSaleBuy = '1';
        return false;
    }
})
巧用数组的some.map,reduce方法会比forEach好

hsopen,hsback等跳转方法

相同路径的页面的跳转,传参时需要加一下usestorage是false.意思是不走缓存,走url传参.不然会走缓存,aftershow里就读不到参数了(缓存需要用getviewParam获取)
缓存的情况是不同路径跳转(比如购买跳签约)且传输的数据比较大时可以使用,通过getviewparam从缓存的S_LIGHTVIEWDATA里获取参数,获取缓存时可以传个any: true(不理会是否属于当前页面的缓存)

hsopen在进行light.navigate之前会调用checkandprepareviewdata
checkandprepareviewdata会检查：

  • 如果传参userstorage是false，不走缓存，跳转后页面用aftershow获取data
  • 如果userstorage是true(走缓存,getviewparam)或者路径相同->如果缓存的key和currentPath不一致,修改key成currentPath以保持一致
  • 如果路径不同，如buy/buy-result跳转到asset/iia-asset，则清理缓存

// getviewparam会检查缓存key和currentPath,不一致则hsBack
所以,当buy/buy-result通过hsback进入assest/iia-asset时,因为没有调用checkandprepareviewdata,缓存key没有被修改成currentPath,所以在使用getviewparam时,会因缓存key和currentPath不一致而导致hsback而跳转返回

clientauthid和authentification

因为采用单点登录，刚进入子项目时没有access_token。
所以第一次调接口时需要传参从父项目传来的clientauthid代替，接口返回后再把出参中的access_token存入缓存中
详见init.js->http.req函数
具体执行逻辑为
如果缓存中access_token为空，startReq()时access_token（即clientid字段）传“new”
⬇
http.jsonp() 这里会传入success和fail时的回调函数
⬇
succ后在执行回调函数前，调用updateClientidInStorageAndRv
⬇
updateClientidInStorageAndRv将返参里的access_token存入缓存

AntV F2走势图

标签解决方案 https://f2.antv.vision/zh/examples/component/guide/#tag
描点解决方案 https://f2.antv.vision/zh/examples/line/multiple#customize-tootlip
折线变曲线方案: 在line后面加shape:
chart.line().position('time*tem').shape('smooth');

chart重新渲染，若内容样式改变导致样式重叠的问题：

案例：近1月情况下，原来11-8号的tag在chart最左边，direct是tr。切换到近3月后，11-8号的tag在chart中间了，direct改变为tc。tl和tc的都保留在chart里，导致样式重叠了。
解决方案：
再渲染新的tag之前，把原先的tag先清理掉。

renderTag (tagPoints, chartData) {
      this.chart.guide().clear();   //清理
      //这里插入渲染tag代码
}

关于render，clear，repaint，changeData等使用说明
https://f2.antv.vision/zh/docs/api/chart/chart#render

自带组件和weex组件

UIButton:

<ui-button
    class="flex-1 align-center justify-center"
    style="margin-left: 0px; margin-right: 0px; border-radius: 0px; height: 100%;"  //内联样式 > ID 选择器 > class选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器，替换原ui-button组件自带的style
    :style="combInfo.comb_shelf_status != '1'? '{background-color: #cccccc}': 'background-color: #fd6749'"  //给按钮设置背景色后,disable了不会变灰,所以用这样动态绑定的形式给按钮后期上色(橙色/灰色)
    @onclick="goChangeInto" //click事件改成onclick,不然触发不了事件
    :disabled="combInfo.comb_shelf_status != '1'" >
        <text class="font-18 m-color-5 t-center">购买</text>
</ui-button>

weex text无法自动换行问题

如果text的父元素比如div设置了flex-direction(flex-row, flex-column)，里面的text会无法自动换行，如果超长则溢出。
解决方法：给text加flex-1让其撑满整个容器,或者设置固定宽度,这样就可以换行了
但是如果一行里有多个text，其中一个特别长，就会长这样，看起来不美观。

这时候可以用richtext来实现一行多个text并处理超长情况：
richtext加flex-1，然后里面包裹多个span的text。记得richtext外要包一个div，不然可能父容器的样式会失效，比如父容器的div有个justify-content: center，如果不包div的话，就居中不了了。

<div class="flex-row">
    <richtext class="flex-1">
        <span>Blah Blah Blah</span>
        <span>Blah Blah Blah</span>
    </richtext>
</div>

但是richtext会有无法动态更新的问题，如果data变化，richtext文字不会跟着一起刷新。解决办法是用一个v-if开关去重新生成组件。同时APP显示不了空格，所以需要判断在APP情况下加一个透明占位符

// richtext
<h-row>
    <richtext class="flex-1" v-if="showRichtext">
    <span class="text-addressdetail">{{formData.receive_address}}</span>
    <!-- app显示不了空格，透明字体占位 -->
    <span v-if="isApp" style="color: transparent;">s</span>
    <span class="tag" v-if="formData.is_default == '1'">
        <span class="tag-text">默认</span>
    </span>
    </richtext>
</h-row>

// v-if开关
if (addressItem.receive_address_serialno) {
    this.showRichtext = false;
    // richtext不能动态更新，通过这种方法去重新生成组件
    this.$nextTick(() => {
        this.showRichtext = true;
    })
}

Flex布局 !!!weex 默认的flex容器direction是column

正常flex默认布局
flex容器:
flex-direction: row
flex-wrap: nowrap //不换行（也不溢出），超出长度则子元素缩小
align-items: stretch
justify-content: flex-start
子元素(项目)属性:
order: 0
flex-grow: 0 (不自动放大)
flex-shrink: 1 (自动缩小)
flex-basis: auto (占据主轴空间/子元素自身大小)

不正常的weex flex布局
weex默认flex-direction 是COLUMN

tabbarTop详解

tabbar实际上是由tabbartop组件和底下的列表div组成
底下的列表为N个列表横向拼接而成,div样式由tabContainerStyle控制，width=750*N，N为tab的个数
tranform 为translateX(-750px * choseNumberActiveKey)
当choseNumberActiveKey为0时，显示X轴0到750px的页面，
当choseNumberActiveKey为1时，向左平移750px，显示X轴750px到1500px的页面

computed: {
    tabContainerStyle () {
        return {
            width: (750*2) + 'px',
            transform: `translateX(-${750 * this.choseNumberActiveKey}px)`
        }
    },
}

combtablist父组件中引用tabbartop子组件

  <tabbarTop :choseNumber.sync="choseNumberActiveKey" :titleList="tabbarTitleList"></tabbarTop>

:choseNumber.sync 等于 v-on:update:choseNumber="choseNumberActiveKey = $event"

父组件的choseNumberActiveKey和子组件的choseNumber双向绑定。
tabbartop组件在tab点击后会调用choseClick,choseClick会触发update事件
this.$emit("update:choseNumber", i); //i为tab的index
父组件的choseNumberActiveKey会update成i
tabContainerStyle这边会根据新的choseNumberActiveKey值compute新的transform: translateX,导致列表div位移并显示正确的列表

动态变量名和模板字符串

let foo = {bar: "123"};
let bar2 = "bar";
动态变量名: foo["bar"] = foo.bar = 123;
模板字符串: foo[`${bar2}`] = foo["bar"] = 123;  //注意使用反引号`而不是单引号'

this[type${iterator.copywriting_type}Desc] = iterator.copywriting_desc;
假如iterator.copywriting_desc是1，则以上等同于
this.type1Desc = iterator.copywriting_desc

Vue检测不到array或者object的变化

使用set方法:向响应式对象中添加一个 property(原先没有定义的)

this.array[0] = '1';    //错误
Vue.set(this.array, 0, '1');    //正确

https://cn.vuejs.org/v2/api/index.html#Vue-set

一次请求用一个form，就算两个请求传参一样，也要建两个相同的form分别传

原因：一个form，一次请求只能用一次。请求完后，他会把form里的内容给清掉。
用form.toStr或者toObject的时候要传false,不然也会清空form(蜜汁操作)

align-content 和 align-items

align-content整个容器居中

align-items容器内每一行,分行居中

Vue风格指南

https://cn.vuejs.org/v2/style-guide/
重点关注:
组件/实例的选项的顺序:
name > components & filters > props & data > computed & watch > hooks(create, mount,update,activate,destroy) > methods
文件命名用PascalCase，HTML(template)里用kebab-case，JS(script)里用camelCase
组件大小写:

components/MyComponent.vue      //PascalCaseCase
import MyComponent from './MyComponent.vue' //PascalCaseCase
<my-component/>  //kebab-case

props大小写:

props: {
  greetingText: String  //camelCase
}
<WelcomeMessage greeting-text="hi"/>    //kebab-case

BEM CSS命名规范

BEM = Block + Element + Modifier
恒生项目里的BEM格式
block-element__modifer

RSS