Ceryn

JS 学习笔记风格提示词

13分钟阅读

活跃分钟 0访问量 0点赞量 0点击量 0

请你按照我已有的 JS 学习笔记风格，帮我整理新的 JavaScript 知识点笔记，并写成适合直接放入 Obsidian 的 Markdown 内容。

笔记整体风格

  • 使用简洁、直接、偏学习记录式的中文表达。
  • 不要写得太像教材，要像个人学习笔记。
  • 先给出概念，再给出常见语法或代码示例，最后补充特点、注意事项或理解。
  • 重点内容可以使用 加粗。
  • JS 关键词、变量名、函数名、对象名、方法名、属性名、运算符、代码片段使用反引号包裹，例如：let、const、function、return、this、add()、document.querySelector()。
  • HTML 标签也使用反引号包裹，例如：<div>、<button>、<input>。
  • 适合初学者理解，不要堆太多复杂概念。
  • 可以适当补充用途、场景、注意事项和常见错误。
  • 不需要生成 YAML frontmatter，文件属性会由 Obsidian 自动生成。
  • 完成整理后，应根据正文内容总结 tags。
  • tags 的语义不能和文档所在目录重复。
  • 完成整理后，这篇文章属于 AI 写作，应在 author-type 改为 ai。
  • 完成整理后，应在 status 列表中添加 Completed。
  • status 只允许使用：Backlog、Planned、Ready、In Progress、Blocked、In Review、Completed。
  • note-sections 只允许使用 introduction、outline、main-body、lead-out key-highlight，如果笔记已经包含这些内容，就可以全部写入。
  • tag、status、note-sections 这些都是 yaml 列表数组，请采用多行数组格式

标题结构

正文优先使用以下层级：

网站

如果有权威参考资料，可以放在靠前位置，例如：

JavaScript 教程

JavaScript | MDN

引入

用一小段话说明这个知识点为什么存在，特别是指出它解决什么问题。

例如：

JavaScript 用来控制网页的交互和逻辑。HTML 负责页面内容，CSS 负责页面样式，JS 负责让页面可以根据用户操作发生变化。

正文

正式解释概念和用法。

可以根据内容拆分为：

定义

使用引用块或 callout 说明核心定义，例如：

定义

变量是用来保存数据的名字，后续可以通过这个名字读取或修改数据。

或者普通引用：

JS 的核心就是：保存数据，处理数据，再把结果显示到页面或交给浏览器执行。

语法

给出最常见的基础写法。

let name = "Tom";
const age = 18;

例如：

let count = 0;
count = count + 1;

如果需要配合 HTML 展示，可以先给 HTML，再给 JS。

<button id="btn">点击</button>
const btn = document.querySelector("#btn");
 
btn.addEventListener("click", function () {
  console.log("按钮被点击了");
});

例子

用具体小例子说明。

示例标题

说明这个例子在做什么。

// 示例代码

常见写法

如果这个知识点涉及多个写法，可以用列表或表格整理。

写法作用
let name = "Tom";声明一个可以修改的变量
const PI = 3.14;声明一个不能重新赋值的常量
console.log(name);在控制台输出内容

特点

用无序列表总结规则、特征或注意事项。

  • let 声明的变量可以重新赋值
  • const 声明的常量必须初始化
  • JS 区分大小写，name 和 Name 是两个不同名字
  • 语句结尾建议写分号 ;
  • 变量要先声明，再使用
  • JS 代码会按照出现顺序执行，前面的代码会先执行

理解

用更口语化的方式总结这个知识点的本质理解。

例如：

可以把变量理解为一个带名字的盒子，盒子里放的是数据。

let 更像普通盒子，里面的东西后面还能换；const 更像固定盒子，创建后不能重新指向别的值。

JS 不是只写语法，重点是让数据、页面和用户操作联系起来。

引出

不能死板的写：后序可以继续学习某某知识点，需要思考这个知识点还有什么方向没提及，有什么可以优化地方，提出后序的问题，不一定需要给出回答，留下问题引出即可。
如果这个知识点会连接到下一个知识点，可以简单写一句。下一个知识点请根据 网站前端/JS.md 这个文件中寻找存在的，不能凭空生成。

代码风格

  • JS 代码块使用 js 语言标记。
  • HTML 代码块使用 html 语言标记。
  • 代码示例要尽量短，能说明问题即可。
  • 代码中可以加入简短注释，但不要过多。
  • 如果一个知识点需要 HTML 结构配合说明，可以同时给出 HTML 和 JS。
  • 示例优先使用真实常见场景，例如变量赋值、字符串拼接、按钮点击、表单取值、数组遍历、对象读取、网络请求等。
  • 赋值运算符两边保留一个空格，例如：let count = 0;。
  • 函数名和括号之间不加空格，例如：sayHello()。
  • 代码块中每条语句尽量独占一行。
  • 初学阶段优先使用清晰写法，不为了简短写过度压缩的代码。

内容组织习惯

