用原生JS、CSS、HTML仿制的V2EX社区主页#第一遍

效果



目前页面布局和样式没有太大的问题，最主要的问题是在JS的部分。
本身社区的风格就很简洁，没有什么花里胡哨的特效，页面交互也很简单，做起来并不像电商页面那样复杂。
目前最大的问题出现在ajax的部分。

问题总结：

ajax问题
还无法实现跨域引用api，而是直接复制了网站提供的api，在本地服务器中访问。
通过ajax访问api的时候，json中中文部分的unicode会变成undefined，目前还没找到解决方法。但问题应该就是出在var arr=eval(str);这一步，因为在这之后直接alert(arr[0].member.title)（主题中文标题）的时候，返回值就是undefined，把eval（）替换成JSON.parse也不行，或许不应该用这种方式直接将ajax返回的字符串转为对象。
问题代码：

样式问题
在服务器上运行时，通过DOM生成的html的样式失效了，包括没在服务器上运行时可以显示的样式一并失效了。
不用服务器运行

使用服务器运行

另一个关于样式的小问题，有时给div添加box-shadow会没有效果，有时又有效，不知是否是因为设置其它div样式时产生了冲突。

查漏补缺

之后着重要学习和解决的是：

• 将ajax返回值变为对象，并且能够正常读取unicode的方法；
• DOM生成的html的样式无法显示的问题。

之后的任务：
单独重做“今日热议主题”这一块，并解决此次ajax和css产生的问题。
------------------------------这是一条分割线----------------------------------
今天用console.log()在后台看了一下ajax返回的值才发现，会出现undefined的情况是因为我的引用错误，不是arr[i].member.title而是arr[i].title，而样式也恢复正常，只是因为服务器会缓存样式，需要比较长的时间才能够渲染更新。
总结就是细节决定一切！
不过还是没有进行跨域引用api。

-----------------------------这是另一条分割线---------------------------------
跨域使用第三方api最简洁方法：
ajax配合后台php获取第三方api实例