从0到1，我的第一个开源项目竟然是用JavaScript写的？

JVM炼丹师

2025-12-28 05:19

阅读 1969

大家好！我是小码，一名211高校的计算机研究生，平时除了写论文、调模型，最大的爱好就是捣鼓点小项目，然后把它们开源出去。今天想和你聊聊我人生中第一个真正意义上的“产品”——一个用 JavaScript 写的小工具。别担心，你不需要任何编程基础，这篇教程就是为你量身定制的！

我当初学编程的时候，最头疼的就是：学了一堆语法，却不知道能干啥。直到某天灵光一闪：“不如做个能解决自己小烦恼的小工具？”于是，一个记录每日喝水提醒的网页应用诞生了。它不酷炫，但却是我第一个被 GitHub 收录的开源项目，还收获了几个 star（虽然可能都是同学点的 😅）。

今天，我就带你从零开始，复刻这个过程。你会发现：做开源项目，没你想得那么难！

为什么是 JavaScript？它到底能干啥？

简单说，JavaScript（简称 JS）是让网页“活”起来的语言。

HTML 负责结构（比如一个按钮）
CSS 负责样子（比如按钮是红色的、圆角的）
JavaScript 负责行为（比如点击按钮后弹出“喝口水吧！”）

更厉害的是，现在的 JS 不仅能在浏览器里跑，还能在服务器（Node.js）、桌面应用（Electron）、甚至手机 App（React Native）里运行！所以，学好 JS，等于拿到了通向“产品世界”的万能钥匙。

而我们要做的，就是一个纯前端的小产品：一个简单的待办事项列表（To-Do List）。它能让你：

添加任务
标记完成
删除任务

麻雀虽小，五脏俱全！这就是你的第一个“产品”。

第一步：搭好你的“厨房”——开发环境准备

做菜前要先有锅碗瓢盆，写代码也一样。好消息是：JS 的入门门槛极低！

你需要准备什么？

工具	作用	是否必须
浏览器（Chrome / Edge / Firefox）	运行和调试你的代码	✅ 必须
文本编辑器（推荐 VS Code）	写代码的地方	✅ 必须
Git（可选但强烈推荐）	管理代码版本，方便开源	⚠️ 建议安装

💡 我当初连 Git 是啥都不知道，结果第一次提交代码搞丢了，哭着重新写了三遍……所以，早点装 Git，少走弯路！

安装步骤（超简单）

下载 VS Code
访问 https://code.visualstudio.com/，点“Download”就行。
安装 Git（Windows 用户）
访问 https://git-scm.com/，下载安装，一路默认即可。
验证安装
打开终端（Mac/Linux）或命令提示符（Windows），输入：
```
git --version
```
如果看到版本号（比如 git version 2.39.0），就说明装好了！

第二步：认识你的“食材”——核心概念扫盲

别怕术语！我用大白话给你解释：

1. 变量（Variable） → 就像贴了标签的盒子

你可以把数据存在“盒子”里，给它起个名字。

let task = "买牛奶";  // 声明一个叫 task 的变量，存了"买牛奶"

2. 函数（Function） → 一段可以重复使用的“菜谱”

function drinkWater() {
  console.log("咕噜咕噜~");
}
drinkWater(); // 调用函数，就会打印"咕噜咕噜~"

3. 事件（Event） → 用户操作触发的“开关”

比如点击按钮、输入文字，都会触发事件。

button.addEventListener("click", function() {
  alert("你点我啦！");
});

4. DOM（Document Object Model） → 网页的“骨架”

你可以用 JS 去“摸”网页上的元素（比如按钮、输入框），然后修改它们。

let input = document.getElementById("myInput"); // 找到 id 为 myInput 的元素
input.value = "新内容"; // 把它的值改成"新内容"

🌟 小贴士：console.log() 是你最好的朋友！它可以把变量内容打印到浏览器控制台（按 F12 打开），方便你调试。

第三步：动手做！打造你的第一个产品

我们现在要做的 To-Do List，只需要三个文件：

