weixin_33898876
weixin_33898876

前端开发清单

  • 原文地址：Front-End-Checklist
  • 原文作者：David Dias
  • 译者：JohnsenZhou
  • 文章地址：https://github.com/JohnsenZhou/Front-End-Checklist

前端清单





前端清单是一份在站点/HTML页面发布到生产环境之前需要测试的所有元素的详尽列表。

它基于前端开发人员多年的经验沉淀，以及其他优秀的开源清单。

在Product Hunt上投票或推荐来帮助前端清单的推广?。

前端开发清单_第1张图片

目录

  1. Head
  2. HTML
  3. Webfonts
  4. CSS
  5. Images
  6. JavaScript
  7. Security
  8. Performance
  9. Accessibility
  10. SEO

How to use?

前端清单中的所有项目都是大部分项目所必需的, 但某些元素可以省略或者并不是这么重要 (在管理Web应用程序的情况下，你可能并不需要RSS订阅源)。我们选择使用一下3级区分:

  • Low 意味着该项目被推荐，但在某些特定情况下可以省略。
  • Medium 意味着该项目是强烈推荐的，但是可能在某些特殊情况下能被省略。某些元素，如果省略将会对性能或SEO方面产生不良影响。
  • High 意味着项目不能被任何理由省略。你的页面可能会导致功能障碍或有可访问性或SEO问题。测试优先级需要首先考虑这些元素。

某些资源拥有特定的标识符，帮助你去理解清单上不同类型的内容或帮助。

  • ?: 文档或文章
  • ?: 在线工具/测试工具
  • ?: 媒体或视频内容

Head

注意: 你能在HTML文档的中找到所有的清单列表。

Meta 标签

  • [ ] Doctype: High Doctype是HTML5的属性，需要声明在HTML文件的顶部。

? Determining the character encoding - HTML5 W3C

接下来三个 meta 标签 (Charset, X-UA Compatible, Viewport) 需要首先在head中声明

  • [ ] Charset: High 正确声明Charset标签(UTF-8)。
  • [ ] X-UA-Compatible: MediumX-UA-Compatible 元标签。

? 指定旧文档模式(Internet Explorer).aspx)

  • [ ] Viewport: High 正确声明viewport标签。
  • [ ] Title: High 所有页面都使用title(SEO:包括网站标题不超过65个字符)。

Page Title less than 65 characters

? Title - HTML - MDN

  • [ ] Description: High 提供description标签， 它是唯一的同时内容不能超过150个字符。
  • [ ] Favicons: Medium 每个favicon都被创建并正确显示，如果你只有一个favicon.ico，把它放在你网站的根目录下。 通常来说你不需要做任何操作他就能正常显示。 然而, 使用一下示例中的方法是比较好的做法。不过现在我们推荐使用PNG格式，相比.ico格式有较好的优势(推荐尺寸: 32x32px)。
  • ? Favicon 生成器
  • ? RealFaviconGenerator
  • ? Favicon Cheat Sheet
  • ? Favicons, Touch Icons, Tile Icons, etc. Which Do You Need? - CSS 技巧
  • ? PNG favicons - caniuse
  • [ ] Apple Touch Icon: Low 苹果设备favicon适配。 (创建至少200x200像素尺寸的Apple图标文件以支持你可能需要的用到的所有尺寸)

? 配置Web应用程序

  • [ ] Windows Tiles:Low Windows tiles are present and linked.

browserconfig.xml文件的最小所需xml标记如下所示:

? 浏览器配置模式参考.aspx)

  • [ ] Canonical: Medium 使用rel="canonical"以避免重复的内容。
  • ? Use canonical URLs - Search Console Help - Google Support
  • ? 5 common mistakes with rel=canonical - Google Webmaster Blog

HTML 标签

  • [ ] Language tag: High 指定你网站的语言标签并与当前页面语言相关联。
  • [ ] Direction tag: Mediumdirection属性规定元素内容的文本方向。(可以在另一个HTML标签上使用)。

? dir - HTML - MDN

  • [ ] Alternate language: Low 指定网站的语言标签并与当前页面的语言相关联。
  • [ ] 条件注释: Low 如有需要，可针对IE添加条件注释。

? 关于条件注释(Internet Explorer) - MSDN - Microsoft.aspx)

  • [ ] RSS feed: Low 如果你的项目是一个博客或者有大量的文章，可以添加一个RSS链接。
  • [ ] CSS Critical: MediumCSS critical收集并呈现当前页面可见部分的所有CSS。在主要的CSS调用之前以单行(最小化)在中嵌入。

? Critical by Addy Osmani on Github

  • [ ] CSS 顺序: High 所有CSS文件都需要在JavaScript文件加载之前加载完成(除了有时JS文件异步加载到页面之外的情况)。

Social meta

强烈推荐Facebook OG and Twitter Cards。如果你针对某些特定的存在并希望确保显示，也可以考虑其他社交媒体标签。

  • [ ] Facebook Open Graph: Low 所有Facebook Open Graph（OG）都经过测试并且没有任何错误。图片至少需要600 x 315像素，建议使用1200 x 630像素。
  • ? A Guide to Sharing for Webmasters
  • ? 使用Facebook OG testing测试你的页面。
  • [ ] Twitter Card: Low
  • ? Getting started with cards — Twitter Developers
  • ? 使用Twitter card validator测试你的页面。

⬆ 返回顶部

HTML

最佳实践

  • [ ] HTML5 Semantic Elements: High 正确的使用HTML5语义化标签(header, section, footer, main...).

? HTML 参考

  • [ ] Error pages: High 404页面和5xx错误的存在。5xx错误页面需要集成其CSS(在当前服务器上无外部调用)。
  • [ ] Noopener: Medium 如果你使用外部链接target="_blank", 你的链接必须有个rel="noopener"属性，防止制表符的隐藏。如果你需要兼容旧版本的火狐浏览器，请使用rel="noopener noreferrer"。

? 关于 rel=noopener

  • [ ] 清除注释: Low 在将页面发布到生产环境之前，应该删除不必要的代码。

HTML 测试

  • [ ] W3C 兼容: High 所有页面需要使用W3C验证器进行测试，以检测HTML代码中的可能存在的问题。

