什么是js组件

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




html页面如何引入axios静态文件_js变量后面加问号是什么

这就是一个”组件“



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

最简单的js组件

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

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

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

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

写下如下内容：

; (function (window) {
 window.addEventListener("click", function (e) {
 alert("我是最牛的需求");
 })
})(window);

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

根本不用测试验证，效果肯定完美！

解析下这个js组件

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

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