0%
这是一片思考的空间 -- arthinking
Spring 重构&代码整洁之道 软件设计 JVM 并发编程 数据结构与算法 分布式 存储 网络 微服务 设计模式
Java技术栈 - 涉及Java技术体系

web组件的设计思路与编写 效率问题

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

jQuery插件的编写(web组件)

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

jQuery插件实现的方法和原理简单说明 jQuery插件的编写相关技术 设计总结和最佳实践

代码的重构

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

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宅
内功修炼
Java技术栈
Java架构杂谈是IT宅精品文章公众号,欢迎订阅:
📄 网络基础知识:两万字长文50+张趣图带你领悟网络编程的内功心法 📄 HTTP发展史:三万长文50+趣图带你领悟web编程的内功心法 📄 HTTP/1.1:可扩展,可靠性,请求应答,无状态,明文传输 📄 HTTP/1.1报文详解:Method,URI,URL,消息头,消息体,状态行 📄 HTTP常用请求头大揭秘 📄 HTTPS:网络安全攻坚战 📄 HTTP/2:网络安全传输的快车道 📄 HTTP/3:让传输效率再一次起飞 📄 高性能网络编程:图解Socket核心内幕以及五大IO模型 📄 高性能网络编程:三分钟短文快速了解信号驱动式IO 📄 高性能网络编程:彻底弄懂IO复用 - IO处理杀手锏,带您深入了解select,poll,epoll 📄 高性能网络编程:异步IO:新时代的IO处理利器 📄 高性能网络编程:网络编程范式 - 高性能服务器就这么回事 📄 高性能网络编程:性能追击 - 万字长文30+图揭秘8大主流服务器程序线程模型
📄 Java内存模型:如果有人给你撕逼Java内存模型,就把这些问题甩给他 📄 一文带你彻底理解同步和锁的本质(干货) 📄 AQS与并发包中锁的通用实现 📄 ReentrantLock介绍与使用 📄 ReentrantReadWriteLock介绍与使用 📄 ReentrantLock的Condition原理解析 📄 如何优雅的中断线程 📄 如何优雅的挂起线程 📄 图解几个好玩的并发辅助工具类 📄 图解BlockingQueue阻塞队列
📄 消息队列那么多,为什么建议深入了解下RabbitMQ? 📄 高并发异步解耦利器:RocketMQ究竟强在哪里? 📄 Kafka必知必会18问:30+图带您看透Kafka
📄 洞悉MySQL底层架构:游走在缓冲与磁盘之间 📄 SQL运行内幕:从执行原理看调优的本质 📄 洞悉Redis技术内幕:缓存,数据结构,并发,集群与算法