js模块化

转载 于 2018-10-16 19:59:00 发布 · 66 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/micnote/p/9800299.html
文章标签：

#javascript #ViewUI

本文详细介绍了如何使用JavaScript实现一个自定义的评分系统，包括星评、印象标签选择、评论输入及提交等功能。该系统支持多级评分，能够应用于产品、服务等场景，通过丰富的UI交互提升用户体验。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

var lnv_dp = lnv_dp || {}; (function () {
    var Valuation = function (config) {
        this.config = {
            style: true,
            isPhone: false,
            collect: false,
            uid: 0,
            sid: 0,
            rid: 0,
            label: {
                star: '\u661f\u7ea7',
                impress: '\u5370\u8c61',
                impress_btn: ['\u8010\u5fc3', '\u4e13\u4e1a', '\u70ed\u60c5', '\u7ec6\u81f4', '\u9ad8\u6548'],
                addimp: '+',
                comment: '\u8bc4\u4ef7',
                submit: '\u63d0  \u4ea4',
                collect: '\u5c06\u0054\u0061\u6536\u85cf\u4e3a\u4e13\u5c5e\u5de5\u7a0b\u5e08',
                textarea: '\u611f\u8c22\u60a8\u81f4\u7535\u8054\u60f3\uff0c\u5982\u679c\u60a8\u5bf9\u6211\u7684\u670d\u52a1\u6ee1\u610f\uff0c\u5e0c\u671b\u60a8\u7ed9\u4e94\u661f\u7ea7\u8bc4\u4ef7\uff0cO(\u2229_\u2229)O\u8c22\u8c22\u3002'
            },
            error: {
                10010: '\u8bf7\u9009\u62e9\u6ee1\u610f\u5ea6',
                10011: '\u8bf7\u81f3\u5c11\u9009\u62e91\u4e2a\u5370\u8c61',
                10012: '\u60a8\u53ea\u80fd\u9009\u62e95\u4e2a\u5370\u8c61\u5662',
                10013: '\u60a8\u7684\u8bc4\u4ef7\u5185\u5bb9\u8fc7\u957f'
            },
            onAddImpress: '',
            onRender: '',
            onSubmit: '',
            onFailure: ''
        };
        this.tips = ['\u5fcd\u4e0d\u4e86!', '\u4e0d\u600e\u4e48\u6837', '\u4e00\u822c', '\u633a\u597d\u54d2!', '\u592a\u68d2\u4e86!'];
        this.data = {
            star: [],
            impress: {},
            comment: [],
            collect: []
        };
        this.config = $.extend(this.config, config);
        this.dom = $('#' + this.config.dom);
        this.postFlag = true;
        this.__init();
    };
    Valuation.prototype = {
        __init: function () {

            if (this.config.style) {
                $('head').append('<link rel="stylesheet" href="lnv_valuation.css">');
            };
            this.__packHtml();
            this.__bindEvent();
        },
        __packHtml: function () {
            var me = this,
            star = 5,
            html = [],
            _sh = [],
            _label = me.config.label.impress_btn;
            var _i = typeof me.config.sid == "number" ? 0 : me.config.sid.length - 1;
            for (var i = 1; i <= star; i++) {
                _sh.push('<a href="javascript:;" class="dp-star-a"></a>');
            }

            html.push('<form action="" method="post" id="dp-valuation-form" target="dp-valuation-target" class="dp-valuation dp-wrapper">');
            for (var i = 0; i <= _i; i++) {
                var impress = _label.length > 0 && _label[i]? _label[i].split(',') : '', _ih = [];
                for (var j = 0; j < impress.length; j++) {
                    _ih.push('<a href="javascript:void(0);" class="dp-imp-a">' + impress[j] + '</a>');
                }
                html.push('<div class="dp-div dp-index-' + i + '" data-id="' + i + '">');
                html.push('<div class="dp-valuation dp-star" data-log="star"><label>' + me.config.label.star + '</label><span>' + _sh.join('') + '</span><b></b></div>');
                html.push('<div class="dp-valuation dp-imp" data-log="impress"><label>' + me.config.label.impress + '</label><span>' + _ih.join(''));
                html.push('<a href="javascript:;" class="dp-imp-add">' + me.config.label['addimp'] + '</a></span></div>');
                if (me.config.collect) {
                    html.push('<div class="dp-valuation dp-collect" data-log="collect"><i class="collect"></i>&nbsp;' + me.config.label['collect'] + '</div>');
                }
                /**start***/
                //html.push('<div class="dp-valuation dp-collect" data-log="collect"><i class="collect"></i>&nbsp;将Ta收藏为专属工程师</div>');
                /**end**/
                html.push('<div class="dp-valuation dp-comment" data-log="comment"><label>' + me.config.label.comment + '</label>');
                html.push('<textarea cols="" rows="" name="content' + i + '" placeholder="' + me.config.label.textarea + '"></textarea></div>');
                html.push('<input type="hidden" name="score' + i + '"/><input type="hidden" name="labels' + i + '"/><input type="hidden" name="collect' + i + '"/>');
                html.push('<input type="hidden" name="sid' + i + '" value="' + (_i == 0 ? me.config.sid : me.config.sid[i]) + '"/>');
               
            }
            html.push('<div class="dp-error"></div><div class="dp-valuation dp-submit" data-log="submit">');
            html.push('<p><button class="dp-submit-btn">' + me.config.label.submit + '</button></p></div>');
             html.push('</div>');
            html.push('</form>');
            me.dom.html(html.join(''));
            if (typeof me.config.onRender == 'function') {
                me.config.onRender(me, html);
            }
        },
        __bindEvent: function () {
            var me = this,
            _starbox = $('.dp-star'),
            _star = $('.dp-star-a'),
            _imp = $('.dp-imp-a'),
            _collect = $('.dp-collect');
            _star.on('click',function (e) {
                var _off = $(this).index() + 1,
                _cur = $(this).closest('.dp-div'),
                _id = _cur.attr('data-id');
                _cur.find('.dp-star-a').removeClass('stared');
                _cur.find('.dp-star-a:lt(' + _off + ')').addClass('stared');
                me.data.star[_id] = _off;
                //if (_off > 4) {
                //    _cur.find('.collect').addClass('cur');
                //    _cur.find('input[name="collect' + _id + '"]').val(1);
                //} else {
                //    _cur.find('.collect').removeClass('cur');
                //    _cur.find('input[name="collect' + _id + '"]').val(0);
                //}
                $(this).closest('span').siblings('b').html(me.tips[_off - 1]);
                $('.dp-error').text('');
                e.preventDefault();
            }).on('mouseover', function (e) {
                var _index = $(this).index() + 1;
                //if (_index) {
                //    $(".dp-star-a:lt(" + _index + ")").addClass('stared');
                //    $(".dp-star-a:gt(" + (_index - 1) + ")").removeClass('stared');
                //    $(this).closest('span').siblings('b').html(me.tips[_index - 1]);
                //}
                if (_index) {
                   // $(this).closest('.dp-div').find(".dp-star-a:lt(" + _index + ")").addClass('stared');
                   // $(this).closest('.dp-div').find(".dp-star-a:gt(" + (_index - 1) + ")").removeClass('stared');
                   // $(this).closest('span').siblings('b').html(me.tips[_index - 1]);
                }
            })
            _starbox.on('mouseleave', function (e) {
                var _id = $(this).closest('.dp-div').attr('data-id'), _index = me.data.star[_id] - 1;
                if (_index >= 0) {
                   //_star.eq(_index).trigger('click');
                } else {
                    _star.removeClass('stared');
                    $(this).find('b').html('');
                }
            });

            _collect.on('click',function () {
                var _c = 0,
                _cur = $(this).closest('.dp-div'),
                _id = _cur.attr('data-id');
                if (_cur.find('.collect').hasClass('cur')) {
                    _cur.find('.collect').removeClass('cur');
                    _c = 0;
                } else {
                    _cur.find('.collect').addClass('cur');
                    _c = 1
                }
                _cur.find('input[name="collect' + _id + '"]').val(_c);
            })
            if (me.config.isPhone) {
                var _offset = [];
                $('.dp-star').find('span').on('touchmove',function (e) {
                    var _x = e.originalEvent.touches[0].clientX;
                    $.each($('.dp-star a'),
                    function (index, item) {
                        if (_x >= $(item).offset().left) {
                            $(item).trigger('click');
                        }
                    });
                    e.preventDefault();
                });
            }
            $(document).delegate('.dp-imp-a', 'click',function (e) {
                var _cur = $(this).closest('.dp-div').attr('data-id'),
                _imp = me.data.impress;
                $('.dp-error').text('');
                if ($(this).hasClass('dp-imp-new')) return;
                if ($(this).hasClass('selected')) {
                    $(this).removeClass('selected');
                    if (_imp[_cur].length <= 1) {
                        _imp[_cur].length = [];
                        // me.__onFailure(10011);
                    } else {
                        if ($.inArray($(this).html(), _imp[_cur]) >= 0) {
                            _imp[_cur].splice($.inArray($(this).html(), _imp[_cur]), 1);
                        }
                    }
                    //$('.dp-error').html($(this).html());
                } else {
                    if (!_imp[_cur]) {
                        _imp[_cur] = [];
                    }
                    if (_imp[_cur].length < 5) {
                        _imp[_cur].push($(this).html());
                        $(this).addClass('selected');
                    } else {
                        alert(me.config.error[10012]);
                    }
                }
                e.preventDefault();
            });
            $('.dp-imp-add').on('click',function (e) {
                if (typeof me.config.onAddImpress == 'function') {
                    me.config.onAddImpress(me, $(this));
                } else {
                    me.__onAddImp($(this));
                }
                e.preventDefault();
            });
            $('.dp-submit-btn').on('click',function () {
                var data = '';
                if(typeof me.config.onSubmit == 'function'){
                    mydata = me.config.onSubmit(me)
                }
                var _submit = me.__validator(me);
                if (_submit) {
                    var _form = $('#dp-valuation-form');
                    var _main = $('.dp-div');
                    _main.each(function (index, item) {
                        me.data.comment[index] = $(item).find('textarea[name="content' + index + '"]').val();
                        me.data.collect[index] = $(item).find('input[name="collect' + index + '"]').val();
                    })
                    if (!me.postFlag) return false;
                    me.postFlag = false;
                    $.post(me.config.submitUrl, {
                        uid: me.config.uid,
                        sid: me.config.sid,
                        rid: me.config.rid,
                        stype: me.config.stype,
                        scode: mydata.scode,
                        ecode: mydata.ecode,
                        createby: mydata.creatby,
                        star: me.data.star,
                        impress: me.data.impress,
                        comment: me.data.comment,
                        collect: me.data.collect
                    },function (response) {
                        if (response.status == 200) {
                            me.__onSuccess(me.data);
                        } else {
                            me.postFlag = true;
                        }
                    })
                }
                return false;
            });
        },
        __onAddImp: function (btn) {
            var _imp = $('.dp-imp span'),
            _new = $('<a/>').attr('href', 'javascript:;').addClass('dp-imp-a dp-imp-new').html('<input type="text" value="" maxlength="7"/>');
            if (_imp.find('input').length < 1) {
                btn.before(_new);
                _new.find('input').focus();
                _new.find('input').blur(function () {
                    if ($.trim($(this).val()) != '') {
                        $(this).closest('a').html($(this).val()).removeClass('dp-imp-new');
                    } else {
                        $(this).closest('a').remove();
                    }
                });
            } else {
                _imp.find('input').focus();
            }
        },
        __validator: function (me) {
            var _data = me.data,
            _code = 0,
            _num = $('.dp-div').length,
            _star = _data.star,
            _imp = _data.impress;
            for (var i = 0; i < _num; i++) {
                if (!_star[i] || _star[i] < 1) {
                    _code = 10010;
                } else if (!_imp[i] || _imp[i].length < 1) {
                    _code = 10011;
                } else if (_imp[i].length > 5) {
                    _code = 10012;
                } else if ($.trim(_data.comment[i]).length > 500) {
                    _code = 10013;
                }
            }
            if (_code == 0) {
                return true;
            } else {
                me.__onFailure(_code);
            }
        },
        __onFailure: function (errno) {
            var me = this;
            if (typeof me.config.onFailure == 'function') {
                me.config.onFailure(me, errno);
            } else {
                alert(me.config.error[errno]);
            }
        },
        __onSuccess: function (data) {
            var me = this;
            if (typeof me.config.onSuccess == 'function') {
                me.config.onSuccess(data);
            }
        }
    };
    lnv_dp.dianping = function () {
        return {
            init: function (config) {
                try {
                    if (config.dom == '' || !$('#' + config.dom)) {
                        throw 'need dom';
                    } else if (config.info == '') {
                        throw 'miss info';
                    } else {
                        return new Valuation(config);
                    }
                } catch (x) {
                    return x;
                }
            }
        }
    }();
})();

 

转载于:https://www.cnblogs.com/micnote/p/9800299.html

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值