index.html（网页结构）
style.css（美化样式）
app.js（交互逻辑）

步骤 1：创建项目文件夹

在电脑上新建一个文件夹，比如叫 my-first-todo，里面放这三个空文件。

步骤 2：写 HTML 结构（`index.html`）

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>我的待办清单</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <h1>今日待办</h1>
    <input type="text" id="taskInput" placeholder="输入任务...">
    <button id="addBtn">添加</button>
    <ul id="taskList"></ul>
  </div>
  <script src="app.js"></script>
</body>
</html>

步骤 3：加点样式（`style.css`）

.container {
  max-width: 500px;
  margin: 50px auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
}
input, button {
  padding: 8px;
  margin: 10px 5px;
}
li {
  list-style: none;
  padding: 8px;
  border-bottom: 1px solid #eee;
}
.done {
  text-decoration: line-through;
  color: #888;
}

步骤 4：写 JS 逻辑（`app.js`）——重点来了！

// 获取页面元素
const taskInput = document.getElementById("taskInput");
const addBtn = document.getElementById("addBtn");
const taskList = document.getElementById("taskList");

// 添加任务的函数
function addTask() {
  const taskText = taskInput.value.trim(); // 去掉首尾空格
  if (taskText === "") return; // 空任务不添加

  // 创建一个新的 <li> 元素
  const li = document.createElement("li");
  li.textContent = taskText;

  // 点击任务可以标记完成/未完成
  li.addEventListener("click", function() {
    li.classList.toggle("done"); // 切换 .done 样式
  });

  // 创建删除按钮
  const deleteBtn = document.createElement("button");
  deleteCb.textContent = "删除";
  deleteBtn.style.marginLeft = "10px";
  deleteBtn.addEventListener("click", function(e) {
    e.stopPropagation(); // 防止点击删除时触发 li 的点击事件
    li.remove(); // 从页面移除这个任务
  });

  li.appendChild(deleteBtn);
  taskList.appendChild(li);

  // 清空输入框
  taskInput.value = "";
}

// 绑定“添加”按钮点击事件
addBtn.addEventListener("click", addTask);

// 按回车也能添加任务
taskInput.addEventListener("keypress", function(e) {
  if (e.key === "Enter") {
    addTask();
  }
});

🔍 注意：上面代码中有个小 bug！你能发现吗？
（提示：deleteCb 应该是 deleteBtn！我当初就犯过这种手滑错误……）

步骤 5：运行看看！

双击打开 index.html，用浏览器打开。试试输入任务、回车添加、点击标记完成、点删除——是不是动起来了？🎉

第四步：把它变成“开源项目”

现在你的产品已经能跑了，下一步就是分享给全世界！

1. 初始化 Git 仓库

在项目文件夹里打开终端，运行：

git init
git add .
git commit -m "feat: 初始提交我的 To-Do List"

2. 创建 GitHub 仓库

登录 GitHub
点右上角 “+” → “New repository”
起个名字，比如 my-first-todo
不要勾选“Initialize this repository with a README”（因为你本地已有文件）

3. 推送到 GitHub

按 GitHub 提示的命令（类似下面）：

git remote add origin https://github.com/你的用户名/my-first-todo.git
git branch -M main
git push -u origin main

搞定！现在全世界都能看到你的项目了。别忘了在 README.md 里写清楚：

项目是干嘛的
怎么运行
你学到了什么

🌈 我的第一个 README 写得特别傻：“这是一个我用来练手的项目，别笑我。”结果真有人留言：“加油！我也刚学！”——开源社区真的很温暖。

新手常踩的坑 & 解决方案

问题	原因	解决办法
页面点了没反应	JS 文件没正确引入	检查 `<script>` 标签路径是否正确
控制台报错 `Cannot read property 'addEventListener' of null`	元素还没加载完就执行 JS	把 `<script>` 放在 `</body>` 前，或用 `DOMContentLoaded` 事件
中文乱码	文件保存编码不是 UTF-8	在 VS Code 右下角点编码，选“通过编码保存”→ UTF-8
Git 提交失败	没配置用户名/邮箱	运行 `git config --global user.name "你的名字"` 和 `git config --global user.email "你的邮箱"`

