ZONO's World

welcome to my world

Posted on Edited on In ,

Node.js

概念

1. Nodejs概述

一些概念

  • 异步回调

适用场景（优缺点）

  • 不适合用于大型后端要求的项目，图像处理、视频转换等、文件压缩（用Ruby、PHP、python）

基础使用

0.模块导入

一般有两种导入办法，commonjs和ESMoudle方法

1.repl

2.file

node:fs 模块能够以标准 POSIX 函数为模型的方式与文件系统进行交互。

人话：读写文档用的

同步办法

同步（synchronous）代码也称为阻塞（blocking）代码，阻塞代码在执行完之前，后面的代码都不会执行

1
2
3
4
5
6
7
8
9
10
const fs = require("fs");

//同步读取文件
const textIn = fs.readFileSync("./txt/input.txt", "utf-8");
console.log(textIn); //输出文件内容

//同步写入文件,
const textOut = `这是一个关于python输入输出的概述${textIn}.\n写入时间是${Date.now()}`;
fs.writeFileSync("./txt/output.txt", textOut); //python中的open("文件路径","w")方法
console.log("文件写入成功");

异步办法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//异步读取文件，读取完毕执行回调函数，回调函数中的第一个参数是错误信息，第二个参数是读取的数据
fs.readFile("./txt/start.txt", "utf-8", (err, data) => {
  if (err) return console.log("读取文件失败");
  fs.readFile(`./txt/${data1}.txt`, "utf-8", (err, data2) => {
      console.log(data2);
      fs.readFile("./txt/append.txt", "utf-8", (err, data3) => {
          console.log(data3);
          fs.writeFile("./txt/final.txt", `${data2}\n${data3}`, "utf-8", err => {
              console.log("文件写入成功");
          });
      });
  });
  console.log(data);
});

光看可能还是不容易理解，这里记住同步就是要把文件读完后才会执行下面代码，异步就是会边读文件边运行回调函数

3.Server

尝试第一个接口编写

1
2
3
4
5
6
7
8
9
10
11
12
const http = require("http");

const server = http.createServer((req, res) => {
  console.log(req);
  // console.log(res);
  res.end("Hello World");
});

server.listen(8000, () => {
  console.log("Server is running...");
});

4.Url

这时我们可以尝试使用Url了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const http = require("http");
const url = require("url");

const server = http.createServer((req, res) => {
  const pathName = req.url; //获取请求的路径
  if (pathName === "/" || pathName === "/overview") {
    res.end("This is the OVERVIEW"); //返回响应
  } else if (pathName === "/product") {
    res.end("This is the PRODUCT");
  } else {
    res.writeHead(404, {
      //设置响应头
      "Content-type": "text/html", //设置响应类型
      "my-own-header": "hello-world", //设置自定义响应头
    });
    res.end("<h1>Page not found!</h1>"); //返回响应
  }
});

server.listen(8000, () => {
  console.log("Server is running...");
});

__dirname:当前文件所在位置

5.第一个APi

视频的013：9：56

可以利用同步的缓存来优化文件输出，不用每次都得读一次文件，而是缓存后直接输出。

6.path模块

对路径操作

path.resolve()

7.使用npm

npm（node package manager）node包管理器。我们可以从上面下载模块，并导入使用

npm在node安装时，会自动安装。这里我们使用npm安装nodemon、slugify来优化项目。

nodemon：用于服务器热更新
slugify:用于解析字符串、转换为url友好

学了半天都是再讲概念（都是自己知道的，因为写过python后端），我真的会谢

Posted on
var findMaxAverage = function (nums, k) { var max = 0; while (nums.length >= k) { a = nums.slice(0, k); n = sum(nums.slice(0, k)); console.log(n); if (n > max) { max = n; } nums.shift(); } return max / k; }; function sum(arr) { var s = 0; arr.forEach(function (val, idx, arr) { s += val; }, 0); return s; } console.log(findMaxAverage([1, 12, -5, -6, 50, 3], 4));

Posted on In , ,

参考：React事件机制

React的事件机制

原生Js的事件机制

参看JS事件机制浅析：事件捕获、事件冒泡和事件委托

  1. 事件捕获
  2. 事件目标
  3. 事件冒泡
  4. 事件委托/事件代理
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <ul id="ul">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
  </body>
  <script>
    // let li = document.getElementsByTagName("li");
    // for (let i = 0; i < li.length; i++) {
    //   li[i].addEventListener("click", () => {
    //     console.log(li[i].innerHTML);
    //   });
    // }

    //事件代理  节约内存 提升性能(不需要注销子节点)
    let ul = document.getElementById("ul");
    ul.addEventListener("click", (event) => {
      console.log(event.target.innerHTML);
    });
  </script>
</html>

react事件机制

Posted on In ,

阮一峰GitHub Actions 入门教程

概念

github action是 Github 推出的持续集成工具。

Yaml是什么

https://zhuanlan.zhihu.com/p/145173920

Github Action 的使用限制

每个 Workflow 中的 job 最多可以执行 6 个小时
每个 Workflow 最多可以执行 72 小时
每个 Workflow 中的 job 最多可以排队 24 小时
在一个存储库的所有 Action 中，一个小时最多可以执行 1000 个 API 请求
并发工作数：Linux：20，Mac：5（专业版可以最多提高到 180 / 50）

什么是 Workflow？

Workflow 是由一个或多个 job 组成的可配置的自动化过程。我们通过创建 YAML 文件来创建 Workflow 配置。

Posted on In ,

有些学累了，出去骑车听了会播客，听到了关于社群管理方面的知识，想着简单聊聊现在呆的社团，也权当换换脑子休息一下。

写文章总归还是得有一个对象的，这里暂定是新同学了。

前言

