Foundation健康检查：如何确认页面中Foundation已正确加载及排查功能异常
遇到Foundation样式正常但交互功能（比如modal、top-bar）失效的问题确实挺闹心的，我来帮你一步步定位和解决：
第一步：确认Foundation是否正确加载
首先得确保框架本身已经被浏览器正确加载并初始化：
检查资源加载状态
打开浏览器开发者工具（按F12或Ctrl+Shift+I），切换到「Network」标签，刷新页面后筛选「JS」类型，找到foundation.min.js：- 查看它的HTTP状态码，如果是200说明加载成功；如果是404，那肯定是文件路径写错了，得修正引用路径。
验证框架是否可用
切换到「Console」标签，输入Foundation并回车：- 如果返回一个包含各类组件方法的对象，说明Foundation已经成功加载；
- 如果提示
ReferenceError: Foundation is not defined，那就是框架没加载成功，大概率是加载顺序错了或者依赖缺失。
检查脚本加载顺序
Foundation的依赖加载顺序绝对不能乱，必须严格按照：jQuery→modernizr→fastclick→foundation.min.js→$(document).foundation();
尤其是jQuery，必须在Foundation之前加载，因为Foundation完全依赖它。另外，$(document).foundation();必须放在所有JS资源之后、</body>之前，确保执行时所有依赖都已就绪。你可以在这句代码前加一句console.log('Initializing Foundation...')，刷新后看控制台有没有输出——如果没输出，说明这句代码根本没执行，可能前面有JS错误中断了流程。
第二步：排查功能失效的具体原因
如果Foundation已经加载，但功能还是不行，那就从以下几个方向排查：
先解决控制台的所有JS错误
任何语法错误、其他脚本的冲突错误，都可能中断Foundation的组件初始化。打开「Console」标签，把所有红色报错先解决掉——比如某个自定义脚本里的undefined错误，或者其他库和jQuery的冲突，都可能导致Foundation无法正常工作。检查组件的HTML结构是否符合规范
Foundation的交互组件对HTML结构要求很严格，结构错了JS就识别不了：
比如modal的正确结构应该是这样的（缺一不可）：Modal TitleTop-bar也需要正确的层级和类名，比如要有
top-bar容器，内部区分top-bar-left和top-bar-right，还要加上data-topbar属性。如果你的结构和官方示例不一样，赶紧调整。排查jQuery冲突问题
如果页面里引入了其他JS库（比如Prototype、MooTools），它们可能会覆盖jQuery的$别名，导致Foundation的初始化代码失效。试试把$(document).foundation();改成jQuery(document).foundation();，如果功能恢复了，说明确实是$的冲突问题。也可以用jQuery的noConflict模式来隔离：var $j = jQuery.noConflict(); $j(document).foundation();确认组件的data属性是否正确
Foundation的很多组件依赖自定义data属性来触发：- 触发modal需要按钮上有
data-open="你的modalID"； - Top-bar需要容器上有
data-topbar； - 关闭按钮需要
data-close属性。
这些属性不能拼写错误，也不能遗漏，否则组件无法被Foundation的JS识别。
- 触发modal需要按钮上有
测试最小化案例
新建一个极简的HTML页面，只引入必要的依赖（jQuery、modernizr、fastclick、Foundation的JS和CSS），然后复制官方文档里的modal或top-bar示例代码，看是否能正常工作：- 如果能正常工作，说明原页面里的自定义CSS、其他JS脚本或者DOM结构有冲突，需要逐步排查原页面的代码；
- 如果还是不行，那可能是Foundation版本和依赖版本不兼容——比如Foundation 6要求jQuery版本在2.1.x到3.x之间，如果你用了jQuery 1.x或者过高的jQuery版本，就会出问题，得调整依赖版本。
内容的提问来源于stack exchange，提问作者o-0
