首页 > 代码库 > 前端编程提高之旅(十一)----jquery代码的组织

前端编程提高之旅(十一)----jquery代码的组织

            最近做内推项目,虽然项目不算太大,还是遇到了一些代码组织的问题,说到底还是对整个项目的掌控力不够,为此乐帝专门在网络中搜集了一些jquery代码组织的文章并总结出两种方法来更好组织jquery代码。

   一、回调函数

  回调函数的定义:

  A callback is a function that is passed as an argument to another function and is executed after its parent function has completed.

   回调是将一个函数作为变量,传入另外一个函数。前者将会在后者执行完成后执行。

 

   上述简单的回调例子,说明函数的参数可以是一个函数,这也是jquery回调函数用法的基础了。

function hideSearchArea(callback) {
                $(".search-area-container").hide();
                var width = searchArea.width();
                searchArea.animate({ "left": -width }, 400, function () {
                    if (callback) {
                        callback();
                    }
                });
            }
btnSearch.click(function () {
                var keyWord = $('#keyWord').val();
                var locId = $("#citySelect").val();
                if (keyWord == oldSearchData.keyWord && locId == oldSearchData.locId) {
                    hideSearchArea();
                    return false;
                }//老数据不返回数据

                hideSearchArea(function () {
                    jobList.empty();
                    pageNum = 1;//清空page数
                    getInternalRecommendJobAdList(keyWord, locId);//加载搜索项
                });//采用回调,省去了传参数的问题
            });

    此次内推项目中也用到了回调,在上述代码例子中,回调的好处在于省去了复杂的函数间传参的过程,在click事件中定义的局部变量,直接传入hideSearchArea函数的回调中,省去了多余变量控制参数的传递。

   二、jquery代码组织要点

  • 1.解决消除匿名函数。
  • 2.以配置参数为中心。
  • 3.将事件监听统一到一个函数内部。
  • 4.将整个程序段封装成一个函数,对外只保留唯一接口,便于大型项目代码组织。
   下面通过一个简单的例子看一下代码组织的应用:
   html结构:
<ul id="myFeature">
        <li>hi oop</li>
    </ul>

  jquery代码:
var myFeature = {
    //首先类的实例属性用this.xxx形式定义,类属性用className.xxx形式定义
    //以下各函数与配置对象都为类属性
    // 初始化配置Jquery对象参数,并调用事件绑定设定函数
    // 类内部,使用_this对对象进行替代,便于标示
        init : function(settings) {
            _this = myFeature;
            _this.config = {
                    $items : $('#myFeature li'),
                    $container : $('<div class="container"></div>'),
            };

            $.extend(_this.config, settings || {});
            _this.setup();
        },
        // 事件绑定设定函数,用于绑定事件,沟通jquery对象与响应事件
        setup : function() {
            var item = _this.config.$items;
            item.each(_this.createContainer)
            .click(_this.showItem);
        },
        //在li下创建div并设置数据
        createContainer : function() {
            var $i = $(this),
            $c = _this.config.$container.clone()
            .appendTo($i);
            $i.data('container',"hello world");
        },

        showItem : function() {
            _this.$currentItem = $(this);
            _this.getContent();
        },

        getContent : function() {
            var txt = _this.$currentItem
            .data('container');
            $(".container").html(txt);
        },

        
};
$(function(){
    myFeature.init();
}); 

  从这段代码不难看出,上述代码组织思想。
  • 将用到的DOM对象统一写到配置(config)对象中
  • 将事件监听对象统一写到安装函数(setup)中
  • 配置属性及安装函数在初始化函数(init)函数中调用
  • 安装函数事件监听函数采用函数回调方法,调用本类功能函数
  • 在整段程序的入口调用此类的初始化(init)方法
  上述程序有个弊端,那就是在外部可以对类方法进行访问。

    对上述方法进一步优化,将整个对象改成一个自执行函数,那么返回值为初始化对象就是对外的唯一接口,内部编排也不用考虑对象引用的问题,本质上仍然是面向过程编程,但代码管理上已经做到了极好的封装。
   代码如下:
 var feature = (function() {

        var  $items = $('#myFeature li'), $container = $('<div class="container"></div>'), $currentItem,
        init = function(settings){
            setup();
        },//初始化函数
        setup= function() {
           var item = $items.each(createContainer)
            .click(showItem);
        },//绑定函数

        createContainer = function(idx) {
            var $i = $(this),
            $c = $container.clone()
            .appendTo($i);
            $i.data('container',"hello world");
        },
        showItem = function(){
            $currentItem = $(this);
            getContent();
        },
        getContent = function() {
            var txt = $currentItem
            .data('container');
            $(".container").html(txt);
        };

        return {
            init : init//对外接口
        };
    })();

    feature.init();//初始化函数

    如上代码所示可以实现,前文所述的四个要点。但考虑到这次内推项目脚本都是针对每个页面单独执行,就没有采用这种组织方式。但整体思路上仍然采用上述方法。即只实现前三个要点,代码实现上用第二种代码写法。


三、参考资料
1.知乎网友:http://www.zhihu.com/question/26348002
2.360个人图书馆:http://www.xue163.com/121/6/1212972.html
3.csdn网友:http://blog.csdn.net/dananhai381/article/details/6709934

前端编程提高之旅(十一)----jquery代码的组织