js组件的开发与简单应用

什么是js组件

我们先理解下什么是组件?通俗的讲,可以认为组件是能满足我们某项或某些需求的“东西”,它是什么无所谓。比如我想要一个能放money的东西,那么钱包就是这个“组件",我不用管它是怎么加工的,用的什么材质。

js组件的开发与简单应用

这就是一个”组件“

那么回过头来理解下js组件,就可以理解为能够满足我们某个功能需求的js。我们不关心它内部怎么实现的,只要知到怎么用就行了。

最简单的js组件

任性的需求:我就想要在我的web页面点击任何地方都要给我弹出个框框

-- 这种产品估计会被拍死

客户有需求,我们不得不满足啊,所以我们这样实现

一般一个js组件会单独写在一个文件中,那么我就新建个js文件把,起名叫做click4alert.js,

写下如下内容:

; (function (window) {

window.addEventListener("click", function (e) {

alert("我是最牛的需求");

})

})(window);

只要在我们html文件尾部引入这个文件,那么我们伟大的需求就搞定了:

<!-- 注意引入js的位置 -->

<script src="click4alert.js"></script>

根本不用测试验证,效果肯定完美!

解析下这个js组件

  1. 最前面用了个分号,起初很纳闷,这有啥用的,虽然我读书少,但也不能欺骗我吧,后来经过我大量阅读文章才发现其中的奥妙,原来它仅仅是用来避免跟别的js文件合并时,上个程序员小哥哥(小姐姐)在最后忘了写分号而兼容的。那在我这里真没啥用途,不过为了国际规范还是写上吧。
  2. 那后面的(function(window)...{..})(window)又是什么鬼!其实这是一个自执行函数,即当js文件被引入后就会立马执行,据说这里用到了闭包的概念,目的是为了减少变量的污染。那这样就可以理解了,它就是一个函数,最后一个window是函数的参数,前面的window是外面传进去的参数(window可以理解为js的根对象把,就像java中的Object?)
  3. 整个流程下来就是,当html引入js时,里面的自执行函数开始执行,执行的内容就是给window加一个click监听,动作是触发alert弹窗。

所以我们页面啥也没做就完成了这么变态的需求,以后再有这种产品也不怕了,直接用这个插件搞定。当然这只是玩笑,复杂的插件还是很难写的。不过了解了插件中的helloworld就有种啥都会的感觉了,后面就可以把之前写的div拖动实现改成插件了(先吹个牛。)

您可能还会对下面的文章感兴趣: