Я занимался рефакторингом большого js приложения. По причинам ремонтопригодности и инкапсуляции было решено создать модули, содержащие классы, ie:
текстовое поле. js - отвечает за компонент текстового поля button - отвечает за компонент кнопки et c ...
Каждый компонент имеет структуру:
/**
* Class representing Tabs component.
*`
* @class Tabs
* @submodule Tabs
*/
export default class Tabs {
constructor(){
...
}
/**
* Renders component
*
* @method {render}
* @param {string} intialData
* @return {this}
*/
static render (element) {
var grids = element.find('div[data-role=tabs]');
if (grids.length >= 0) {
var tabs = element.find('li[role=tab]');
var tabpanel = element.find('div[role=tabpanel]');
$.each(tabs, function (i) {
$(tabs[i]).find('span').on('click', function () {
...
});
});
}
};
};
Теперь я импортирую это в основной. js файл:
import TabsInstance from './fsi.jquery.tabs';
export default class fsiBase {
/**
* @method {renderControl} render control
**/
static renderControl (element, intialData) {
const type, column, ctrDefaultValue = '';
type = $(element).data('control-type');
column = $(element).attr('object-column') ? $(element).attr('object-column') : $(element).data('object-column');
if (type === tabs') {
TabsInstance.render(element);
}
if (type === SOME_OTHER_COMPONENT) {
TabsInstance.render(element);
}
и в конце через grunt browserify js:
browserify: {
dist: {
files: {
'./v2/dist/extensions/bundle.js':'./dist/extensions/main.js'
}
}
Он объединяется правильно, однако для каждого элемента управления вставлен повторяющийся код, такой как приведенный ниже (у меня их около 30)
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
Есть ли способ вставить это только один раз и использовать для каждого элемента управления при необходимости (теперь появляется около 30 раз)?