前台JS框架宣讲活动总结.docx
《前台JS框架宣讲活动总结.docx》由会员分享，可在线阅读，更多相关《前台JS框架宣讲活动总结.docx（20页珍藏版）》请在冰豆网上搜索。
前台JS框架宣讲活动总结
引入JQuery框架宣讲活动总结
孙权
参加了老大组织的这次引入前台JS框架的宣讲活动，也拜读了几位同事的活动总结，受益匪浅，感触颇多。
早年接触过很多前端技术，包括JS的prototype、ajax、JQuery、ExtJS等，基于Flash的flash、flashAS、flex、AIR等；基于Windows的ActiveX、DLL等；基于Java的applet等。
以前在选择框架时是相当慎重的，因为自己开发的项目差不多都是面向公网访问。
对脚本的执行效率占用资源必须有所控制；对客户端与服务器的交互次数也必须尽量减少；对初次加载页面的时间都讲究到毫秒，将代码简化简化，甚至将一个DIV的id或class名称都尽量用简短的命名；对不同客户端不同浏览器不同的屏幕分辨率也要进行完整的判断；为了追求W3C的标准验证通过，丢掉了早年用习惯了的table/tr/td，全部改用div+css等等等等。
而目前从事的电信BSS系统开发要幸福得多得多了：
已经不用考虑或者可以弱化上面的问题，BSS基本上是专线，客户的企业内部员工使用，带宽和服务器等硬件资源相当充足了。
并且无需考虑不同浏览器的兼容性（onlyIE），甚至中文编码问题（allGBK），翻页方式、数据展现方式等也不需要犹豫（原型Tapestry：
task-orientedcomponent面向任务组件）。
只管在后台准备好数据，表现都交由框架。
正是对这种深度封装的依赖，带来了一些不便，比如有时有一些灵活的界面构思、巧妙的实现方式、复杂的业务交互，到着手开发时却傻了眼，无从下手。
如同刘鹏提到的一些客户的反馈，ms有必要在部门内部，掀起一场前端开发学习的热潮^_^，为CRM2WADE框架添砖加瓦，让WADE亦炫亦幻亦疯狂。
呵呵，啰嗦了一堆fh，我想就以下三个方面和大家作一些汇报总结和研究探讨：
一、JQuery框架在CRM2的应用前景，以及其它框架的命运：
）
如衷老师介绍，JQuery在JS框架领域绝对是大牌，以其轻便灵活和广大群众基础而闻名，也是我们产品部门最值得引入和推广的框架之一。
其应用前景广阔而充满生机，以下结合JQuery能给WADE框架改进带来的好处进行举例分析，以期抛砖引玉：
1、操作更简单易行
引入jQuery对现有组件，进行二次封装，或开发一些常用的组件。
比如我在内蒙营销系统中封装的“客户多选组件”。
如下图所示：
（一次性营销方案新增）调用该组件的代码路径：
/cvsroot/CU_BSS_BF/CU_BSS_BF/crm/j2ee/BSSWEB/custmgr/web/sendordersales/OnceSchemeEdit.html
目前WADE框架中除了树型结构以及推拉框可以实现多选外，下拉菜单等都没有提供多选功能，但很多的查询页面，都需要这样多选条件的组件，比如，在查询用户信息时，查询条件中的网别选项，如果用普通下拉菜单（select/option），对不起，只能选择其中一个。
由此，如果结合jQuery，完全可以开发出很多多选组件，包括针对静态参数的通用多选组件。
模仿Ext的效果如图所示：
2、交互更友好生动
内蒙综合营销工作平台代码路径：
/cvsroot/CU_BSS_BF/CU_BSS_BF/crm/j2ee/BSSWEB/custmgr/web/ndesktop/Desktop.html
BSS4.1主管看板客户经理看板代码路径：
/cvsroot/CU_BSS_V41/web/ndeskview/DeskView.html
/cvsroot/CU_BSS_V41/web/ndeskview/ExtDemo.html
在内蒙综合营销系统工作平台以及BSS4.1的主管、客户经理看板中，分别实现了div布局、iframe内嵌页面布局拖拽和位置记忆功能。
其中内蒙综合营销系统由JS面向过程思想开发完成，拖拽不是很流畅；模块维护要靠更新前后台代码，增加许多判断。
BSS4.1看板刚对其进行了改进，采用了JS面向对象思想，并用了现有框架已引入的prototype、Ajax等JS类库，在嵌入多个iframe页面的情况下，经自测效率反而有很大提升。
另外内嵌页面引入了ExtJS，经精简、美化、不断调试，已经满足后台可配置化，无需前台页面开发模块化的要求。
保留了列的显示控制、列排序、列显示配置记忆及结合WADE后台的翻页功能等。
下图展示的是BSS4.0北四省，VIP个性扩展信息，照片上传功能。
实现效果如下图所示。
在原有的“文件上传组件”上作了改动，利用了JS的从上到下顺序执行的原理，重写了弹出模态上传窗口的函数popupUploadDialog以及上传文件成功后返回执行的函数setUploadFieldContent，从而巧妙地实现了，图片上传及图片预览的功能。
由此我想JS的动态性以及jQuery的强大，完全可以在我们后续的开发过程中让我们的系统更加友好而且生动，包括页面刷新提交等待、错误信息提醒等交互场合，发挥重要作用。
BSS4北四省VIP个性扩展信息照片上传代码路径：
/cvsroot/CU_BSS_BF/CU_BSS_BF/crm/j2ee/BSSWEB/custmgr/web/custview/PersonExtInfo.html
3、界面更简洁清爽
在页面内容较多，或操作步骤较多时，如客管里的“名单制集团新增”功能点，集成了查询，Ajax局部刷新，基本资料录入，联系人联系信息添加，数据提交校验等复杂的流程操作，可以考虑引入jQuery，在控制流程和逻辑判断上，界面展合等方面将会带来很多便利。
4、编码更优雅轻松
JQuery的初衷也像其他语言或框架一样，是想尽可能地让代码简洁并且可重用。
而WADE框架估计是因为诞生的比较早（JQuery是2006年创建），而且可能认为现有框架够用，多年没有正式推广新版本。
公司前辈其实也考虑到了引入成熟类库的问题，像prototype和ajax、json等。
这样做的好处当然是可以让代码变得更易读，可以用更简短语句表达复杂的逻辑。
举几个典型的例子：
a.方法链（methodchaining）
每次对jQuery对象调用方法时，方法都会返回相同的jQuery对象，应该是借鉴了Hibernate，如：
Hibernate方法链写法：
SessionFactorysessions=newConfiguration（）
.addResource（“hello/Message.hbm.xml”）
.setProperties（System.getProperties（））
.buildSessionFactory（）;
纯JS写法：
（见demo_1.1.html）
none;">
升级会员 