Pre-Caching Other Folders and Files for Faster Navigation Chapter 7A popular method for documentation is the JavaScript DocBlock standard. This set of
conventions lays out style guide-like rules for you to follow when documenting your code.
DocBlock is formatted in a comment block and features keywords starting with an @, such
as @author, @example, or listing what parameters a function can accept with the @param
keyword. An example would be:
/**
* Displays a folder with a link and cache its contents
* @example <folder :f="entry" :cache="getFolderStructure"></folder>
*
* @param {object} f The folder entry from the tree
* @param {function} cache The getFolderStructure method from the dropbox-
viewer component
*/Starting off with a description, DocBlock has several keywords to help lay out the
documentation. We'll walk through our completed Dropbox app with added
documentation.
Let us first take a look at the breadcrumb component:
/**
* Displays the folder tree breadcrumb
* @example <breadcrumb></breadcrumb>
*/
Vue.component('breadcrumb', {
template: '<div>' +
'<span v-for="(f, i) in folders">' +
'<a :href="\'#\' + f.path">{{ f.name || 'Home' }}</a>' +
'<i v-if="i !== (folders.length - 1)"> » </i>' +
'</span>' +
'</div>',
computed: {
folders() {
return this.$store.state.breadcrumb;
}
}
});Moving on to the folder component:
/**
* Displays a folder with a link and cache its contents
* @example <folder :f="entry" :cache="getFolderStructure"></folder>
*
* @param {object} f The folder entry from the tree
* @param {function} cache The getFolderStructure method from the dropbox-