带你用js写可复用组件,从此你就少了引用第三方库的烦劳!

2,093 阅读3分钟

前言

  • 我们在前端开发的过程中(其它开发也一样),总是会遇到这样一种情况:以前做的一个项目,里面有个组件,比如对话弹窗、登陆窗等等。一般我们写了之后就很少去管它了,但是像这样的一些组件,在不同的项目开发过程总是很多时候需要复用起来的。虽然现在网上很多js库都封装了这样的一些组件,如果你为了图快、方便的话,那么直接使用这些库也是可以的,但从这两个方面来说,我觉得有必要我们把我们写过的这些组件分离出来从而以后复用:1、如果你用第三方库的话,我们都知道,有很多第三方库并不是刚好封装了你要的那个组件而已,比如你需要一个登陆组件,那么可能第三方库确实封装了这个组件,但同时也封装了很多其它组件,所以你如果用第三方库的话,那么你就会为了一个小组件引入一些庞大的js文件和css文件以及图片!这样的库引入多了的话,那么后期你不仅需要更多地维护各个库的冲突等等问题,而且你的网站因此也会响应越来越慢,影响用户体验!2、如果你自己把你写过的组件单独分离出来复用的话,首先来说,你自己写过的,那么你用起来也会比较熟悉,对不?而且,这样的工作你做多了以后,提高你基本功的同时,你还会发现你现在就是在写一个“第三方库”了,虽然有很多瑕疵,但是原理差不多的!

  • 相关示例代码请用浏览器运行相关文件夹下html代码!

  • 注:本文档严格意义上来说并不是带你去怎么写一个第三方库,主要有两方面的原因:1、现在的第三方库有很多已经很成熟了,我们要学会使用别人的东西,不要重复造轮子;2、真正的第三方库考虑的问题还有很多,比如兼容性、命名空间及模块化等!但是本文档从某种意义上来说跟写第三方库原理差不多的!

  • 特别强调!!!特别强调!!!特别强调!!!(重要的事情说三遍)因为为了减少文件的数量和尽量快速说明问题,本文档不考虑代码兼容性,并且我html、js及css文件都写到一起了,如果你需要用的话,请自己适当调整,请知悉!同时为了说清楚问题,必要的地方我会尽量写多注释和包含的知识点,请自己查找分析加深印象!

  • 当然了,仓库不断更新中,未来新增的组件也会逐步增加……

  • 项目文档地址

  • 写的不对的地方,请issue我