iflab是我校的一个科技类社团，是少有的运营了十几年的并且一直散发活力的社团，其主要以就业为导向。我也曾尝试加入过不少社团，但最后基本上都退出了。

加入iflab已经有一些时间了，一直十分庆幸能加入这个社团，也十分高兴能在后来成为导师的这一角色。

在成为导师后，我便加入对社团的管理。期间我便不断思考，比如：为什么我要留在这个社团？为什么这个社团凝聚力如此之强？之类的问题。这里简单总结一些我目前能看见的。

要素分析

通过思考，我把iflab成功的一些点记录如下：

  1. iflab的成功不可缺的便是人才
  2. 轻松的扁平化社团氛围。
  3. 在互联网的大环境下，社团处于计算机学院下，拥有着信息差，能对同学做到实质的帮助。同时积累了不少校友，有着不少资源。

这个只是我思维风暴想出来的一些点。接下来根据它来简单聊聊iflab它的文化和成功的原因。

细说运营

1. iflab的成功不可缺的便是人才。（说的非常的官方😉）

以前与某位管理社团的老师交流过，她说学校社团很多时候都撑不过三四年。因为一般社群的繁荣都是靠着那一小撮“专家”，他们在社群中长期分享、发言，带动其他人加入。而随着毕业，这一小撮核心玩家就会离场，如此就会造成社群空洞。就比如我如今呆的小营桌游社（娱乐类社团，但小营校区人员较少）.在核心玩家要不去考研，要不去找工作的情况下，社团已经很久没有活跃了

题外话，等明年都搬去新校区了，小营桌游社也没必要存在了吧😂。

说回iflab，在iflab社团老师的带领下，社团其实一直处于一个良好的“出、入”。而在此同时，老师还建立了校友圈，将前辈与社团的关系一直联系着，这就让这一批“核心玩家”一直可以时不时的回来，带动社团氛围。

2.扁平化的交流环境

知识的傲慢，不知你是否有听说？举例子说就是，当A有某个信息/知识，而B不具备这一知识，当B向A提问时，A懒得做出回答。

这一情况可以说非常普遍，或者说我们日常生活中，大部分的矛盾都是基于这样的信息不对等。（以后单调出一篇讲讲）

而iflaber很幸运，可以在社团里可以遇见很多很多没有”知识的傲慢“的人们。

没有“知识的傲慢”就会让社团中，交谈的气氛会活跃很多。

大家对于老师其实一直有着一种排斥心理，我感觉随着时代的发展，有着开放思想的老师其实也很多（简单的说，会办社团的老师都是）。所以很多时候并不需要诚惶诚恐（中国人的通病？），应该直接以平等的角度与他们交流，就像朋友一样，要知道社团的成立，并不是为了展示谁很强，而是为了信息交流，当然要保持基本的礼貌（毕竟我们还是中国人，尊师重教也是一种文化特色）。

3.强大的资源

当然这一点一定得与上面扁平化一起讲，因为就算有资源，大家获取不到，那也是白瞎。

这里就不展开说了，资源这些与人脉、社会影响力等等关联。

总结

从iflab上我们就能看见许多社群成功的要素，但根本的不是要素是什么，而是如何获取、保留这些要素，这些都是管理者所需要思考的。

放宽到社会上，社群可能没有像社团一样的吸纳人才的固定途径，人才的入场也良莠不齐。

而氛围这点，更是需要不断的调整社群文化，注入好的、杜绝不好的。

至于资源，其实是大部分人加入的核心，也需要细细斟酌。

iflab当然还会不断迭代（这也是其优点之一），希望其变得更好。

好了，休息结束。😫

Posted on In ,

https://leetcode.cn/problems/valid-palindrome/?envType=study-plan-v2&envId=top-interview-150
这一题还是使用到来JavaScript的字符串对象操作。
可以看看阮一峰大佬对replace的描述（这里用到了replace和正则匹配）
https://www.bookstack.cn/read/javascript-tutorial/docs-stdlib-string.md#adal1j

1
2
3
4
5
6
7
8
/**
 * @param {string} s
 * @return {boolean}
 */
var isPalindrome = function (s) {
    s = s.replace(/[^a-zA-Z0-9]/g, "").replace(/\s/g, "").toLowerCase();
    return s === [...s].reverse().join("")
};

javascript可以算比较奇葩的语言了，但我喜欢😂

Posted on In ,

https://leetcode.cn/problems/remove-element/description/?envType=study-plan-v2&envId=top-interview-150

总体而言，该题并不难,对于js来说，数组的操作足够快速解决该题。

1
2
3
4
5
6
7
8
9
10
/**
 * @param {number[]} nums
 * @param {number} val
 * @return {number}
 */
var removeElement = function (nums, val) {
    while (nums.indexOf(val) !== -1) {
        nums.splice(nums.indexOf(val), 1);
    }
};

这里用数组对象的两个方法就能快速秒杀，至于了解两个方法可以看
https://www.bookstack.cn/read/javascript-tutorial/docs-stdlib-array.md
阮一峰大佬的文章一直是顶尖的。

看了官网后知道原来可以用双指针的方法。
简单的理解就是一个指针用于处理数据，一个指针用于存储数据。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/**
 * @param {number[]} nums
 * @param {number} val
 * @return {number}
 */
var removeElement = function(nums, val) {
    let left = 0, right = nums.length;
    while (left < right) {
        if (nums[left] === val) {
            nums[left] = nums[right - 1];
            right--;
        } else {
            left++;
        }
    }
    return left;
};

ps：感觉速度并没有快多少。

总结：
关于数组字符串的问题，在通读完阮一峰的教程后，了解完两种对象的方法后，处理起来是比较迅速的。当然可能影响我考虑到双指针这种不用函数的办法。

0%