How to add JavaScript just for one specific page?

问题

I'm using Zurb Foundation in my project and it is very convenient. But I'm confused that how can I add my own JavaScript which is just for a specific page's DOM when that page is loading.

I used a third-party chart lib in a page's partial and I must initial the chart container with some JavaScript. These JavaScripts can not be combined to the final app.js because other pages don't contain the chart container div. So can any one give me some advice?

Edit: The following is my project structure.

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

I tried adding my JavaScript code just after my chart container but I can't because it used jQuery.Assuming that my JavaScript is the draw.js. The gulp will auto merge the draw.js to the app.js which is for every page. If I just include the draw.js to my page but which page I should prevent the gulp auto merge the draw.js and xcharts to the app.js and then add a script tag to somewhere of the page.But how?
Is there a way that is convenient to add scripts that are out of the Foundation framework? Is there a method like the html template partial's behavior?

回答1:

From the looks of your folder structure I am assuming the "flavor" of Foundation 6 you are using is the Foundation Zurb Template.

Move all scripts you want to use on one page only to src/assets/js/single-page
Open up src/layouts/default.html
Find the line: <script src="{{root}}assets/js/app.js"></script>
After that line, insert the following code:

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

This will only include those scripts on the page named news.

The scripts also need to be excluded in config.yml so that they aren't included in app.js. Add "!src/assets/js/single-page/**/*" to the javascript paths towards the bottom:

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

Change the javascript task in gulpfile.babel.js to this:

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

Now any JS files you stick in the single-page directory will be copied to the dist directory and excluded from app.js.

For more about the template system used in the Foundation templates, see the Panini section of the Foundation Docs.

来源：https://stackoverflow.com/questions/35959308/how-to-add-javascript-just-for-one-specific-page

标签

javascript

zurb-foundation

zurb-foundation-6