javascript - 如何只为一个特定页面添加 JavaScript？

Question

我在我的项目中使用 Zurb Foundation，它非常方便。但是我很困惑如何在加载该页面时添加我自己的 JavaScript，它仅适用于特定页面的 DOM。

我在页面的局部使用了第三方图表库，我必须用一些 JavaScript 初始化图表容器。这些 JavaScript 无法组合成最终的 app.js因为其他页面不包含图表容器 div .那么有人可以给我一些建议吗？

编辑: 以下是我的项目结构。

src/
├── assets
│   ├── img
│   │   └── x.jpg
│   ├── js
│   │   ├── app.js
│   │   ├── draw.js
│   │   └── xcharts.js
│   └── scss
│       ├── app.scss
│       ├── news.scss
│       └── _settings.scss
├── data
├── layouts
│   └── default.html
├── pages
│   ├── news.html
│   └── template.html
├── partials
│   └── news-header.html
└── styleguide
    ├── index.md
    └── template.html

我尝试在我的图表容器之后添加我的 JavaScript 代码，但我不能，因为它使用了 jQuery。假设我的 JavaScript 是 draw.js . gulp 将自动合并 draw.js到 app.js这是每一页。如果我只包含 draw.js到我的页面，但我应该阻止哪个页面自动合并 draw.js和 xcharts到 app.js然后在页面的某处添加脚本标签。但是如何？
有没有一种方法可以方便地添加 Foundation 框架之外的脚本？是否有类似 html 模板部分行为的方法？

Answer 1

从您的文件夹结构来看，我假设您使用的 Foundation 6 的“风格”是 Foundation Zurb 模板。

1. 将你想在一页上使用的所有脚本移动到 src/assets/js/single-page
2. 打开src/layouts/default.html
3. 找到行:<script src="{{root}}assets/js/app.js"></script>
4. 在该行之后，插入以下代码:

{{#ifpage 'news'}}
  <script src="{{root}}assets/js/single-page/draw.js"></script>
  <script src="{{root}}assets/js/single-page/charts.js"></script>
{{/ifpage}}

这将只包含名为 news 的页面上的那些脚本。

脚本也需要排除在 config.yml 中，这样它们就不会包含在 app.js 中。将 "!src/assets/js/single-page/**/*" 添加到底部的 javascript 路径:

# Paths to your own project code are here
    - "src/assets/js/!(app).js"
    - "!src/assets/js/single-page/**/*"
    - "src/assets/js/app.js"

将 gulpfile.babel.js 中的 javascript 任务更改为:

function javascript() {
  // Insert this section before the return statement
  gulp.src('src/assets/js/single-page/**/*.js')      
  .pipe($.if(PRODUCTION, $.uglify()
    .on('error', e => { console.log(e); })
  ))
  .pipe(gulp.dest(PATHS.dist + '/assets/js/single-page'));

  return gulp.src(PATHS.javascript)
    .pipe($.sourcemaps.init())
    .pipe($.babel())
    .pipe($.concat('app.js'))
    .pipe($.if(PRODUCTION, $.uglify()
      .on('error', e => { console.log(e); })
    ))
    .pipe($.if(!PRODUCTION, $.sourcemaps.write()))
    .pipe(gulp.dest(PATHS.dist + '/assets/js'));
}

现在，您放在 single-page 目录中的任何 JS 文件都将被复制到 dist 目录并从 app.js 中排除。

有关 Foundation 模板中使用的模板系统的更多信息，请参阅 Panini 的 Foundation Docs 部分。