? W3C validator

  • [ ] HTML Lint: High 使用工具来帮助我们分析HTML代码中可能存在的问题。

? Dirty markup

  • [ ] Desktop Browsers: High 所有页面都在桌面浏览器上通过测试(Safari, Firefox, Chrome, Internet Explorer, EDGE...)。
  • [ ] Mobile Browsers: High 所有页面都在移动端浏览器上通过测试(Native browser, Chrome, Safari...).
  • [ ] 链接检查器: High 页面中链接没有断开，请确认你没有404错误。

? W3C Link Checker

  • [ ] 广告拦截器测试: Medium 你的的网站会在启用广告拦截器的情况下正确显示页面内容(你可以提供一条消息，引导人们停用其广告拦截器)。
  • [ ] Pixel perfect: High 页面的像素级实现。根据设计稿的质量，你的页面可能做不到100%的还原，但你的网页需要尽可能的靠近设计稿。

Pixel Perfect - Chrome 扩展

⬆ 返回顶部

Webfonts

  • [ ] Webfont格式: High 现代浏览器都支持WOFF、WOFF2、TTF格式
  • ? WOFF - Web Open Font Format - Caniuse.
  • ? WOFF 2.0 - Web Open Font Format - Caniuse.
  • ? TTF/OTF - TrueType and OpenType font support
  • ? Using @font-face - CSS-Tricks
  • [ ] Webfont 大小: High Webfont大小不超过 2 MB (包括所有版本在内)。

⬆ 返回顶部

CSS

注意: 大部分前端开发人员都会看看CSS指南和Sass指南。如果你对CSS属性有疑问，可以访问CSS参考文档.

  • [ ] 响应式网站设计: High 网站使用响应式设计。
  • [ ] CSS打印属性: Medium 提供打印样式表，并确保使用正确。
  • [ ] 预处理器: Medium 你的网站使用css预处理器(推荐Sass).
  • [ ] 唯一ID: High 如果使用了ID，确保ID的唯一性。
  • [ ] Reset CSS: High 使用CSS reset(如reset.css, normalize.css, reboot) (如果你使用的是CSS框架，例如Bootstrap或Foundation，则reset css已被包含在其中)
  • ? Reset.css
  • ? Normalize.css
  • ? Reboot
  • [ ] JS 前缀: Low 所有以js-开头的class(或者JavaScript文件中使用的id)不写入css文件。
  • [ ] CSS embed or line: High 避免使用CSS嵌入或内联，仅用于必要的情况(例如: background-image for slider, CSS critical).
  • [ ] 浏览器内核前缀: High 对部分属性加上浏览器内核前缀，生成你浏览器兼容的属性。

? Autoprefixer CSS online

性能

  • [ ] 连接: High 将CSS文件连接到一个文件中。 (不适用HTTP/2)
  • [ ] 压缩: High 压缩所有CSS文件。
  • [ ] 非阻塞: Medium CSS文件需要非阻塞，以防在DOM加载时花费大量时间。
  • ? loadCSS by filament group
  • ? 使用loadCSS预加载CSS的示例
  • [ ] 未使用的CSS: Low 删除未使用的CSS。
  • ? UnCSS Online
  • ? PurifyCSS
  • ? Chrome DevTools Coverage

CSS 测试

  • [ ] 格式检查: High 所有的CSS或SCSS文件没有任何格式错误。
  • ? stylelint, a CSS linter
  • ? Sass指南
  • [ ] 响应式网页设计: High 所有页面都需要经过以下几种情况的测试: 320px, 768px, 1024px (根据自己的项目情况，可以设置更多)。
  • [ ] CSS验证器: Medium CSS经过测试，同时所有错误都被修复。

? CSS验证器

  • [ ] Reading direction: High 如果需要的话，所有页面都需要对LTR和RTL语言进行测试。
  • ? 构建RTL-Aware Web Apps & Websites: Part 1 | Mozilla Hacks
  • ? 构建RTL-Aware Web Apps & Websites: Part 2 | Mozilla Hacks

⬆ 返回顶部

Images

注意: 想要完整的了解图像优化，可以在Addy Osmani查看免费电子书图像优化基础。

最佳实践

  • [ ] 优化: High 所有图像都经过优化并且可在浏览器中正常显示。WebP格式可用于关键页面（如首页）。 All images are optimized to be rendered in the browser. WebP format could be used for critical pages (like Homepage).
  • ? Imagemin
  • ? 使用ImageOptim免费优化您的图像。
  • [ ] 视网膜屏: Low 提供x2 或 3x的图像来支持视网膜屏显示。
  • [ ] 雪碧图: Medium 小图片放到一个雪碧图中。
  • [ ] 宽高: High 所有都需要设置高度和宽度(不要指定px 和 %)。

注意: 许多开发人员认为设置了宽度和高度就不能实现响应式设计，实际上并不是这样的。

  • [ ] Alternative text: High 所有 必须有alt属性来直观的描述图片。
  • [ ] 懒加载: Medium 图片懒加载 (A noscript fallback is always provided).

⬆ 返回顶部

JavaScript

最佳实践

  • [ ] JavaScript 内联: High 确保没有任何js代码内联(与HTML代码混合)。
  • [ ] 连接: High 将js文件连接起来。
  • [ ] 压缩: High 压缩所有js文件(可以添加 .min 后缀)。

压缩资源 (HTML, CSS, and JavaScript)

  • [ ] JavaScript安全性:

用JavaScript开发安全应用程序指南*

  • [ ] 非阻塞: Medium JavaScript文件使用async或延迟使用defer属性异步加载。

? Remove Render-Blocking JavaScript

  • [ ] Modernizr: Low 如果您需要定位某些特定功能，则可以使用自定义Modernizr在标签中添加class。

? Customize your Modernizr

JavaScript 测试

  • [ ] ESLint: High 用ESLint检测并没有错误(基于你的配置规则)。
  • ? ESLint - The pluggable linting utility for JavaScript and JSX

⬆ 返回顶部

Security

扫描并检查你的网站

  • securityheaders.io
  • Observatory by Mozilla
  • ASafaWeb - Automated Security Analyser for ASP.NET Websites

