Skip to content

Commit 7c89fd2

Browse files
LonggerererLonggererer
committed
first commit
0 parents  commit 7c89fd2

40 files changed

+14315
-0
lines changed

‎.gitignore‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
# Dependencies
2+
/node_modules
3+
4+
# Production
5+
/build
6+
7+
# Generated files
8+
.docusaurus
9+
.cache-loader
10+
11+
# Misc
12+
.DS_Store
13+
.env.local
14+
.env.development.local
15+
.env.test.local
16+
.env.production.local
17+
18+
npm-debug.log*
19+
yarn-debug.log*
20+
yarn-error.log*

‎README.md‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
# Website
2+
3+
This website is built using [Docusaurus](https://docusaurus.io/), a modern static website generator.
4+
5+
### Installation
6+
7+
```
8+
$ yarn
9+
```
10+
11+
### Local Development
12+
13+
```
14+
$ yarn start
15+
```
16+
17+
This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
18+
19+
### Build
20+
21+
```
22+
$ yarn build
23+
```
24+
25+
This command generates static content into the `build` directory and can be served using any static contents hosting service.
26+
27+
### Deployment
28+
29+
Using SSH:
30+
31+
```
32+
$ USE_SSH=true yarn deploy
33+
```
34+
35+
Not using SSH:
36+
37+
```
38+
$ GIT_USER=<Your GitHub username> yarn deploy
39+
```
40+
41+
If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.

‎babel.config.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
module.exports = {
2+
presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
3+
};

‎docs/code-editor.mdx‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
---
2+
sidebar_position: 4
3+
---
4+
5+
# 代码编辑
6+
7+
JS-Encoder 的代码编辑窗口基于 Codemirror 开发，Codemirror 具有良好的性能、众多的插件和功能扩展性，这就是使用它的原因。
8+
9+
## 窗口
10+
11+
初始的代码编辑窗口如下：
12+
13+
<img style={{width: "500px"}} src="http://img-cdn.jsencoder.cn/docs/images/editor-window.png-toWebp.webp"/>
14+
15+
如你所见，JS-Encoder 将 HTML、CSS 和 JavaScript 分成独立的窗口显示。这一方面是因为这三个本来就是不同的技术，另一方面避免了在代码量多的情况下造成代码混乱的问题，分成三个窗口看上去更加整洁。
16+
17+
在许多时候你会想同时看见多个窗口的代码，在 V4 中 JS-Encoder 提供了这个功能，你可以拖动tab对窗口进行自由分割以及合并：
18+
19+
<img style={{width: "700px"}} src="http://img-cdn.jsencoder.cn/docs/images/split-view.webp"/>
20+
21+
如果你想专注于代码编写，可以点击右上角的箭头按钮将预览窗口隐藏：
22+
23+
<img style={{width: "700px"}} src="http://img-cdn.jsencoder.cn/docs/images/hide-preview.webp"/>
24+
25+
## 工具栏
26+
27+
每个编辑器窗口右上角展示着该（预处理）语言可用的操作，如格式化，markdown 工具栏。
28+
29+
## 更简洁的 HTML
30+
31+
在 HTML 窗口中，你不需要使用 `!` + `Tab` 或者手动去生成 HTML 头部，JS-Encoder 会在执行代码前将各个窗口的代码放到相应的位置上执行。下边是一个例子：
32+
33+
```HTML
34+
<!DOCTYPE html>
35+
<html lang="en">
36+
<head>
37+
<meta charset="UTF-8" />
38+
<meta name="viewport" content="width=device-width, initial-scale=1" />
39+
<title></title>
40+
<style>
41+
/* CSS 窗口代码 */
42+
</style>
43+
</head>
44+
<body translate="no">
45+
<!-- HTML 窗口代码 -->
46+
<script>
47+
/* JavaScript 窗口代码 */
48+
</script>
49+
</body>
50+
</html>
51+
```
52+
53+
但这并不意味着你不可以在 HTML 窗口中编写 CSS 和 JavaScript，只是你需要用 `<style></style>` 和 `<script></script>` 标签将其包裹：
54+
55+
## 编码
56+
57+
### Emmet
58+
59+
Emmet 是很好用的功能，你可以在编写 HTML、CSS 和 JavaScript 代码的时候按下 `Tab` 进行自动补全。
60+
61+
目前有如下（预处理）语言支持 Emmet：
62+
63+
- HTML
64+
- Pug
65+
- CSS
66+
- Sass
67+
- Scss
68+
- Less
69+
- Vue
70+
71+
下面是一个例子：
72+
73+
<img style={{width: "400px"}} src="http://img-cdn.jsencoder.cn/docs/images/emmet.webp"/>
74+
75+
你可以在侧边栏的[编码设置](./sidebar/settings)中开启/关闭该功能。
76+
77+
### Linter
78+
79+
目前有如下（预处理）语言支持 Linter：
80+
81+
- HTML
82+
- CSS
83+
- Sass
84+
- Scss
85+
- Less
86+
- Stylus
87+
- JavaScript
88+
- TypeScript
89+
90+
下面是一个例子：
91+
92+
<img style={{width: "400px"}} src="http://img-cdn.jsencoder.cn/docs/images/linter.webp"/>
93+
94+
你可以在侧边栏的[编码设置](./sidebar/settings)中开启/关闭该功能。
95+
96+
### 格式化
97+
98+
JS-Encoder 使用 Prettier 来格式化代码，你可以在编辑窗口右上角工具栏的**更多**选项中选择格式化代码来让代码变得更美。
99+
100+
目前有如下（预处理）语言支持格式化：
101+
102+
- HTML
103+
- Markdown
104+
- CSS
105+
- Sass
106+
- Scss
107+
- Less
108+
- JavaScript
109+
- TypeScript
110+
- Babel
111+
- Vue
112+
113+
### 智能提示
114+
115+
现代编辑器中智能提示是不可或缺的功能。尤其是当语言的基础 API 愈加繁多的情况下，智能提示可以大大增加编码效率。
116+
117+
下面是一个例子：
118+
119+
<img style={{width: "400px"}} src="http://img-cdn.jsencoder.cn/docs/images/autocomplete.webp"/>
120+
121+
#### LSP
122+
123+
Codemirror 自带的智能提示功能很好，在编写 HTML、CSS 这类语言时完全够用，但仍存在问题：无法动态分析代码中所声明的变量和属性。
124+
125+
JS-Encoder 通过接入 TypeScript LSP 解决了这个问题。
126+
127+
如果想了解具体实现方式，请看：[LSP](./deep/LSP)
128+
129+
## 内置插件
130+
131+
### 代码搜索
132+
133+
JS-Encoder 开发了一个与 VSCode 相似的搜索框插件，Codemirror 内置的搜索插件的结构无法自定义，但所用到的功能都被 Codemirror 封装成了一个一个的 Command，所以完全可以自己做一个新插件代替。
134+
135+
<img style={{width: "300px"}} src="http://img-cdn.jsencoder.cn/docs/images/search.png-toWebp.webp"/>
136+
137+
在编辑器中通过 <kbd>Ctrl/Cmd</kbd>+<kbd>F</kbd> 打开搜索框进行使用。
138+
139+
:::note
140+
之后该插件将会作为独立的 npm 包便于其他开发者使用。
141+
:::
142+
143+
### Markdown工具栏
144+
145+
使用工具栏可以更快的生成 Markdown 语法，配合[快捷键](./sidebar/shortcut)效果更佳哦。
146+
147+
<img style={{width: "450px"}} src="http://img-cdn.jsencoder.cn/docs/images/markdown-tools.webp"/>

‎docs/console.mdx‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
---
2+
sidebar_position: 6
3+
---
4+
5+
# 控制台
6+
7+
JS-Encoder 的控制台相比旧版本更加强大，支持更多 console 方法以及数据格式的展示，同时展示的效果也更加偏向于浏览器控制台。
8+
9+
新版控制台：
10+
<img style={{width: "500px"}} src="http://img-cdn.jsencoder.cn/docs/images/console.png-toWebp.webp"/>
11+
12+
旧版控制台：
13+
<img style={{width: "500px"}} src="http://img-cdn.jsencoder.cn/docs/images/old-console.png-toWebp.webp"/>
14+
15+
旧版本的控制台的日志是使用 codemirror 进行高亮和代码伸缩的，并且在这之前需要经历一系列的数据转换逻辑，这个过程是非常低效的，且展示效果相对浏览器控制台要差得多。
16+
17+
JS-Encoder V4 重写了控制台逻辑，采用新的方案来渲染日志，如果你想知道更多，请看[控制台如何展示日志](./deep/console)。
18+
19+
目前控制台支持如下 console 方法：
20+
21+
- log
22+
- info
23+
- warn
24+
- error
25+
- assert
26+
- time
27+
- timeLog
28+
- timeEnd
29+
- clear
30+
- table
31+
32+
其他方法还未支持，可在浏览器控制台上查看输出。
33+
34+
## 工具栏
35+
36+
<img style={{width: "500px"}} src="http://img-cdn.jsencoder.cn/docs/images/console-tool.png-toWebp.webp"/>
37+
38+
如图所示，有如下信息：
39+
40+
1. Console 旁边的数字 "28" 代表当前的日志条数。
41+
2. 右边的三个高亮图标依次代表着当前的错误（error）、警告（warn）和信息（info）日志条数。
42+
3. 右上方的箭头可以最小化控制台窗口，如果你不需要输出日志只想看效果，那么点击它！
43+
4. 在过滤下拉框中选择你想要展示的日志类型，默认展示全部（All），有如下几个选项：
44+
- All（全部）
45+
- Message（普通日志如 log）
46+
- Info（信息日志 info）
47+
- Warn（警告日志 warn）
48+
- Error（错误日志 error）
49+
5. 如果想清除所有 console，点击右下脚的禁止图标。
50+
6. 旁边的设置图标点击后可以进行控制台相关设置，目前只有一项：每次执行前是否自动清空历史日志。
51+
52+
## 命令
53+
54+
与浏览器控制台一样，你可以直接在控制台中输入命令并执行，在调试的时候非常有用。
55+
56+
蓝色箭头所指向的就是你可以输入命令的地方，输入命令按下 <kbd>Enter</kbd> 执行：
57+
58+
<img style={{width: "400px"}} src="http://img-cdn.jsencoder.cn/docs/images/command.webp"/>
59+
60+
### 历史命令
61+
62+
你所执行的历史命令会被保存起来，可以通过方向键 <kbd>Up</kbd> 和 <kbd>Down</kbd> 来切换这些历史命令，并按<kbd>Enter</kbd> 执行：
63+
64+
<img style={{width: "400px"}} src="http://img-cdn.jsencoder.cn/docs/images/history-command.webp"/>
65+

‎docs/construction.mdx‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
---
2+
sidebar_position: 2
3+
---
4+
5+
# 基本结构
6+
7+
按照大体功能的划分，可以把 JS-Encoder 看作如下几个模块组成：
8+
9+
1. 侧边工具栏
10+
2. 编辑器窗口
11+
3. 预览窗口
12+
4. 控制台
13+
14+
## 侧边工具栏
15+
16+
图中展示了侧边工具栏的主要选项，从上至下依次为：
17+
18+
<div style={{display: "flex"}}>
19+
<img style={{width: "30px"}} src="http://img-cdn.jsencoder.cn/docs/images/sidebar.png-toWebp.webp"/>
20+
<div style={{marginLeft: "10px"}}>
21+
22+
1. [模板](./sidebar/template)（选择包含特定配置和代码的模板）
23+
2. [预处理](./sidebar/prep)（选择预处理语言如 Scss、Typescript）
24+
3. [编码设置](./sidebar/settings)（在这里进行编码相关设置）
25+
4. [库](./sidebar/lib)（在这里添加示例中所用到的外部库链接）
26+
5. [上传代码](./sidebar/upload)（选择本地代码文件上传到 JS-Encoder 进行编辑）
27+
6. [下载代码](./sidebar/download)（下载代码到本地保存）
28+
7. 快捷键
29+
8. 更新日志（查看来自于 Github 仓库的 Release 信息）
30+
9. 帮助文档（链接到当前文档）
31+
</div>
32+
</div>
33+
34+
## 编辑器窗口
35+
36+
<img style={{width: "500px"}} src="http://img-cdn.jsencoder.cn/docs/images/editor-window.png-toWebp.webp"/>
37+
38+
编辑器窗口是最常使用的区域，示例代码的编写就在这里。
39+
40+
默认的编辑器窗口有三个 Tab：HTML、CSS 和 JavaScript，每个 Tab 的名字对应着代码所使用的（预处理）语言。可以点击 Tab 切换编辑窗口，也可以用鼠标拖动 Tab 来分割编辑器视图，如果想同时看到多个 Tab 所对应的代码，那这是一个很方便的功能。
41+
42+
更详细的说明请看 [代码编辑](./code-editor)。
43+
44+
## 预览窗口
45+
46+
<img style={{width: "500px"}} src="http://img-cdn.jsencoder.cn/docs/images/preview-window.png-toWebp.webp"/>
47+
48+
当编辑器中输入了代码，在检测到变更后，JS-Encoder 将会对编辑器中的代码进行一系列处理，最后将结果展示在预览窗口中。
49+
50+
预览窗口上方有一个小工具栏，可以进行对预览窗口的刷新和放大。
51+
52+
更详细的说明请看 [预览](./preview)。
53+
54+
## 控制台
55+
56+
<img style={{width: "500px"}} src="http://img-cdn.jsencoder.cn/docs/images/console-window.png-toWebp.webp"/>
57+
58+
如果你在代码中输出了值，如 `console.log(123)`，那么被输出的数据将会展示在控制台中，还可以在控制台下方输入命令进行调试。
59+
60+
更详细的说明请看 [控制台](./console)。

‎docs/deep/LSP.mdx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
sidebar_position: 1
3+
---
4+
5+
# LSP
6+
7+
:::tip
8+
该文档目前尚未完成，正在赶工中~
9+
:::

‎docs/deep/_category_.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"label": "深入了解",
3+
"position": 7,
4+
"link": {
5+
"type": "generated-index",
6+
"description": "深入了解 JS-Encoder"
7+
}
8+
}

‎docs/deep/console.mdx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
sidebar_position: 3
3+
---
4+
5+
# 控制台如何展示日志
6+
7+
:::tip
8+
该文档目前尚未完成，正在赶工中~
9+
:::

‎docs/deep/loop.mdx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
sidebar_position: 2
3+
---
4+
5+
# 循环检查
6+
7+
:::tip
8+
该文档目前尚未完成，正在赶工中~
9+
:::

0 commit comments

Comments
 (0)