当前位置：首页 > article >正文

前端实习第四周小结

article 2025/3/11 15:54:45

第四周（111.18-11.22）已经结束。

我发现自从上班之后，对周六日会更有期待和掌控感。

做想做的事情，在繁忙的工作和世俗中抽离出来，给自己慰藉，放松身心。

这周的事情不算多，前三天基本没有什么需求，所以也就忙自己的事情。

自己的事情

小程序的中英内容切换（100%）

自己动手做的大创小程序项目更新了一个功能：用baidu通用文本翻译API，实现了一个小程序中英文本内容切换。已整理在博客，感兴趣请在我主页进行浏览阅读

（以下是当前做的一个需求/逻辑整理）

流程：进入页面-当前详细数据获取-一个按钮（实现中英切换）-数据显示

细节：接口的发送请求优化（标识和本地存储）

问题：本地缓存，不止存储单个变量，用一个数组存储已请求（翻译）的文本内容。

用户进入页面的使用，先获取当前的中文文本内容，当用户点击按钮（中英切换），

判断本地缓存中有没有存储当前景点的文本内容=>唯一标识（id）

需要用一个对象数组进行存储数据，用数组方法find()进行判断，

如果存在则从本地缓存中进行获取并且设置到页面的数据；

不存在则发送翻译请求并作对应处理。

（翻译请求标识设置为true，因为第一次进入页面的时候，标识为false)

（结果数据的本地存储）

（结果数据设置到页面变量数据）

优化：函数节流，设置函数在n秒内只执行一次。

// 节流函数
throttle(fn, limit) {
  let inThrottle;
  return function(...args) {
    if (!inThrottle) {
      fn.apply(this, args);
      inThrottle = true;
      setTimeout(() => {
        inThrottle = false;
      }, limit);
    }
  };
},

//为一个函数（如点击触发函数）添加“节流”
this.changeLanguage = this.throttle(this.changeLanguage.bind(this), 2000);

一些前端知识点记录。（分享几个知识点）

手动为dom元素添加事件

// EventListener.js
const EventListener = {
  listen(target, eventType, callback) {
    if (target.addEventListener) {
      target.addEventListener(eventType, callback, false)
      return {
        remove() {
          target.removeEventListener(eventType, callback, false)
        },
      }
      //较低版本的添加事件 .attachEvent
    } else if (target.attachEvent) {
      target.attachEvent('on' + eventType, callback)
      return {
        remove() {
          target.detachEvent('on' + eventType, callback)
        },
      }
    }
  },
}

export default EventListener

<template>
  <view>
    <button @click="handleClick" ref="myButton">Click Me</button>
  </view>
</template>

<script>
import EventListener from "../../utlis/EventListener";

export default {
  name: "EventButton",
  data() {
    return {
      removeListener: null, // 存储移除事件监听器的函数
    };
  },
  mounted() {
    // 为按钮添加点击事件监听器
    const button = this.$refs.myButton; // 获取按钮的引用
    this.removeListener = EventListener.listen(
      button,
      "click",
      this.handleClick
    );
  },
  beforeDestroy() {
    // 在组件销毁前移除事件监听器
    if (this.removeListener) {
      this.removeListener.remove();
    }
  },
  methods: {
    handleClick(event) {
      console.log("Button clicked!", event);
    },
  },
};
</script>

<style>
/* 你可以在这里添加一些样式 */
button {
  margin: 20px;
}
</style>

localStorage常用方法

1、length 本地存储数据的数量
2、key() 通过索引找到存储的数据
3、getItem() 通过键名取到本地存储的数据
4、setItem() 设置一个本地存储数据
5、removeItem() 删除一个本地存储数据
6、clear() 清空本地存储数据

     */
    console.dir(Storage);

    console.log(localStorage, sessionStorage);

    console.log(localStorage.length);

    localStorage.setItem('name', 'kaivon');
    localStorage.setItem('age', '18');
    localStorage.setItem('sex', 'male');
    localStorage.setItem('insterest', 'drink');

    var color = ["red", "green"];   //"red", "green"
    var color = { "c1": "red", "c2": "green" }  //[object Object]
    localStorage.setItem('color', JSON.stringify(color));
    console.log(JSON.parse(localStorage.getItem('color')));

    localStorage.removeItem('color');
    //localStorage.clear();

通过字符串方法获取url的第一个查询参数（这里是session_id）

// 假设这是你的URL
const url = 'http://example.com/page?session_id=12345&other_param=value#anchor'

// 定义一个函数，用于从URL中提取名为session_id的查询参数的值
function extractSessionId(url) {
  // 查找问号的位置，获取查询字符串
  const queryString = url.substring(url.indexOf('?') + 1)
  console.log('查询字符串', queryString)

  // 分割查询字符串获取第一个参数对
  const firstParamPair = queryString.split('&')[0]
  console.log('获取第一个参数对', firstParamPair)

  // 分割参数对获取session_id的值
  const sessionId = firstParamPair.split('=')[1].split('#')[0]

  return sessionId
}

// 调用函数并打印结果
const sessionId = extractSessionId(url)
console.log('The session_id is:', sessionId)

片段标识符

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>片段标识符示例</title>
<style>
  .section {
    height: 1000px; /* 为了演示滚动效果，设置高度 */
    margin-top: 50px;
  }
  #section1 { background-color: #f0f0f0; }
  #section2 { background-color: #d0d0d0; }
  #section3 { background-color: #b0b0b0; }
</style>
</head>
<body>

<h1>点击链接跳转到不同部分</h1>
<a href="#section1">跳转到部分1</a><br>
<a href="#section2">跳转到部分2</a><br>
<a href="#section3">跳转到部分3</a><br>

<div id="section1" class="section">
  <h2>部分1</h2>
  <p>这是第一部分内容。</p>
</div>

<div id="section2" class="section">
  <h2>部分2</h2>
  <p>这是第二部分内容。</p>
</div>

<div id="section3" class="section">
  <h2>部分3</h2>
  <p>这是第三部分内容。</p>
</div>

<script>
  // 当页面加载完成或者URL中的片段标识符改变时触发
  window.addEventListener('hashchange', scrollToSection);
  window.addEventListener('load', scrollToSection);

  function scrollToSection() {
    const hash = window.location.hash;
    if (hash) {
      const element = document.querySelector(hash);
      if (element) {
        element.scrollIntoView({ behavior: 'smooth' });
      }
    }
  }
</script>

</body>
</html>