每日总结中

一只野生的小飞龙

已于 2022-09-05 09:40:16 修改

阅读量90

点赞数

文章标签： javascript 前端开发语言

于 2022-07-16 22:55:15 首次发布

本文链接：https://blog.youkuaiyun.com/qq_45404030/article/details/125746730

版权

第一天

没有利用小程序自带的网络请求（因为小程序自带的配置选项很少 ），因为小程序并没有axios，所以就选择了@escook/request-miniprogram第三方包来进行网络请求，同时是自己封装，然后放到全局来使用。

主包分别是四个tabBar，然后在主包里面利用了v-for，acss的技术，主包里面配置分包 。acss里面有 & 表示前者和后者同时满足时所触发的样式。
flex默认是在一行中表示，如果想要在一列的话，那么可以使用flex-direction 来实现列向的展现。样式可以用对象来展现 ，多个样式可以用数组来展现。尤其也要记得使用伪元素来实现装饰东西的实现。如果想要通过点击进行复原，那么可以通过三目运算符进行0，1的选择，从而达到双击导航栏也可以实现内容的复原。下面的代码保证了搜索栏保持不变，不会随着搜索让搜索栏看不见。

// 设置定位效果为“吸顶”
    position: sticky;
    // 吸顶的“位置”
    top: 0;
    // 提高层级，防止被轮播图覆盖
    z-index: 999;

引用第三方包的时候，必须进行如下两步操作。

npm init -y
npm i 包的名字

出现了一个很奇怪的问题，引入的underscore却得不到想要的效果。（已经解决）
在这里插入图片描述

对于自己自定义的组件，可以通过

props和this.$emit('事件名')从而实现自定义属性和自定义事件的操作。

第二天

onReachBottom()从来实现下拉到底所触发的事件

onPullDownRefresh()监听下拉刷新所触发的事件
如果你想要在一个函数中调用另一个函数的话，那么可以传入一个函数，然后里面再调用一下，如果这个函数通过的话，那么就触发这个函数。
this.getGoodsList(() => uni.stopPullDownRefresh())
async getGoodsList(cb) {
    // 发起请求
    const {
      data: res
    } = await this.$http.get('/api/public/v1/goods/search', this.queryObj);
    //传入的参数
    cb && cb();
    if (res.meta.status !== 200) return this.getToast();
    // 为数据赋值
    this.goodsList = [...this.goodsList, ...res.message.goods];
    this.total = res.message.total
  }

如果没有传来值的话，那么可以通过或者运算符来决定如何

 this.queryObj.cid = options.cid || '';
 this.queryObj.query = options.query || '';

axios在拦截器request的部分上通过

// 进行身份验证
config.headers.Authorization = localStorage.getItem('token');

第三天

Array.prototype.map(x=>x*2); 形成一个新的数组
vuex中mapState是映射vuex中的数据

computed: {
      // 模块名,需要映射的内容
      ...mapState('m_cart',['cart','name'])
    },

find方法是找到一个符合条件的就直接退出
reduce方法
delete 对象.键名就可以删除指定的键名
findIndex方法来查找索引值

const index = this.channel.findIndex(obj => obj.id === channelObj.id)
      this.channel.splice(index, 1)

可以用过ref属性来修改子组件里面的值

replace只能替换一次 replace可以替换多次

lightFn (originStr, target) {
	//再用html来识别标签
      return originStr.replaceAll(target, `<span style="color:red;">${target}</span>`)
    }

第四天

//通过这个来生成report.html文件
"build": "vue-cli-service build --mode prod --report",

尽量能够封装的话那么就封装

let和var的区别

var具有变量提升,而let没有
let是块级作用域,var函数作用域
在for循环里面.var的变量是全局变量,let依然是局部作用域

购物车编辑（原生js）

