顶部右侧 | 自行修改 西安网站推广
当前位置:网站首页 > SEO技术 > 正文

代码重构:让你网站的代码更优美和简洁

seo秀 2019-05-25 34 浏览 0 评论

重构,这个词在前端这块让人想到的更多的是页面制作(HTML/CSS)这块的工作。然后在前端中还有一块更重要的地方 —— 那就是代码的重构;学软件工程的同学应该会比较清楚。,代码重构,简单来讲就是把原来的代码重新构建和编写,让代码更加清晰,提升代码的复用性和性能等。,

重构,这个词在前端这块让人想到的更多的是页面制作(HTML/CSS)这块的工作。然后在前端中还有一块更重要的地方 —— 那就是代码的重构;学软件工程的同学应该会比较清楚。

代码重构,简单来讲就是把原来的代码重新构建和编写,让代码更加清晰,提升代码的复用性和性能等。

下面开始抛砖,希望能为在做代码重构和对代码重构有兴趣的同学能带来一些启发和帮助。

实例:Web弹层(Dialog/LayerBox/LogicBox)

代码一:

这里创建一个对话框(多例)的基本代码,这里主要做了以下几件事

1、  如果页面上找不到为当前ID的对话框,则创建一个新的;

2、  设置对话框标题;

3、  设置右上角关闭命令菜单的事件;

4、  设置对话框内容;

5、  设置对话框操作按钮。

思考:

1、  是否真的需要多例形式的组件;

2、  是否真的需要在右上角加一个关闭命令菜单;

3、  ……

代码二:

 

经过之前的实践,将多例改成单例,这里也去除掉了右上角的关闭按钮,为了增加其扩展和灵活性,这里采用了事件注入(钩子)的方式进行回调处理。

对于这次重构后,得到以下改进:

1、  将多例改成单例,降低了对实例的维护,并且更方便的对实例进行管理;

2、  事件机制的改成,减少事件绑定和维护;

3、  将HTML结构解耦,JS代码不需要关心页面结构的维护;但是会带来页面上的维护工作;

思考:

还有没有其它更灵活和简洁一点的方式呢?

代码三:

上面是最近的一个演进版本,这个是一个公共的逻辑弹层(表单操作等),这里较上一次去调了事件钩子,直接采用callback传递的方式,并采用链式的方式进行处理,页面上调用更加简单。

调用示例:

较之前相比:

1、不需要先去set对应的事件钩子;

2、方法分离,各司其职。如:show/hide 只负责其可见性,其它的由对应的方法处理,使接口方法的职责更清晰;

3、页面结构回归到了JS代码,考虑多产品的应用场景,减少页面结构的维护

OK,抛砖结束。

最后一句话,代码优化无止境,只有更多的思考、重构。让自己的代码更具可用性、灵活性。也为团队降低学习成本。

延伸阅读:

  • 网站代码优化怎么做?得学会做“减法”
  • 该如何通过代码优化来提高网页加载速度?
  • 网站代码优化:网站加速必须注意的八个方面

相关推荐

让客户对你网站产生兴趣的办法!
让客户对你网站产生兴趣的办法!

大家好,欢迎来到西安蓝蜻蜓网络科技讲坛,今天我们讲述的是跟我们企业息息相关的话题,也是我们很多企业目前最头疼的问题,就是如何让客户对我们的企业或者个人网站产生兴...

1个月前 (12-23) 小杨seo

中小型企业在网络营销上需要注意的问题
中小型企业在网络营销上需要注意的问题

众所周知,随着现在互联网的发展和进步,越来越多的企业包括个人都加入了互联网这个庞大的信息体系中,我们通过互联网也了解很多企业的成长及产品信息,从而完成产品上的交...

1个月前 (12-20) 小杨seo

西安网络推广和线下推广的区别
西安网络推广和线下推广的区别

大家好,欢迎来到西安蓝蜻蜓网络讲坛,今天我们所讲的是,有关于我们企业线上和线下推广的共同点和不同点这方面的话题。随着互联网的进步,越来越多的企业入驻了互联网,同...

1个月前 (12-19) 小杨seo

seo诊断费用有哪些方面?
seo诊断费用有哪些方面?

大家好,欢迎来到西安蓝蜻蜓网络讲坛,今天我们所讲述的是SEO诊断,什么是SEO诊断?SEO诊断是从哪几个方面诊断的?SEO诊断需要多少费用?一、什么是SEO诊断...

2个月前 (12-10) 小杨seo

企业官网首页优化seo技术 优化知识有哪些!
企业官网首页优化seo技术 优化知识有哪些!

seo是搜索引擎优化的意思,那么大家seo技术有哪些吗?优化知识有哪些呢?新型黑帽技术包括有哪些呢?下面宝丞网给大家介绍一下关于seo技术的相关内容,有需要的朋...

2个月前 (12-09) seo秀

SEO技术,快速让你变成seo高手,干货需要收藏
SEO技术,快速让你变成seo高手,干货需要收藏

前言:本篇培训直击SEO精髓,为什么只打算用一节课讲SEO?因为SEO本身没有那么高深的东西。互联网知识泛滥成灾的原因主要是培训机构惹的祸。为什么学SEO?排名...

2个月前 (12-09) seo秀

SEO技术大全:SEO技术之经典30个白帽技术
SEO技术大全:SEO技术之经典30个白帽技术

SEO技术之经典30个白帽技术SEO技术之经典30个白帽技术,对于网络推广的人来说,如何让搜索引擎搜索到你的网站及让你的网站能在主流的搜索引擎上有良好的排名一直...

2个月前 (12-09) seo秀

网站优化SEO技术
网站优化SEO技术

大家日日都在用网站优化,SEO技术,日日不停的在做网站内容更新,外链制作等等,但是网站优化真的就仅仅是如此吗?为的是网站排名?网站流量还是网上营销额?也想问问我...

2个月前 (12-09) seo秀

什么是SEO高级技术?SEO教程教你如何运用
什么是SEO高级技术?SEO教程教你如何运用

今天SEO教程要介绍的是SEO站内优化的五大核心。主要包括:网站标题的写法,原创文章以及如何写原创文章,网站更新设置,网站全站链接,四处一词等相关内容。  第一...

2个月前 (12-09) seo秀

SEO是什么?SEO技术都包含哪些方面?

SEO是什么?百度百科上的解释如下:图一:什么是SEO简单的来说,就是通过优化手段来提升网站的排名。我们来举个例子说明一下,例如在百度搜索框中搜索SEO,如下图所示。图二:SEO的搜素结果我们看到,百...

欢迎 发表评论: