@网络老鼠技术小屋

网络老鼠技术小屋-涂飞平的博客空间

Angularjs使用有感

2 年前 1

由于最近连续几个Web产品/项目集中开发,而投入人员虽然也是Java开发人员,但之前主要是集中在基于UAP 平台的开发,擅长CS模式开发,Swing比较熟悉,但比较缺乏Web开发经验。

产品和项目都是重度数据展现系统(财政税务数据的处理和展示),在数据的界面展现,与用户操作的绑定上,需要大量的代码处理,而这部分代码并非业务代码,在初期开发的时候,利用JQuery做了一些基础的工作,但是在开发需要的代码量还是不小!
很怀念Delphi时代那些数据感知组件,设置好DataSet之后,自动完成数据的双向绑定!

开发了一段时间之后,产品/项目周期越来越紧张,投入的人员陷入近乎无止尽的前端展示(主要是数据操作,绑定,显示)中,最后决定通过寻找技术手段来结束这种情况!
了解了几个支持数据双向绑定的Web框架,最后确定使用Angularjs作为未来WEB产品/项目的首先框架,之所以选择它出于几点考虑:

  • Angularjs来自google,比较成熟,后续的发展没有问题
  • Angularjs的社区比较成熟,中国有Angularjs.cn,网上的教程也比较多
  • 通过DEMO的熟悉,基本上满足我们产品项目的需求,不满足的地方Angularjs本身提供了多种扩展方式

由于之前已经完成了所有后端和几乎一半前端的开发工作,而整个项目的开发瓶颈出现在前端数据表现和交互上,所以整个产品项目的转移都是集中在前端部分。

以下会说明在转换过程中出现的问题以及如何解决的。

    1)是否可以和JQuery一起使用:
    在开始了解Angularjs的时候,很多建议是Angularjs中尽量不要使用JQuery。这个说法本身没错,因为二者使用方式和思维方式不太一样:
    一个是通过数据来控制界面(DOM),一个是通过代码操作界面(DOM)。但两者实际上是可以同时使用的,并且angularjs会判断,如果发现页面在angularjs之前引入了jQeury,angularjs自身也会使用jQeury(如果没有引入或使用自身的jqLite)来操作DOM。
    我们的项目中由于包含一些原来的代码(有些校验和基本的业务逻辑)使用jQuery写的并且工作良好,所以这部分并没有动。很多页面都同时包含jQeury和angularjs的代码,如下图:
    a3.png
    在angularjs中可以随意调用javascript的全局变量和函数,而javascript中也可以通过angular.element().scope()来获取指定scope,然后调用其中的变量或者代码。
    a10.png
    虽然允许出现类似代码,有其历史原因 :-) 但也不建议大量存在,有时间的情况下,还是需要转为angularjs方式。

    2)后端需要做哪些调整:
    由于angularjs开发场景一般是SPA系统,所以几乎所有的数据交互都是基于Ajax的,而之前代码中大量通过jsp页面逻辑渲染的代码必须修改,将这部分代码做成基于json数据交互的服务形式,这部分工作由于不涉及数据库部分代码,仅仅加入Bean到JSON映射的转换就基本上可以工作了。
    a4.png

    3)哪些内容可以快速使用angularjs重新编写:
    这个需要结合各个项目自身的情况来评估,在我们的产品/项目中,在:
    1、数据展示;2、数据分页;3、树形展示等部分比较容易修改,数据展示使用了ng-repeat来完成table方式展示,非常快,如下图:
    a1.png
    虽然展示简单,但没有使用angularjs之前,这部分jQuery的代码还是很多,而引入angularjs之后,代码就简洁明了很多了,小弟看起代码来也舒服多了。
    a2.png
    展示中的序号采用angularjs行序号结合分页自动完成,奇偶行样式也使用行序号来处理,对于“疑点级别”的展示采用过滤器直接将诸如1,2,3之类的数字转换为“严重”,“关注”,“一般”的human友好格式,当然,还是用了强大的ng-repeat迭代指令来遍历scope中的行数据。

    4)在使用中遇到那些坑:
    其实在整个转移过程中,还是比较顺利的,对于jQeury擅长且工作良好的代码,基本上不动,而对于展示部分,代码几乎重写了!不过,之前4周的代码量,几乎在1周时间内就完成改写,angularjs的代码简洁明了,高效至极!
    但小弟在刚熟悉jQeury不久的情况下,加入angularjs框架,还是给他们的学习带来不小的负担,不过,这也是没有办法的事情!

转换完成后的产品项目中,所有的基于angularjs编写的Web component都可以在接下来的产品中使用。

    1)分页组件
    极简代码,效果非常好!
    a5.png实际使用效果参看上面截图。
    指令代码部分截图
    a6.png

    2)树形组件
    基于zTree插件,也是采用属性方式(比较偏向属性方式,这样对浏览器类型和版本没有要求)。
    a7.png
    效果图同样参考上面图效果!

    3)用户/用户组组件
    由于用户/用户组选择框在整个系统中需要量太大,所以把这部分也封装成angularjs指令,便于调用
    a8.png
    这个展示的效果如下图所示:
    a9.png


使用之后的一些感想:
1、以后的产品还是会采用angularjs作为首选前端框架,并从开始就需要按照angularjs方式来设计前后端架构;
2、大量减少了前端状态维护,数据绑定的代码量,代码的组织更合理(通过module/controller概念);
3、Web UI控件比较少,但由于angularjs的指令很强大,可以自定义指令来封装UI控件,而且这个工作也比较简单;
4、可以让前端人员具有更多后端开发人员思维,更好的完成工作上的配合。

技术的发展就是为了提高工作效率,降低人力成本!

评论

"Angularjs使用有感" 有 1 条评论

编写评论