Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.06.2019, 15:06
Аспирант
Отправить личное сообщение для nathan111777 Посмотреть профиль Найти все сообщения от nathan111777
 
Регистрация: 12.05.2019
Сообщений: 44

Как преобразовать этот конструктор ES6 в класический JS? Вручную без Babel?
У меня есть большой код, весь на ES6, с помощью Babel преобразовал все кроме этой части. Babel выдал код аж из 42 строк...Babel выдает больше продакшн код, чем для разработки...
Как преобразовать этот конструктор ES6 в класический JS?
Помогите вручную преобразовать.

constructor() {
    super();
    this.state = { 
         size: '',  
         sort: '', 
         cartItems: [],
         products: [],
         filteredProducts: [] };
  }

Последний раз редактировалось nathan111777, 19.06.2019 в 15:10.
Ответить с цитированием
  #2 (permalink)  
Старый 19.06.2019, 15:18
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

У вас ошибка... возможно как-то так...

class MyClass extends React.Component {
    constructor() {
        super();
        this.state = { 
             size: '',  
             sort: '', 
             cartItems: [],
             products: [],
             filteredProducts: []
        };
    }

    render() {
        return React.createElement("p", {}, "(Empty)");
    }
}


Как вы умудрились потерять исходный код?

Сообщение от nathan111777
с помощью Babel преобразовал все кроме этой части.
Такое чувство, что вы вставляли куда-то код по частям...

Сообщение от nathan111777
весь на ES6
Я так не думаю... возможно проприетарные модули, JSX... и ES2019

Сообщение от nathan111777
Babel выдает больше продакшн код, чем для разработки...
Зависит от настроек в .babelrc

Последний раз редактировалось Malleys, 19.06.2019 в 15:25.
Ответить с цитированием
  #3 (permalink)  
Старый 19.06.2019, 15:38
Аспирант
Отправить личное сообщение для nathan111777 Посмотреть профиль Найти все сообщения от nathan111777
 
Регистрация: 12.05.2019
Сообщений: 44

Понимаешь я знаю только класический JS:
Тоесть привык что конструктор можно записать таким образом:

function Animal(name) {
this.name = name;
this.canWalk = true;
}

var animal = new Animal("ёжик");

или так:

var animal = new function() {
this.name = "Васька";
this.canWalk = true;
};

а вот это меня напрягает:

слово "constructor" ведь для создания конструктора достаточно c большой букви написать и потом обратиться через new

и слово "super"

Мне нужно как-то передалать, потому что б было вот так примерно:
function Animal(name) {
this.name = name;
this.canWalk = true;
}

var animal = new Animal("ёжик");


А вот весь код :

https://jsfiddle.net/nathan111777/01detqw2/4/

Последний раз редактировалось nathan111777, 19.06.2019 в 16:00.
Ответить с цитированием
  #4 (permalink)  
Старый 19.06.2019, 16:51
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

constructor так и так остаётся... Вот для примера код...

<script>
class Person {
	constructor(name, age) {
		this.name = name;
		this.age = age;
	}

	say(message) {
		return this.name + " says: '" + message + "'";
	}
}

class Cat extends Person {
	constructor(name, age, breed) {
		super("Cat " + name, age);
		this.breed = breed;
	}

	say(message) {
		return super.say("Meow! " + message);
	}
}

const cat = new Cat("Vector", 4, "Maine Coon");
alert(cat.say("Hello!"));
</script>


Вот этот же самый пример без специального синтаксиса классов... Согласитесь, специальный синтаксис упрощает написание кода...
<script>
function Person(name, age) {
	this.name = name;
	this.age = age;
}

Person.prototype = {
	constructor: Person,

	say(message) {
		return this.name + " says: '" + message + "'";
	}
};

function Cat(name, age, breed) {
	this.__proto__.__proto__.constructor.call(this, "Cat " + name, age);
	this.breed = breed;
}

Cat.prototype = {
	__proto__: Person.prototype,
	
	constructor: Cat,

	say(message) {
		return this.__proto__.__proto__.say.call(this, "Meow! " + message);
	}
};

const cat = new Cat("Vector", 4, "Maine Coon");
alert(cat.say("Hello!"));
</script>


А код, который вы показали он не является стандартным... там, как я и предвидел используется JSX... Вы можете перевести метод render в ES2019...
render() {
		return React.createElement(
			"div",
			{ className: "container" },
			React.createElement("h1", null, "E-commerce Shopping Cart Application"),
			React.createElement("hr", null),
			React.createElement(
				"div",
				{ className: "row" },
				React.createElement(
					"div",
					{ className: "col-md-9" },
					React.createElement(Filter, {
						count: this.state.filteredProducts.length,
						handleSortChange: this.handleSortChange,
						handleSizeChange: this.handleSizeChange
					}),
					React.createElement("hr", null),
					React.createElement(Products, {
						products: this.state.filteredProducts,
						handleAddToCart: this.handleAddToCart
					})
				),

				React.createElement(
					"div",
					{ className: "col-md-3" },
					React.createElement(Basket, {
						cartItems: this.state.cartItems,
						handleRemoveFromCart: this.handleRemoveFromCart
					})
				)
			)
		);
	}

Последний раз редактировалось Malleys, 19.06.2019 в 16:54.
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как вы относитесь к наркоманам? Maxmaxmaximus7 Оффтопик 7 05.02.2014 13:29
Как вы передаёте в js переменные с сервера без ajax? akostrikov Серверные языки и технологии 1 09.10.2011 21:45
Как преобразовать JS? Finesse Общие вопросы Javascript 4 20.01.2011 09:20