PC端大型单页式商业内容管理系统的JS模块化构建探索

前提 为了不被喷得太惨,给标题加了这么多的限制定语也是相当不容易的了。此文讨论的是我所处的环境下对JavaScript构建的一些简单探索,因此有相当多的前提限制。 首先,何为大型。从我们的系统来看,20多个业务模块,近100个页面组成的单页系统,对应的业务源码代码量如下: 对应的依赖库,除underscore和moment外均为公司内部库,代码量为: 其次,所谓的“模块化”指我们使用AMD进行构建,使用符合社区AMD标准的Loader进行模块的加载。 而“PC端单页式商业内容管理系统”则代表着系统的不少特性: 使用是相对强制的,对用户来说这是一项工作,而不是爱用不用的用户产品。 商业公司通常拥有较好的网络环境,面向PC设计更使得带宽不是一个需要着重考虑的因素。 单页系统使得所有功能被包含在一个HTML页面内,不存在页间的跳转,因此资源不以页面为单位进行切分。 为何要构建 第一个问题是,AMD有自然的按需加载的属性,按需加载也是一直被提倡的一种模式。那么,如果不进行任何的构建,让模块自然地按需加载,是否可行? 如果看了这个图,你还相信按需加载的话,可以停止此文的阅读了: 简单来说,按需加载与构建并不冲突,我们不能将所有资源最细粒度地使用按需加载进行管理,必要的构建来减少资源请求是必要的。 随之而来的,我们会考虑标准的代码合并方案。相当多的站点会将所有的JavaScript合并为一个文件,这也是最简单粗暴有效的方案。 但是对于大型的单页系统而言,…

聊一聊复用

复用是每一个工程师的追求,无论是设计还是编码我们最常说的除了“产品是SB”、“进度赶不上”外,恐怕就是“要好好复用”了吧。当一个应用或者一个系统日趋复杂的时候,我们总是希望其维护性不会线性地降低,而解决这一问题的方法上,就往往归结为简单的“复用”二字。 在与不少同学的沟通中,我发现有一部分工程师对“复用”的理解是有失偏颇的,在此针对比较容易出现的几类曲解进行一下解说。 复用的目的 我的论断很简单: 复用有很多的目的,但少写代码不应是其中一个。 注意这边说的是,少“写”代码不应该是复用的目的之一。所谓的“写”,是一个人所做出的行为,复用作为一种工程手段,其应该解决的是工程的问题,而不是人的问题。 更直白地说,要少“写”代码,最好的手段是复制+粘贴大法,而不是费尽心思去调整代结构、做逻辑拆分、应用各种模式。 但事实上,在支持追求复用的过程中,我们确实往往可以做到少写代码的效果。因此少写代码其实是复用的一种“副作用”,而不是目的。 所以,与人讨论代码的设计与实现时,…

博客单页化实践

这个单页化的博客现在也没在用了,Ghost平台挺好的……如果需要看代码的话,请参考GitHub上的仓库 半年前,因为VPS未续费导致所有数据丢失,直至今日终于重新恢复了所有的文章数据(虽然丢失了全部的评论),并且借此机会对所有文章进行了一次重新审视,修改了部分问题,并将所有示例迁移到jsfiddle和jsperf上,总算造一段落。 新的博客完全独立建设,不使用任何第三方的CMS系统,后端使用ASP.NET MVC实现,数据库使用MySQL,通过Mono部署于Ubuntu Server之上,前端使用nginx作为静态服务器。 也正因为完全独立构建,不受任何系统出于安全、简便等奇怪理由而附加的限制,这个博客系统也成了自己练手的娱乐场。就比如本篇要介绍的OPOA化实践。 概念 OPOA,全称One Page One Application,中文可以称之为单页应用。 顾名思义,在OPOA下,一个页面组成一个应用,不再以传统的超链接跳转导航的方式,而是通过javascript以XMLHttpRequest加载数据,通过DOM操作展现数据。 作为一个单页应用,其优势主要有: 多个页面拥有相同的结构时,一些相同的内容(如侧边栏、LOGO等)不需要重复加载,节省流量(及一定的数据库查询)。 没有浏览器跳转地址导致的短暂空白页面状态,提升用户体验。…

浅谈eval的影响

听闻最近由于老赵在其Wind.js关于eval这一函数使用上与BYVoid进行了一系列的争论,甚至为此写了一篇博客来证明eval对性能的影响可以忽略这一观点。 而不幸由于在这一次讨论中,起于Ericpoon智对eval性能影响的疑问,也不知不觉参与了一些讨论,随后Franky提出要有数据上的事实来说明这一问题,于是在好久没有新的博客出产的时候,决定对这一问题进行一下非常浅薄的挖掘,提供一些客观的数据。 首先在此文中,需要声明的是: 个人倾向于不要计较eval产生的影响。 此文会从eval有负面影响这一角度进行表述和举例,与老赵的博客属于完全相反的观点,但并不是一种对其的驳斥或者反对,仅仅是希望可以提供一些客观的理论依据。 本文只谈V8引擎,由于这一问题是不同引擎的表现会大不相同,不可能完全覆盖,因此数据不可作为权威参考。 本人不懂C或C++,看不懂V8,因此完全是黑盒的推断,各结论也不具权威意义,完全可能是臆测,当然数据保证真实。 以下是本次测试使用的Chrome版本详细信息: Google Chrome: 21.0.1180.79 (Official Build 151411) m OS: Windows WebKit: 537.1 (@124502) JavaScript: V8 3.11.10.18…

所谓闭包的PPT

这是近期一次内部分享的PPT,从函数的相关概念上,主要内容有: 变量的概念。 闭包的表象。 核心概念,包括可执行代码、执行环境、词法环境、变量环境、环境数据、绑定对象等。 函数的相关过程,包括创建函数、进入函数、定义绑定初始化、变量查找等。 闭包对垃圾回收的影响的探究。 PPT权当对新事物的一种普及性展示,不会有深入的内容,也不会有详细的例子,如果有任何疑问,欢迎随时交流。 如需观看或下载,请点击此处。…