html
  <table border="1">
    <thead>
        <tr>
          <th> <input type="checkbox" name="" id="all"> </th>
          <th>商品</th>
          <th>单价</th>
          <th>商品数量</th>
          <th>小计</th>
          <th>操作</th>
        </tr>
    </thead>
    <tbody>
        <tr>
          <td> <input type="checkbox" name="" id=""> </td>
          <td>牛奶</td>
          <td id="price">5</td>
          <td><button value="-">-</button><span data-index="0">1</span><button value="+">+</button></td>
          <td id="sum">5</td>
          <td>删除</td>
        </tr>
        <tr>
          <td> <input type="checkbox" name="" id=""> </td>
          <td>牛奶</td>
          <td id="price" >5</td>
          <td><button value="-">-</button><span data-index="1">1</span><button value="+">+</button></td>
          <td id="sum">5</td>
          <td>删除</td>
        </tr>
        <tr>
          <td> <input type="checkbox" name="" id=""> </td>
          <td>牛奶</td>
          <td id="price">5</td>
          <td><button value="-">-</button><span data-index="2">1</span><button value="+">+</button></td>
          <td id="sum">5</td>
          <td>删除</td>
        </tr>
        <tr>
          <td> <input type="checkbox" name="" id=""> </td>
          <td>牛奶</td>
          <td id="price">5</td>
          <td><button value="-">-</button><span data-index="3">1</span><button value="+">+</button></td>
          <td id="sum">5</td>
          <td>删除</td>
        </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>清除所选商品</td>
        <td>清理购物车</td>
        <td></td>
        <td></td>
        <td>已经选中<b id="quantityNumber">0</b>件商品;总价<b id="allGradeSum">0</b></td>
        <td><div>去结算</div></td>
      </tr>
    </tfoot>
  </table>
</body>
css
table{
  border-collapse: collapse;
}
tr th,td{
  width: 300px;
  height: 50px;
  text-align: center;
}
span{
  display: inline-block;
  width: 20px;
  height: 20px;
  text-align: center;
}
b{
  color: red;
}
div{
  background-color: red;
  color: white;
  cursor: pointer;
}
tfoot tr:nth-child(-n+2){
  cursor: pointer;
}
// 按钮
const button1 = document.querySelectorAll('tr td>button')
// 数量
let span1 = document.querySelectorAll('span')
// 单价
let price1 = document.querySelectorAll('#price')
// 总计
let sum1 = document.querySelectorAll('#sum')
// 全选
let allChoose = document.querySelector('#all')
// 个别选项
let otherChoose1 = document.querySelectorAll('tbody input')
// 所有tbody里面的tr
let body = document.querySelector('tbody')
let allTbodyTr1 = document.querySelectorAll('tbody tr')
let tfootFirstElement = document.querySelector('tfoot tr').firstElementChild
// 商品数量
let quantityNumber = document.querySelector('#quantityNumber')
// 商品总共价格
let allGradeSum = document.querySelector('#allGradeSum')
const button = Array.from(button1)
const span = Array.from(span1)
let price = Array.from(price1)
let sum = Array.from(sum1)
let otherChoose = Array.from(otherChoose1)
let allTbodyTr = Array.from(allTbodyTr1)
// 全选
allChoose.addEventListener('click',function(){
  if(this.checked === true)
  {
    let count = 0
    let sum1 = 0
    otherChoose.forEach(item=>{
      item.checked = true
      count++
    })
    sum.forEach(item=>{
      sum1+=Number(item.innerHTML)
    })
    quantityNumber.innerHTML = count
    allGradeSum.innerHTML = sum1
  }
  else
  {
    otherChoose.forEach(item=>{
      item.checked = false
    })
    quantityNumber.innerHTML = 0
    allGradeSum.innerHTML = 0
  }
})
// 清除所选商品
tfootFirstElement.addEventListener('click',function(){
  if(allChoose.checked!==true)
  {
    otherChoose1.forEach((item,index)=>{
      if(item.checked === true)
      {
        allTbodyTr.forEach((tr,flag)=>{
          if(index === flag)
          {
          allTbodyTr.splice(flag,1)
          }
        })
      }
    })
    body.innerHTML = ''
    allTbodyTr.forEach(item=>{
      body.innerHTML+=item.innerHTML
    })
  }
  else
  {
    body.innerHTML = ''
    allChoose.checked = false
  }
})
// 数量增加与否
span.forEach(item=>{
  if(item.innerHTML === '1')
  {
    item.previousElementSibling.style.cursor = 'not-allowed'
    item.previousElementSibling.disabled = true
  }
  else
  {
    item.previousElementSibling.style.cursor = ''
    item.previousElementSibling.disabled = false
  }
})
button.forEach((item,index)=>{
  item.addEventListener('click',function(){
    if(index%2 === 0)
    {
      let number = Number(item.nextElementSibling.innerHTML)
      const newIndex = item.nextElementSibling.getAttribute('data-index')
      item.nextElementSibling.innerText = --number
      sum[newIndex].innerHTML = Number(price[newIndex].innerHTML) * number
      span.forEach(item=>{
        if(item.innerHTML === '1')
        {
          item.previousElementSibling.style.cursor = 'not-allowed'
          item.previousElementSibling.disabled = true
        }
        else
        {
          item.previousElementSibling.style.cursor = ''
          item.previousElementSibling.disabled = false
        }
      })
    }
    else
    {
      let number = Number(item.previousElementSibling.innerHTML)
      const newIndex = item.previousElementSibling.getAttribute('data-index')
      item.previousElementSibling.innerText = ++number
      sum[newIndex].innerHTML = Number(price[newIndex].innerHTML) * number
      span.forEach(item=>{
        if(item.innerHTML === '1')
        {
          item.previousElementSibling.style.cursor = 'not-allowed'
          item.previousElementSibling.disabled = true
        }
        else
        {
          item.previousElementSibling.style.cursor = ''
          item.previousElementSibling.disabled = false
        }
      })
    }
  })
})

