前端CMS【免费下载链接】wp-calypsoThe JavaScript and API powered WordPress.com项目地址https://gitcode.com/gh_mirrors/wp/wp-calypso点击查看免费下载导读Name Pulse域名脉搏是 WordPress.com 域名搜索wp-calypso 仓库中的packages/domain-search包里一套独立的结果模式当配置项config.showNamePulseSearch开启且存在查询词时DomainSearch会渲染NamePulseResults取代经典结果页以边输入边出结果的即时体验展示精确匹配、Top 结果、相关匹配与创意匹配等分区。本文以 Name Pulse README 为核心骨架深入对应源码与测试讲解它的查询模式识别、判定verdict缓存、批量可用性检查、溢价域名定价、Bundle 建议与 TLD 过滤等完整机制帮助读者理解这一套每敲一次键盘就重排网格、请求只在查询落定后发出的前端架构。一、整体架构Name Pulse 如何取代经典结果页Name Pulse 模块位于 packages/domain-search/src/name-pulse模块边界由 index.ts 统一导出两个入口NamePulseSearchInput与NamePulseResults。README 明确说明其触发条件DomainSearchrendersNamePulseResultsinstead of the classic results page whenconfig.showNamePulseSearchis on and there is a query.也就是说Name Pulse 并非独立页面而是DomainSearch组件在配置开启且有查询时切换渲染的结果模式。它的数据请求全部走 DomainSearch 上下文useDomainSearch()中的queries与filter因此测试与 Storybook 可以通过 test-helpers/factories/name-pulse.ts 这类工厂替换查询选项而不是打网络 mock——这是模块可测试性的关键设计。入口组件 name-pulse-results.tsx 的渲染骨架非常清晰顶部是带过滤按钮的NamePulseSearchInput若有提示notice且 TLD 列表未出错渲染NamePulseSearchNotice用notice-${query}作为 key保证新搜索会把已关闭的提示重新带回来主体是一个以query为 key 的VStack依次渲染TLD 加载失败提示 → 精确匹配卡exact-match-card占位区里还包含 Bundle 卡→ Top 结果 → 无精确匹配时的宽幅 Bundle 卡 → 精确匹配网格Exact match for baseName→ 相关匹配Related matches→ 创意匹配Creative matches底部是Cart。name-pulse-results.tsx中还有一个值得注意的无障碍细节精确匹配卡用VisuallyHidden aria-livepolite播报%(domain)s is available.让屏幕阅读器用户不必等卡片替换占位符就能知道判定结果name-pulse-results.tsx。二、查询布局引擎五种模式决定渲染哪些分区所有这一条查询该显示哪些区块的判断都收敛在一个纯函数里getResultsLayout位于 helpers/get-results-layout.ts。它是查询字符串的纯函数不依赖网络状态。它先做归一化用trim()去掉首尾空白若含空白多词则不做 FQDN 探测若为单 token则调用detectFqdn( trimmed, tlds )判断是否是一个完整域名如coffee.com并解析出baseName、tld、fullDomain甚至子域名、未知后缀、免费子域名等附加信息helpers/detect-fqdn.ts计算baseName与wordCount进入getMode决策模式触发条件渲染的分区emptybaseName 长度 2不可注册的标签全部不渲染fqdn识别出完整域名coffee.comTop、exactGrid、suggestionssingle单个单词Top、exactGrid、suggestionskeyword2~3 个单词Top、exactGrid、suggestionsai单词数 ≥ 4AI_MODE_MIN_WORDS 4Top、suggestions、creativeexactGrid 关闭各模式对应的分区组合由SECTIONS_BY_MODE表驱动get-results-layout.ts。注意ai模式会额外开启creative创意匹配即 AI 生成建议而fqdn/single/keyword模式的创意分区都是关闭的。而在 hooks/use-name-pulse-search.ts 中布局被计算了两次一次用落定后的查询settledLayout决定 AI 模式一次用当前正在输入的查询layout决定各区实际渲染。注释解释了为什么这么做AI 模式会让精确匹配网格折叠、Top 结果切换数据源如果跟着用户输入实时变跨过 4 词边界的那一下就会让网格闪进闪出所以模式跟随落定查询区块挂载跟随实时输入。三、边输入边出结果300ms 落定窗口与请求节流useNamePulseSearch( query )是 Name Pulse 的核心编排 hookhooks/use-name-pulse-search.ts。它的核心哲学是Rows regenerate on every keystroke; availability and suggestion requests wait for the query to settle.即行rows每次按键都重新生成但可用性检查与建议请求必须等查询落定。实现方式是const [ settledQuery, setSettledQuery ] useState( query ); const isSettled query settledQuery; useEffect( () { const timer setTimeout( () setSettledQuery( query ), NAME_PULSE_QUERY_SETTLE_MS ); return () clearTimeout( timer ); }, [ query ] );NAME_PULSE_QUERY_SETTLE_MS 300见 helpers/constants.ts即最后一次敲击后停顿 300ms 才把settledQuery更新为当前查询随后可用性与建议请求才发出。这样半截输入既不会被检查也不会被打上不可用标记。同时 hook 里对 TLD 列表未到之前不生成任何行 有明确的注释约束。这一小节还实现了多个关键行为初始检查数量单词数 1 时首批检查NAME_PULSE_INITIAL_CHECK_MULTI_WORD 24个精确匹配单单词时检查一整批NAME_PULSE_INITIAL_CHECK_SINGLE_WORD 36个。Show more / 回填机制requestedNames状态跨搜索保留只有当前网格列出的才算数Top 结果回填超出首批切片的行比如首批批次失败后会通过requestNames补查。每区去重excludeDomains让每个分区丢弃上方已经列出的域名且是全量列表比较而非只看可见行所以展开某个分区永远不会让下方分区掉行helpers/exclude-domains.ts。Top 结果计数通过useViewportMatch响应式——平板宽度small 及以上、large 以下取NAME_PULSE_TOP_RESULTS_COUNT_TABLET 2桌面取NAME_PULSE_TOP_RESULTS_COUNT 3。注释解释了原因大断点以下网格只有两列第三张卡会孤零零占第二行。这个上限放在 JS 里而不是藏在 CSS 里是为了让被挤掉的域名回落到下方分区而不是凭空消失。四、判定缓存每域名一个查询5 分钟 TTL批量 36useNamePulseVerdictshooks/use-name-pulse-verdicts.ts是 Name Pulse 判定体系的基石。README 的表述非常精确hooks/use-name-pulse-verdicts.tsholds one react-query query per domain name ([ name-pulse-domain, name ], five-minute TTL): pending is WAITING, error is UNKNOWN, data is the verdict.落到代码上是export const namePulseVerdictQueryKey ( domainName: string ) [ name-pulse-domain, domainName ] as const;每个域名一个独立的 react-query 查询key 只含域名本身因此共享任何行、任何搜索只要列出同一域名就读同一个缓存判定名字离开网格再回来直接命中缓存渲染不发新请求状态映射pending →WAITING占位骨架error →UNKNOWN显示 Couldnt checkdata → 真正的判定两个非终态都不会被缓存retry: falseTTLstaleTime与gcTime都设为NAME_PULSE_VERDICT_TTL_MS 5 * 60 * 10005 分钟见 helpers/constants.tsnotifyOnChangeProps: [ data, isError ]combine结构化共享保证只有判定变化时才触发重渲染。批量请求器同一 tick 内的名字合并成 36 个一批这是 README 强调的实现细节Its query function batches the names asked for in one tick into parallel availability requests of 36。NamePulseAvailabilityBatcher类use-name-pulse-verdicts.ts实现了这一行为队列为空时用Promise.resolve().then( () this.flush() )把flush推迟到当前 tick 之后从而把 react-query 在同一 tick 内请求的所有名字收集进一个队列flush按NAME_PULSE_AVAILABILITY_BATCH_SIZE 36切片常量注释标明接口上限为 50每片并行发出一次queries.namePulseAvailability( batch )每个批次挂一个NAME_PULSE_SKELETON_TIMEOUT_MS 1000010 秒的定时器超时则 reject 该批所有名字表现为 UNKNOWN但数据稍后到达时仍会写入缓存通过commit所以骨架超时放弃、答案迟到仍落地。commit最终调用setNamePulseVerdict同文件顶部导出它先读缓存中的旧判定再执行mergeNamePulseVerdict合并。README 明确指出实时检查写入同一 key且携带is_realtime批量判定永远不覆盖它——这就是真实结果优先于批量结果的防覆盖规则合并逻辑见 helpers/result-status.ts 及 helpers/index.ts。五、溢价域名批量报价不可信时的每域名重查Premium溢价域名在 Name Pulse 里有专门的处理路径。README 解释得很直白Premium names are priced apart from the rest. The bulk check quotes every name at its TLDs standard rate, so an exact match it flags premium holds its badge and a skeleton whilecomponents/result-row.tsxfetches the registry price from the per-domainis-availablecheck, on the key the pre-cart check already uses.落到 components/result-row.tsx 中判断条件是const needsPremiumPrice result.status NamePulseDomainStatus.AVAILABLE !! result.is_premium ! result.is_realtime source exact;即精确匹配来源source exact、可用、是溢价、且非实时判定——这样的行不展示批量报价那是 TLD 标准价无法兑现而是保持 Premium 徽章 Checking price… 骨架同时按域名发起 per-domain 的queries.domainAvailability( domainName )检查获取注册局真实价格const { data: realtimeAvailability, isError: isPremiumPriceError } useQuery( { ...queries.domainAvailability( domainName ), enabled: needsPremiumPrice, } );关键点在于这个查询的 key 与预加入购物车检查和输入域名提示共享README 与源码注释均强调所以点击行加入购物车不会产生第二次请求即使查询被 disabled它也会报告那两个场景已经拉取的判定。拿到结果后setNamePulseVerdict把带is_realtime的判定写回共享缓存其余所有列出该域名的行立即读到真实价格result-row.tsx。行内的价格渲染Price子组件区分row与card两种形态卡片形态一行放得下完整报价——常规价划线、促销价、续费价依次排列行形态则更紧凑。促销价由getNamePulseSalePrice推导。此外判定失败UNKNOWN的行只留徽章不给价格也不等永远不会来的骨架TLD 有特殊要求的名字不在行内展示要求而是先加入购物车前的NamePulsePolicyNoticeDialog对话框确认溢价价格查询失败isPremiumPriceError时不显示骨架Suggestions come priced by the registry and render as they arrive——建议类行keyword/ai 来源由注册局直接定价因此不触发上述重查直接渲染。还有一个边界情况值得记录在不出售溢价的后缀上溢价名字直接读作不可用README 原话A premium name on a TLD we do not sell premiums on reads as unavailable.这一语义体现在 helpers/result-status.ts 的判定合并与pricing.ts的价格挑选逻辑中。六、精确匹配卡输入的完整域名离开网格当用户输入的是一个完整域名fqdn模式时该域名会离开网格单独渲染成一张NamePulseExactMatchCardcomponents/exact-match-card.tsxfed by the same per-domain check as the notice——即与顶部提示共用同一个 per-domaindomainAvailability查询。而被占用taken的名字没有卡片其行会留在网格里。组装逻辑在useNamePulseSearch内use-name-pulse-search.tsconst typedDomain isSettled ? ( layout.fqdn?.fullDomain ?? ) : ; const { data: typedDomainAvailability, isError: isTypedDomainError } useQuery( { ...queries.domainAvailability( typedDomain ), enabled: Boolean( typedDomain ), } ); const exactMatch useMemo( () getNamePulseExactMatch( layout.fqdn, typedDomainAvailability, isTypedDomainError ), [ layout.fqdn, typedDomainAvailability, isTypedDomainError ] );即查询落定后才检查输入的完整域名getNamePulseExactMatchhelpers/get-exact-match.ts根据检查结果决定返回卡片数据还是 null。卡片 UI 由经典建议组件拼装DomainSuggestionBadgeIts available! 与溢价时的 Premium 徽章、DomainSuggestionPrice常规价/促销价/续费价、DomainSuggestionPrimaryCTA与DomainSuggestionContinueCTA并复用DomainSuggestionContainerContext做容器度量。匹配原因match_reasons过滤掉exact-match本身后取最具体的一条展示因为头部已经写着 Exact match。卡片的 CTA 状态机已在购物车 → Continue有错误 → ErrorCTA 可重试否则 → PrimaryCTA。值得一提的渲染细节卡片替换占位符时不移动焦点所以判定结果用aria-live播报见 name-pulse-results.tsx卡片外层还带aria-busy与DomainSuggestion.Featured.Placeholder占位逻辑。七、Bundle 建议只在 .com 上锚定首个命中即胜出config.showBundleSuggestions开启时useNamePulseBundlehooks/use-name-pulse-bundle.ts会为输入域名及其 Top 结果请求 per-domain 的 bundle 端点。README 的完整描述是Withconfig.showBundleSuggestionson,hooks/use-name-pulse-bundle.tsasks the per-domain bundle endpoint for the typed domain, then each Top result, skipping any that is not a.com, and shows the first bundle found: beside the exact-match card, or under Top results when there is none. The backend only anchors bundles on an available.com, which is why the Top results are asked too.代码实现直接复刻了后端规则// Mirrors the backends bundle_triggers list, which Name Pulse does not fetch const isBundleTrigger ( fqdn: string ) fqdn.endsWith( .com );锚点列表来自useNamePulseSearch计算出的bundleAnchors先等所有依赖的判定就绪readyAnchors要求查询落定、Top 结果无 WAITING、精确匹配已有判定避免迟到的答案插队换卡锚点一旦确定就在本次搜索内保持keptAnchors按查询缓存只有后来发现被占用的名字会被剔除每个锚点按顺序useQueries并行请求queries.bundleForDomain( fqdn )跳过非.com第一个返回伴随域名domains.length 1的 bundle 胜出且后来的答案不会替换已展示的卡所以卡片不会来回切换锚点查询与经典的行内 bundle 行共享bundleForDomain缓存展示位置有精确匹配卡时放在卡片旁边没有精确匹配或输入域名被占用时放在 Top 结果下方name-pulse-bundle-wide宽幅容器见 name-pulse-results.tsx。八、过滤器经典按钮 Name Pulse TLD 列表NamePulseFiltercomponents/filter.tsx复用经典DomainSearchControls.FilterButton/FilterPopover但数据源换成 Name Pulse 的 TLD 查询queries.namePulseTlds()。README 说它shown on the results page only——它只出现在结果页由NamePulseSearchInput showFilter控制。注意过滤器只提供结尾endings选项因为精确匹配网格本身就是精确的不存在仅精确匹配开关showExactMatchesOnly{ false }。过滤的生效方式分三条路径README 与源码一致关键词建议keyword选择的后缀以tlds参数随建议请求重新拉取。在useNamePulseSuggestions中requestTlds会先排序再作为tlds传给端点——注释说明排序后相同的结尾组合无论顺序如何共享同一个缓存条目use-name-pulse-search.ts。精确匹配网格与 AI 建议两者忽略tlds参数改为客户端过滤。AI 建议走后端不感知tlds所以filterNamePulseSuggestions( results, filter.tlds )在前端按已选结尾过滤精确网格则通过gridTlds把 TLD 列表裁剪为已选结尾 输入域名的结尾再生成匹配use-name-pulse-search.ts。输入的完整域名保持自己的结尾typedTld会被保留在网格与卡片中不受过滤器影响READMEa typed domain keeps its ending。TLD 列表加载失败只影响精确匹配网格Top 结果也随之下架因为 Top 结果的数据来自精确网格但建议分区不受牵连——这就是hasTldsError只在layout.exactGrid.show时生效、且失败时提供 Try again 重试按钮的原因name-pulse-results.tsx。九、关键常量速查表Name Pulse 的全部调参集中在一个文件helpers/constants.ts。下表给出名称、值与用途方便后续排查常量值用途NAME_PULSE_TOP_RESULTS_COUNT3桌面端 Top 结果卡数上限NAME_PULSE_TOP_RESULTS_COUNT_TABLET2平板宽度 Top 结果卡数两列网格NAME_PULSE_PAGE_SIZE12Show more 每次点击与分区初始行数NAME_PULSE_AVAILABILITY_BATCH_SIZE36每次可用性请求的域名数接口上限 50NAME_PULSE_QUERY_SETTLE_MS300最后一次敲击后到请求发出的停顿NAME_PULSE_INITIAL_CHECK_SINGLE_WORD36单词查询首批精确匹配检查数一整批NAME_PULSE_INITIAL_CHECK_MULTI_WORD24多词查询首批检查数首页 缓冲NAME_PULSE_SKELETON_TIMEOUT_MS10000骨架槽位等待响应的超时NAME_PULSE_AI_TIMEOUT_MS8000传给建议端点让其先于骨架放弃提供方NAME_PULSE_VERDICT_TTL_MS300000可用性判定缓存的 staleTime 与 gcTime5 分钟十、模块边界与测试支撑Name Pulse 对导入边界有明确纪律README Imports 一节外部只能通过 index 导入../../name-pulse深路径导入会被 ESLint 拦截模块内部代码则可以使用任意 domain-search 内部实现。这保证了模块的可替换性与重构空间。测试方面模块在三个层面有覆盖组件测试components/test/下覆盖filter、result-row、results-section、search-inputhelpers 纯函数测试helpers/test/覆盖apply-filter、detect-fqdn、generate-exact-matches、get-exact-match、get-name-pulse-notice、get-results-layout、get-top-results、result-status、sanitizehooks 测试hooks/test/覆盖use-name-pulse-search、use-name-pulse-url-query、use-name-pulse-verdicts集成场景test/name-pulse-results.tsx与 Storybook 故事 name-pulse-results.stories.tsx。因为判定与建议查询都来自useDomainSearch()的queries测试只需替换查询工厂如test-helpers/factories/name-pulse.ts就能模拟完整搜索流无需拦截网络层——这正是 README 所说tests and Storybook replace them throughtest-helpers/factories/name-pulse.tsinstead of network mocks的落点。模块由 Automattic/yolo 团队负责维护见仓库根 .github/CODEOWNERS。十一、从 README 到实现一张数据流全景图把以上机制串起来Name Pulse 的一次完整交互数据流是用户敲击NamePulseResults每次按键重新生成行纯函数getResultsLayout决定模式与分区300ms 无输入后settledQuery落定TLD 列表、批量可用性检查36 个一批、keyword/AI 建议请求同时发出每域名判定写入[ name-pulse-domain, name ]缓存5 分钟内复用实时检查带is_realtime优先批量结果永不覆盖输入的完整域名走 per-domaindomainAvailability可用则渲染精确匹配卡被占用则留在网格其判定与顶部提示共享同一请求溢价精确匹配行保留徽章与骨架等待同 key 的 per-domain 重查拿注册局价格Bundle 按.com触发规则依序查询锚点首个带伴随域名的结果在精确卡旁或 Top 下方展示过滤器改动触发关键词建议带新tlds重新拉取网格与 AI 建议则客户端过滤。结语Name Pulse 并不是简单地把经典结果页换个皮肤而是一套围绕每键即时反馈 请求节流 判定缓存共享重新设计的搜索结果模式纯函数驱动的布局引擎、按 tick 合并的批量判定、5 分钟 TTL 的每域名缓存、实时结果优先于批量结果的合并规则以及专门为溢价定价与 Bundle 建议设计的重查路径共同构成了它的工程内核。对于希望理解或复用这套交互模式的开发者name-pulse 目录本身、它的 README、constants.ts 与各hooks/test、helpers/test测试都是可以直接深入研读的第一手资料。赞分享前端CMS【免费下载链接】wp-calypsoThe JavaScript and API powered WordPress.com项目地址https://gitcode.com/gh_mirrors/wp/wp-calypso点击查看免费下载相关推荐Watchman 查询表达式 name / iname 完全指南精确文件名匹配、作用域与大小写策略Watchman 查询表达式 name / iname 完全指南精确文件名匹配、作用域与大小写策略 本文档围绕 Watchman 查询表达式中的 name 后端开发工具egjs/infinitegrid与虚拟化技术的完美结合打造高性能无限滚动网格布局egjs/infinitegrid与虚拟化技术的完美结合打造高性能无限滚动网格布局 egjs/infinitegrid是一个功能强大的JavaScriptRansack搜索匹配算法精确控制搜索结果的终极指南Ransack搜索匹配算法精确控制搜索结果的终极指南 Ransack是一个专为Ruby on Rails应用程序设计的强大搜索匹配算法库能够帮助开发者轻松实后端搜索引擎上一篇Pinia状态订阅机制实时监听数据变化下一篇Jimp图像处理终极指南10个快速掌握像素数据分析和图像识别技巧创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
前端CMS【免费下载链接】wp-calypsoThe JavaScript and API powered WordPress.com项目地址https://gitcode.com/gh_mirrors/wp/wp-calypso点击查看免费下载导读Name Pulse域名脉搏是 WordPress.com 域名搜索wp-calypso 仓库中的packages/domain-search包里一套独立的结果模式当配置项config.showNamePulseSearch开启且存在查询词时DomainSearch会渲染NamePulseResults取代经典结果页以边输入边出结果的即时体验展示精确匹配、Top 结果、相关匹配与创意匹配等分区。本文以 Name Pulse README 为核心骨架深入对应源码与测试讲解它的查询模式识别、判定verdict缓存、批量可用性检查、溢价域名定价、Bundle 建议与 TLD 过滤等完整机制帮助读者理解这一套每敲一次键盘就重排网格、请求只在查询落定后发出的前端架构。一、整体架构Name Pulse 如何取代经典结果页Name Pulse 模块位于 packages/domain-search/src/name-pulse模块边界由 index.ts 统一导出两个入口NamePulseSearchInput与NamePulseResults。README 明确说明其触发条件DomainSearchrendersNamePulseResultsinstead of the classic results page whenconfig.showNamePulseSearchis on and there is a query.也就是说Name Pulse 并非独立页面而是DomainSearch组件在配置开启且有查询时切换渲染的结果模式。它的数据请求全部走 DomainSearch 上下文useDomainSearch()中的queries与filter因此测试与 Storybook 可以通过 test-helpers/factories/name-pulse.ts 这类工厂替换查询选项而不是打网络 mock——这是模块可测试性的关键设计。入口组件 name-pulse-results.tsx 的渲染骨架非常清晰顶部是带过滤按钮的NamePulseSearchInput若有提示notice且 TLD 列表未出错渲染NamePulseSearchNotice用notice-${query}作为 key保证新搜索会把已关闭的提示重新带回来主体是一个以query为 key 的VStack依次渲染TLD 加载失败提示 → 精确匹配卡exact-match-card占位区里还包含 Bundle 卡→ Top 结果 → 无精确匹配时的宽幅 Bundle 卡 → 精确匹配网格Exact match for baseName→ 相关匹配Related matches→ 创意匹配Creative matches底部是Cart。name-pulse-results.tsx中还有一个值得注意的无障碍细节精确匹配卡用VisuallyHidden aria-livepolite播报%(domain)s is available.让屏幕阅读器用户不必等卡片替换占位符就能知道判定结果name-pulse-results.tsx。二、查询布局引擎五种模式决定渲染哪些分区所有这一条查询该显示哪些区块的判断都收敛在一个纯函数里getResultsLayout位于 helpers/get-results-layout.ts。它是查询字符串的纯函数不依赖网络状态。它先做归一化用trim()去掉首尾空白若含空白多词则不做 FQDN 探测若为单 token则调用detectFqdn( trimmed, tlds )判断是否是一个完整域名如coffee.com并解析出baseName、tld、fullDomain甚至子域名、未知后缀、免费子域名等附加信息helpers/detect-fqdn.ts计算baseName与wordCount进入getMode决策模式触发条件渲染的分区emptybaseName 长度 2不可注册的标签全部不渲染fqdn识别出完整域名coffee.comTop、exactGrid、suggestionssingle单个单词Top、exactGrid、suggestionskeyword2~3 个单词Top、exactGrid、suggestionsai单词数 ≥ 4AI_MODE_MIN_WORDS 4Top、suggestions、creativeexactGrid 关闭各模式对应的分区组合由SECTIONS_BY_MODE表驱动get-results-layout.ts。注意ai模式会额外开启creative创意匹配即 AI 生成建议而fqdn/single/keyword模式的创意分区都是关闭的。而在 hooks/use-name-pulse-search.ts 中布局被计算了两次一次用落定后的查询settledLayout决定 AI 模式一次用当前正在输入的查询layout决定各区实际渲染。注释解释了为什么这么做AI 模式会让精确匹配网格折叠、Top 结果切换数据源如果跟着用户输入实时变跨过 4 词边界的那一下就会让网格闪进闪出所以模式跟随落定查询区块挂载跟随实时输入。三、边输入边出结果300ms 落定窗口与请求节流useNamePulseSearch( query )是 Name Pulse 的核心编排 hookhooks/use-name-pulse-search.ts。它的核心哲学是Rows regenerate on every keystroke; availability and suggestion requests wait for the query to settle.即行rows每次按键都重新生成但可用性检查与建议请求必须等查询落定。实现方式是const [ settledQuery, setSettledQuery ] useState( query ); const isSettled query settledQuery; useEffect( () { const timer setTimeout( () setSettledQuery( query ), NAME_PULSE_QUERY_SETTLE_MS ); return () clearTimeout( timer ); }, [ query ] );NAME_PULSE_QUERY_SETTLE_MS 300见 helpers/constants.ts即最后一次敲击后停顿 300ms 才把settledQuery更新为当前查询随后可用性与建议请求才发出。这样半截输入既不会被检查也不会被打上不可用标记。同时 hook 里对 TLD 列表未到之前不生成任何行 有明确的注释约束。这一小节还实现了多个关键行为初始检查数量单词数 1 时首批检查NAME_PULSE_INITIAL_CHECK_MULTI_WORD 24个精确匹配单单词时检查一整批NAME_PULSE_INITIAL_CHECK_SINGLE_WORD 36个。Show more / 回填机制requestedNames状态跨搜索保留只有当前网格列出的才算数Top 结果回填超出首批切片的行比如首批批次失败后会通过requestNames补查。每区去重excludeDomains让每个分区丢弃上方已经列出的域名且是全量列表比较而非只看可见行所以展开某个分区永远不会让下方分区掉行helpers/exclude-domains.ts。Top 结果计数通过useViewportMatch响应式——平板宽度small 及以上、large 以下取NAME_PULSE_TOP_RESULTS_COUNT_TABLET 2桌面取NAME_PULSE_TOP_RESULTS_COUNT 3。注释解释了原因大断点以下网格只有两列第三张卡会孤零零占第二行。这个上限放在 JS 里而不是藏在 CSS 里是为了让被挤掉的域名回落到下方分区而不是凭空消失。四、判定缓存每域名一个查询5 分钟 TTL批量 36useNamePulseVerdictshooks/use-name-pulse-verdicts.ts是 Name Pulse 判定体系的基石。README 的表述非常精确hooks/use-name-pulse-verdicts.tsholds one react-query query per domain name ([ name-pulse-domain, name ], five-minute TTL): pending is WAITING, error is UNKNOWN, data is the verdict.落到代码上是export const namePulseVerdictQueryKey ( domainName: string ) [ name-pulse-domain, domainName ] as const;每个域名一个独立的 react-query 查询key 只含域名本身因此共享任何行、任何搜索只要列出同一域名就读同一个缓存判定名字离开网格再回来直接命中缓存渲染不发新请求状态映射pending →WAITING占位骨架error →UNKNOWN显示 Couldnt checkdata → 真正的判定两个非终态都不会被缓存retry: falseTTLstaleTime与gcTime都设为NAME_PULSE_VERDICT_TTL_MS 5 * 60 * 10005 分钟见 helpers/constants.tsnotifyOnChangeProps: [ data, isError ]combine结构化共享保证只有判定变化时才触发重渲染。批量请求器同一 tick 内的名字合并成 36 个一批这是 README 强调的实现细节Its query function batches the names asked for in one tick into parallel availability requests of 36。NamePulseAvailabilityBatcher类use-name-pulse-verdicts.ts实现了这一行为队列为空时用Promise.resolve().then( () this.flush() )把flush推迟到当前 tick 之后从而把 react-query 在同一 tick 内请求的所有名字收集进一个队列flush按NAME_PULSE_AVAILABILITY_BATCH_SIZE 36切片常量注释标明接口上限为 50每片并行发出一次queries.namePulseAvailability( batch )每个批次挂一个NAME_PULSE_SKELETON_TIMEOUT_MS 1000010 秒的定时器超时则 reject 该批所有名字表现为 UNKNOWN但数据稍后到达时仍会写入缓存通过commit所以骨架超时放弃、答案迟到仍落地。commit最终调用setNamePulseVerdict同文件顶部导出它先读缓存中的旧判定再执行mergeNamePulseVerdict合并。README 明确指出实时检查写入同一 key且携带is_realtime批量判定永远不覆盖它——这就是真实结果优先于批量结果的防覆盖规则合并逻辑见 helpers/result-status.ts 及 helpers/index.ts。五、溢价域名批量报价不可信时的每域名重查Premium溢价域名在 Name Pulse 里有专门的处理路径。README 解释得很直白Premium names are priced apart from the rest. The bulk check quotes every name at its TLDs standard rate, so an exact match it flags premium holds its badge and a skeleton whilecomponents/result-row.tsxfetches the registry price from the per-domainis-availablecheck, on the key the pre-cart check already uses.落到 components/result-row.tsx 中判断条件是const needsPremiumPrice result.status NamePulseDomainStatus.AVAILABLE !! result.is_premium ! result.is_realtime source exact;即精确匹配来源source exact、可用、是溢价、且非实时判定——这样的行不展示批量报价那是 TLD 标准价无法兑现而是保持 Premium 徽章 Checking price… 骨架同时按域名发起 per-domain 的queries.domainAvailability( domainName )检查获取注册局真实价格const { data: realtimeAvailability, isError: isPremiumPriceError } useQuery( { ...queries.domainAvailability( domainName ), enabled: needsPremiumPrice, } );关键点在于这个查询的 key 与预加入购物车检查和输入域名提示共享README 与源码注释均强调所以点击行加入购物车不会产生第二次请求即使查询被 disabled它也会报告那两个场景已经拉取的判定。拿到结果后setNamePulseVerdict把带is_realtime的判定写回共享缓存其余所有列出该域名的行立即读到真实价格result-row.tsx。行内的价格渲染Price子组件区分row与card两种形态卡片形态一行放得下完整报价——常规价划线、促销价、续费价依次排列行形态则更紧凑。促销价由getNamePulseSalePrice推导。此外判定失败UNKNOWN的行只留徽章不给价格也不等永远不会来的骨架TLD 有特殊要求的名字不在行内展示要求而是先加入购物车前的NamePulsePolicyNoticeDialog对话框确认溢价价格查询失败isPremiumPriceError时不显示骨架Suggestions come priced by the registry and render as they arrive——建议类行keyword/ai 来源由注册局直接定价因此不触发上述重查直接渲染。还有一个边界情况值得记录在不出售溢价的后缀上溢价名字直接读作不可用README 原话A premium name on a TLD we do not sell premiums on reads as unavailable.这一语义体现在 helpers/result-status.ts 的判定合并与pricing.ts的价格挑选逻辑中。六、精确匹配卡输入的完整域名离开网格当用户输入的是一个完整域名fqdn模式时该域名会离开网格单独渲染成一张NamePulseExactMatchCardcomponents/exact-match-card.tsxfed by the same per-domain check as the notice——即与顶部提示共用同一个 per-domaindomainAvailability查询。而被占用taken的名字没有卡片其行会留在网格里。组装逻辑在useNamePulseSearch内use-name-pulse-search.tsconst typedDomain isSettled ? ( layout.fqdn?.fullDomain ?? ) : ; const { data: typedDomainAvailability, isError: isTypedDomainError } useQuery( { ...queries.domainAvailability( typedDomain ), enabled: Boolean( typedDomain ), } ); const exactMatch useMemo( () getNamePulseExactMatch( layout.fqdn, typedDomainAvailability, isTypedDomainError ), [ layout.fqdn, typedDomainAvailability, isTypedDomainError ] );即查询落定后才检查输入的完整域名getNamePulseExactMatchhelpers/get-exact-match.ts根据检查结果决定返回卡片数据还是 null。卡片 UI 由经典建议组件拼装DomainSuggestionBadgeIts available! 与溢价时的 Premium 徽章、DomainSuggestionPrice常规价/促销价/续费价、DomainSuggestionPrimaryCTA与DomainSuggestionContinueCTA并复用DomainSuggestionContainerContext做容器度量。匹配原因match_reasons过滤掉exact-match本身后取最具体的一条展示因为头部已经写着 Exact match。卡片的 CTA 状态机已在购物车 → Continue有错误 → ErrorCTA 可重试否则 → PrimaryCTA。值得一提的渲染细节卡片替换占位符时不移动焦点所以判定结果用aria-live播报见 name-pulse-results.tsx卡片外层还带aria-busy与DomainSuggestion.Featured.Placeholder占位逻辑。七、Bundle 建议只在 .com 上锚定首个命中即胜出config.showBundleSuggestions开启时useNamePulseBundlehooks/use-name-pulse-bundle.ts会为输入域名及其 Top 结果请求 per-domain 的 bundle 端点。README 的完整描述是Withconfig.showBundleSuggestionson,hooks/use-name-pulse-bundle.tsasks the per-domain bundle endpoint for the typed domain, then each Top result, skipping any that is not a.com, and shows the first bundle found: beside the exact-match card, or under Top results when there is none. The backend only anchors bundles on an available.com, which is why the Top results are asked too.代码实现直接复刻了后端规则// Mirrors the backends bundle_triggers list, which Name Pulse does not fetch const isBundleTrigger ( fqdn: string ) fqdn.endsWith( .com );锚点列表来自useNamePulseSearch计算出的bundleAnchors先等所有依赖的判定就绪readyAnchors要求查询落定、Top 结果无 WAITING、精确匹配已有判定避免迟到的答案插队换卡锚点一旦确定就在本次搜索内保持keptAnchors按查询缓存只有后来发现被占用的名字会被剔除每个锚点按顺序useQueries并行请求queries.bundleForDomain( fqdn )跳过非.com第一个返回伴随域名domains.length 1的 bundle 胜出且后来的答案不会替换已展示的卡所以卡片不会来回切换锚点查询与经典的行内 bundle 行共享bundleForDomain缓存展示位置有精确匹配卡时放在卡片旁边没有精确匹配或输入域名被占用时放在 Top 结果下方name-pulse-bundle-wide宽幅容器见 name-pulse-results.tsx。八、过滤器经典按钮 Name Pulse TLD 列表NamePulseFiltercomponents/filter.tsx复用经典DomainSearchControls.FilterButton/FilterPopover但数据源换成 Name Pulse 的 TLD 查询queries.namePulseTlds()。README 说它shown on the results page only——它只出现在结果页由NamePulseSearchInput showFilter控制。注意过滤器只提供结尾endings选项因为精确匹配网格本身就是精确的不存在仅精确匹配开关showExactMatchesOnly{ false }。过滤的生效方式分三条路径README 与源码一致关键词建议keyword选择的后缀以tlds参数随建议请求重新拉取。在useNamePulseSuggestions中requestTlds会先排序再作为tlds传给端点——注释说明排序后相同的结尾组合无论顺序如何共享同一个缓存条目use-name-pulse-search.ts。精确匹配网格与 AI 建议两者忽略tlds参数改为客户端过滤。AI 建议走后端不感知tlds所以filterNamePulseSuggestions( results, filter.tlds )在前端按已选结尾过滤精确网格则通过gridTlds把 TLD 列表裁剪为已选结尾 输入域名的结尾再生成匹配use-name-pulse-search.ts。输入的完整域名保持自己的结尾typedTld会被保留在网格与卡片中不受过滤器影响READMEa typed domain keeps its ending。TLD 列表加载失败只影响精确匹配网格Top 结果也随之下架因为 Top 结果的数据来自精确网格但建议分区不受牵连——这就是hasTldsError只在layout.exactGrid.show时生效、且失败时提供 Try again 重试按钮的原因name-pulse-results.tsx。九、关键常量速查表Name Pulse 的全部调参集中在一个文件helpers/constants.ts。下表给出名称、值与用途方便后续排查常量值用途NAME_PULSE_TOP_RESULTS_COUNT3桌面端 Top 结果卡数上限NAME_PULSE_TOP_RESULTS_COUNT_TABLET2平板宽度 Top 结果卡数两列网格NAME_PULSE_PAGE_SIZE12Show more 每次点击与分区初始行数NAME_PULSE_AVAILABILITY_BATCH_SIZE36每次可用性请求的域名数接口上限 50NAME_PULSE_QUERY_SETTLE_MS300最后一次敲击后到请求发出的停顿NAME_PULSE_INITIAL_CHECK_SINGLE_WORD36单词查询首批精确匹配检查数一整批NAME_PULSE_INITIAL_CHECK_MULTI_WORD24多词查询首批检查数首页 缓冲NAME_PULSE_SKELETON_TIMEOUT_MS10000骨架槽位等待响应的超时NAME_PULSE_AI_TIMEOUT_MS8000传给建议端点让其先于骨架放弃提供方NAME_PULSE_VERDICT_TTL_MS300000可用性判定缓存的 staleTime 与 gcTime5 分钟十、模块边界与测试支撑Name Pulse 对导入边界有明确纪律README Imports 一节外部只能通过 index 导入../../name-pulse深路径导入会被 ESLint 拦截模块内部代码则可以使用任意 domain-search 内部实现。这保证了模块的可替换性与重构空间。测试方面模块在三个层面有覆盖组件测试components/test/下覆盖filter、result-row、results-section、search-inputhelpers 纯函数测试helpers/test/覆盖apply-filter、detect-fqdn、generate-exact-matches、get-exact-match、get-name-pulse-notice、get-results-layout、get-top-results、result-status、sanitizehooks 测试hooks/test/覆盖use-name-pulse-search、use-name-pulse-url-query、use-name-pulse-verdicts集成场景test/name-pulse-results.tsx与 Storybook 故事 name-pulse-results.stories.tsx。因为判定与建议查询都来自useDomainSearch()的queries测试只需替换查询工厂如test-helpers/factories/name-pulse.ts就能模拟完整搜索流无需拦截网络层——这正是 README 所说tests and Storybook replace them throughtest-helpers/factories/name-pulse.tsinstead of network mocks的落点。模块由 Automattic/yolo 团队负责维护见仓库根 .github/CODEOWNERS。十一、从 README 到实现一张数据流全景图把以上机制串起来Name Pulse 的一次完整交互数据流是用户敲击NamePulseResults每次按键重新生成行纯函数getResultsLayout决定模式与分区300ms 无输入后settledQuery落定TLD 列表、批量可用性检查36 个一批、keyword/AI 建议请求同时发出每域名判定写入[ name-pulse-domain, name ]缓存5 分钟内复用实时检查带is_realtime优先批量结果永不覆盖输入的完整域名走 per-domaindomainAvailability可用则渲染精确匹配卡被占用则留在网格其判定与顶部提示共享同一请求溢价精确匹配行保留徽章与骨架等待同 key 的 per-domain 重查拿注册局价格Bundle 按.com触发规则依序查询锚点首个带伴随域名的结果在精确卡旁或 Top 下方展示过滤器改动触发关键词建议带新tlds重新拉取网格与 AI 建议则客户端过滤。结语Name Pulse 并不是简单地把经典结果页换个皮肤而是一套围绕每键即时反馈 请求节流 判定缓存共享重新设计的搜索结果模式纯函数驱动的布局引擎、按 tick 合并的批量判定、5 分钟 TTL 的每域名缓存、实时结果优先于批量结果的合并规则以及专门为溢价定价与 Bundle 建议设计的重查路径共同构成了它的工程内核。对于希望理解或复用这套交互模式的开发者name-pulse 目录本身、它的 README、constants.ts 与各hooks/test、helpers/test测试都是可以直接深入研读的第一手资料。赞分享前端CMS【免费下载链接】wp-calypsoThe JavaScript and API powered WordPress.com项目地址https://gitcode.com/gh_mirrors/wp/wp-calypso点击查看免费下载相关推荐Watchman 查询表达式 name / iname 完全指南精确文件名匹配、作用域与大小写策略Watchman 查询表达式 name / iname 完全指南精确文件名匹配、作用域与大小写策略 本文档围绕 Watchman 查询表达式中的 name 后端开发工具egjs/infinitegrid与虚拟化技术的完美结合打造高性能无限滚动网格布局egjs/infinitegrid与虚拟化技术的完美结合打造高性能无限滚动网格布局 egjs/infinitegrid是一个功能强大的JavaScriptRansack搜索匹配算法精确控制搜索结果的终极指南Ransack搜索匹配算法精确控制搜索结果的终极指南 Ransack是一个专为Ruby on Rails应用程序设计的强大搜索匹配算法库能够帮助开发者轻松实后端搜索引擎上一篇Pinia状态订阅机制实时监听数据变化下一篇Jimp图像处理终极指南10个快速掌握像素数据分析和图像识别技巧创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
![题解：洛谷 AT_abc438_c [ABC438C] 1D puyopuyo](http://pic.xiahunao.cn/yaotu/题解：洛谷 AT_abc438_c [ABC438C] 1D puyopuyo)
