Skip to main content

· One min read
Kevin

定义变量​

package main

import (
    "fmt"
)

func main() {
    var a int
    var text string
    fmt.Printf("%d %q\n", a, text) //这样就可以打印出空字符串
    // 定义的变量必须使用掉
    fmt.Println(
        a, text, // 空字符串打印不出来
    )
    test()
    varShort()
}

func test() {
    //不固定类型可以写在一行
    var a, b, c, d = 3, 4, true, "def"
    fmt.Println(
        a, b, c, d,
    )
}

func varShort() { //更简洁的定义变量
    a, b, c := 1, 2, 3
    b = 10
    fmt.Println(
        a, b, c,
    )
}

· 3 min read
Kevin

Taro RN端样式 以及注意事项​

Taro官网文档不够详细

1、行内式高度​

height 的 值必须是数值,而不是字符串

<View style={{ height: 50 }}></View>

2、行内式报错 数字非字符串​

String cannot be cast tojava.lang.Double

字符串不能转换为java.lang. double

![image-20230403101443482](/Users/kevin/Library/Application Support/typora-user-images/image-20230403101443482.png)

说明行内式 zIndex 发生错误

错误写法

style={{ zIndex: '9999 '}}

正确写法

style={{ zIndex: 9999 }}

2、事件冒泡​

e.stopPropagation 不可用

使用处理封装过的 stopPropagation(e)

import { useBoolean, baseTheme, stopPropagation } from '@/base/utils'

使用

<View {...props} onClick={(e) => { stopPropagation(e); showAction.setTrue() }} />
stopPropagation(e);

3、图片报错​

![image-20230401173740732](/Users/kevin/Library/Application Support/typora-user-images/image-20230401173740732.png)

The component cannot contain childrenlf you want to render content on top of the image, consider using the component or absolute positioning

< image >组件不能包含子组件，如果你想在上面呈现内容 图像，考虑使用 

<lmageBackground>

组件或绝对定位 

soudianxia_gl/common/select_content_1
soudianxia_gl/shop/people


4、umberOfLines 报错​

Text props 关键字 numberOfLines 会导致报错

<Text  numberOfLines className='searchShop__item__card__title'>
                  512m² | {item.title}
                </Text>

5、样式支持度​

! important 不支持

6、ScrollView 行内式​

还是那个问题， height 只能是数字不能是字符串 这样写高度无效

    {/* style={{ height: '100%' }} */}
                        <ScrollView  >

7、ModalFormItem 组件​

高度有问题

8、Form​

import { Form } from '@tarojs/components'  报错

9、组件要有名字，不然会重定向到首页​

10、关于文字显示​

很多时候文字必须 放在 Text 标签里面

            {/* start_service */}
            <Picker mode='date' value={currentDate} start='2020-01-01' end={currentDate} onChange={onDateChange}>
              <View className='shangquan__box__item__top'>
                <View className='shangquan__box__item__top__left'>开始服务日期</View>
                <View className='shangquan__box__item__top__right' >
                  <Text className='shangquan__box__item__top__right__text'>{time || '请选择'}</Text>
                  <Icon name='you3' />
                </View>
              </View>
              <View className='shangquan__box__item__bottom'></View>
            </Picker>

11、Textarea​

Textarea 得从 Taro 导入

封装的Textarea 在App 端会有高度显示不出来的问题

· 2 min read
Kevin

showdown​

使用 showdown，可以将 markdown语法的内容转换为 html格式的内容

npm install showdown

使用：

main.js

import showdown from "showdown";
Vue.use(showdown);
视图
import showdown from "showdown";
let converter = new showdown.Converter();
// 显示表格
converter.setOption("tables",true);

let text= `# hello`;
let htmlText = converter.makeHtml(text);

github-markdown-css​

用于修饰经过处理的 markdown内容，尽管我们对内容进行了处理，但有些内容是没办法通过设置标签进行展示的，比如说引入，原生的html没有这种样式。通过引入github-markdown-css，我们可以正常的显示引入的样式。

引入：npm install github-markdown-css

使用：

<article v-html="" class="markdown-body"></article>
<script>
    import "../node_modules/github-markdown-css/github-markdown.css"
</script>

highlight.js​

用于渲染代码

引入：npm install highlight

使用：

main.js

import hljs from "highlight.js";
import "highlight.js/styles/default.css";

// 代码高亮
Vue.directive("highlight"，function(el){
    let blocks = el.querySelectorAll("pre code");
    blocks.forEach((block)=>{
        hljs.highlightBlock(block);
    })
})

完整代码示例​

<template>
    <div>
        <article v-html="htmlText" class="markdown-body"></article>
        
        <article v-html="htmlCode" v-highlight class="markdown-body"></article>
    </div>
</template>
<script>
import "/node_modules/github-markdown-css/github-markdown.css"
import showdown from 'showdown';
let converter = new showdown.Converter();
// 显示表格
converter.setOption("tables",true);

export default {
    name: "Home",
    data(){
        return{
            htmlText: '',
            htmlCode: '' 
        }
    },
    mounted(){
        this.test();
    },
    methods: {
        test(){
            let text= `# hello`;
            let htmlText = converter.makeHtml(text); 
            this.htmlText = htmlText;

            let code = `
            public void main(){
                System.out.println();
            }`;
            this.htmlCode=converter.makeHtml(code);

        }
    }    
}
</script>
<style scoped>
</style>

