Преобразование div в виджет


Мой первый jQuery плагин работает, но я интересно, если моя кодировка обычных. Что я могу сделать лучше и как я могу сделать его более эффективным?

Я знаю, это всего лишь небольшой плагин, поэтому эффективность не имеет большого значения, но я не хочу начинать с вредными привычками.

Что этот плагин делает:

  • Он превращает div в виджет (с заголовком и содержанием)
  • При двойном нажатии на заголовок, содержимое, исчезает в/из (в зависимости от текущего состояния открыт или закрыт)
  • Загрузка содержимого через AJAX при открытии
  • Имеет возможность для перегрузки содержимого при открытии снова
  • Имеет возможность для обновления содержимого при открытии
(function($){
    $.fn.extend({

        widgetIt: function(options) {

            var defaults = {
                title: 'Widget Title',
                load:'',
                top: '50px',
                left: '400px',
                width: '500px',
                afterLoad: function(){},
                reload:false, //if true the content gets reloaded everytime widget opens
                refresh:false //if set to (example) 3000, the content gets refreshed when widget is open
            };

            var options = $.extend(defaults, options);
            var o=options;
           //conditional manipulate options
           if(o.refresh){o.reload=true}//when refresh is set, reload is true


            return this.each(function() { 

                  var container=$(this).css({'z-index':3, display:'inline-block',position:'absolute',top:o.top,left:o.left,'max-width':o.width})
                                .addClass('widget_container');
                  var header = $('<div></div>')
                                .addClass('ui-widget-header widgethead')
                                .css({'min-width':'130px'});

                  var title =$('<div></div>').addClass("w_tit").html(o.title);
                  var content =$('<div></div>')
                               .addClass("w_content")
                               .hide();
                 var timer = null;

            //whats the best place to put this function?
            //is it good to have it this in each function?                

            function loadData(){
                              $.ajax({
                            url: o.load,
                            context: content,
                            success: function(data){
                            $(content).html(data);
                            reload=false;
                            //[hide ajax spinner]
                            if(o.refresh){
                            timer=setTimeout(loadData,o.refresh)    ;}                      
                            o.afterLoad.call();
                            },
                            error: function(){
                            // error code here
                            }
                            });
            }



                  //append
                  $(title).appendTo(header) ;
                  $(header).appendTo(container) ;
                  $(content).appendTo(container) ;

                  //make draggable
                  $(container).draggable({
                    cancel: 'input,option, select,textarea,.w_content',
                    opacity: 0.45,
                    cursor: 'move'
                    });

                  //cbinding
                    var display=$(content).css('display'); //check if widget is open=block or closed=none


                    var reload=true ; //set initially to true->reload content every time widget opens

                  $(header).dblclick(function(){

                    $(content).fadeToggle();//first open or close widget
                    //[show ajax spinner]

                        if(display="block" && reload){//only load on widget open event
                            loadData();
                        }else if(display="none"){reload=o.reload;clearTimeout(timer);}//set reload true or false
                  });


                 $(header).click(function (){
                    $(container).topZIndex('.widget_container');

                 });
                 //close all open widgets and animate back to original position
                 $('#deco').click(function (){
                            $(content).hide();
                            $(container).animate({ "left": o.left, "top": o.top}, "slow");
                 });  
            });
        }
    });
})(jQuery);


420
4
задан 26 сентября 2011 в 03:09 Источник Поделиться
Комментарии
4 ответа

Только две маленькие точки улучшения:

var defaults = {
title: 'Widget Title',
load:'',
top: '50px',
left: '400px',
width: '500px',
afterLoad: function(){},
reload:false, //if true the content gets reloaded everytime widget opens
refresh:false //if set to (example) 3000, the content gets refreshed when widget is open
};

можно положить за widgetIt функции. Я делаю это как стандарт как (в теории) оно не создается каждый раз. Разница в реальности является, вероятно, неотличимым

