# 开发代码日志

**Repository Path**: he_guo_bao/development-code-log

## Basic Information

- **Project Name**: 开发代码日志
- **Description**: 记录开发功能 技巧~~~
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-10-27
- **Last Updated**: 2021-11-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## JS


### 多选(微信小程序)

```
 --------- USE ------------ Detail:select notSelect selectMore

 <view class="select">


  <view class="select-type">
    <view class="tag-item {{selects[item.id]? 'active' : ''}}" wx:for="{{types}}" data-index="{{item.id}}" data-value="{{item.name}}" bind:tap="select">{{item.name}}</view>
  </view>

  <view class="btng">
    <view class="reset" bind:tap="reset">
      <image src="http://secar.wsandos.com/assets/img/main/chongzhi.png"></image>
      <text>重置</text>
    </view>
    <view class="btn" data-url="/pages/allCarSource/allCarSource?index=0" bind:tap="toPage">确定</view>
  </view>

  const map = new Map();
  let MapToObj = strMap => {
  //没有原型的创建方法
  let obj = Object.create(null);
  for (let [k, v] of strMap) {
    obj[k] = v;
  }
  return obj;
}


</view>
* import {map,MapToObj} from "../../utils/util.js"
* select({currentTarget:{dataset:{index}}}){
*   if(map.has(index)){
*     map.delete(index);
*   }else{
*     if(map.size>=3) return wx.showToast({
*       title: '值不可以大于3!',
*     });
*     map.set(index,true);
*   }
*   this.setData({
*     selects:MapToObj(map)
*   })
*   if(typeof(this.data.selects).toString()){
*     console.log("Is String...",Object.keys(this.data.selects).toString())
*     this.setData({
*       selectsString:Object.keys(this.data.selects).toString()
*     })
*   }
* },
* 
 --------- END ------------
```



#### 数组方法

```
<!-- some对数组中特定的元素进行匹配 返回true和false-->
let arr = ["a", "b", "c", "d"];
let someEvent = arr.some(item => item == "adfgdf");
console.log(someEvent);
<!-- map用来计算和添加给对象一些东西 -->
let number = [1, 2, 3, 4, 5, 6];
let computed = number.map(x => x * 2);
console.log(computed)
<!-- filter用来过滤与之有匹配的东西,其它过滤掉 -->
let number = [1, 2, 3, 4, 5, 6];
let computed = number.filter(x => x === 2);
console.log(computed)
<!-- find方法用来寻找满足条件的某个对象，找不到就输出undefind -->
let array = [
    {
    name:"yellow",
    money:40
},
    {
    name:"yellows",
    money:90
},
];
console.log(array.find(item=>item.money=90));
<!-- findIndex没有返回值，只输出满足条件的位置 -->
let number = [1, 2, 3, 4, 5, 6];
let computed = number.findIndex(x => x === 2);
console.log(computed)
```

<!-- map用来计算和拼接一些东西 -->

#### 闭包(让 data 变得私有)

```
function hideData(){
    const data = {};
    return {
        set:function(key,value){
            data[key] = val
        },
        get:function(key){
            return data[key]
        }
    }
}
const hide = hideData();
hide.set('name','哈默');
const result = hide.get('name');
console.log('result',result)
```

#### 防抖 input 输入框//规定时间内只执行一次

```
 <div>
        <input type="text">
    </div>
    <script>
        let inp = document.querySelector("input");
        inp.oninput = debounce(function() {
            console.log(this.value)
        }, 500)

        function debounce(fn, delay) {
            let t = null;
            return function() {
                <!-- 所有的都清除掉,只在500毫秒中执行一次 -->
                if (t !== null) {
                    clearTimeout(t)
                };
                t = setTimeout(() => {
                    fn.call(this) //这里的this指向的调用者
                }, delay)
            }
        }
    </script>
```

#### 节流 点击按钮 高频事件执行次数

```
function throttle(fn,delay){
let flag = true;
return function(){
    if(flag){
        setTimeout(()=>{
            fn.call(this);
            flag = true
        },delay)
    }
    flag  = false
}
}

```

#### 从大到小排序 小到大 两种写法

```
  function bigToSmall(array) {
            return array.sort((a, b) => {
                return b - a
            })
        };

        function smallToBig(array) {
            let min;
            for (let i = 0; i < array.length; i++) {
                for (let j = i; j < array.length; j++) {
                    if (array[i] > array[j]) {
                        min = array[j];
                        array[j] = array[i];
                        array[i] = min;
                    }
                }
            }
            return array;
        }
        console.log(bigToSmall([123, 456, 3, 1, 8]));
        console.log(smallToBig([123, 456, 3, 1, 8]));
```

#####

## CSS

##### 三角

```
#triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}
```

#### 返回

```
 .returnBack {
    width: 20px;
    height: 20px;
    border-right: 1px solid red;
    border-bottom: 1px solid red;
    transform: rotate(90deg);
        }
```

#### 自定义字体使用
```
@font-face {
  font-family: 'specialaFont';
  src: url('https://fontgame.wsandos.com/font/zkkl.ttf');
 }


page {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: #333333;
  background-color: #ffffff;
  font-family: 'specialaFont' !important;
}
```