顶部右侧 | 自行修改 顶部左侧内容
当前位置:网站首页 > SEO技术 > 正文

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

seo秀 2019-05-25 15 浏览 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,抛砖结束。

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

延伸阅读:

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

相关推荐

做SEO多久才能看到效果?
  • 做SEO多久才能看到效果?
  • 做SEO多久才能看到效果?
  • 做SEO多久才能看到效果?
  • 做SEO多久才能看到效果?
什么是SEO网络推广,每天都需要做那些事?
  • 什么是SEO网络推广,每天都需要做那些事?
  • 什么是SEO网络推广,每天都需要做那些事?
  • 什么是SEO网络推广,每天都需要做那些事?
  • 什么是SEO网络推广,每天都需要做那些事?
SEO全揭秘,这里独一份,适合各阶段人群
  • SEO全揭秘,这里独一份,适合各阶段人群
  • SEO全揭秘,这里独一份,适合各阶段人群
  • SEO全揭秘,这里独一份,适合各阶段人群
  • SEO全揭秘,这里独一份,适合各阶段人群
今日头条seo如何优化?如何做搜索靠前呢?
今日头条seo如何优化?如何做搜索靠前呢?

一、“头条seo”是什么?头条seo指的是在今日头条app上用关键词搜索结果排名靠前。做百度有所谓的“百度seo”,做谷歌有所谓的“谷歌seo”,那么作为头条这...

6天前 seo秀

如何判断一个要优化的关键词能否SEO上百度首页?
  • 如何判断一个要优化的关键词能否SEO上百度首页?
  • 如何判断一个要优化的关键词能否SEO上百度首页?
  • 如何判断一个要优化的关键词能否SEO上百度首页?
  • 如何判断一个要优化的关键词能否SEO上百度首页?
百度官方分享:让蜘蛛抓取网页的四种方式
百度官方分享:让蜘蛛抓取网页的四种方式

百度在微信上分先过来四种让蜘蛛收录网页的四种方式,主推推送、sitemap、手工提交、自动推送。那是什么意思呢?1、主动推送:是最为快速的提交方式,建议您将站点...

3个月前 (06-03) seo秀

2019年百度seo算法大全 第一篇
  • 2019年百度seo算法大全 第一篇
  • 2019年百度seo算法大全 第一篇
  • 2019年百度seo算法大全 第一篇
  • 2019年百度seo算法大全 第一篇
2019年百度seo算法大全 第二篇
  • 2019年百度seo算法大全 第二篇
  • 2019年百度seo算法大全 第二篇
  • 2019年百度seo算法大全 第二篇
  • 2019年百度seo算法大全 第二篇
关键字的优化需要注意什么?
关键字的优化需要注意什么?

网站关键字可以带来更多的流量到您的网站,可以带来更好的排名为你的网站在搜索引擎。随着互联网科技的不断发展,我们在我们的日常生活中发现,在网络中起着非常重要的作用...

3个月前 (06-02) seo秀

SEO前景怎么样?

经济低迷,做付费推广你们不心疼吗?还是做SEO吧!对于利用搜索引擎进行的推广营销,这是任何企业都不可以忽略的。在做搜索引擎营销,即SEM,以百度为例子,SEM包含:知道、地图、文库、百科、经验等以及付...

欢迎 发表评论: