编程思想的理解

小艾同学呀

于 2023-06-02 15:40:49 发布

阅读量83

点赞数

文章标签： javascript vue.js 开发语言

本文链接：https://blog.csdn.net/xa18064036359/article/details/131008411

版权

文章介绍了Vue3中利用排他思想实现动态绑定class，以及单向数据流、封装hooks功能、函数式编程的概念和优势，包括纯函数的可缓存和测试性，以及异步同步在前端开发中的应用。同时提到了JavaScript中this的指向和事件的发布订阅模式。

摘要由CSDN通过智能技术生成

1，排他思想

理解1，先排除所有，在处理自己

理解2，通过动态绑定class vue3中定义一个标识符=-1，通过点击事件记录自己的索引，从而通过判断索引class=“index==标识符动态显示样式，

核心：判断选中的索引显示动态class

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .active {
      color: red;
    }
  </style>
</head>
<body>

  <div id="app">
    <ul>
      <!-- <h2 :class="{title: false}"></h2> -->

      <!-- 对active的class进行动态绑定 -->
      <!-- 需求一: 将索引值为1的li添加上active -->
      <!-- 需求二：用一个变量（属性）记录当前点击的位置 -->
      <li :class="{active: index === currentIndex}"
          @click="liClick(index)"
          v-for="(item, index) in movies">
        {{item}}
      </li>
    </ul>
  </div>
  
  <script src="../lib/vue.js"></script>
  <script>
    // 1.创建app
    const app = Vue.createApp({
      // data: option api
      data() {
        return {
          movies: ["星际穿越", "阿凡达", "大话西游", "黑客帝国"],
          currentIndex: -1
        }
      },
      methods: {
        liClick(index) {
          console.log("liClick:", index)
          this.currentIndex = index
        }
      }
    })

    // 2.挂载app
    app.mount("#app")
  </script>
</body>
</html>

2，单向数据流

就是定义的数据，对该数据的操作，在同一作用域/组件中操作

3，封装hooks功能函数

1，数据的操作全部封装在一起–一个变量对应一个hooks

4，函数式编程

参考 https://zhuanlan.zhihu.com/p/258634453

概念

1，一等公民–一切皆函数，变量，参数，返回值…

2，闭包–【词法环境】 --让变量存放在内存中，提升性能—只要函数中的变量被他的子函数引用了，—返回的子函数中如果被外部【全局】引用了就会保留该产生词法环境

3，纯函数–返回的结果依赖它的参数–相同的输入一定产生相同的输出–执行过程没有副作用

优点：

1，可缓存【使用第三方库】==运行在运行内存中 ==computed函数，只有参数发生变化时，他才会重新执行，否则不会

2，可测试

4，高阶函数–一个功能放入另一个功能中，组成更大的功能

map

map函数-- 数组的方法–不会改变原来数组参考 https://www.jianshu.com/p/53032fc0909a

参数回调函数 – 对每个item进行一次函数处理

参数数组的每个item

返回值对每个item处理后的结果

返回值新的数组

reduce

reduce函数–数组的方法–用于累加数组里面的值参考 https://www.jianshu.com/p/e375ba1cfc47

5，组件开发思想

除了数据是外面传进来，其他都是在他自己内部的

6，异步与同步

概况：同步是阻塞模式，异步是非阻塞模式

同步的理解：
同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去;

同步就相当于是当客户端发送请求给服务端，在等待服务端响应的请求时，客户端不做其他的事情。当服务端做完了才返回到客户端。这样的话客户端需要一直等待。用户使用起来会有不友好。

举个我在项目中用到同步的例子：

详情页渲染需要掉接口来完成客户和部门两个字段的渲染，新建页面的逻辑是必须先选择客户，拿到客户的id再去请求部门的接口，所以我调详情页接口的时候一开始没考虑到这个问题直接渲染，结果就是出错，因为代码从上到下执行，是异步请求，我的客户还没请求成功的同时，部门也已经请求完了，解决方法，我就是接口套接口，把请求部门的接口写在客户接口的里面，形成同步请求，先请求完成之后再去调部门接口！

异步的理解：
异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。
异步就相当于当客户端发送给服务端请求时，在等待服务端响应的时候，客户端可以做其他的事情，这样节约了时间，提高了效率。

存在就有其道理异步虽然好但是有些问题是要用同步用来解决，比如有些东西我们需要的是拿到返回的数据在进行操作的。这些是异步所无法解决的。

ps：加深你的理解小例子：

比方说一个人边吃饭，边看手机，边说话，就是异步处理的方式。

同步处理就不一样了，说话后在吃饭，吃完饭后在看手机，必须等待上一件事完了，才执行后面的事情。

而在前端开发中常见的异步一般常见的包括：setTimeout，setInterval，ajax。

setTimeout是定时延时运行函数，只执行一次

setInterval也是定时延时函数，但是这个函数本身可以一直执行，不会停止，除非把它清除。

ajax是前端常用的和后台进行异步交互数据的请求方式，其实它本身也包括同步和异步，同步的就是由代码从上到下顺序执行，而异步的ajax是我们发送请求到服务器之后，只需要在监听服务器的响应即可，不用等到请求结束在执行其他的代码，这就是异步ajax
————————————————
版权声明：本文为CSDN博主「一个橙子呀」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/hong521520/article/details/106671930

常见异步的对象有

回调

Promise
Generator
await,async