web组件的设计思路与编写 效率问题
本文由发表于5年前 | Javascript | 暂无评论 |  被围观 5,460 views+
jQuery插件的编写(web组件)代码的重构web组件编写需要注意的地方可扩展性的UI组件运行效率

随着web技术的发展,特别是交互性越来越强网络应用,前端的脚本语言也逐渐的活跃起来。当使用JS编写应用时,特别是在一个系统中,如果不利用到现有的框架技术或者一些第三方的组件,我们在编写了若干个功能之后,发现越来越多的重复代码,有时候需求的一点改变都会导致很多处类似代码的变动,维护起来特别困难。所以这里有必要通过面向对象的方式,把通用的方法抽象起来管理,为了增加模块的复用,特别是针对于web这种对于页面效果很看重,但是又没有什么标准的情况,很有必要抽象出自己的组件,方便复用,或者编写出jQuery插件。

jQuery插件的编写(web组件)

关于jQuery插件的编写方法,之前总结了下:

代码的重构

如果希望自己的代码能够不断的累积而可维护,就需要不断的重构,在重构的过程中,JS为例,利用JS模拟的面向对象编程,对原有的代码进行封装和抽象,逐渐构建出可复用的代码,然后再通过灵活的方法进行架构,这里就涉及到设计模式了,关于JS的设计模式,《JavaScript设计模式》这本书介绍的挺不错的,之前的一点点笔记:

而关于面向对象的Javascript实践,《基于MVC的JavaScript Web富应用开发》,这本书也是不错的。

web组件编写需要注意的地方

关于临时变量。如果是在局部中才有使用的,可以用var声明,如果是在整个类中都会用到,最好用this形式声明,另外,访问该变量的方法,也需要使用this声明,以便在同一个作用域范围内访问到this声明的变量。

关于默认参数,可以使用类似jQuery中提供的$.extend() 方法继承。

this.config = {
            data:[],
            selectable:false,
            el:[],
            pageable:false,
            selectRows:[],
        };

this.config = $.extend({}, this.config, config);
可扩展性的UI组件

包括自适应大小,特别是针对于现在的响应式设计

在编写过程中考虑可能的情况和兼容性,尽量适应更多的场景,写的更通用一点。例如不要限制大小,让它自适应,尽量让参数可配置。

运行效率

最佳的效果都是希望能够最流畅的运行组件,所以,在编写玩之后需要做各种测试,包括增加数据量进行运行效率的测试。一般导致组件运行效率低下的可能原因是在循环中大量的操作了dom节点,造成了额外的时间开销。因此可以从这点上考虑进行优化。

除了文章中有特别说明,均为IT宅原创文章,转载请以链接形式注明出处。
本文链接:http://www.itzhai.com/web-design-ideas-to-write-efficient-components.html
关键字: ,
arthinking Java技术交流群:280755654,入门群:428693174 more
分享到:
 
2013 3/17
文章评论
    没有评论
给我留言

有人回复时邮件通知我
Javascript的相关文章
随机文章 本月热门 热评
1 Fedora与Redhat系统忘记密码的快速解决办法 2011/4/30
2 Java基础笔记 – 字符流分类详细介绍和各种字符流类介绍与使用 字符集 2011/10/22
3 Java中使用Base64编码URL作为URL的参数 2011/9/12
4 Android中使用Gson解析JSON数据 2011/7/14
5 瀑布流向下拉取加载更多导致的数据重复问题 2014/8/30
6 JSF笔记 – JSF中的EL表达式语言支持 2011/12/2
友情推荐 更多
破博客 文官洗碗安天下,武将打怪定乾坤。多么美好的年代,思之令人泪落。
Mr.5's Life 白天是一名程序员,晚上就是个有抱负的探索者
行知-追寻技术之美 关注大数据,分布式系统
我爱编程 编程成长轨迹
Cynthia's Blog 学习笔记 知识总结 思考感悟
 
猜您喜欢
欢迎关注我的公众号 IT宅
关于IT宅 文章归档

IT宅中的文章除了标题注明转载或有特别说明的文章,均为IT宅的技术知识总结,学习笔记或随笔。如果喜欢,请使用文章下面提供的分享组件。转载请注明出处并加入文章的原链接。 感谢大家的支持。

联系我们:admin@itzhai.com

Theme by arthinking. Copyright © 2011-2015 IT宅.com 保留所有权利.