一、前端

1.1 html 语义化标签，BEM 命名规范

1.1.1 HTML语义化标签

定义：拥有天然语义标识的HTML标签，摒弃全div布局，优化SEO、无障碍阅读、代码可读性。
常用标签分类：

标签	用途
<header>	区块/页面头部
<nav>	导航栏
<main>	页面唯一主体内容
<section>	内容分块
<article>	独立内容（商品卡片、文章）
<footer>	页脚区域

错误写法：全div嵌套；正确写法：用语义标签划分页面层级。

1.1.2 BEM命名规范

BEM = Block(块)__Element(元素)–Modifier(修饰状态)

• Block：独立功能模块，独立复用，例goods-card
• Element：块内部子元素，双下划线__拼接，例goods-card__title
• Modifier：样式/状态变体，双横线--拼接，例goods-card__title--hot

示例代码：

<article class="goods-card">
  <h4 class="goods-card__title goods-card__title--hot">爆款玩偶</h4>
  <p class="goods-card__desc">毛绒公仔</p>
</article>

使用价值：杜绝CSS类名冲突，团队样式统一。

1.2 es6 array API 正则

1.2.1 高频ES6数组API

• map：遍历映射，返回等长新数组，数据格式化
• filter：按条件筛选，返回符合条件数组
• reduce：累加、数组去重、多维数据合并
• find：匹配首个符合条件元素，无则undefined
• some/every：存在匹配/全部匹配，返回布尔值

1.2.2 正则搭配数组实战

// 手机号正则 + 数组过滤
const phoneReg = /^1[3-9]\d{9}$/
const user = [{name:'A',phone:'13511112222'},{name:'B',phone:'12345'}]
const validUser = user.filter(item=>phoneReg.test(item.phone))
console.log(validUser)

落地场景：表单批量校验、后端接口数据清洗。

1.3 你不知道的JavaScript：js执行机制和原型链

1.3.1 JS执行机制（事件循环EventLoop）

JS单线程运行，执行优先级：同步代码 > 微任务(Promise/await) > 宏任务(setTimeout)
一轮调用栈清空后，优先清空微任务队列，再执行单个宏任务，循环往复即事件循环，面试必考。

1.3.2 原型链

每个对象自带__proto__隐式原型，指向构造函数prototype；访问属性时逐层向上查找原型，链路构成原型链。
作用：实现原型继承、公用方法挂载原型节省内存。

二、后端

2.1 Python List & Dict

• List：有序可变数组，下标取值，批量存列表数据，接口列表结果存储；增删：append/pop
• Dict：键值对，key唯一，结构化数据存储，接口标准返回体首选；dict[key]取值，JSON天然对应字典

简易示例：

# 接口返回组装
res = {
    "code":200,
    "data":[{"id":1,"name":"商品1"},{"id":2,"name":"商品2"}]
}

2.2 node process & esm

2.2.1 process

Node全局进程对象：

• process.env：读取环境变量，区分生产/开发环境
• process.argv：获取启动命令行参数，项目启动配置读取

2.2.2 ESM模块化

文件后缀.mjs或package.json配置"type":"module"启用ES模块；import/export替代CommonJS的require/module.exports，前端后端统一模块化语法。

2.3 restful api 设计

核心准则：URL只用名词，HTTP方法区分动作

请求方式	功能	接口示例
GET	查询	/orders查全部订单，/orders/1查id=1订单
POST	新增	/orders创建订单
PUT	全量修改	/orders/1全量更新订单
PATCH	局部修改	/orders/1只改订单状态
DELETE	删除	/orders/1删除订单

禁用：/addOrder /deleteOrder?id=1（URL携带动词，非REST规范）
统一返回JSON格式：

{"code":200,"data":{},"msg":"操作成功"}

三、AI

3.1 prompt提示词工程

参考课程：DeepLearning Prompt开发课
核心思路：清晰指令+限定格式+约束条件，精准控制大模型输出结果，不用复杂机器学习即可快速搭建NLP应用。
优势：传统ML开发NLP系统需数天~数周，Prompt开发仅需几分钟落地。

3.2 AIGC 接口

定义：大模型厂商对外开放RESTful接口，后端通过HTTP请求携带API_KEY+Prompt调用大模型，获取生成结果。
通用调用格式：POST /v1/chat/completions，入参包含提示词、模型参数，出参返回AI生成文本；按token计费，是AI小程序/网站底层依赖。

3.3 NLP四大基础任务

3.3.1 情感分类 sentiment analysis

三分类：正面/负面/中性；落地：电商评论质检、客服舆情预警、商品好评分析。
例：玩偶评论「柔软可爱但偏小」→中性评价。

3.3.2 信息提取 information extraction

从原文抽取关键实体：人名、产品名、价格、物流信息，结构化输出。

3.3.3 主题推断

判断文本包含的指定主题，0/1标注是否命中。

3.3.4 文本总结 summarization

按约束（字数、聚焦维度）精简长文本；落地：行政文档提炼、商品评论汇总、资讯精简。

3.4 Node实战：批量评论总结（完整可运行代码）

配套completions.mjs封装getCompletion请求AIGC接口

// index.mjs
import {getCompletion} from './completions.mjs';

async function main() {
    // 四条电商原始评论
    const prod_review_zh = `
这个熊猫公仔是我给女儿的生日礼物，她很喜欢，去哪都带着。
公仔很软，超级可爱，面部表情也很和善。但是相比于价钱来说，
它有点小，我感觉在别的地方用同样的价钱能买到更大的。
快递比预期提前了一天到货，所以在送给女儿之前，我自己玩了会。
`
    const review_2 = `
我想为我的卧室找一个漂亮的灯，这款灯还有额外的存储空间，价格也不太高。
购买后很快就收到了，两天就送到了。但在运输过程中，灯的拉链断了，公司态度很好，发来了一条新的。新的拉链也在几天内就到了。这个灯非常容易装配。后来，我发现缺少一个部分，所以我联系了他们的客户支持，他们很快就给我寄来了缺失的部件！我觉得这是一家非常关心他们的客户和产品的好公司。
`
const review_3 = `
我的牙科卫生师推荐我使用电动牙刷，这就是我购买这款牙刷的原因。目前为止，我发现电池的续航时间颇为令人印象深刻。在初次充电并在第一周保持充电器插头插入以调节电池状态之后，我已经将充电器拔掉，并在过去的3周里，每天两次刷牙都使用同一次充电。然而，这款牙刷的刷头实在太小了。我见过的婴儿牙刷都比这个大。我希望牙刷头能做得更大一些，搭配不同长度的刷毛更好地清洁牙齿间缝，因为现有的无法做到这一点。总的来说，如果你能以大约50美元的价格购入这款电动牙刷，那它就物超所值。厂家配套的替换刷头价格相当昂贵，但你可以买到价格更为合理的通用款。使用这款牙刷让我感觉像每天都去看了牙医一样，我的牙齿感觉洁净如新！
`
const review_4 = `
他们还在11月把17件套系统以大约$49的优惠价格销售，几乎是五折。但不明原因（轻易就可以归咎为价格欺诈）在到了12月第二周，同一套系统的价格一下儿飙升到了$70-$89之间。11件套系统的价格也从之前的优惠价$29上升了大概$10。看上去还算公道，但如果你仔细观察底部，会发现刀片锁定的部位相比几年前的版本要略逊一筹，所以我打算非常小心翼翼地使用（例如，我会将像豆子、冰块、大米之类的硬质食材先用搅拌机压碎，然后调到我需要的份量，再用打发刀片研磨成更细的粉状，制作冰沙时我首选交叉刀片，如果需要更细腻些或者少些浆糊状，我会换成平刀）。在制作果昔时，把将要用的水果和蔬菜切片冷冻是个小技巧（如果你打算用菠菜，要先稍微焖炖软，再冷冻，制作雪葩时，用一个小到中号的食品加工器就行）这样就不用或者很少加冰块到你的果昔了。大约一年后，电机开始发出一些可疑的声音。我联系了客服，但保修期已经过期，所以我只好另购一台。友情提示：这类产品的整体质量都在下滑，所以他们更多的是利用品牌知名度和消费者的忠诚度来保持销售。我在两天之后就收到了它。
`
    const reviews = [review_1, review_2, review_3, review_4];
    // 循环批量总结评论
    for(let review of reviews){
        const prompt =`
          你的任务是从电子商务网站上的产品评论中提取相关信息。
          请对三个反引号之间的评论文本进行概括，最多20个字符。
          评论文本：\`\`\`${review}\`\`\`
          `
        const response = await getCompletion(prompt);
        console.log('评论摘要：',response,'\n');
    }
}
main();

completions.mjs 自行封装axios/fetch请求AIGC服务商接口，填入平台Key即可运行。

四、全文总结

本文串联前端工程规范、JS底层原理、后端常用数据结构与接口设计、AIGC+NLP落地方案，打通传统全栈开发与AI应用落地链路；依托Prompt工程无需机器学习算法，即可快速落地四大经典NLP业务，是当下全栈开发低成本接入AI的主流方案。

五、核心知识点复盘

1. 前端：语义化优化工程规范性，BEM解决CSS样式冲突；ES6数组+正则是数据处理基础；事件循环、原型链是JS底层核心。
2. 后端：Python List/Dict是数据载体；Node process管理进程环境，ESM统一前后端模块；RESTful是工业级接口标准。
3. AI：Prompt快速构建NLP系统，AIGC API是AI产品接入标准；情感分类、摘要、实体抽取、主题识别是商用NLP高频场景。

六、常见问题/避坑指南

前端避坑

1. BEM不要随意缩写命名，缩写过多造成可读性下降；
2. 事件循环易错点：await后面代码属于微任务，定时器永远延后执行。

后端避坑

1. REST接口不要在GET请求体内传参，部分网关会丢弃body数据；
2. ESM与CommonJS混用易报错，统一项目type配置。

AI&NLP避坑

1. Prompt描述模糊会造成大模型输出不可控，必须增加字数、维度、格式限制；
2. AIGC接口调用注意限流、异常捕获，批量循环请求增加延时，避免API超限扣费。