如何仅为一个特定页面添加JavaScript？

Question

如何仅为一个特定页面添加JavaScript？

javascriptzurb-foundationzurb-foundation-6

3

我正在使用Zurb Foundation在我的项目中，这非常方便。但是我很困惑，当特定页面加载时，如何添加仅针对该页面DOM的JavaScript。

我在一个页面的部分中使用了第三方图表库，必须使用一些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到我的页面中，但是我应该防止gulp自动将draw.js和xcharts合并到app.js中，并添加一个脚本标签到页面的某个位置。但是怎么做呢？
有没有一种方便的方法可以添加Foundation框架之外的脚本？是否有类似于html模板部分行为的方法?

- Guisong He

为什么你不能只添加另一个脚本标签，并仅在该页面上包含它？ - Colin Marshall

@ColinMarshall 我添加了我的项目结构和一些细节。 - Guisong He

谢谢，那些信息很有帮助。为了以后参考，请包括一些信息，例如您在项目中如何使用Foundation（例如Foundation模板，bower，npm等）和版本号，以便更快地获得答案。Foundation非常强大，可以用多种不同的方式使用，因此了解具体情况会很有帮助，尽管通过查看文件夹结构我已经能够找出您是如何使用它的。 - Colin Marshall

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Colin Marshall · Accepted Answer

根据您的文件夹结构，我猜测您正在使用Foundation Zurb模板作为Foundation 6的"口味"。

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中。在底部向javascript路径添加"!src/assets/js/single-page/**/*"：

# 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'));
}

现在，无论您把任何JS文件放到“single-page”目录中，它们都会被复制到“dist”目录中，并从“app.js”中排除。

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