jquery自定义组件开发

时间:2023-02-09 21:29:52

jquery的组件已经有很多,但是有可能找不到符合我们需求的组件,所以我们可以动手自己封装一个jquery组件。

第一步要知道封装jquery组件的基本语法

(function ($) {
    $.fn.ziDinYiZuJian = function () {
        //ziDinYiZuJian 组件 要实现的功能代码
    }
})(jQuery)

第二步调用自定义的组件

  调用组件必须要引入在组件中用到的js包,然后调用

<div id="dom"></div>
$('#dom').ziDinYiZuJian();

注意有可能会报错:$(...).ziDinYiZuJian is not a function. 

原因可能是 引入必要的js包的顺序有问题,如果是在子页面调用组件 如果母版页引入了相同js包可能会因为重复引用js包报错,所以最好把母版页的js包 都在页面一开始全引入

 

在封装自定义jquery组件的时候需要注意的细节问题:

1、组件的数据源只需要是具有某个特征的数据集就可以了

2、组件自己根据传入的控制参数相应的格式化数据

3、暴露出的事件所需要的参数一般是 对象+触发事件的对象

4、组件要尽量封装成可重用的组件

5、组件写好之后要整理一个组件使用文档(包括:需要传入的参数说明、暴露出来的事件、使用事例等等)