关于DangDang JavaScript Library的一些设想

关于DangDang JavaScript Library的一些设想

 

昨天@蘑菇问到关于构建DangDang JavaScript Library 的问题，因为之前在UI设计部承担的交互工作并不是很多，后来到BD事业部，之前构想的创建一套适合当当的JavaScript框架也搁浅了。趁着跟 @蘑菇聊的机会，经过这两年的学习和实践，梳理下自己之前的想法。

 

对于JavaScript框架，我一直的看法是“实用是第一位的”。无论是强大的jQuery, 企业级开发的YUI, 把web能够实现的像桌面应用程序的ExtJS……，从本质上来讲，万变不离其中，本质上都是对前端“结构、表现和行为”的一次再封装。

 

鉴于当当之前的开发流程，是由开发实现交互（如广告的轮转、Tab切换等效果），前端只是简单的负责静态页面的制作。PHP程序员都使用的是jQuery框架，强制推进一个新的框架，不如顺势而为，所以，个人的建议，还是基于jQuery 去构建一套当当自己的JavaScript框架。这样对于前端和开发的沟通都会节省很大的成本。

 

 

“万丈高楼平地起”，对于这套框架的开发，我觉得分为三个阶段：

 

电商网站，有其自己独特的特点，业务逻辑复杂，前端页面的数据显示量大，但是在交互方面每部分基本上独立的。

在这种情况下，根据当当自己的业务情况，将公共交互情况提取出来，如slide、tab等，已jquery plugin的方式开发。

这里，@蘑菇提到的一个困惑：“开发每次的数据都是不一样的，那怎么做到插件的通用型呢？”

其实，回答这个问题，还是回归到前端的基本概念“结构、表现和行为”上面去了：

 

从PM确定需求，到UI Design给定的PSD设计稿，前端和开发都是对PSD设计稿的一次再重现。区别在于前端更多的考虑是页面表现，开发侧重的是数据的推送。

所以，当PSD确定以后，页面展现的元素基本上就确定了。

 

举例来说，像首页的“名店街”这种tab效果

在开发jquery tab的plugin时，

Step 1： DOM结构 – 这是“结构”

Step2：   CSS样式  -- 这是“表现”

前两步都不需要去考虑填充的数据

Step3：   通过JavaScript实现tab效果  -- 这是“行为”

此时，就需要考虑数据的传递，将需要展现的数据进行一次封装，作为参数传递到plugin方法中，这样后面PHP开发需要做的仅仅是数据的映射，即他们传递相同数据结构的data即可。

 

前端开发的时候，可以自己构造静态的json数据进行调试。

在这种情况下，需要对插件的可复用性、API文档的规范化都提出了一定的要求。

 

在plugin完善的情况下，采用C#等语言的命名空间的概念（避免变量的污染，提供进一步的封装），对plugin进行包装，页面按照需要进行引用，最大程度减少冗余的css及js引用。

 

剩下的就是对前端规范的一个整理，将package组合为当当自己的JavaScript Library。这一步的工作其实并不是仅限于文档化，将CSS 进行模板预编译，js、css的压缩与调试……都是需要根据实际情况进行开发、配置和完善。

 

原创文章，转载请注明出处： chaichunyan

关于DangDang JavaScript Library的一些设想