;(function($, window, undefined) {
'use strict';
var plugin = {
name: 'plugin',
version: '1.0.0',
data: {
setting: 'setting',
general: 'general'
}
};
var defaults = {
color: 'red',
background: 'black',
padding: '10px'
};
var methods = {};
methods.init = function($this, options, common) {
var setting = function() {
var params = $.extend(true, {}, defaults, options);
$this.data(plugin.data.setting, params);
return params;
}();
var general = function() {
var params = $.extend(true, {}, {
time: Date.now(),
context: $this.get(0)
}, common);
$this.data(plugin.data.general, params);
return params;
}();
if (general.type === 'init') {
$this.append($('<button/>', {
text: 'ADD'
}).on('click', function() {
methods.addItem.call(general.context);
}));
}
methods.addItem.call(general.context);
};
methods.addItem = function() {
$(this).append(function() {
var size = $('.api-item', $(this)).length;
var file = '<input type="file" class="form-control app-input__file" name="images['+ size +'][image]" />';
var text = '<input type="text" class="form-control app-input__file" name="images['+ size +'][title]" />';
var preview = '<div class="api-item-preview"></div>';
return $('<div/>', {
class: 'api-item',
}).html(file + text + preview).on({
click: function() {
console.log('click', this);
}
});
}.bind(this)());
};
methods.getItem = function(index) {
return $('.api-item', $(this)).eq(index);
};
methods.removeItem = function(index) {
methods.getItem.call(this, index).remove();
};
methods.set = function(key, value) {
var setting = $(this).data(plugin.data.setting);
switch (typeof key) {
case 'string':
if (key.includes('.')) {
nestedObjectPath(setting, key, value);
} else {
setting[key] = value;
}
break;
case 'object':
setting = $.extend(true, {}, setting, key);
break;
}
return methods.init($(this), setting, {
type: 'update',
method: 'set'
});
};
methods.get = function(category, key) {
var section = $(this).data(category);
if (key) {
if (key.includes('.')) {
return nestedObjectPath(section, key);
} else {
return Object.getOwnPropertyDescriptor(section, key).value;
}
}
return section;
};
methods.destroy = function() {
$(this).removeData(plugin.data.setting).fadeOut(200, function() {
$(this).empty().show();
});
};
methods.version = function() {
return plugin.version;
};
/**
* Получить/установить значение объекта передав путь строкой ('price.current.USD')
* @param {object} object - объект
* @param {string} key - путь к свойству
* @param {any} value - значение
* @returns {any} - значение свойства объекта
**/
function nestedObjectPath(object, key, value) {
var path = key.split('.');
var get = function(path, object) {
return path.reduce(function(previous, current) {
return previous[current];
}, object);
};
if (value) {
var way = path.pop();
get(path, object)[way] = value;
return object;
} else {
return get(path, object);
}
}
$.fn[plugin.name] = function(setting) {
if (typeof setting === 'object' || !setting) {
return $.each(this, function() {
methods.init($(this), setting, {
type: 'init',
method: 'init'
});
});
} else if (typeof setting === 'string') {
var params = Array.prototype.slice.call(arguments, 1);
var context = this.get(0);
switch(setting.toLowerCase()) {
case 'set':
return methods.set.apply(context, params);
case 'additem':
return methods.addItem.call(context);
case 'getitem':
return methods.getItem.apply(context, params);
case 'removeitem':
return methods.removeItem.apply(context, params);
case 'get':
return methods.get.apply(context, params);
case 'destroy':
return methods.destroy.call(context);
case 'version':
return methods.version();
}
}
};
})(jQuery, window);
$(function() {
$('.plugin').plugin();
});$('.plugin').plugin('addItem');
$('.plugin').plugin('getItem', 0);
$('.plugin').plugin('removeItem', 0);{
type: 'init',
method: 'init'
}
// или
{
type: 'update',
method: 'set'
}if (general.type === 'init') $this.on()
item.offsetWidth чем $(item).width(). Оборачивать элемент в jQuery обертку и дергать метод дольше, чем взять ширину через нативный dom api.
var maxWidth = Array.prototype.reduce.call($('.lang-item a'), function(result, item) {
return Math.max(result, item.offsetWidth);
}, 0);Array.prototype.reduce.call()
(function($, undefined) {
// ...
})(jQuery);(function($, window, document, undefined) {
// ...
})(jQuery, window, document);$("select").plugin({
startShow: function(event, parent) {
console.log(parent);
});
});function eventTrigger($element, name, params) {
setTimeout(function() {
$element.trigger(name + '.' + plugin.name, params);
});
}
eventTrigger($('.block'), 'myEvent', [true, 'string']);
$('.block').on('myEvent.pluginName', function(event, boolean, string) {
// ...
});$('.container', $('.block')) = $('.block').find('.container')$('.block').data('name', { params... }) так как сделано с setting в методе init$containervar methods = {
init: function($this, setting, type) {
// ...
function test() {
console.log($this, setting);
}
}
};var plugin = {
name: 'plugin',
data: {
setting: 'setting'
}
}, defaults = {
containerClass: 'dropdown'
}, methods = {};
methods.init = function($this, setting, type) {
//...
};
methods.set = function(key, value) {
//...
};
methods.get = function(key) {
//...
};.one или контролируйте эти моменты. Не забывайте использовать nameSpace ( 'myEvent.pluginName' ), чтобы не переопределять другие события и лучше контролировать свои, а в методе destroy и вовсе их отвязать одной строкой $('.block').off('.pluginName')$('select').plugin('select', 'my-value'). Метод, чтобы выбрать у нужное значение в нужного select'а, метод чтобы получить значение и т.д. Эти же методы вы можете использовать внутри init-метода для своего же удобства и универсальности.
newStr = "", newStr[i]Нельзя так делать, строка не массив. Попробуйте в консоли это:
'hello'[0] = 'R'Строка не изменится.