image.png

写了一天的代码，打开开发者工具调试的时候，出现两个警告：

1. <div> cannot appear as a descendant of <p>

2. <li> cannot appear as a descendant of <li>.
   第一个很简单，就是p这类的行级元素中最好不要包含块级元素
   第二个就是li标签在使用前最好包在ul中

10.8 订单详情页优化

• 今天犯了一个非常低级的错误，在离开了for循环的环境，竟然头脑一发热直接用下面的代码来判断一个数组中是否含有某个数字：

7 in [1,2,3,4,7]  // 自欺欺人的呀，这个返回肯定false。。。数组下标并没到7 啊

后来网上搜了一下，这个in运算符主要是针对对象的，具体使用如下：

let person = {name: "cdd", age: 1998}; 
if("name" in person){ 
console.log('true'); 
}else{ 
console.log('false'); 
} 

即使可以针对数组使用，也是把数组看成一个对象，然后判断对象中的元素，具体使用如下

let trees = new Array("cdd", "zzz", "www"); 
if("cdd" in trees){ 
console.log('true'); 
}else{ 
console.log('false'); 
}   // false

if(0 in tress) {
console.log('true');
} else {
console.log(''false);
}  // true

总之，for-in 循环在设计之初就是用于普通的以字符串为 key 值的对象的语法，而不适用于数组。
后来使用如下方法判断一个数组中是否含有某个value：

[1,2,3].includes(3)  //true。。。不过注意下此属性的兼容性
[1,2,3].indexOf(3)   //2
[1,2,3].indexOf(5)  //  -1  。。。注意了js中-1不是false

-1 == true;        //false
-1 == false        //false
-1 ? true : false; //true 这里三元运算符存在了一个隐士转换，将-1转换为1了

根据cargo判断语言

const localLang = req.cargo.getStandardLocale()；
localLang 为zh-HK表示粤语
localLang 为en-US表示英语

10.15今天第一次提测，我的部分因为没做链接跳转，导致用例未执行

问题： 有两个地方会跳转到订单详情页，一个是从公共订单列表，查看订单，一个是在订单完成页点击查看订单。
因此用到了sessionStorage：

![image.png](https://img.haomeiwen.com/i6525066/5cef7e69ec632d4c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

//查看订单 
    checkOrder = () => {
      let { i18n, localLang, currency } =  this.props;
      let temp = {
        i18n: i18n,
        locale: localLang,
        currency: currency,
        orderId: this.state.orderId,
      }
      window.sessionStorage.setItem('test',JSON.stringify(temp))
      Router.push({
        pathname: '/ttd/orderdetail'
      });
    }

获取当前网页url并且正确截取参数

orderId= window.location.href.match(/orderid=(\d+)/)[1];
http://www.dev.qa.nt.tripcorp.com/ttd/orderdetail?orderid=3036281543

Es6 对象方法Object.assign() 类似于数组的拼接方法Array.concat()

• 但是，Object.assign拷贝的属性是有限制的，只拷贝源对象的自身属性（不拷贝继承属性），也不拷贝不可枚举的属性（enumerable: false）。

Object.assign({b: 'c'},
    Object.defineProperty({}, 'invisible', {
        enumerable: false,
        value: 'hello'
    })
)
// { b: 'c' }

• 属性名为 Symbol 值的属性，也会被Object.assign拷贝。

Object.assign({ a: 'b' }, { [Symbol('c')]: 'd' })
// { a: 'b', Symbol(c): 'd' }

显示浮层通过：hover属性控制样式：

    position: absolute;
    visibility: hidden;

find的使用

设置footer元素总是在浏览器最下面展示（css之用于动态计算长度值：）

.content {
  min-height: calc(100vh - 50px); // vh表示相对视窗的高度，100vh表示整个视窗的高度，使用的时候注意运算符前后需要保留一个空格
}
.footer {
  height: 50px;
}

div中有一个img标签，如何使得鼠标悬停在img上出现浮层，而不是悬停在div上也出现浮层

上面一直正确，git push 突然给我来个报错

gitlab报错.png

变量起别名

let { locale, i18n:test } = this.props;
this.setState({
   locale: locale,
   i18n: test
})

今天想匹配到有一个就返回，于是用到了find，然鹅 ie不支持find

被逼无奈还是老老实实的用filter吧

image.png

// 无法兼容ie之前的demo
 getCoutry = (lists, nationalityCode) => {
      let temp;
      temp = lists && lists.length && lists.find((item) => {
        return item.nationCode === nationalityCode;
      });
      if(temp) {
        return temp.nationName 
      }
    }

顺便了解一下es5新增：
forEach
map
filter
some
every
indexOf
lastIndexOf
reduce
reduceRight

// 改成filter之后的demo，， 因为find是找到一个就返回，并且返回的是一个对象，而filter会找出所有匹配的对象，所以返回的是一个数组
getCoutry = (lists, nationalityCode) => {
      let temp;
      temp = lists && lists.length && lists.filter((item) => {
        return item.nationCode === nationalityCode;
      });
      if(temp) {
        return temp[0].nationName 
      }
    }

页面重新加载

window.location.reload();

浮层样式根据hover展示，并且精确定位

style.jpg

.productinfo-refund {
      position: relative；
      align-items: center；
      height: 30px;
      line-height: 30px;
      display : table;  //不加这句，鼠标悬停在当前div的空白地方也会出现浮层，本来是为盖div设置width: fit-content...无奈ie死活不兼容
      .productinfo-check-refund {
        position: relative;  // 相对定位
        img {
          width: 14px;
          height: 14px;
        }
      }
      .productinfo-refund-detail {
        display: none;
      }
    }
    .productinfo-check-refund:hover {
       cursor: pointer;
      .productinfo-refund-detail {
        display:block;   // hover之后display设置为block
        position: absolute;  //绝对定位
        width: 408px;
        height : auto;
        z-index: 99;
        top: 30px; 
        left: 100%;   // 粗略定义位置
        transform : translateX(-50%) translateX(-6px); // 任意调整位置
       }
   }
//  悬浮框前面的小箭头样式
.productinfo-refund-detail:before {
        content: '';
        border: 11px solid transparent;
        border-bottom-color: #ccc;
        position: absolute;
        top: -9px;
        border-color: #fff #fff transparent transparent;
        transform: translateX(50%) rotate(-45deg) ;
        box-shadow: 1px -1px 1px rgba(204,204,204,0.2);
        right: 50%;
 }

toast组件

弹窗组件

对 div p span 使用line-height属性的实际展示效果竟然不一样

制作一些虚线或者实线

image.png

.passengerinfo-line {
        float: left;
        height: var(--height);  //高度是一个变量
        width: 1px;
        border-left: 1px dashed #D9D9D9;
        margin-right: 20px; 
      }

CSS中原生的变量定义语法是：--，变量使用语法是：var(--)，其中*表示我们的变量名称。