基金会站点 (6) javascript 次序

Question

我完全不知道如何插入个人粉底javascript。它似乎总是破坏我的代码。例如我需要使用下拉菜单 js。在文档中它声明

Initializing The file foundation.dropdownMenu.js must be included in your JavaScript to use this plugin,

along with foundation.core.js.

This plugin also requires these utility libraries:

foundation.util.keyboard.js

foundation.util.box.js

foundation.util.nest.js

这看起来很简单，所以我按此顺序执行了以下操作

bower_components/foundation-sites/js/foundation.core.js  //check 
bower_components/foundation-sites/js/foundation.util.mediaQuery.js
bower_components/foundation-sites/js/foundation.util.timerAndImageLoader.js
bower_components/foundation-sites/js/foundation.util.keyboard.js  //check 
bower_components/foundation-sites/js/foundation.util.box.js  //check 
bower_components/foundation-sites/js/foundation.util.nest.js  //check 
bower_components/foundation-sites/js/foundation.dropdown.js
bower_components/foundation-sites/js/foundation.dropdownMenu.js  //check 
bower_components/foundation-sites/js/foundation.equalizer.js

我遵循对我来说合乎逻辑的核心第一而不是实用程序而不是插件但它告诉我 foundation.util.nest.js:6 Uncaught SyntaxError: Unexpected token =

如果我将所有 foundation.min.js 文件放入，错误就会消失，所以我知道它一定是缺少依赖项或顺序不正确

有没有关于foundation js依赖的资源？相反，每次我都必须跟踪并出错。

Answer 1

我这边也遇到了同样的问题。我在我的项目中将 Foundation 用作 GIT 子树，并且实际上已经在我上周创建的网站上使用了它。

看来问题出在较新版本的函数参数声明上。在我工作的代码 v6.1.2 中，foundation.util.nest.js 中的代码是：

Foundation.Nest = {
  Feather: function(menu, type){
    menu.attr('role', 'menubar');
    type = type || 'zf';

与最新版本 6.2.0 中的代码相比：

const Nest = {
  Feather(menu, type = 'zf') {
    menu.attr('role', 'menubar');

default/fallback "type" 的声明似乎毁了一切。我期待自己修复。

根据this link，我目前的Chrome(48)版本还不支持默认函数参数。

Answer 2

从 Foundation v6.2.0 开始，JavaScript 代码库已更新为 ES6。 https://github.com/zurb/foundation-sites/releases

您需要将 Babel 添加到构建过程中以编译 ES6 代码。

他们在这里提供了一个教程： https://github.com/zurb/foundation-sites/wiki/Upgrading-to-Foundation-6.2

希望对您有所帮助。

基金会站点 (6) javascript 次序

Foundation Sites (6) javascript order

javascript

zurb-foundation

zurb-foundation-6