js内嵌式一定要用到alert吗

JavaScript014

js内嵌式一定要用到alert吗,第1张

js内嵌式一定要用到alert。js执行的时候，获取json过程中，没有等待，一直往下走，走到for这里，没有拿到返回的json，这个option还没有被append，就是空，里面就不会执行，加了alert，强制等待，这时候json已经有数据了，会执行到for里面的代码。实际使用中，不能一直用alert来代替，是AJAX的异步请求原理，默认是异步的，就是执行提交的时候继续往下走，要把这个默认的设置更改一下。

需要准备的材料分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，新建html文件，例如：index.html，编写问题基础代码。

2、新建index.js文件，将内嵌js内容添加到index.js文件中。

3、在index.html的head标签中新增引用代码：<script src="index.js"></script>。

4、浏览器运行index.html页面，此时成功引入index.js并调用其内容。

大段的 HTML 嵌入到 JS 里结果就是悲剧。不能代码高亮不能自动缩进，太难维护了。

我的经验是，直接把 HTML 单独写到一个浏览器能访问到的文件里，比如 template/foo.html。然后 JS 里发一个同步 XHR 请求去读这个文件，例如：

var html = Template.load('/template/foo.html')

var target = document.getElementById('xxx')

target.innerHTML = html

Template 是一个工具类，负责发送同步 XHR 请求并返回结果。

这样在开发的时候，模板文件和 JS 代码分离，非常好维护。

当然这样做的话，上线的时候总发 XHR 请求也不是办法。所以在打包 JS 之前，我一般会通过脚本把所有的 Template.load('.*') 提取出来，替换成对应 HTML 的内容。这样在开发时非常方便，上线时也没有性能问题。

比如上面的代码被打包工具跑一下就变成了：

var html = "\n...\n"// 引号里是 /template/foo.html 对引号、换行做了转义之后的内容，由工具自动生成

var target = document.getElementById('xxx')

target.innerHTML = html