1.组件的定义和加载
tabview.css
.menu{}
.content{}
tabview.js
var abc=5; function TabView(cfg){ this.a=cfg.a; this.b=cfg.b; } TabView.prototype={ c:function(){ abc++ }, d:function(){ abc-- } }
tabview.html
<head> <link rel="stylesheet" href="tabview.css"> </head> <body> <script src='tabview.js'></script> <script> (function(){ var tabView=new TabView(); })(); </script> </body>
2.css命名空间和js匿名空间，防止css和js的命名冲突
①css通过加前缀形成命名空间
tabview.css
.tabview_menu{} .tabview_ content{}
treeview.css
.treeview_menu{} .treeview_ content{}
②js通过匿名空间隔开公有私有（闭包）
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; })();
treeview.js
(function(){ var abc=100; function TreeView(cfg){ this.a=cfg.a; this.b=cfg.b; } TreeView.prototype={ c:function(){ abc*=2 }, d:function(){ abc/=2 } } window.TreeView=TreeView; })();
3.组件的依赖关系
①增加一个有依赖关系的组件
<head> <link rel="stylesheet" href="animate.js"> <link rel="stylesheet" href="tabview.js"> <link rel="stylesheet" href="treeview.js"> </head> <body> <script src='tabview.js'></script> <script> (function(){ var tabView=new TabView({ animate: new Animate() }); })(); </script> </body>
问题：
1.需手动处理组件间的依赖关系
2.加载项太多，破坏页面的整洁度
②模块化和require.js
define定义模块
mode1.js
define(function(){ return { a:3 }; });
mode2.js
define( [ 'mode1' ],function( m1 ){ var a,b=2,c=3; a=c*m1.a; return{ a: a b: b }; });
main.js
require( [ 'mode2' ],function(m2){ alert( m2.a*m2.b ); });
index.html
<body>
<script src='js/require.js' data-main='js/main'></script>
</body>