下一步怎么学？我的真心建议

不要追求“学完再做”
我见过太多人卡在“我要先学完 JS 再做项目”，结果永远没开始。边做边学才是王道！
善用免费资源
- MDN Web Docs（https://developer.mozilla.org/）：JS 官方文档，权威又易懂
- freeCodeCamp（https://www.freecodecamp.org/）：免费互动课程
- GitHub Explore：看看别人的小项目，偷师学艺！
从小产品做起
你的下一个项目可以是：
- 天气查询小工具
- 密码生成器
- 番茄钟计时器
  关键是：解决一个真实的小问题。
勇敢开源，不怕丢人
我的第一个项目代码写得稀烂，但正是那些 issue 和 PR（Pull Request），让我进步飞快。完成比完美重要一万倍！

最后说两句

写这篇教程，是因为我真心希望你能迈出第一步。每个大神，都曾是个对着空白编辑器发呆的新手。

你的 To-Do List 可能很简单，但它代表了你从“消费者”变成“创造者”的转折点。当你在 GitHub 上按下 “Public” 的那一刻，你就已经是开源世界的一员了。

所以，别等了！打开 VS Code，新建一个文件夹，写下第一行 console.log("Hello, World!") 吧。

我在 GitHub 的 Issues 区等你来提问 😉

标签:产品Javascript项目资源

最热最新

暂无评论

为你推荐

暂无相关推荐

从0到1，我的第一个开源项目竟然是用JavaScript写的？

为什么是 JavaScript？它到底能干啥？

第一步：搭好你的“厨房”——开发环境准备

你需要准备什么？

安装步骤（超简单）

第二步：认识你的“食材”——核心概念扫盲

1. 变量（Variable） → 就像贴了标签的盒子

2. 函数（Function） → 一段可以重复使用的“菜谱”

3. 事件（Event） → 用户操作触发的“开关”

4. DOM（Document Object Model） → 网页的“骨架”

第三步：动手做！打造你的第一个产品

步骤 1：创建项目文件夹

步骤 2：写 HTML 结构（`index.html`）

步骤 3：加点样式（`style.css`）

步骤 4：写 JS 逻辑（`app.js`）——重点来了！

步骤 5：运行看看！

第四步：把它变成“开源项目”

1. 初始化 Git 仓库

2. 创建 GitHub 仓库

3. 推送到 GitHub

新手常踩的坑 & 解决方案

下一步怎么学？我的真心建议

最后说两句

评论 0

为你推荐

精选内容

从0到1，我的第一个开源项目竟然是用JavaScript写的？

为什么是 JavaScript？它到底能干啥？

第一步：搭好你的“厨房”——开发环境准备

你需要准备什么？

安装步骤（超简单）

第二步：认识你的“食材”——核心概念扫盲

1. 变量（Variable） → 就像贴了标签的盒子

2. 函数（Function） → 一段可以重复使用的“菜谱”

3. 事件（Event） → 用户操作触发的“开关”

4. DOM（Document Object Model） → 网页的“骨架”

第三步：动手做！打造你的第一个产品

步骤 1：创建项目文件夹

步骤 2：写 HTML 结构（index.html）

步骤 3：加点样式（style.css）

步骤 4：写 JS 逻辑（app.js）——重点来了！

步骤 5：运行看看！

第四步：把它变成“开源项目”

1. 初始化 Git 仓库

2. 创建 GitHub 仓库

3. 推送到 GitHub

新手常踩的坑 & 解决方案

下一步怎么学？我的真心建议

最后说两句

评论 0

为你推荐

相关推荐

精选内容

步骤 2：写 HTML 结构（`index.html`）

步骤 3：加点样式（`style.css`）

步骤 4：写 JS 逻辑（`app.js`）——重点来了！