我的开源框架之设计规范

需求设计

（1）所有组件只实现简单易用（即不需要编写大量javascript代码）功能，复杂功能如数据表格的行编辑等可以通过弹出其他页面实现的功能不做。

（2）所有组件只实现常用需求，尽量简化组件的复杂度。

代码设计规范

（1）组件代码框架符合jquery开发规范

（2）代码块清晰，可以区分构造器、私有函数、公共函数

（3）函数名需要注释使用方式与用途、函数的参数有详细注释

以下为代码框架规范：

 1 /**************************************************************

 2 *作者:hjwen

 3 *电邮:[email protected]

 4 *版本：1.0

 5 *版权许可：中国通用开源许可协议V1.0

 6 *说明：myui组件javascript架构说明,所有组件均遵循该规范

 7 ***************************************************************/

 8 (function ($) {

 9     /******

10     *渲染目标：renderHtml为构建html结构的函数，init初始化会调用

11     *******/

12     function renderHtml(target) {

13         ///构建html结构

14     };

15 

16     /**********私有方法开始********************

17 

18     --------    private function      ---------

19     --------此处为控件内部的私有方法块---------

20     --------    private function      ---------

21 

22     /**********私有方法结束*******************/

23 

24     /*****************************************************************************

25     *对外的函数统一封装到methods中

26     *调用方式：$.pluginInstance.pluginName("methodName",params) 

27     *对外函数仅支持以上方式调用，不支持$.pluginInstance.methodName(params)方式

28     *上述调用方式来源于“约定胜于配置”原则，该种调用方式简化组件的编码，方便维护

29     ******************************************************************************/

30     var methods = {

31         init: function (options) {

32             return this.each(function () {

33                 var $this = $(this);

34                 var settings = $this.data('settings');

35                 if (typeof (settings) == 'undefined') {

36                     settings = $.extend({}, $.fn.button.defaults, options);

37                     $this.data('settings', settings);

38                 } else {

39                     settings = $.extend({}, settings, options);

40                 }

41                 //创建ui布局

42                 renderHtml($this);

43                 if ($.myui.isDebug) {

44                     $.myui.log("jQuery.button init finish......");

45                 }

46             });

47         },

48         destroy: function (options) {

49             return $(this).each(function () {

50                 var $this = $(this);

51                 $this.removeData('settings');

52             });

53         }

54         /****************************************

55         ----------public method--------------

56         ---------此处为对外函数块------------

57         ----------public method--------------

58         ****************************************/

59     };

60     /********************

61     *组件的构造函数

62     *********************/

63     $.fn.button = function () {

64         var method = arguments[0];

65         if (methods[method]) {

66             method = methods[method];

67             arguments = Array.prototype.slice.call(arguments, 1);

68         } else if (typeof (method) == 'object' || !method) {

69             if ($.myui.isDebug) {

70                 $.myui.log("jQuery.button init.....");

71             }

72             method = methods.init;

73         } else {

74             $.error('Method ' + method + ' does not exist on jQuery.button');

75             return this;

76         }

77         return method.apply(this, arguments);

78     };

79     /********************

80     *组件的默认配置值

81     *********************/

82     $.fn.button.defaults = {

83         text: '按钮',

84         iconCls: '',//按钮图标

85         handler: function () { }//处理事件

86     };

87 })(jQuery);