对于JS文件的引用,尽管当前有不少框架和工具(比如webpack,commonjs,requiresjs等)都做了很好的处理。但是抛开这些框架,了解原生的加载方式还是不无裨益。本文简述一些js文件的同步和异步加载方式。 同步加载 可在html文件里以标签插入,这是初学时最基本的方式。</p> <p>准备两个js文件如下:<br></p> <p>calc1.js</p> <p class="jb51code"><br></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;">console.log('calc1 loading begin') function add(...args) { return args.reduce((currentTotal, i) => currentTotal + i, 0); } console.log('calc1 loading end')</pre><div class="contentsignin">登录后复制</div></div><p>calc2.js</p><p class="jb51code"><br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;">console.log('calc2 loading begin') console.log(add(1,2,3)) console.log('calc2 loading end')</pre><div class="contentsignin">登录后复制</div></div><p>calc2.js 是依赖calc1.js的。</p><p>html文件如下:</p><p class="jb51code"><br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:xhtml;"><body> <script src="calc1.js">