【免费下载链接】ModernizrModernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.项目地址https://gitcode.com/gh_mirrors/mo/Modernizr点击查看免费下载Modernizr 是一个运行在浏览器端的 JavaScript 特性检测库能够在当前用户代理UA中探测原生 CSS3 与 HTML5 特性的支持情况并以全局Modernizr对象属性 html元素类名两种方式暴露检测结果从而让开发者以颗粒度极细的控制权对页面进行渐进增强progressive enhancement。本文以仓库中的 README 文档卡纳达语版 README.ka.md 与英文原版 README.md 均指向同一份核心内容为主体结合仓库源码深入讲解 v4 破坏性变更、异步事件监听 API、构建工具链与测试流程读完即可独立完成从获取仓库、自定义构建到监听异步检测结果的完整实践。Modernizr 是什么双通道输出检测结果Modernizr 的核心职责非常聚焦测试当前 UA浏览器环境中可用的原生 CSS3 和 HTML5 特性然后把结果以两种方式交付给开发者全局Modernizr对象的属性例如Modernizr.canvas、Modernizr.flexbox值为true/falsehtml元素上的类名例如支持时添加canvas、flexbox不支持时添加no-canvas、no-flexbox。有了这两类输出你就可以基于检测结果对页面做渐进增强在不支持的浏览器上提供基础体验在支持的浏览器上叠加高级能力而不是依赖 UA 字符串猜测UA sniffing。从源码层面看这一机制的底层实现位于 src/addTest.js 的addTest()函数任何一次特性检测的结果都会被写入Modernizr对象Modernizr[feature] test同时通过setClasses([(!!test test ! false ? : no-) featureNameSplit.join(-)])在html上打上对应的类名。检测项名称会被统一转为小写例如调用addTest(itsTuesday, ...)后访问的是Modernizr.itstuesday而非Modernizr.itsTuesday名称中带.的检测如Modernizr.input.list还会被拆分成两级嵌套属性。v4 破坏性变更清单v4 相对旧版本有一批需要开发者注意的破坏性变更迁移时建议逐条核对运行环境要求Node 版本支持收紧放弃对 Node 10 的支持请至少升级到 12当前仓库 package.json 的engines字段声明为node 16实际运行请以仓库声明为准。测试重命名class重命名为es6class与其余 es 系列测试es5、es6、es7、es8 等的命名保持一致。测试迁移到子目录v4 把大量顶层特性检测文件整理进按主题划分的子目录迁移清单如下原位置新子目录cookies、indexeddb、indexedblob、quota-management-api、userdatastorageaudioaudiobatterybatterycanvas、canvastextcanvascustomevent、eventlistener、forcetouch、hashchange、pointerevents、proximityeventexiforientationimgcapture、fileinput、fileinputdirectory、formatattribute、input、inputnumber-l10n、inputsearchevent、inputtypes、placeholder、requestautocomplete、validationinputsvgsvgwebglwebgl这份目录结构在仓库的 feature-detects 目录中可以直接印证——例如storage/cookies.js、input/capture.js、canvas/canvas.js等文件均按上述子目录归位。同时 lib/config-all.json 中的feature-detects数组也统一使用了目录/检测名的写法。被移除的测试v4 移除了以下重复或过时的检测touchevents已被移除详见相关讨论unicode已被移除templatestrings与 es6 检测stringtemplate重复contains与 es6 检测es6string重复datalistelem与Modernizr.input.list重复。迁移时如果旧代码里依赖了上述检测名需要改用对应的替代检测。异步事件监听 APIModernizr.on为什么需要异步监听并非所有特性检测都是同步完成的——部分检测需要等待资源加载、回调或用户交互后才能出结果。过去开发者只能通过轮询Modernizr对象属性或监听html类名变化来感知异步测试是否完成既笨拙又容易出错。v4 引入的Modernizr.onAPI 正是为了解决异步测试何时完成这一问题只有异步测试才会触发事件同步测试应当同步处理以换取速度和一致性。基本用法监听一个测试并传入回调// 监听一个测试传入回调 Modernizr.on(testname, function (result) { if (result) { console.log(The test passed!); } else { console.log(The test failed!); } });关键约定回调保证只调用一次每次调用on注册的回调都只触发一次回调参数result为布尔值true表示支持false表示不支持目前不对外暴露trigger方法如果你想完全掌控异步测试的触发时机应使用src/addTest特性——任何通过addTest注册的测试都会自动暴露并触发on功能。源码级原理on 与 _trigger 的实现从 src/addTest.js 可以看到这套事件机制的全部实现ModernizrProto.on(feature, cb)首次监听某个特性时在ModernizrProto._l内部监听器表上创建数组并推入回调如果该测试已经解析完成Modernizr.hasOwnProperty(feature)为真则在下一个 ticksetTimeout(..., 0)立即调用Modernizr._trigger(feature, Modernizr[feature])补发结果保证先测完、后监听也能收到回调ModernizrProto._trigger(feature, res)取出该特性的全部回调在下一个 tick 逐个调用并传入结果随后delete this._l[feature]清空监听器表——这正是每个on注册的回调只会被调用一次的保证来源。值得一提的是addTest()内部在写入结果、设置类名之后会调用Modernizr._trigger(feature, test)因此你自己通过addTest定义的自定义检测同样可以无缝接入on事件体系。此外用addTest注册检测时如果试图覆盖一个已存在的测试函数会直接返回而不覆盖防止与官方检测冲突。快速开始获取仓库并安装依赖在本地搭建开发环境只需两步# 克隆或下载仓库 git clone https://gitcode.com/gh_mirrors/mo/Modernizr.git # 安装项目依赖 npm install安装完成后即可进入下一节的构建环节。构建 Modernizr两种方式方式一通过 JavaScriptnpm 包编程式调用Modernizr 可以经 npm 以编程方式使用var modernizr require(modernizr);其中暴露了一个build方法用于生成自定义的 Modernizr 构建只包含你需要的检测项体积更小var modernizr require(modernizr); modernizr.build({}, function (result) { console.log(result); // the build });参数说明第一个参数JSON 配置对象用于声明要包含的 options 与 feature-detects所有可用配置项参见 lib/config-all.json第二个参数任务完成后的回调函数其参数result即为生成的构建产物字符串。配置对象的整体结构取自仓库实际配置如下{ classPrefix: , enableClasses: true, enableJSClass: true, scriptGlobalName: window, usePrefixes: true, minify: false, options: [ addTest, atRule, domPrefixes, hasEvent, html5shiv, html5printshiv, load, mq, prefixed, prefixes, prefixedCSS, setClasses, testAllProps, testProp, testStyles ], feature-detects: [ canvas/canvas, css/flexbox, storage/localstorage ] }其中classPrefix类名前缀为空字符串时不加前缀enableClasses是否在html上写入特性类名enableJSClass是否在无 JS 时保留no-js类scriptGlobalNameModernizr挂载到哪个全局对象默认windowusePrefixes检测时是否尝试厂商前缀minify是否压缩输出options需要引入的基础能力模块对应 src 目录下的模块文件feature-detects需要包含的特性检测列表路径相对于 feature-detects 目录。从构建链路看src/generate.js 会按config.options与config[feature-detects]拼装出一个 require.js 构建脚本setClasses选项被特殊处理会额外引入setClasses与classes模块html5printshiv与html5shiv互斥同时出现时只保留前者每个检测路径若未以test/开头会被自动补齐前缀。最终构建体通过scriptGlobalObject.Modernizr Modernizr暴露到全局。方式二命令行接口CLI仓库同时提供了命令行构建工具查看所有可用选项./bin/modernizrCLI 入口 bin/modernizrWindows 对应 bin/modernizr.bat支持的参数如下与源码中的 yargs 定义一致短参数长参数说明-h--help打印帮助信息-V--version打印版本号并退出-f--features逗号分隔的特性检测列表-o--options逗号分隔的可扩展选项列表-c--configJSON 配置文件路径示例参见 lib/config-all.json-d--dest构建产物输出路径默认./modernizr.js-m--metadata特性检测元数据输出路径默认./metadata.json-u--uglify压缩/混淆输出-s--scriptGlobalNameModernizr挂载的全局变量名默认window-q--quiet静默所有输出典型用法组合示例# 基于配置文件构建 ./bin/modernizr -c my-config.json -d ./dist # 直接内联指定特性与选项压缩输出 ./bin/modernizr -f css/flexbox,storage/localstorage -o setClasses -u使用-f/-o时CLI 会读取Modernizr.metadata()与Modernizr.options()实现见 lib/options.js其通过扫描 src 目录中 JSDoc 注释的optionName/optionProp标签汇总选项把属性名映射回对应的 AMD 模块路径若遇到未知属性名会抛出invalid key value name错误。如果想基于 lib/config-all.json 一次性生成全部检测项的完整构建可直接运行 npm 脚本npm start // 输出到 ./dist/modernizr-build.js该命令等价于执行gulp default见 package.json 的 scripts 与 gulpfile.babel.js任务链为clean → eslint → generate最终由generate任务调用modernizr.build(config-all, ...)将产物写入dist/modernizr-build.js。测试 Modernizr命令行与浏览器两种跑法方式一命令行无头测试使用 mocha-headless-chrome 在控制台执行全部测试npm testnpm test对应gulp test其任务链为clean → eslint → generate → pug → mocha:node → mocha:browser见 gulpfile.babel.js即先做 ESLint 检查、生成构建、编译 Pug 测试模板再依次运行 Node 端测试与浏览器端无头测试通过mocha-headless-chrome分别加载test/integration.html与test/unit.html。方式二在浏览器中手动测试你也可以用下面的命令启动本地静态服务然后在任意浏览器中打开测试页npm run serve-gh-pagesserve-gh-pages对应gulp serve:gh-pages任务链为clean → generate → pug → copy:gh-pages随后用 gulp-connect 以gh-pages/为根目录启动服务默认端口 8080。然后导航到以下两个 URLhttp://localhost:8080/test/unit.html http://localhost:8080/test/integration.htmlunit.html单元测试页逐个验证 src 下各模块addTest、mq、prefixed、testStyles等的行为对应测试源码位于 test/browser/srcintegration.html集成测试页验证真实浏览器环境下各特性检测的产出对应测试源码位于 test/browser/integration包含bools.js、classes.js、global.js、prefixed.js等用例。如何阅读特性检测源码以 canvas 为例理解 Modernizr 的工作方式最直观的入口是阅读 feature-detects 目录下的检测文件。以 feature-detects/canvas/canvas.js 为例每个检测文件都遵循统一的元数据注释 AMD 定义结构/*! { name: Canvas, property: canvas, caniuse: canvas, tags: [canvas, graphics], polyfills: [excanvas, slcanvas] } !*/ define([Modernizr, createElement], function(Modernizr, createElement) { // 在 S60 和 BB Storm 上 getContext 存在但总是返回 undefined // 因此必须实际调用 getContext() 来验证 Modernizr.addTest(canvas, function() { var elem createElement(canvas); return !!(elem.getContext elem.getContext(2d)); }); });要点头部 JSON 注释声明了检测的name、property挂到Modernizr上的属性名、caniuse对应条目、tags分类与可选polyfills兜底方案检测逻辑通过Modernizr.addTest(canvas, fn)注册fn返回布尔值该检测揭示了特性检测的一个经典陷阱即使getContext存在某些设备上仍可能返回undefined所以必须实际调用一次getContext(2d)来真实验证而不是只检查属性存在性。这一元数据 addTest的模式遍布整个 feature-detects 目录从css/flexbox到webrtc/peerconnection既可作为自定义检测的模板也是理解 Modernizr 架构的最佳范例。结语Modernizr 的整个使用闭环可以概括为从 lib/config-all.json 选择特性与选项 → 通过modernizr.build()编程接口或./bin/modernizr命令行生成最小化自定义构建 → 在页面中借助Modernizr对象属性与html类名做渐进增强 → 对异步检测使用Modernizr.on订阅完成事件。本仓库的 src、feature-detects、lib 与 test 目录共同构成了理解上述每一环节的完整源码证据链值得按需深入阅读。赞分享【免费下载链接】ModernizrModernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.项目地址https://gitcode.com/gh_mirrors/mo/Modernizr点击查看免费下载相关推荐Modernizr 4 实战指南HTML5/CSS3 特性检测、异步事件监听与自定义构建全解析Modernizr 4 实战指南HTML5/CSS3 特性检测、异步事件监听与自定义构建全解析 Modernizr 是一款在浏览器端检测 HTML5 与 CSFeast Compute Engine 深度解析统一计算引擎架构、DAG 执行模型与批量/流式引擎配置实战Feast Compute Engine 深度解析统一计算引擎架构、DAG 执行模型与批量/流式引擎配置实战 Feast 的 Compute Engine计Wasp 0.19 项目接入 CI/CD用 GitHub Actions 自动重新部署 Fly.io 与 Railway 的完整指南Wasp 0.19 项目接入 CI/CD用 GitHub Actions 自动重新部署 Fly.io 与 Railway 的完整指南 在本地用 wasp de上一篇歌词滚动姬终极免费LRC歌词制作工具完整指南 下一篇终极免费方案3分钟解决浏览器图片格式转换难题创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考