· 7 min read
Kevin

干嘛的？限制函数调用的频率。

为什么要限制？例如搜索的时候请求联想建议，没必要每次内容改变就发请求，当用户输入的很快的时候，中间的请求都是无意义的，浪费资源，没必要。

函数防抖（Debounce）​

概念： 在事件被触发n秒后再执行，如果在这n秒内又被触发，则重新计时。

生活中的实例： 如果有人进电梯（触发事件），那电梯将在10秒钟后出发（执行事件监听器），这时如果又有人进电梯了（在10秒内再次触发该事件），我们又得等10秒再出发（重新计时）。

我们先使用第三方包 lodash 来体验什么是函数防抖：

首先把 lodash 安装到项目中：

# yarn add lodash
npm i lodash

示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <script src="./node_modules/lodash/lodash.js"></script>
    <script>
      // lodash 会在全局提供一个成员：_

      // _ 对象中有很多方法，其中有一个方法专门用于处理函数防抖
      // 方法名：debounce
      // 作用：函数防抖
      // 使用方式：

      function fn(foo) {
        console.log("hello", foo);
      }

      // 正常的函数调用：立即调用，而且是一定会调用
      // fn()
      // fn()
      // fn()

      // 我们可以使用函数防抖把一个正常的函数变得不正常
      // 两个参数：
      //   参数1：函数
      //   参数2：时间，单位是毫秒
      // 返回值：函数
      //   返回值函数的功能和 fn 和的功能是一样
      //   唯一的区别就是经过了防抖处理
      const newFn = _.debounce(fn, 1000);

      // 计时 1s
      newFn("a");

      // 当你不到 1s 的时候，再次调用
      // 先把之前的废掉，重新计时 1s
      newFn("b");

      newFn("b");
      newFn("b");
      // newFn()

      // he
    </script>
  </body>
</html>

函数防抖实现原理​

函数防抖的实现原理：

function fn(foo) {
  console.log("hello", foo);
}

const newFn = debounce(fn, 1000);

// 计时 1s
newFn(123);

// 如果在 1s 之内重新调用
//   先把之前的废除
//   重新计时
newFn("world");
// newFn()

function debounce(callback, time) {
  let timer = null;
  // 函数参数中的 ... 表示接收剩余参数
  // 它会把所有的参数收集到一个数组中
  return function(...args) {
    console.log(args);
    window.clearTimeout(timer);
    timer = setTimeout(() => {
      // 这里的 ... 表示数组展示操作符
      // args[0], args[1], args[2] .........
      callback(...args);
    }, time);
  };
}

函数节流（Throttle）​

概念： 规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。

生活中的例子：函数节流就是开枪游戏的射速，就算一直按着鼠标射击，也只会在规定射速内射出子弹。

我们先用 lodash 来体验节流的使用方式：

function fn() {
  console.log("------ fire ------");
}

// 参数1：函数
// 参数2：间隔时间
// 返回值：函数（它的功能和保证的 fn 的功能是一样的，但是被进行了节流处理）
// 第1次直接调用，之后的按照一定频率进行调用
const newFn = _.throttle(fn, 2000);

// newFn()
// newFn()

setInterval(() => {
  console.log("鼠标点击");
  newFn();
}, 200);

// 一上来就调用一次
// newFn()

// // 之后的调用，开始计时 1s
// newFn()

// // 1s 之内所有的调用只有1次
// newFn()
// newFn()
// newFn()
// newFn()
// newFn()

函数节流实现原理​

function throttle(callback, interval) {
  // 最后一次的调用时间
  let lastTime = 0;

  // 定时器
  let timer = null;

  // 返回一个函数
  return function() {
    // 清除定时器
    clearTimeout(timer);

    // 当前最新时间
    let nowTime = Date.now();

    // 如果当前最新时间 - 上一次时间 >= 时间间隔
    // 或者没有上一次时间，那就立即调用
    if (nowTime - lastTime >= interval) {
      callback();

      // 记录最后一次的调用时间
      // 1
      lastTime = nowTime;
    } else {
      timer = setTimeout(() => {
        callback();
      }, interval);
    }
  };
}

const fn = throttle(函数, 1000);

//
fn();

fn();

fn();

函数节流或者防抖的相关场景​

  • 建议
  • window.resize 事件处理
  • 页面的滚动事件

总结​

  • 函数防抖和函数节流都是防止某一时间频繁触发，但是这两兄弟之间的特性却不一样。
    • search 搜索联想，用户在不断输入值时，用防抖来节约请求资源。
    • window 触发 resize 的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次
  • 函数防抖是某一段时间内只执行一次，而函数节流是间隔时间执行。
    • 鼠标不断点击触发，mousedown (单位时间内只触发一次)
    • 监听滚动事件，比如是否滑到底部自动加载更多，用 throttle 来判断

lodash函数库​

lodash 是一个常用工具函数库，它里面封装了好多常用的工具函数：

在 lodash 之前还有一个 JavaScript 工具函数库：underscore，lodash 模仿 underscope 自己重新实现了一遍，它相比 underscore 最大的好处是它支持按需加载。underscope 不支持按需加载。