docs(cn): integrations/javascript translation (#30)

Author: HerbertHe

integrations/javascript.md

@@ -1,46 +1,46 @@
 <Logo name="javascript" class="logo-float-xl"/>
 
-# Windi CSS JavaScript API
+# Windi CSS 的 JavaScript API {#windi-css-javascript-api}
 
 <PackageInfo name="windicss" author="voorjaar" />
 
-## About
+## 关于 {#about}
 
-If using the CLI does not fit your workflow, you could directly use the Windi CSS API.
+如果使用命令行工具不能适配你的工作流，你可以直接使用 Windi CSS API。
 
-## Install
+## 安装 {#install}
 
-Add the package:
+添加包:
 
 ```bash
 npm i -D windicss
 ```
 
-## Usage
+## 用法 {#usage}
 
-### Setup with interpret mode
+### 以解释模式开始 {#setup-with-interpret-mode}
 
 ```js
 const { Processor } = require('windicss/lib')
 const { HTMLParser } = require('windicss/utils/parser')
 
 export function generateStyles(html) {
-  // Get windi processor
+  // 获取 windi processor
   const processor = new Processor()
 
-  // Parse all classes and put into one line to simplify operations
+  // 解析所有的 classes 并将它们放到一行来简化操作
   const htmlClasses = new HTMLParser(html)
     .parseClasses()
     .map(i => i.result)
     .join('')
 
-  // Generate preflight based on the html we input
+  // 基于我们传入的 html 生成预检样式
   const preflightSheet = processor.preflight(html)
 
-  // Process the html classes to an interpreted style sheet
+  // 将 html classes 处理为一个可解释的样式表
   const interpretedSheet = processor.interpret(htmlClasses).styleSheet
 
-  // Build styles
+  // 构建样式
   const APPEND = false
   const MINIFY = false
   const styles = interpretedSheet.extend(preflightSheet, APPEND).build(MINIFY)
@@ -49,24 +49,24 @@ export function generateStyles(html) {
 }
 ```
 
-### Setup with compile mode
+### 以编译模式开始 {#setup-with-compile-mode}
 
-Compile mode requires a bit more leg work to swap out the compiled classnames for the current ones.
+编译模式需要更多的工作来替换当前编译的 classname。
 
-Read more about compile mode [here](/posts/modes.html).
+在 [这里](/posts/modes.html) 可以了解更多关于编译模式的内容。
 
 ```js
 const { Processor } = require('windicss/lib')
 const { HTMLParser } = require('windicss/utils/parser')
 
 export function generateStyles(html) {
-  // Get windi processor
+  // 获取 windi processor
   const processor = new Processor()
 
-  // Parse html to get array of class matches with location
+  // 解析 html 获取与 location 匹配的 class 数组
   const parser = new HTMLParser(html)
 
-  // Generate preflight based on the html we input
+  // 基于我们输入的 html 生成预检样式
   const preflightSheet = processor.preflight(html)
 
   const PREFIX = 'windi-'
@@ -75,29 +75,29 @@ export function generateStyles(html) {
   let indexStart = 0
 
   parser.parseClasses().forEach((p) => {
-    // add HTML substring from index to match start
+    // 将 HTML 子字符串添加到从索引到匹配开始的位置
     outputHTML += html.substring(indexStart, p.start)
 
-    // generate stylesheet
+    // 生成样式表
     const style = processor.compile(p.result, PREFIX)
 
-    // add the styleSheet to the styles stack
+    // 将样式表加到样式堆栈
     outputCSS.push(style.styleSheet)
 
-    // append ignored classes and push to output
+    // 添加被忽略的 classes 并添加到 output
     outputHTML += [style.className, ...style.ignored].join(' ')
 
-    // mark the end as our new start for next itteration
+    // 为下一次迭代将结束的位置标记为新的开始
     indexStart = p.end
   })
 
-  // append the remainder of html
+  // 追加 html 其余的部分
   outputHTML += html.substring(indexStart)
 
-  // Build styles
+  // 构建样式
   const MINIFY = false
   const styles = outputCSS
-    // extend the preflight sheet with each sheet from the stack
+    // 为堆栈中的每个样式表拓展预检样式的样式表
     .reduce((acc, curr) => acc.extend(curr), preflightSheet)
     .build(MINIFY)
 
@@ -108,57 +108,57 @@ export function generateStyles(html) {
 }
 ```
 
-### Setup with attributify mode
+### 以属性模式开始 {#setup-with-attributify-mode}
 
-Attributify mode requires a bit more leg work to parse each individual attribute.
+属性模式需要更多的工作来解析每个独立的属性.
 
-Read more about attributify mode [here](/posts/v30.html#attributify-mode)
-And you can find the syntax [here](/posts/attributify.html)
+在 [这里](/posts/v30.html#attributify-mode) 了解更多关于属性模式的内容
+并且你可以在 [这里](/posts/attributify.html) 找到语法
 
 ```js
 const { Processor } = require('windicss/lib')
 const { HTMLParser } = require('windicss/utils/parser')
 
 export function generateStyles(html) {
-  // Get windi processor
+  // 获取 windi processor
   const processor = new Processor()
 
-  // Parse html to get array of class matches with location
+  // 解析 html 获取与 location 匹配的 class 数组
   const parser = new HTMLParser(html)
 
-  // Generate preflight based on the html we input
+  // 基于我们输入的 html 生成预检样式
   const preflightSheet = processor.preflight(html)
 
-  // Always returns array
+  // 总是返回数组
   const castArray = val => (Array.isArray(val) ? val : [val])
 
   const attrs = parser.parseAttrs().reduceRight((acc, curr) => {
-    // get current match key
+    // 获取当前匹配到的 key
     const attrKey = curr.key
 
-    // ignore class or className attributes
+    // 忽略 class 或 className 属性
     if (attrKey === 'class' || attrKey === 'className') return acc
 
-    // get current match value as array
+    // 以数组类型获取当前匹配到的值,
     const attrValue = castArray(curr.value)
 
-    // if current match key is already in accumulator
+    // 如果当前匹配到的 key 早在累加器之中了
     if (attrKey in acc) {
-      // get current attr key value as array
+      // 以数组类型获取当前属性的键值
       const attrKeyValue = castArray(acc[attrKey])
 
-      // append current value to accumulator value
+      // 将当前的值追加到累加器值
       acc[attrKey] = [...attrKeyValue, ...attrValue]
     }
     else {
-      // else add atrribute value array to accumulator
+      // 将属性值数组添加到累加器
       acc[attrKey] = attrValue
     }
 
     return acc
   }, {})
 
-  // Build styles
+  // 构建样式
   const MINIFY = false
   const styles = processor
     .attributify(attrs)