前端開發web組件之旅（一）-- 定義與加載組件

/* 前言 */

自上而下的 職責和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();
});