请优先按照这个顺序写：

  1. 这个东西是什么
  2. 为什么需要它
  3. 基础语法是什么
  4. 常见用法有哪些
  5. 代码例子
  6. 注意事项
  7. 我的理解式总结

表达习惯

  • 解释变量时，可以写成：“用于保存数据，后续可以通过变量名使用这个数据”。
  • 解释常量时，可以写成：“用于保存不希望被重新赋值的数据”。
  • 解释数据类型时，可以写成：“用于区分数据是什么种类，方便 JS 用不同方式处理”。
  • 解释字符串时，可以写成：“用于保存一段文本内容”。
  • 解释函数时，可以写成：“把一段代码封装起来，需要时再调用”。
  • 解释参数时，可以写成：“调用函数时传进去的数据”。
  • 解释返回值时，可以写成：“函数执行后交回来的结果”。
  • 解释对象时，可以写成：“用来保存一组相关数据和行为”。
  • 解释数组时，可以写成：“用来按顺序保存多个数据”。
  • 解释 this 时，要说明它表示“当前调用这个函数的对象”，不要一开始写太复杂。
  • 解释闭包时，可以写成：“函数记住了它创建时所在作用域里的变量”。
  • 解释 DOM 时，可以写成：“JS 操作页面内容和结构的入口”。
  • 解释事件时，可以写成：“用户或浏览器发生某个动作时触发的行为”。
  • 解释异步时，可以写成：“有些任务不会立刻得到结果，需要等完成后再处理”。
  • 解释模块化时，可以写成：“把代码按功能拆分，方便维护和复用”。

常见主题写法

变量

重点说明 let、变量命名、声明、赋值、读取。

let id;
id = 10001;

可以写成：let 用来声明变量，id 是变量名，10001 是保存进去的数据。

常量

说明 const 用于声明不能重新赋值的量。

const id = 1;
  • const 声明时必须初始化
  • const 不能重新赋值
  • 不想修改某个值时，优先使用 const

数据类型

说明 JS 里的数据大致可以分为值类型和引用类型。

  • 值类型：String、Number、Boolean、Null、Undefined、Symbol、BigInt
  • 引用类型：Object、Array、Function

字符串

说明字符串用于保存文本。

let title = "学习 JS";
let message = "标题是：" + title;

可以写成：字符串需要用 ""、'' 或模板字符串包裹。

函数

说明函数用于封装一段可以重复执行的代码。

function sayHello(name) {
  return "你好，" + name;
}
 
sayHello("Tom");

需要说明：name 是参数，return 后面的内容是返回值。

对象

说明对象用于保存一组相关数据。

const user = {
  name: "Tom",
  age: 18
};
 
console.log(user.name);

可以写成：name 和 age 是对象的属性，通过 user.name 可以读取属性值。

数组

说明数组用于按顺序保存多个数据。

const list = ["HTML", "CSS", "JS"];
 
console.log(list[0]);

需要说明：数组下标从 0 开始。

DOM API

说明 DOM API 用于让 JS 获取和修改页面元素。

<p class="text">旧内容</p>
const text = document.querySelector(".text");
text.textContent = "新内容";

注意说明：如果 JS 执行太早，页面元素还没加载出来，就可能获取不到元素。

事件

说明事件用于响应用户操作。

<button id="btn">点击</button>
const btn = document.querySelector("#btn");
 
btn.addEventListener("click", function () {
  console.log("点击了按钮");
});

可以写成：点击按钮时，浏览器会执行回调函数里的代码。

Ajax 和网络请求

说明 Ajax 用于在不刷新整个页面的情况下和服务器交换数据。

fetch("/api/list")
  .then(function (response) {
    return response.json();
  })
  .then(function (data) {
    console.log(data);
  });

注意说明：网络请求通常是异步的，不能直接当成立刻有结果。

异步和 Promise

说明异步任务需要等结果，Promise 用来表示一个未来才会完成的任务。

fetch("/api/list")
  .then(function (response) {
    return response.json();
  })
  .catch(function (error) {
    console.log(error);
  });

可以继续引出 async 和 await。

模块化

说明模块化是把 JS 代码按功能拆分。

  • 数据规则放一起
  • 界面渲染放一起
  • 交互状态放一起
export function add(a, b) {
  return a + b;
}
import { add } from "./math.js";
 
console.log(add(1, 2));

链接和资料

如果有权威参考资料，可以放在靠前位置，也可以放在正文中。

常用资料：

JavaScript 教程

JavaScript | MDN

输出要求

  • 只输出完整 Markdown 笔记内容。
  • 不要额外解释“我将如何写”。
  • 不要使用过度复杂的术语。
  • 内容要能直接复制进 Obsidian。
  • 如果我给出笔记标题，例如 JS 变量，就按这个主题生成完整笔记。
  • 如果我要求“写入”，就直接整理成对应文件内容。

使用方式

之后可以这样提问：

请按照我的 JS 学习笔记风格，整理一篇 [[JS 变量]]

或者：

按照 JS 学习笔记风格，帮我写入 [[JS DOM API]]

关系图谱