前端开发web组件之旅-- 定义与加载组件

Posted 2020-08-02

/* 前言 */

自上而下的 职责和API
应用层
框架层
框架
浏览器

一 组件定义与调用

1.增加一个组件

tabview.css
--------------------------------------------
.tabview_menu{xxxxx};
.tabview_content{xxxxx};

　　

tabview.js
----------------------------------
        var abc =5;
        function TabView(cfg){
                  this.a = cfg.a;
                  this.b = cfg.b;
}    

      TabView.prototype = {
                 c: function(){ abc++;},
                 d: function(){ abc--;}
}

    

　

2.引用一个组件　

  <link type="text/css" rel="stylesheet" href="css/tabview.css" >
  <script  type="text/javascript" src="js/tabview.js" ></script>
   <script type="text/javascript">
     (function(){
           var tabview = new TabView();
})()
  </script>

　

3.CSS命名空间和js匿名空间

treeview.css
----------------------------------
.treeview_menu{xxxx}
.treeview_content{xxxx}

/**Js通过匿名空间隔开公有私有,通过匿名函数形成域，把对象挂载到window上暴露出来接口
/*window.TabView = TabView  //闭包的经典应用

**/

tabview.js
------------------------------------
(function() {
     var abc = 5;
     function TabView(cfg){
             this.a = cfg.a;
             this.b = cfg.b;
  }
    TabView.prototype = {
            c: function(){ abc++},
            d: function(){abc--;}
    }
        window.TabView = TabView;
})();           

　　

4.基于require.js重写代码

animate.js
----------------------------------
define(function(){
   function Animate(){};
   return {Animate: Animate};
});

　　

treeview.js
----------------------------------------
define(function(){
         function TreeView(){};
         return {TreeView：TreeView};
});

　　

tabview.js
----------------------------
define([ ‘animate‘ ],function(a){
      function TabView(){
              this.animate = new a.Animate();
};
return {TabView: TabView};
});

　　

main.js
-------------------------------------
require ([  ‘tabview‘ ,‘ treeview‘ ],function(tab,tree){
               var tabView = new tab.TabView(),
                     treeView = new tree.TreeView();
});