最佳实践

  • [ ] HTTPS: Medium 每个页面和所有外部内容(插件、图像...)都使用HTTPS。
  • ? Let's Encrypt - 免费 SSL/TLS 证书
  • ? 免费 SSL 服务测试
  • ? Strict Transport Security
  • [ ] HTTP严格传输安全性(HSTS): Medium HTTP头设置 'Strict-Transport-Security'.
  • ? Check HSTS preload status and eligibility
  • ? HTTP Strict Transport Security Cheat Sheet - OWASP
  • ? Transport Layer Protection Cheat Sheet - OWASP
  • [ ] 跨站点请求伪造攻击(CSRF): High 确保向服务器端发出的请求是合法的，并来自您的网站/应用程序，以防止发生CSRF攻击。

? 跨站点请求伪造（CSRF）防范清单 - OWASP_Prevention_Cheat_Sheet)

  • [ ] 跨站脚本攻击(XSS): High 页面或网站没有XSS攻击的可能性。
  • ? XSS (跨站脚本攻击) 防范清单 - OWASP_Prevention_Cheat_Sheet)
  • ? 基于DOM的XSS防范清单 - OWASP
  • [ ] Content Type Options Medium 防止Google Chrome和Internet Explorer尝试将响应的内容类型从服务器声明的内容类型中嗅探出来。
  • ? X-Content-Type-Options - Scott Helme
  • [ ] X-Frame-Options (XFO) Medium 保护网站的访问者免受劫持攻击。
  • ? X-Frame-Options - Scott Helme
  • ? RFC7034 - HTTP Header Field X-Frame-Options

⬆ 返回顶部

Performance

最佳实践

  • [ ] 页面大小: High 每张网页的大小在0到500KB之间。
  • ? Website Page Analysis
  • ? Size Limit: Make the Web lighter
  • [ ] 文件压缩: Medium 压缩你的HTML文件。

? W3C Validator

  • [ ] 懒加载: Medium 图片、js脚本和CSS需要懒加载，以提高当前页面的响应时间（请参见各自部分的详细信息）。
  • [ ] Cookie大小: 如果使用Cookie，确保每个Cookie不超过4096个字节，并且域名下不超过20个Cookie。
  • ? Cookie规范: RFC 6265
  • ? Cookies
  • ? 浏览器Cookie限制

为将到来的请求做准备

? 以下几种技术的详细说明

  • [ ] DNS解析: Low 使用dns-prefetch让第三方DNS服务商主动去执行域名解析的功能。
  • [ ] 预连接: Low 使用preconnect在空闲期间提前做好DNS查询, TCP三次握手和TLS 协商。
  • [ ] 预获取: Low 使用prefetch在空闲期间提前请求即将需要的资源(例如：图像的懒加载)。
  • [ ] 预加载: Low 使用preload提前加载当前页面所需要的资源(例如：js脚本放在的最后)。

? 预加载和预获取之间的差异

性能测试

  • [ ] Google PageSpeed: High 所有的网页都经过测试（不仅仅是首页），而且得分至少为90/100。
  • ? Google PageSpeed
  • ? 用Google测试移动端速度
  • ? WebPagetest - 网站性能和优化测试

⬆ 返回顶部

Accessibility

注意: 查看播放列表A11ycasts with Rob Dodson ?

最佳实践

  • [ ] 渐进式增强: Medium 主要功能如主导航和搜索等功能应该在没有启用JavaScript的情况下工作。

? 在Chrome开发者具中启用/禁用JavaScript

  • [ ] 颜色对比度: Medium 颜色对比度至少通过WCAG AA标准(移动端需要通过AAA)。

? Contrast ratio

标题

  • [ ] H1: High 所有页面都有H1，它不是网站的标题。
  • [ ] Headings: High 标题应以正确的顺序合理使用(H1至H6)。

? Why headings and landmarks are so important -- A11ycasts #18

Landmarks

  • [ ] banner角色: High
    标签中加入 role="banner"属性。
  • [ ] navigation角色: High
  • [ ] main角色: High
    标签中加入 role="main"属性。

? Using ARIA landmarks to identify regions of a page

语义化

  • [ ] 使用特定的HTML5输入类型: Medium 这对于显示不同类型的自定义键盘和小部件的移动设备尤其重要。

? Mobile Input Types

表单

  • [ ] Label: Highlabel与每个输入表单元素相关联，如果label无法显示，请使用aria-label代替。

? 使用aria-label属性 - MDN

Accessibility 测试

  • [ ] Accessibility标准测试: High 使用WAVE工具测试你的页面是否符合accessibility标准。

? Wave testing

  • [ ] Keyboard navigation: High 在你的键盘上以可能出现的操作顺序去测试，确保所有交互式元素都可访问和可用。
  • [ ] Screen-reader: Medium 所有页面都在屏幕阅读器(VoiceOver, ChromeVox, NVDA or Lynx)中进行了测试。
  • [ ] Focus style: High 如果焦点被禁用，它将被CSS中的可见状态所替代。

? Managing Focus - A11ycasts #22

⬆ 返回顶部

SEO

  • [ ] Google Analytics: High Google Analytics 正确安装和配置。
  • [ ] Headings logic: Medium 标题文字有助于了解当前页面的主要内容。
  • [ ] sitemap.xml: Highsitemap.xml存在并提交到Google Search Console(以前的Google管理员工具)。
  • [ ] robots.txt: Highrobots.txt正确配置，不阻止网页被爬取。
  • ? 使用Google Robots Testing Tool测试你的robots.txt。
  • [ ] 结构化数据: High 使用结构化数据的页面通过测试并且没有错误。结构化数据帮助爬虫理解当前页面的内容。
  • ? 结构化数据简介 | 搜索 | Google Developers
  • ? 使用Structured Data Testing Tool测试你的页面。
  • [ ] Sitemap HTML: Medium 提供HTML网站地图，可通过网站页脚中的链接进行访问。
  • ? Sitemap 指南 | Google 支持
  • ? Sitemap 生成器

⬆ 返回顶部

Translation

The Front-End Checklist is also available in other languages. Thanks for all translators and their awesome work!

  • ?? Japanese: miya0001/Front-End-Checklist
  • ?? Spanish: eoasakura/Front-End-Checklist-ES
  • ?? Chinese: JohnsenZhou/Front-End-Checklist
  • ?? Korean: kesuskim/Front-End-Checklist
  • ?? Portuguese: jcezarms/Front-End-Checklist

前端清单徽章

如果想显示出你的项目遵循了前端清单的各项规定，请将此徽章放在项目的README文件上！

➔ 

[![Front‑End_Checklist followed](https://img.shields.io/badge/Front‑End_Checklist-followed-brightgreen.svg)](https://github.com/thedaviddias/Front-End-Checklist/)

⬆ 返回顶部

Contributing

提issue或提交合并请求以建议更改或添加。

Guide

前端清单 项目有两个分支:

1. master

该分支包含README.md,内容会自动反映到前端清单。
网站上。

2. develop

这个分支将用于对结构和内容进行一些重大更改。不过最好还是使用主分支来修复小错误或添加新项目。

贡献

查看所有贡献人员 contributors.

Support

如果您有任何问题或建议，可以通过Gitter或Twitter联系我们：

  • Chat on Gitter
  • Twitter

作者

David Dias

License

CC0

⬆ 回到顶部

你可能感兴趣的:(前端开发清单)

  • AI前端开发：重塑工作环境与企业文化 suibian5235 人工智能前端
    近年来，人工智能（AI）技术的飞速发展深刻地改变着各个行业，前端开发领域也不例外。随着AI写代码工具的涌现，AI前端开发模式逐渐兴起，并对传统的前端开发模式带来了巨大的冲击。本文将深入探讨AI前端开发如何影响我们的工作环境和企业文化，并对未来的发展趋势进行展望。……AI前端开发对工作环境的影响AI前端开发的出现，最直接的影响体现在工作效率的提升和工作压力的变化上。许多AI工具，例如ScriptEc
  • Vue.js 组件开发：构建可重用且高效的 UI 块 沉浮yu大海 vue.jsui前端
    在现代前端开发中，Vue.js凭借其简洁的语法、强大的数据绑定能力和灵活的组件系统，成为许多开发者的首选框架。组件化开发是Vue.js的核心特性之一，它允许我们将大型应用拆分成多个独立、可复用的部分，从而提高代码的可维护性和扩展性。本文将带你深入了解Vue.js组件开发的基本概念和最佳实践，帮助你构建高效且可重用的UI组件。一、Vue.js组件基础在Vue.js中，组件是可复用的Vue实例，它们封
  • 性能测试流程、主流性能工具 一只小H呀の jmeter
    性能测试流程性能测试流程测试测试需求分析性能测试计划和方案测什么：测试背景测试目的测试范围谁来测：进度和分工交付清单怎么测：测试策略性能测试用例设计性能测试测试执行性能分析和调优性能测试报告测试报告是对性能测试工作的总结，为软件后续验收和交付打下基础。测试报告的主要内容：测试工作的经历和回顾缺陷分析和调优风险评估性能测试结果测试工作的总结和改进主流性能测试工具loadrunnerHPLoadrun
  • 【ISO 14229-1:2023 UDS诊断全量测试用例清单系列：第六节】 车端域控测试工程师 ISO14229-1:2023UDS诊断测试用例全解析测试用例经验分享汽车学习方法学习
    ISO14229-1:2023UDS诊断服务测试用例全解析（ReadDataByIdentifier0x22服务）作者：车端域控测试工程师发布日期：2025年2月13日关键词：UDS诊断协议、0x22服务、ReadDataByIdentifier、DID读取、ECU测试一、服务功能概述0x22服务（ReadDataByIdentifier）用于通过数据标识符（DID）从ECU读取数据记录值，是UD
  • 【ISO 14229-1:2023 UDS诊断全量测试用例清单系列：第十一节】 车端域控测试工程师 ISO14229-1:2023UDS诊断测试用例全解析测试用例经验分享汽车学习方法
    ISO14229-1:2023UDS诊断服务测试用例全解析（RequestTransferExit0x37服务）作者：车端域控测试工程师更新日期：2025年02月13日关键词：UDS协议、0x37服务、传输终止、NRC验证、ISO14229-1:2023一、服务功能概述0x37服务（RequestTransferExit）用于终止通过0x34或0x35服务启动的数据传输流程。根据ISO14229-
  • 如何构建高效的 Vue 3 前端项目结构 东锋1.3 vue.jsvue.js前端javascript
    假如你正在深入开发一个Vue项目，起初一切感觉顺畅简单。但随着应用的增长，你的文件夹开始泛滥，组件变得混乱，寻找文件就像大海捞针。听起来熟悉吗？其实你并不孤单。一个有组织的文件结构是可扩展、可维护和高效前端开发的支柱。但关键问题是：没有一种放之四海而皆准的结构。完美的设置取决于你的项目规模、复杂性和团队动态。那么，如何开始呢？如何平衡简单性和可扩展性？在这篇文章中，我将分解Vue3项目的最优文件结
  • Cursor前端开发提示词分享 前端程序猿i 前端
    点击设置将提示词复制黏贴进输入框里即可Alwaysrespondin中文DONOTGIVEMEHIGHLEVELSTUFF,IFIASKFORFIXOREXPLANATION,IWANTACTUALCODEOREXPLANATION!!!IDON'TWANT"Here'showyoucanblablabla"-Youareaseniorfrontendengineer.-Ifcommandsnee
  • Vue3 中的 defineProps：优雅地实现子父组件传值 良月柒 vue.js前端javascript
    Vue.js一直以来都是前端开发者们钟爱的框架之一，而在最新的Vue3中，引入了一些新的特性和改进，其中之一就是defineProps。defineProps提供了一种更加明确和类型安全的方式来定义子组件的props，让子父组件之间的数据传递更加清晰和可维护。本文将介绍Vue3中defineProps的用法以及如何在子组件中使用它来接收父组件传递的props数据。什么是defineProps？de
  • MTTK Vue Wrap 项目介绍 MTTKbelinda VUEWrapvue.js前端javascript
    关键字:Vue3,配置开发,快速开发,组件封装关于本项目概述MttkVueWrap是一个基于Vue3的组件封装工具，核心目标是通过纯JavaScript/TypeScript替代传统的单文件组件（SFC）开发模式，同时兼容与SFC的混合使用.它允许开发者通过类似JSON的配置对象或动态生成的脚本快速构建Vue组件，涵盖模板、双向绑定（v-model）、属性、事件、插槽等核心功能.项目起源在前端开发
  • 《vue.js前端框架技术》 韩靓. 前端框架vue.jsflutter
    一、引言在当今快速发展的互联网时代，前端开发技术不断推陈出新，众多框架和工具如雨后春笋般涌现，而Vue.js凭借其独特的优势，在前端开发领域中占据了重要的一席之地。它以简洁的语法、高效的性能和灵活的扩展性，为开发者提供了一种便捷且强大的方式来构建各类交互式的用户界面。无论是简单的企业展示网站、小型的移动应用，还是复杂的大型单页面应用（SPA），Vue.js都展现出了卓越的适应性和实用性，能够满足不
  • Vue 前端开发中的路由知识：从入门到精通 chenNorth。 vue前端vue.js前端javascript
    文章目录引言1.VueRouter简介1.1安装VueRouter1.2配置VueRouter1.3在Vue实例中使用VueRouter2.路由的基本用法2.1路由映射2.2路由视图2.3路由链接3.动态路由3.1动态路径参数3.2访问动态参数3.3响应路由参数的变化4.嵌套路由4.1定义嵌套路由4.2渲染嵌套路由5.路由守卫5.1全局守卫5.2路由独享守卫5.3组件内守卫6.路由懒加载6.1使用
  • electron-vue 安装环境、构建+打包（mac和windows）这一篇就够了 阿毛sky electronvue前端
    由于公司需要，下一个项目需要做CS开发，技术选型分析后，选择了electron（Electron是一个使用JavaScript,HTML和CSS等Web技术创建原生程序的框架）研究发现，electron与vue-cli3.0脚手架做了很好的融合，对于我们这种用惯了vue，以及elementUI这些UI框架的Web前端开发工程师来说，实在太友好了，不过，这是一门国外框架技术，不仅是环境搭建、安装、文
  • 【CSS】图片比例完整展示与滚动查看 Peter-Lu #CSS开发语言前端css
    文章目录一、问题背景二、问题分析为什么`100vh`会压缩图片高度？为什么固定像素高度有效？三、解决方案与改进1.页面布局代码2.样式代码3.核心点解读容器高度图片样式滚动支持在前端开发中，如何高效地展示多张图片，并确保图片保持原始比例，同时兼顾滚动查看的需求，是一个常见的问题。本文将通过一个实际案例，讲解如何解决100vh固定高度导致图片被压缩的问题，以及如何改进页面布局让滚动与展示兼顾。一、问
  • 前端开发：Vue项目报错Unknown custom element：XXX - did you register the component correctly…的解决方法丨蓄力计划 三掌柜666 前端开发进阶vue.jsjavascript
    导读Vue项目报错Unknowncustomelement:XXX-didyouregisterthecomponentcorrectly…的解决方法。问题前段时间在做前端项目的时候，遇到了一个关于饿了么框架的报错问题，具体报错信息如下所示：[Vuewarn]:Unknowncustomelement:-didyouregisterthecomponentcorrectly?Forrecursiv
  • 网络安全清单 黑客Jack web安全网络安全
    自主访问控(DAC:DiscretionaryAccessControl)自主访问控制(DAC)是一个访问控制服务，其执行一个基于系统实体身份的安全政策和它们的授权来访问系统资源。双附接集线器(DAC:Dual-attachedConcentrator)双附接集线器(DAC)是FDDI或CDDI集线器有能力接入到一个FDDI或CDDI网络的两个环。它也能够是来自其它FDDI或CDDI集线器的主机端
  • K8S中Deployment控制器的概念、原理解读以及使用技巧 景天科技苑 云原生K8S零基础到进阶实战kubernetes容器云原生deploymentk8s
    文章目录1、Deployment控制器1.1Deployment概述1.2Deployment工作原理：如何管理rs和Pod？2、Deployment资源清单文件编写技巧3、查看控制器的历史版本4、自定义滚动更新策略5、K8S自动伸缩6、动态控制副本数量7、生产环境如何实现蓝绿部署？7.1、什么是蓝绿部署？7.2、蓝绿部署的优势和缺点7.3通过k8s实现线上业务的蓝绿部署8、通过k8s完成线上业务
  • AI驱动的可演化架构与前端开发效率 2401_89744464 人工智能架构前端
    1.引言在当今快节奏的数字时代，软件系统需要具备强大的适应能力才能在瞬息万变的市场需求中保持竞争力。软件可演化架构的重要性日益凸显，它能够让软件系统在面对需求变更、技术升级以及市场波动时，能够快速、高效地进行调整和升级，避免因僵化的架构而导致的项目失败和资源浪费。然而，传统的软件架构往往面临着诸多挑战，例如维护成本高昂、迭代速度缓慢、难以适应新的技术和需求等。幸运的是，人工智能（AI）技术的快速发
  • 前端为什么要使用new Promise包裹一个函数 没资格抱怨 JS核心前端javascript
    在前端开发中，使用newPromise包裹一个函数主要是为了将原本不支持Promise规范的操作转化为支持Promise规范的操作，从而可以更好地处理异步操作，提升代码的可读性和可维护性。下面详细介绍这么做的常见原因和应用场景：1.封装回调风格的异步操作在JavaScript中，早期的异步操作（如setTimeout、XMLHttpRequest等）通常使用回调函数来处理结果。这种方式容易导致回调
  • 前端开发：CSS选择器 qincjun css前端
    一、基础选择器1.1标签选择器通用型，一次将所有的同类型标签设置成相同属性；p{color:red;}div{color:green;}1.2类选择器类名用.(点)开头的.eat{color:red;}.sleep{color:blue;}.play{color:black;font-size:30px;}吃饭//给段落赋予一个class类名；是此类名的是一样的CSS格式睡觉//一个元素可以赋予多
  • Python自学知识清单(持续更新中...) 彩虹小黑馬 Pythonpython开发语言
    Python自学知识清单第一章：数据结构Python自学-变量及对象Python自学-函数的使用Python自学-进制转换Python自学-字符串转义、查找及切片Python自学-字符串处理函数Python自学-字符串格式化输出详解Python自学-列表的用法Python自学-元组的用法Python自学-字典的用法Python自学-集合的用法Python自学-引用与拷贝第二章：语句Python自学
  • 【ISO 14229-1:2023 UDS诊断全量测试用例清单系列：第五节】 车端域控测试工程师 ISO14229-1:2023UDS诊断测试用例全解析测试用例网络学习汽车经验分享学习方法
    ISO14229-1:2023UDS诊断服务测试用例全解析（WriteDataByIdentifier0x2E服务）作者：车端域控测试工程师更新日期：2025-02-13关键词：UDS协议、0x2E服务、DID写入、ISO14229-1:2023、ECU测试一、服务功能概述0x2E服务（WriteDataByIdentifier）用于通过数据标识符（DID）向ECU写入数据记录值，该服务需要安全访
  • 2025 机器学习方向毕业设计选题清单：开题指导与建议 Krin_IT 毕设选题指导毕业设计机器学习人工智能
    目录毕设选题选题迷茫选题的重要性更多选题指导最后大四是整个大学期间最忙碌的时光,一边要忙着准备考研,考公,考教资或者实习为毕业后面临的就业升学做准备,一边要为毕业设计耗费大量精力。大四的同学马上要开始毕业设计,对选题有疑问可以问学长哦（见文末）!以下整理了适合不同方向的计算机专业的毕业设计选题对毕设有任何疑问都可以问学长哦!更多选题指导:最新最全计算机专业毕设选题精选推荐汇总大家好,这里是海浪学长
  • STM32之SG90舵机控制 如愿小李 stm32嵌入式硬件单片机
    目录前言：一、硬件准备与接线1.1硬件清单1.2接线二、SG90舵机简介1.1外观1.2基本参数1.3引脚说明1.4控制原理1.5特点1.6常见问题三、单片机简介四、程序设计4.1定时器配置4.2角度控制函数4.3主函数调用五、总结前言：STM32F103C8T6是一款性价比极高的ARMCortex-M3内核微控制器，广泛应用于嵌入式开发。SG90舵机则是小型舵机的代表，常用于机器人、智能家居等场
  • 工作计划进度表怎么做？探索主流的8款软件
    本文介绍了八款主流的工作计划软件，包括：1.Worktile，2.PingCode，3.腾讯文档，4.钉钉，5.滴答清单，6.有道云笔记，7.Trello，8.Monday.com。制作工作计划进度表是确保项目按时完成的重要步骤，一个好的进度表不仅能清晰显示任务分配和截止日期，还能帮助团队成员理解自己的责任和优先级。随着项目管理工具的不断发展，市场上出现了多种软件，专门设计来帮助制作和管理工作计划
  • Flux架构及Redux实践 GbkMobile 架构
    随着前端应用的复杂性不断增加，有效管理应用状态和数据流变得至关重要。Flux架构及其最流行的实现之一Redux，为前端开发人员提供了一种可靠且可扩展的解决方案。本文将深入浅出地介绍Flux架构的核心概念，并通过实际的Redux实践示例来帮助读者更好地理解和应用这些概念。什么是Flux架构？Flux是一种前端应用架构模式，旨在解决传统MVC（Model-View-Controller）模式在大型应用
  • 如何通过项目缺陷管理表提升项目质量？ 项目管理
    在软件开发过程中，项目缺陷管理表是一个不可或缺的工具，它能够有效地追踪、记录和管理项目中出现的各种问题。通过系统化地使用项目缺陷管理表，我们可以显著提升项目质量，降低风险，并确保最终交付的产品满足客户期望。本文将深入探讨如何充分利用项目缺陷管理表来提升项目质量。项目缺陷管理表不仅仅是一个简单的问题清单，它是一个强大的质量管理工具。通过记录、分类和跟踪缺陷，项目团队可以全面了解项目的健康状况，识别潜
  • Flux架构：构建可预测的Web应用状态管理体系 阿珊和她的猫 架构前端
    前端开发工程师、技术日更博主、已过CET6阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》蓝桥云课签约作者、上架课程《Vue.js和Egg.js开发企业级健康管理项目》、《带你从入门到实战全面掌握uni-app》前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站。文章
  • 深入思考：技术生态的繁荣与开发者的选择 艾米栗写代码 前端
    作为一名前端开发者，我们是一直被两类问题困惑着的：1、技术生态中“轮子迭代”与“原理理解”的矛盾，2、业务开发与技术深度的平衡问题。这些问题本质上是开发者在不同阶段必然面临的挑战。我们可以从以下几个角度进一步探讨：一、为什么“轮子”永远在迭代？1.技术演进的必然性场景细化：早期工具（如Grunt、Gulp）解决的是通用构建问题，但随着前端复杂度提升，出现了更垂直的解决方案（如Vite专攻开发体验、
  • 一文讲清前端热更新 艾米栗写代码 前端
    引言前端开发中，“保存代码后页面自动刷新”早已成为开发者的标配体验。但你是否思考过，为什么某些场景下修改代码后页面无需完全刷新，甚至能保留当前状态（如表单输入、滚动位置）？这背后的核心机制就是热更新（HotModuleReplacement,HMR）。本文将从现象出发，逐步拆解其实现原理，并揭示其中涉及的关键技术。一、热更新的“现象”：开发者眼中的魔法假设你正在开发一个React应用：修改CSS文
  • 从零开始：如何用 Vue 3 和 Vite 创建现代前端项目 全栈探索者chen 前端前端vue.jsjavascript开发语言前端框架ecmascriptvite
    从零开始：如何用Vue3和Vite创建现代前端项目前言随着现代前端框架的快速发展，开发工具和构建工具也在不断进化。Vue3是目前流行的前端框架之一，凭借其轻量、易用和高效的特性，广泛应用于各种web应用中。而Vite则是一个现代化的构建工具，它通过引入原生ES模块支持和极快的开发模式，成为前端开发的新宠。本文将介绍如何使用Vue3和Vite从零开始搭建一个前端项目，并展示一些常见的项目配置和优化技
  • 矩阵求逆（JAVA）利用伴随矩阵 qiuwanchi 利用伴随矩阵求逆矩阵
    package gaodai.matrix; import gaodai.determinant.DeterminantCalculation; import java.util.ArrayList; import java.util.List; import java.util.Scanner; /** * 矩阵求逆(利用伴随矩阵) * @author 邱万迟
  • 单例（Singleton）模式 aoyouzi 单例模式Singleton
    3.1           概述 如果要保证系统里一个类最多只能存在一个实例时，我们就需要单例模式。这种情况在我们应用中经常碰到，例如缓存池，数据库连接池，线程池，一些应用服务实例等。在多线程环境中，为了保证实例的唯一性其实并不简单，这章将和读者一起探讨如何实现单例模式。 3.2
  • [开源与自主研发]就算可以轻易获得外部技术支持,自己也必须研发 comsci 开源
          现在国内有大量的信息技术产品，都是通过盗版，免费下载，开源，附送等方式从国外的开发者那里获得的。。。。。。        虽然这种情况带来了国内信息产业的短暂繁荣，也促进了电子商务和互联网产业的快速发展，但是实际上，我们应该清醒的看到，这些产业的核心力量是被国外的
  • 页面有两个frame,怎样点击一个的链接改变另一个的内容 Array_06 UIXHTML
    <a src="地址"  targets="这里写你要操作的Frame的名字" />搜索 然后你点击连接以后你的新页面就会显示在你设置的Frame名字的框那里 targerts="",就是你要填写目标的显示页面位置 ===================== 例如： <frame src=&
  • Struts2实现单个/多个文件上传和下载 oloz 文件上传struts
    struts2单文件上传：     步骤01:jsp页面 <!--在进行文件上传时，表单提交方式一定要是post的方式，因为文件上传时二进制文件可能会很大，还有就是enctype属性，这个属性一定要写成multipart/form-data，不然就会以二进制文本上传到服务器端--> 　　<form action="fileUplo
  • 推荐10个在线logo设计网站 362217990 logo
    在线设计Logo网站。 1、http://flickr.nosv.org（这个太简单） 2、http://www.logomaker.com/?source=1.5770.1 3、http://www.simwebsol.com/ImageTool 4、http://www.logogenerator.com/logo.php?nal=1&tpl_catlist[]=2 5、ht
  • jsp上传文件 香水浓 jspfileupload
    1. jsp上传 Notice： 1. form表单 method 属性必须设置为 POST 方法 ，不能使用 GET 方法 2. form表单 enctype 属性需要设置为 multipart/form-data 3. form表单 action 属性需要设置为提交到后台处理文件上传的jsp文件地址或者servlet地址。例如 uploadFile.jsp 程序文件用来处理上传的文
  • 我的架构经验系列文章 - 前端架构 agevs JavaScriptWeb框架UIjQuer
    框架层面：近几年前端发展很快，前端之所以叫前端因为前端是已经可以独立成为一种职业了，js也不再是十年前的玩具了，以前富客户端RIA的应用可能会用flash/flex或是silverlight，现在可以使用js来完成大部分的功能，因此js作为一门前端的支撑语言也不仅仅是进行的简单的编码，越来越多框架性的东西出现了。越来越多的开发模式转变为后端只是吐json的数据源，而前端做所有UI的事情。MVCMV
  • android ksoap2 中把XML(DataSet) 当做参数传递 aijuans android
    我的android app中需要发送webservice ，于是我使用了 ksop2 进行发送，在测试过程中不是很顺利,不能正常工作.我的web service 请求格式如下     [html]  view plain copy   <Envelope xmlns="http://schemas.
  • 使用Spring进行统一日志管理 + 统一异常管理 baalwolf spring
    统一日志和异常管理配置好后，SSH项目中，代码以往散落的log.info() 和 try..catch..finally 再也不见踪影！ 统一日志异常实现类： [java]  view plain copy   package com.pilelot.web.util;      impor
  • Android SDK 国内镜像 BigBird2012 android sdk
    一、镜像地址： 1、东软信息学院的 Android SDK 镜像，比配置代理下载快多了。 配置地址， http://mirrors.neusoft.edu.cn/configurations.we#android 2、北京化工大学的： IPV4:ubuntu.buct.edu.cn  IPV4:ubuntu.buct.cn IPV6:ubuntu.buct6.edu.cn
  • HTML无害化和Sanitize模块 bijian1013 JavaScriptAngularJSLinkySanitize
    一.ng-bind-html、ng-bind-html-unsafe         AngularJS非常注重安全方面的问题，它会尽一切可能把大多数攻击手段最小化。其中一个攻击手段是向你的web页面里注入不安全的HTML，然后利用它触发跨站攻击或者注入攻击。         考虑这样一个例子，假设我们有一个变量存
  • [Maven学习笔记二]Maven命令 bit1129 maven
    mvn compile compile编译命令将src/main/java和src/main/resources中的代码和配置文件编译到target/classes中，不会对src/test/java中的测试类进行编译 MVN编译使用 maven-resources-plugin:2.6:resources maven-compiler-plugin:2.5.1:compile &nbs
  • 【Java命令二】jhat bit1129 Java命令
    jhat用于分析使用jmap dump的文件，，可以将堆中的对象以html的形式显示出来，包括对象的数量，大小等等，并支持对象查询语言。 jhat默认开启监听端口7000的HTTP服务，jhat是Java Heap Analysis Tool的缩写 1. 用法： [hadoop@hadoop bin]$ jhat -help Usage: jhat [-stack <bool&g
  • JBoss 5.1.0 GA:Error installing to Instantiated: name=AttachmentStore state=Desc ronin47
    进到类似目录 server/default/conf/bootstrap，打开文件 profile.xml找到： Xml代码<bean    name="AttachmentStore"  class="org.jboss.system.server.profileservice.repository.AbstractAtta
  • 写给初学者的6条网页设计安全配色指南 brotherlamp UIui自学ui视频ui教程ui资料
    网页设计中最基本的原则之一是，不管你花多长时间创造一个华丽的设计，其最终的角色都是这场秀中真正的明星——内容的衬托     我仍然清楚地记得我最早的一次美术课，那时我还是一个小小的、对凡事都充满渴望的孩子，我摆放出一大堆漂亮的彩色颜料。我仍然记得当我第一次看到原色与另一种颜色混合变成第二种颜色时的那种兴奋，并且我想，既然两种颜色能创造出一种全新的美丽色彩，那所有颜色
  • 有一个数组，每次从中间随机取一个，然后放回去，当所有的元素都被取过，返回总共的取的次数。写一个函数实现。复杂度是什么。 bylijinnan java算法面试
    import java.util.Random; import java.util.Set; import java.util.TreeSet; /** * http://weibo.com/1915548291/z7HtOF4sx * #面试题#有一个数组，每次从中间随机取一个，然后放回去，当所有的元素都被取过，返回总共的取的次数。 * 写一个函数实现。复杂度是什么
  • struts2获得request、session、application方式 chiangfai application
    1、与Servlet API解耦的访问方式。 a.Struts2对HttpServletRequest、HttpSession、ServletContext进行了封装，构造了三个Map对象来替代这三种对象要获取这三个Map对象，使用ActionContext类。 ----->   package pro.action; import java.util.Map; imp
  • 改变python的默认语言设置 chenchao051 python
    import sys sys.getdefaultencoding()  可以测试出默认语言，要改变的话，需要在python lib的site-packages文件夹下新建： sitecustomize.py， 这个文件比较特殊，会在python启动时来加载，所以就可以在里面写上： import sys sys.setdefaultencoding('utf-8') &n
  • mysql导入数据load data infile用法 daizj mysql导入数据
    我们常常导入数据！mysql有一个高效导入方法，那就是load data infile 下面来看案例说明 基本语法： load data  [low_priority] [local] infile 'file_name txt' [replace | ignore] into table tbl_name [fields [terminated by't'] [OPTI
  • phpexcel导入excel表到数据库简单入门示例 dcj3sjt126com PHPExcel
    跟导出相对应的，同一个数据表，也是将phpexcel类放在class目录下，将Excel表格中的内容读取出来放到数据库中 <?php error_reporting(E_ALL); set_time_limit(0); ?> <html> <head> <meta http-equiv="Content-Type"
  • 22岁到72岁的男人对女人的要求 dcj3sjt126com
    22岁男人对女人的要求是：一，美丽，二，性感，三，有份具品味的职业，四，极有耐性，善解人意，五，该聪明的时候聪明，六，作小鸟依人状时尽量自然，七，怎样穿都好看，八，懂得适当地撒娇，九，虽作惊喜反应，但看起来自然，十，上了床就是个无条件荡妇。 32岁的男人对女人的要求，略作修定，是：一，入得厨房，进得睡房，二，不必服侍皇太后，三，不介意浪漫蜡烛配盒饭，四，听多过说，五，不再傻笑，六，懂得独
  • Spring和HIbernate对DDM设计的支持 e200702084 DAO设计模式springHibernate领域模型
    A：数据访问对象     DAO和资源库在领域驱动设计中都很重要。DAO是关系型数据库和应用之间的契约。它封装了Web应用中的数据库CRUD操作细节。另一方面，资源库是一个独立的抽象，它与DAO进行交互，并提供到领域模型的“业务接口”。    资源库使用领域的通用语言，处理所有必要的DAO，并使用领域理解的语言提供对领域模型的数据访问服务。
  • NoSql 数据库的特性比较 geeksun NoSQL
    Redis 是一个开源的使用ANSI C语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value数据库，并提供多种语言的API。目前由VMware主持开发工作。   1. 数据模型 作为Key-value型数据库，Redis也提供了键（Key）和值（Value）的映射关系。除了常规的数值或字符串，Redis的键值还可以是以下形式之一： Lists （列表） Sets
  • 使用 Nginx Upload Module 实现上传文件功能 hongtoushizi nginx
    转载自： http://www.tuicool.com/wx/aUrAzm   普通网站在实现文件上传功能的时候，一般是使用Python，Java等后端程序实现，比较麻烦。Nginx有一个Upload模块，可以非常简单的实现文件上传功能。此模块的原理是先把用户上传的文件保存到临时文件，然后在交由后台页面处理，并且把文件的原名，上传后的名称，文件类型，文件大小set到页面。下
  • spring-boot-web-ui及thymeleaf基本使用 jishiweili springthymeleaf
    视图控制层代码demo如下：   @Controller @RequestMapping("/") public class MessageController { private final MessageRepository messageRepository; @Autowired public MessageController(Mes
  • 数据源架构模式之活动记录 home198979 PHP架构活动记录数据映射
    hello!架构 一、概念 活动记录（Active Record）：一个对象，它包装数据库表或视图中某一行，封装数据库访问，并在这些数据上增加了领域逻辑。 对象既有数据又有行为。活动记录使用直截了当的方法，把数据访问逻辑置于领域对象中。   二、实现简单活动记录 活动记录在php许多框架中都有应用，如cakephp。 <?php /** * 行数据入口类 *
  • Linux Shell脚本之自动修改IP pda158 linuxcentosDebian脚本
    作为一名 Linux SA，日常运维中很多地方都会用到脚本，而服务器的ip一般采用静态ip或者MAC绑定，当然后者比较操作起来相对繁琐，而前者我们可以设置主机名、ip信息、网关等配置。修改成特定的主机名在维护和管理方面也比较方便。如下脚本用途为：修改ip和主机名等相关信息，可以根据实际需求修改，举一反三！ #!/bin/sh #auto Change ip netmask ga
  • 开发环境搭建 独浮云 eclipsejdktomcat
           最近在开发过程中，经常出现MyEclipse内存溢出等错误，需要重启的情况，好麻烦。对于一般的JAVA+TOMCAT项目开发，其实没有必要使用重量级的MyEclipse，使用eclipse就足够了。尤其是开发机器硬件配置一般的人。         &n
  • 操作日期和时间的工具类 vipbooks 工具类
       大家好啊，好久没有来这里发文章了，今天来逛逛，分享一篇刚写不久的操作日期和时间的工具类，希望对大家有所帮助。 /* * @(#)DataFormatUtils.java 2010-10-10 * * Copyright 2010 BianJing,All rights reserved. */ package test; impor
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他