原生组合键的实现

通过ctrlKey和keyCode来实现组合键

键盘移动

window.onkeydown = function(e)
{
  if(e.keyCode ===65)
  {
    img.style.left = img.style.left.charAt(0)
    img.style.left = x + 'px'
    x-=5
  }
  else if(e.keyCode ===68)
  {
    img.style.left = img.style.left.charAt(0)
    img.style.left = x + 'px'
    x+=5
  }
  else if(e.keyCode ===83)
  {
    img.style.top = img.style.top.charAt(0)
    img.style.top = x + 'px'
    x+=5
  }
  else if(e.keyCode ===87)
  {
    img.style.top = img.style.top.charAt(0)
    img.style.top = x + 'px'
    x-=5
  }
}

三级联动

可以通过事件委派来进行性能优化，也就是给父级一个事件，然后通过原生dom操作进行获取所需要的部分。

如果想等待所有数据都获取完毕的话，可以通过watch监听数据的变化，也就是handler

遮罩层

<!-- 遮罩层 -->
  <div class="mask">
    <div>123</div>
  </div>
.mask{
position:absolute
top:0
left:0
right:0
bottom:0
backgroundColor:rgba
}

基于字符串的数值进行排序

首先通过类名的显示与否，来确定是否有箭头（默认是降序）
然后通过点击事件(一个传入1，一个传入2），通过字符串的值的数字与这个传入的值进行比较，如果相同的话，就让字符串的降序代表的字符串转换为升序，如果不相同的话，直接转换为降序的字符串。
原数值：'1 desc' (desc降序 asc升序)

changeValue (flag) {
      // const orgin = this.value
      const orginFlag = this.value.split(':')[0]
      const orginDesc = this.value.split(':')[1]
      let newValue = ''
      if (orginFlag === flag) {
        newValue = `${flag}:${orginDesc === 'desc' ? 'asc' : 'desc'}`
      } else {
        newValue = `${flag}:${'desc'}`
      }
      this.value = newValue
    }

获取文件内的内容。

file.addEventListener('change',function(e){
    const file = e.target.files[0];
      const reader = new FileReader();
      reader.onload = (ev) => {
        self.fileContent = ev.target.result
        console.log(self.fileContent)
      }
      reader.readAsText(file)
  })