详解客户端JavaScript框架的5个破绽

　　【 评述】几个月前，当我们打开Sourcegraph网站的时辰，它是一个富AngularJS应用，处事器只要把原始HTML和JSON endpoints返回，剩下的就交给Angular来搞定了。我们就这样懵懵懂懂地做出了最初版本的Sourcegraph。

　　可是单页(single-page) JavaScript框架并不合用于每一个站点。Sourcegraph就是一个内容为主的站点，我们徐徐发明这个富js应用的开拓照旧弊大于利;下面是我们在探知这条路上碰着的沟沟坎坎，但愿对有类似遭遇的开拓职员一些辅佐。

　　下周，我们来接头更多地关于我们是怎样从AngularJS迁徙server-side GO templates

　　客户端JS框架的5个破绽

　　我们早就知道这会有许多的坚苦，可是不知道到底有多灾

　　1. 搜刮排名和Twitter/Facebook预览

　　搜刮引擎爬虫和交际网站的预览抓取器不能加载纯Javascript站点，而假如提供替代版本又慢又伟大

　　有两种要领可以应承爬虫阅读你得站点。你可以在处事器端运行一个赏识器实例用以执行你的应用里的Javascript，然后返回HTML功效(PlantomJS可能WebLoop)。 可能你可觉得你的站点专门成立一个HTML版本为爬虫处事

　　第一个要领必要你为每一次页面加载成立一个headless赏识器(可能tab)，比起直接产出HTML，这样会耗费许多的时刻和体系资源。基于你用的框架，会耗费许多的事变来抉择什么时辰已经筹备好的页面将被渲染。 你可以缓存页面，可是假如页面常常改变，不单优化甚微并且会增大伟大度。

　　这样做还会低落你的页面加载速率好几秒，对搜刮引擎排名也倒霉。(PlantomJS必要Xvfb和WebKit)

　　第二个要领(做一个处事器端站点)对简朴地站点有用，可是假如页面许多，那用这个要领就形同恶梦。

　　假如Google以为你的处事器版本站点跟你的主站版本有很大的差异，那他就会狠狠的处罚你，到时辰你连怎么死的都不知道

　　2. 不行靠的统计和监控

　　许多说明器材必要易于堕落，人工集成来行使HTML5 history API(pushState)用于导航。由于他们很难自动检测到你的应用行使pushState导航到了新的页面。纵然可以做到，他们如故必要守候你应用里的信号来网络新页面的信息

　　怎样办理这个题目呢?取决于你的客户端用什么导航和你想集成什么说明器材。用Google说明+Backbone.js?实行一下backbone.analytics。用Heap(趁便说一下，太酷了)和UI-Router?配置你本身的$stateChangeSuccess并挪用heap.track

　　还没完事呢!你想追踪起始页面加载?大概你在双向跟踪他?你会跟踪失败的页面记实吗?假如你行使replaceState取代pushState呢?假如你错误的设置了说明挂钩可能属于搜查导致依靠进级搞坏了工作。当你发明的售后，很难去规复你错过的说明数据(可能消除一再数据)

　　3. 又慢又伟大的构建器材

　　前-后端JavaScript构建器材，好比Grunt，必要伟大的设置并且很慢。还好我们有像ng-boilerplate这样的project来帮我们做设置，可是假如你想添加一个自界说的步调照旧逃不出又慢有伟大的怪圈(我为什么说Grunt伟大，看看这个设置文件就知道了)

　　一旦你设置好了你的应用，你如故要忍受漫长的JavaScript构建时刻。你可以把dev和production构建通道分隔来进步开拓速率，可是始终免不了走这么一遭，用AngularJS尤其云云，他必要在丑恶的代码前行使ngmin(假如你用了这个成果)。着实，Sourcegraph由于这些丑恶的JavaScript示意代码几度被毁

　　还好，Gulp已经有了极大的进步

（编辑：厦门网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!