<p><code></p> <p>在一个项目中,经常会出现多个地方都要使用到同一个函数的情况,尤其在vue的组件之间是相互独立的情况下,要是每次要使用到函数都要重新定义,这样会显得特别累赘繁琐,也会造成代码的冗余,所以有没有办法注册一个通用的函数供所有组件使用呢?</p> <p>这就需要我们来自定义全局函数了,思想跟java的通用工具类基本是一样的,看过我几篇文章的亲们就会知道我做的项目是webpack+vue2.0+...的框架下实现的,所以基于此框架,我们该如何定义全局函数呢?</p> <p>1、我们可以在src目录下新建一个通用的js来存放全局函数,比如我这里是建了util.js,你们也可以取名tool.js之类的,随你们高兴。因为可能会用到其他通用的js,为了代码的规范,我都将他们放到utils的文件夹里了,这些都是自定义的,命名没有强制要求</p> <p><span class="img-wrap"><img data-src="/img/bVWQiD?w=302&amp;h=571" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <p>然后怎么在util.js里面定义全局函数呢,如下:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="/* *首先是相互调用,接收的地方用import,输出的地方用export *比如这里面需要用到cookie.js中的方法,那么就要先把cookie引用进来,这个思想跟后面的引用是一致的 */ import cookie from './cookie'; /* *接下来是定义全局函数 *因为全局函数是要给外部使用的,所以需要将函数用export告知外部即可 *比如我们在这里定义了日期的格式,供后面组件统一改变 */ //Date对象转化为yyyy-MM-dd格式 export function dateFormat(dateObj){ var year = dateObj.getFullYear(); var month = (&quot;0&quot; + (dateObj.getMonth() + 1)).slice(-2); var day = (&quot;0&quot; + dateObj.getDate()).slice(-2); return year + &quot;-&quot; + month + &quot;-&quot; + day; }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code><span class="hljs-comment">/* *首先是相互调用,接收的地方用import,输出的地方用<a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a> *比如这里面需要用到cookie.js中的方法,那么就要先把cookie引用进来,这个思想跟后面的引用是一致的 */</span> <span class="hljs-keyword">import</span> cookie <span class="hljs-keyword">from</span> <span class="hljs-string">'./cookie'</span>; <span class="hljs-comment">/* *接下来是定义全局函数 *因为全局函数是要给外部使用的,所以需要将函数用export告知外部即可 *比如我们在这里定义了日期的格式,供后面组件统一改变 */</span> <span class="hljs-comment">//Date对象转化为yyyy-MM-dd格式</span> <span class="hljs-keyword">export</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">dateFormat</span>(<span class="hljs-params">dateObj</span>)</span>{ <span class="hljs-keyword">var</span> year = dateObj.getFullYear(); <span class="hljs-keyword">var</span> month = (<span class="hljs-string">"0"</span> + (dateObj.getMonth() + <span class="hljs-number">1</span>)).<a href="http://www.js-code.com/tag/slice" title="浏览关于“slice”的文章" target="_blank" class="tag_link">slice</a>(<span class="hljs-number">-2</span>); <span class="hljs-keyword">var</span> day = (<span class="hljs-string">"0"</span> + dateObj.getDate()).slice(<span class="hljs-number">-2</span>); <span class="hljs-keyword">return</span> year + <span class="hljs-string">"-"</span> + month + <span class="hljs-string">"-"</span> + day; }</code></pre> <p>2、如何调用全局函数,就跟上面提到的一样,那里需要用到就在那个组件的script开始的地方import进util.js的文件,然后调用util里面的函数就行了,如下:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<script> import * as util from '../../../utils/util' <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default { data() { return { //这里调用了util的dateFormat()函数 outputStartDate: util.dateFormat(new Date()), } } } </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"> <span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> util <span class="hljs-keyword">from</span> <span class="hljs-string">'../../../utils/util'</span> <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> { data() { <span class="hljs-keyword">return</span> { <span class="hljs-comment">//这里调用了util的dateFormat()函数</span> outputStartDate: util.dateFormat(<span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>()), } } } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p></code></p>

本文固定链接: http://www.js-code.com/vue-js/vue-js_26444.html