知识共享许可协议

前端 IoC 理念入门

背景

近几年,前端应用(WebApp)正朝着大规模方向发展,在这个过程中我们会对项目拆解成多个模块/组件来组合使用,以此提高我们代码的复用性,最终提高研发效率。

在编写一个复杂组件的时候,总会依赖其他组件来协同完成某个逻辑功能。组件越复杂,依赖越多,可复用性就越差,我们可以借助软件工程中优秀的编程理念来提高复杂组件的可复用性,以下将详述其中之一的依赖倒置理念。

什么是 IoC

IoC 全称 Inversion of Control,中文术语为依赖倒置(反转),包含两个准则:

  1. 高层次的模块不应该依赖于低层次的模块,他们都应该依赖于抽象。

  2. 抽象不应该依赖于具体实现,具体实现应该依赖于抽象

其背后的核心思想还是:面向接口编程。

我们用一个例子来说明:我们要实现一个列表 A,能够加载一系列的信息并展示,

于是很自然的我们遵守职责单一功能,将展示和加载两个逻辑拆分成2个类:

阅读全部

前端开源项目持续集成三剑客

开发业务代码的时候,我们总能发现一些通用的功能。这时候,作为一个在互联网时代富有分享精神的程序员,就会想要把项目开源出去,让更多的小伙伴去使用,偶尔可能会有大神评论,能学到很多。 在 GitHub 上, README 是最先让人看到的,一些应用广泛的项目的 README ,除了非常详细的文字介绍,还常常会带有很多小徽章,比如 Vue 的这个 README 的开头:

Vue

Vue

这些徽章 (badage) 展示了代码的测试覆盖率构建状态在各个浏览器中的运行情况,这会让项目显得更加专业和有说服力。本文以笔者集齐了一套徽章的亲身经历,总结了过程中的主要流程和一些踩到的坑,欢迎大家补充,让我们的项目流行起来!

阅读全部

作曲家与听众

原文:Composers and audiences

(没错,这篇文章是关于 JavaScript 的,在这个比喻里 YY 一会吧。)

想象一下自己是一个十八世纪的年轻宫廷作曲家。你刚刚从学校里出来到维也纳,心里有一个目标:向前辈大师们学习,提高你的技艺。你听过莫扎特的令人震撼的歌剧,巴赫沉重的赋格曲,也梦想着用这种传奇的艺术形式来征服你的听众。

Source: Wikimedia Commons

Source: Wikimedia Commons

你对近期在乐器响度上的进展感到激动——毕竟小提琴的音孔在你那个年代才刚刚完善。你还被探索者们所描述的来自远东的陌生记谱法深深吸引,它们完全不像你在学校所学的12个音符音阶。你甚至还听过非洲鼓复杂的韵律,要远远的复杂于欧洲标准锁步打击乐器。

阅读全部

聊聊前端排序的那些事

前言

貌似前端[1]圈一直以来流传着一种误解:前端用不到算法知识。[2]

长久以来,我也曾受这种说法的影响。直到前阵子遇到一个产品需求,回过头来看,发现事实并非如此。

阅读全部

雪碧图在缩放场景下的特殊处理

回想n年前刚写前端的时候,在处理一个’鼠标hover切换背景图会闪’的问题时,将两张背景图合成一张图片,顺利解决问题。这应该是我第一次用到雪碧图的情况。

雪碧图作为背景在切换时不会有因为需要等待下载而产生的闪现

雪碧图作为背景在切换时不会有因为需要等待下载而产生的闪现

如今,打开一个站点,呈现铺天盖地的图片资源的页面随处可见。而多数站点更会用一套包含几十个风格统一的图标的图标库,加之移动端的占比与日俱增,雪碧图这项技术被运用的就越来越普遍。

阅读全部

强迫症的模块化

在ES2015发布后,JavaScript最终也有了一个标准的模块化方案,而同时从webpack开始,也带来了一波“一切皆模块”的潮流。整个2015-2016的前端发展中,除去在UI层不断的努力和突破外,几乎每一件事都和模块化脱不开关系。

本文也试图从几个方面简单地说一下模块化,并分析一些在模块化实施中产生的误区。

阅读全部