(function($){
var defaults = {
title: 'Widget Title',
load:'',
top: '50px',
left: '400px',
width: '500px',
afterLoad: function(){},
reload:false, //if true the content gets reloaded everytime widget opens
refresh:false //if set to (example) 3000, the content gets refreshed when widget is open
};
$.fn.extend({
// etc.

во-вторых, как вопрос опрятность:

var options = $.extend(defaults, options);
var o=options;

является избыточным. Либо использовать варианты или о, но не оба, так как это может привести к путанице. Также я бы не использовать однобуквенные имена переменных для ничего другого, чем я. Явно указывать переменную приводит к легче читать в 6 месяцев, когда вы вернетесь к нему.

Редактировать:- я заметил еще один опрятность вопрос:

widgetIt: function(options){
var options = //...

вам не надо переопределить параметры, просто использовать его.

widgetIt: function(options){
options = //...

Просто как помочь я часто вставить мой код в http://jsfiddle.net и нажмите кнопку "JSLint". Его не всегда правильно (так как я не всегда вставить весь мой код), но это помогает много. Также "кнопки TidyUp" - это слишком круто.

4
ответ дан 4 октября 2011 в 01:10 Источник Поделиться


  • Как правило, Плагины jQuery выполните ядро jQuery принципы стиля. Это имеет ряд преимуществ, в том числе, что это проще для потенциальных подкованных пользователей к вычитке/обзор плагинов, прежде чем использовать его, расширить плагин, или включить его в какую-то более крупного проекта (например, пользовательского интерфейса jQuery). Более подробные пояснения в слайды 18-27 из этой презентации.

  • Вы, возможно, пожелает вернуться это из своего widgetIt способ разрешить сцепления (для единообразия с остальными из jQuery API-интерфейс).

  • Возможно, вы захотите выставить по умолчанию таким образом, что позволяет пользователям изменять его (а-ля $.элемент управления datepicker.setDefaults).

  • Похоже, там может быть ошибка в $.продлить(по умолчанию, параметры); я считаю, что изменяет свои параметры по умолчанию. Я обычно видел это написано $.расширить({}, по умолчанию, параметры).

Дополнительные плагин лучшей практики, вы, возможно, захотите взглянуть на "горки" из презентации Бен Алман выступил в этом году на jQuery Бостонской конференции.

3
ответ дан 9 октября 2011 в 12:10 Источник Поделиться

Я вижу маленькую ошибку на линии 85 - 85:

if(display="block" && reload){//only load on widget open event
loadData();
}
else if(display="none"){
reload=o.reload;clearTimeout(timer);
}//set reload true or false

Здесь вы задаете значение переменной называется дисплея вместо оценки его стоимости. В && оператор JavaScript может работать иначе, чем вы ожидаете. Он evaulates первое выражение и возвращает результат его, если его значение true, то сначала имеет значение false возвращает результат второго выражения. Это означает, что линия 83 всегда будет возвращать true, поскольку все, что не возвращают false в JavaScript-это правда, как значение переменной.

2
ответ дан 4 октября 2011 в 01:10 Источник Поделиться

Для обратной связи на ваш код, я бы группировать ВАР заявления вместе, вместо того чтобы объявить их отдельно. Например:

var container=$(this).css({'z-index':3, display:'inline-block',position:'absolute',top:o.top,left:o.left,'max-width':o.width})
.addClass('widget_container'),
header = $('<div></div>')
.addClass('ui-widget-header widgethead')
.css({'min-width':'130px'}),
title =$('<div></div>').addClass("w_tit").html(o.title),
content =$('<div></div>')
.addClass("w_content")
.hide(),
timer = null;

В линии удара вы удвоение в jQuery:

//append
$(title).appendTo(header) ;
$(header).appendTo(container) ;
$(content).appendTo(container) ;

Это может быть написано как:

//добавляем
название.добавление(заголовок) ;
заголовок.добавление(контейнер) ;
содержание.добавление(контейнер) ;

При создании объектов, они уже есть в jQuery, прикрепленные к ним.

1
ответ дан 4 октября 2011 в 01:10 Источник Поделиться