需求很简单,解决很暴力。
前端很大一部分是纯javascript,没有第三方依赖的库,框架。嗯,借鉴了jQuery的 $ 选择元素。。。
css写在了index里,减少了个http请求
所有js都在一个立即执行的匿名函数里,虽然不符合jslint,但是完全封闭,安全些。
动态加载html用的大部分是dom函数,虽然有点乱,但比直接写清晰些html。
所有click事件统一处理,彻底解决了不要在循环里定义函数。。。
关于#!这个问题,用的很正常的url,js判断location.pathname,然后处理路由。很暴力,完全无视seo。
分页,因为get的数据不大,全部存到localStorage中,直接slice
异常处理,基本都是日常调试的时候加的。不能说测试。。没有测试文件。。。
国际化也很暴力,字段存到对象里,根据navigator.language判断,如果不支持用户的语言,直接默认英文
很好的利用了localStorage,减少了很多不必要的请求。所以速度也飞快。
请求ajax时加了个mask遮罩层,想加动画来着,不过,估计动画比整个程序都大,算了
页面很长的时候,虽然没加goTOP,但是对用户体验还是有很大的提升。不信找个百度百科页面,把页面拉到下面,然后打字试试。
还是看代码吧
document.addEventListener("scroll", function () { if (window.scrollY !== 0) { $("input.word").blur(); } else { $("input.word").focus(); } });
后端php负责api,http服务器负责伪静态重定向。。。
后端还处理了很重要的东西,base标签的值
没有它,ajax还有history全部瘫痪。。有了它,不用到处去配置url
<base href="/<?=APP_HOME?>/">
遗憾的是没能折腾个简单的前端模板。嗯,api也是完全暴露的,没有任何认证过滤限制机制,数据量很小,而且后端做的不错。。。等把算法学精了再加吧