13.购物车效果（面向对象模块开发）

商品数据

var  arr=[
        {
        	id:1001;//商品编号
            iconImg:["a_icon_0.jpg"],//小图
            img:["a_0.jpg"],//x大图
            price:2299,//价格
            title:"Redmi K30 5G双模 120Hz流速屏 骁龙765G 30W快充 6GB+128GB 深海微光 游戏",//商品详情
            config:[],//配置信息
            appraisersNum:"3500",//评价人数
            shop:"小米京东自营旗舰店",//商店类型
            //标签
            tag:
                {
                    self:true,//自营
                    restAssured:false,//放心选购
                    new:false,//新品
                    gift:false//赠
                },
                outOfStock:[true,false,false]//是否有货
         },
        
         {
            iconImg:["e_0.jpg","e_1.jpg","e_2.jpg"],
            img:["e_icon_0.jpg"],
            price:1699,
            title:"Redmi K30 120Hz流速屏 前置挖孔双摄 6GB+128GB 花影惊鸿 游戏智能手机 小米 红米",
            config:["6.65-6.74英寸","6GB"],
            appraisersNum:"6.4万+",
            shop:"小米京东自营旗舰店",
            tag:
                {
                    self:true,
                    restAssured:true,
                    new:true,
                    gift:true
                },

            outOfStock:[true,true,true]

         }

代码梳理。数据渲染页面

类方法的关联：

1.创建页面所需要的标签

 div.innerHTML=`
            

                ${data.img[0]}">
                
${data.outOfStock[0] ? "block" : "none"}">北京无货
            
            

                ${data.iconImg.reduce((value, item) => {
            return value + " + item + ">"
        }, "")}
            
            
¥${data.price.toFixed(2)}
            
${data.title}
            
${data.config.length === 0 ? "0px" : "20px"};">
            ${data.config.reduce((value, item) => {
            return value + "
" + item + "
"
        }, "")}
            
            
已有${data.appraisersNum}人评价
            
${data.shop}
            

                ${this.getTag(data.tag)}
            
        `

2.关于自动生成样式添加的事项

• Object.assign()：内置方法 添加行内样式
• Utils.insertCss(）：Utils.js封装方法 生成为内联样式style标签内，
  Utils.insertCss(）：封装如下

   //添加style样式   select:元素类名  styles：添加样式对象
   static insertCss(select,styles){
    // 获取页面上样式表的长度如果没有  就创建个style标签
        if(document.styleSheets.length===0){
            var style=document.createElement("style");
            //把style添加到 head标签下
            document.head.appendChild(style);
        }
        //获取css 最后一项
        var styleSheet=document.styleSheets[document.styleSheets.length-1];
        //循环添加样式
        var str=select+"{";
        for(var prop in styles){
            //把大写字符转换成小写  格式为css样式格式
            str+=prop.replace(/([A-Z])/g,function(item){
                return "-"+item.toLowerCase();
            })+":"+styles[prop]+";"
        }
        str+="}";
        //添加到css样式
          styleSheet.insertRule(str,styleSheet.cssRules.length);
   }

面向对象模块化开发中

• 行内样式需要不断的更新创建
• 内联中不需要重复创建以下代码可以解决：

在类中添加一个静态属性static styleCSS = false;

static styleCSS = false;

知识点

1.javascript:void(0)
让a标签不跳转

<a href="javascript:void(0)"></a>

在添加样式的方法 添加判断

static setStyle() {
    if (Goods.styleCSS) return;
    Goods.styleCSS = true;
    }

2.reduce() 方法 归并
接收一个函数作为累加器,reduce 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，接受四个参数：初始值（上一次回调的返回值），当前元素值，当前索引，原数组。

   //字符串模板
   ${data.iconImg.reduce((value,item)=>{
        return value+"+item+">"
    },"")}

3.toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。
toFixed(2)：保留两位小数 7.00 2.21 53.00
4. replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
5. constructor 属性返回对创建此对象的数组函数的引用。
e.target.constructor!==HTMLImageElement
DOM继承关系

Object–>EventTarget–>Node–>Element–>HTMLElement–>HTMLLIElement
HTMLDivElement
HTMLUListElement
…

6. e.target就是触发事件的标签，触发谁就是谁
7. e.currentTarget就是绑定事件的标签，绑定哪个事件输出的就是该事件
8. parseInt() 函数可解析一个字符串，并返回一个整数。
9.userSelect:“none” 设置不可被选中
10.节流执行函数的请求停止了一段时间之后才执行
11. 万能清除器 浮动

   .clear::after
   {
       content: "";
       height: 0;
       visibility: hidden;
       overflow: hidden;
       clear: both;
       display: block;
     
   }

12. filter()
filter()方法会创建一个新数组，原数组的每个元素传入回调函数中，回调函数中有return返回值，若返回值为true，这个元素保存到新数组中；若返回值为false，则该元素不保存到新数组中；原数组不发生改变。
13. e.currentTarget.data绑定事件的标签的属性
14.every

  ck.checked = this.shoppingList.every(item => item.checked);

every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。

every() 方法使用指定函数检测数组中的所有元素：

如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
如果所有元素都满足条件，则返回 true。