前端开发笔记（一）

最近开始接触百度echarts，一个将数据可视化的JavaScript库。我几乎没有学过前端，更没有JavaScript的底子，所以在前期学习过程中还是有些困难的。下面就是学习过程中遇到的一些困难和心得。

问题

1. 三天前我想利用刚刚学到的几张图表做一个简单的数据展示网页，设计页面如下：

   
   
   

   设计页面.png

可是在编写过程中，展示出来的页面始终是这样的：

问题页面.png

很明显，最右边的地图没有了。
进入firefox的控制台发现错误如下：

firefox错误提示.png

我第一反应是更换浏览器，在我用了firefox、chrome、edge、ie等浏览器后，发现只有edge可以正常显示。
我开始研究报错提示，提示说是格式问题，以为是json文件出问题了，我换了好几个文件，最终发现并没有解决。
后来我查看chrome的控制台报错信息：

chrome错误提示.png

此时，我并没有注意到Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.，以为还是文件问题，我来试过了各种jQuery、echarts版本，发现都没有用，直到最后，在毫无办法的情况下，重新看这段错误提示，在仔细研究这段话的含义后，发现这根本不是文件的问题，而是由于我在访问页面的时候，是直接访问的本地文件：

访问本地文件URL.png

而此时，由于浏览器的安全设置，不允许页面访问本地的json文件（跨域），导致出错。而正确的打开方式应该是建立本地web服务器，然后再从服务器中打开网页：

正确URL.png

综上 前端开发过程中，可能会遇到一些非常细小的问题，很多情况下并不是代码出错，而可能是环境有问题，尤其是各种浏览器兼容性问题，都可能导致无法实现目标效果。