jQuery面向对象写法规定写法样式规定

最新推荐文章于 2020-09-22 09:44:38 发布

原创最新推荐文章于 2020-09-22 09:44:38 发布 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

jQuery 专栏收录该内容

38 篇文章

订阅专栏

本文详细介绍了使用JavaScript创建对象的方法，包括对象的定义、属性设置及方法调用。通过实例展示了如何利用对象处理页面事件，如点击搜索和排序功能，以及实现无限滚动加载产品列表的过程。

1.定义对象

var product = {};

2.对象里面的属性与方法

    var product = {
        init:function(){
            this.p = 1;
            this.sort_field = "default";
            this.sort = "";
            this.eventBind();
        },
        eventBind:function(){
            var that = this;
            $(".search_header .search_icon").click( function(){
                that.search();
            });

            $(".sort_box .sort_list li a").click( function(){
                that.sort_field = $(this).attr("data");
                if( $(this).find("i").hasClass("high_icon")  ){
                    that.sort = "asc"
                }else{
                    that.sort = "desc"
                }
                that.search();
            });

            process = true;
            $( window ).scroll( function() {
                if( ( ( $(window).height() + $(window).scrollTop() ) > $(document).height() - 20 ) && process ){
                    process = false;
                    that.p += 1;
                    var data = {
                        kw:$(".search_header input[name=kw]").val(),
                        sort_field:this.sort_field,
                        sort:this.sort,
                        p:that.p
                    };

                    $.ajax({
                        url:common_ops.buildMUrl( "/product/search" ),
                        type:'GET',
                        dataType:'json',
                        data:data,
                        success:function( res ){
                            process = true;
                            if( res.code != 200 ){
                                return;
                            }
                            var html = "";
                            for( idx in res.data.data ){
                                var info = res.data.data[ idx ];
                                html += '<li> ' +
                                    '<a href="' + common_ops.buildMUrl( "/product/info",{ id:info['id'] } ) + '"> ' +
                                        '<i>' +
                                            '<img src="'+ info['main_image_url'] +'"  style="width: 100%;height: 200px;"/>' +
                                        '</i> ' +
                                        '<span>'+ info['name'] +'</span> ' +
                                        '<b>' +
                                            '<label>月销量' + info['month_count'] +'</label>¥' + info['price'] +'' +
                                        '</b> </a> ' +
                                    '</li>';
                            }

                            $(".probox ul.prolist").append( html );
                            if( !res.data.has_next ){
                                process = false;
                            }
                        }
                    });
                }
            });
        },
        search:function(){
            var params = {
                kw:$(".search_header input[name=kw]").val(),
                sort_field:this.sort_field,
                sort:this.sort
            };
            window.location.href = common_ops.buildMUrl("/product/index",params);
        },
    };