/* 前言 */
自上而下的 职责和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(); });
时间: 2024-10-07 16:52:17