bgjs初学者入门（五）一点经验

　　通过前面的学习，我们对bgjs的控件有了一定的了解。在我学习使用bgjs的过程中，有点点经验，觉得比较适合在这里稍微小结一下，也为进一步的学习（实际上我也是边记边学）做点铺垫。

　　一。bgjs的命名方法

　　1.控件类的命名

　　我们见过的控件类有CFloatTip，以后还将见到CDialog、 CWin、CTitlePanel等等控件。所有控件类的命名都是以一个大写的"C"开头，其后每个词语首字母都大写。

　　请注意，在新版本cicy命名将会做调整。本规则仅仅适用于bgjs2.0.8版本。

　　2.控件方法的命名

　　在CFloatTip类中，我们看见有show()，setXY(),包括部分属性showTo、autoRender。在bgjs中，经常把方法和选项的首字母小写，其后每个词语首字母大写。我们以后还会看见onclick等事件处理，都是以on开头。

　　我们需要注意一下bgjs的命名方法。有时候代码觉得没有问题，但是效果出不来，也许是拼写出了问题。

　　二。bgjs的学习方法

　　在学习CFloatTip控件使用方法的时候，由于没有文档，我首先看的sample，自己来推测如何使用。（bgjs很值得赞扬一点的就是，控件类、方法、属性的命名都非常浅显易懂）不过在上一节讲CFloatTip控件时候，有一些选项和方法是sample中没有的，例如setRightPosForTarget（）方法，例如qmode属性。这些我是怎么总结出来的呢？

　　是看源代码。

　　还是打开bglib-all-debug.js，搜索CFloatTip，你会看见它的源代码（节省篇幅，省略了相当的代码）

return {
/* *
*@property {Number} timeout = 2500 设置消失超时ms, 如果为0 或 false 不自动关闭.
*/
timeout: 2500 ,
delay : 500 ,
type : " CFloatTip " ,
template : ' CFloatTip ' ,
/* *
*@property {Boolean} reuseable = false 是否可复用
*/
reuseable : true ,
shadow: true ,
qmode : false ,
zIndex : 10002 ,
hoverTipCS : ' g-small-tip ' ,
initComponent: function () {... },
// @override
display : function (b) {... },
setRightPosForTarget : function (target){... },
setRightPosForHover : function (xy){... },
_timeoutCall : function (){... },
/* *
* @param {boolean} check 是否作回收(reuseable)检查
*/
killTimer : function (check){... },
setMsg: function (msg, title) {... },
/* *
* @override
* @param {Mixed} target
*/
show : function (msg, title, target, getFocus, timeout){... },
_returnFtip : function (){... },
_returnQtip : function (){... },
tipFor : function (proxy, msg, title){... },
onTargetMouseout : function (evt){... },
getInstance : function (){... }
};

　　虽然我js水平很菜，很多代码都看不懂，但是有一个规律：

　　1.变量:数字（字符串等）　　这里是属性名和默认的值

　　2.变量：function(){...}　　这里是方法

　　3.变量名以on开头：function(){...}　　这里是处理事件的回调函数

　　了解这些以后，翻翻源代码，结合示例，一个控件的使用是比较容易弄清楚的。（特别是，注释还是中文~）

　　另外补充一下，，如果变量或方法的名字是以_开头的，应该都是不希望公开的方法。一般不要试图调用它们。

　　三。也许细心的你会发现几个问题。

　　1.在CFloatTip控件类代码中没有看见autoRender、showTo等属性和setXY()等方法，它们是哪里来的？

　　答案：CFloatTip类是从bgjs提供的CPanel继承而来，而CPanel继承自CContainerBase，CContainerBase继承自CBase。setXY()方法是继承自CPanel,showTo属性继承自CContainerBase类。因此，要想完整的了解一个类所有的方法和属性，还需要了解bgjs的控件继承关系。

　　bgjs继承都是通过CC.create()实现了，其中第一个参数就是基类名。

　　2.我们来看一看show这个方法的实现

show : function (msg, title, target, getFocus, timeout){
/* 此处代码省略 */
},

　　里面的且不论，这个参数的调用仔细看看：需要传入这么多参数！

　　而我们上一节的示例代码中，使用的是：

f.setXY( 200 , 200 ).show();

　　我们这里是直接调用了一个show()，没有传入任何参数。为什么不传入参数也可以呢？

　　答案：在这个类中，保存着一些私有属性值（就是源代码中的那一个个属性对）。在show()的代码中，会自动将传入的参数和私有属性合并，再根据私有属性渲染结果。而我们在初始化类的时候，当时也传入过属性，已经根据初始化把私有属性赋值好了，因此在这里可以直接show()而不传入任何参数了。

　　你可以试试，如果在初始化的时候，去掉部分属性，结果会怎么样？

　　还可以试试：如果我在初始化的时候不传入msg选项的值，而在show()的对应位置传入，会不会正常显示？

　　四。再补充一个问题

　　在tips.html中你会看见一个方法：bindContext()，这个是起什么用呢？

　　首先，这个方法不是CFloatTip类特有的（刚才的源代码里面没有），说明是从基类继承的。实际上它来自CBase。

　　你可以在去掉和加入bindContext()方法，比较页面效果有什么不同。

　　答案：不加入bindContext()方法，出现tip以后，在页面任意地方点击，tip不会消失；加入以后，点击则消失（就和菜单一样）！

　　这个功能不是tip特有，因此放在基类中，然后通过继承来达到重用的目的。

转载于:https://www.cnblogs.com/flowthink/archive/2010/01/12/1645300.html