ES6 / ES7 расширяют функции и расширяют экспорт - PullRequest
Новая
       22

ES6 / ES7 расширяют функции и расширяют экспорт

0 голосов
/ 10 января 2020

Я новичок в ES6, все еще работаю / изучаю его, хочу обновить библиотеку KUTE. js до последних и самых лучших JavaScript стандартов.

Я могу в основном создавать больше функций, импортировать их отдельно в index.js и index-lite.js, но я могу sh Я мог бы использовать extend для получения более согласованного и абстрактного кода, плюс я не надеваю не хочу иметь дважды один и тот же код.

Очень простой пример выглядит так: 

// main.js
export const tweens = []

// STANDARD FUNCTIONS
export function Tween(el,start,end,ops){
  this.el = el
  this.start = start
  this.end = end
  return {this.el,this.start,this.end,this.ops}
}
Tween.prototype = {
  start : function(){
    tweens.push(this)
  }
}
export function Render(tw){
  tw.el.style.width = `${tw.start + tw.end}px`
}
export function Update(){
  tweens.forEach(function(tw){
    Render(tw)
  })
}
// index-mini.js
import {Tween,Render,Update} from 'main.js'

// EXTENDED FUNCTIONS
export function TweenExtended(el,start,end,ops,extendingArgument){
  this.el = el
  this.start = start
  this.end = end

  // other stuff before returning the object
  this.extendingProperty = `${extendingArgument} Hello there!`;
  doSomeAction();

  return {this.el,this.start,this.end,this.ops}
}
TweenExtended.prototype = {
  start : function(){
    tweens.push(this)
  },
  stop : function(){
    const i = tweens.indexOf(this)
    if (i !== -1) { tweens.splice(i, 1)
  }
}
export function RenderExtended(tw,ops){
  const widthValue = `${tw.start + tw.end}px`
  tw.el.style.width = widthValue
  // take an extended action
  ops.update ? tw.el.innerHTML = widthValue
}
export function UpdateExtended(ops){
  tweens.forEach(function(tw){
    RenderExtended(tw,ops)
  })
}
// index.js
import {TweenExtended,RenderExtended,UpdateExtended} from 'main.js'

Теперь, глядя на ответ Берги Я просто могу ' Не могу найти способ написать правильную версию следующих 

// main.js
// EXTENDED FUNCTIONS
export function TweenExtended extends Tween(el,start,end,ops,extendingArgument){
  // do what Tween does

  // do other other stuff before returning the object
  this.extendingProperty = `${extendingArgument} Hello there!`;
  doSomeAction();

  return {this.el,this.start,this.end,this.ops}
}
TweenExtended.prototype = {
  // only add the additional methods
  stop : function(){
    const i = tweens.indexOf(this)
    if (i !== -1) { tweens.splice(i, 1)
  }
}
export function RenderExtended extends Render(tw,ops){
  // do what parent functions does
  // now do the extended actions
  const widthValue = `${tw.start + tw.end}px`
  ops.update ? tw.el.innerHTML = widthValue
}
export function UpdateExtended extends Update(ops){
  // this probably needs to be rewritwen entirelly
  tweens.forEach(function(tw){
    RenderExtended(tw,ops)
  })
}
// index.js
import {TweenExtended,RenderExtended,UpdateExtended} from 'main.js'

Вопросы:

  • export function AExtended extends A, каков правильный синтаксис?
  • is Возможно ли, что расширенные функции «сливаются» со своими родительскими функциями?
  • Если бы я использовал классы, возможно ли выполнить «слияние»?
  • , если что-либо из перечисленного выше, может Пожалуйста, поделитесь советами / образцами / примерами?

1 Ответ

1 голос
/ 10 января 2020

extends ключевое слово применяется к классам, а не к функциям. Хотя в исходном коде определение объекта синтаксически является function, если вы хотите адаптировать этот код к стандартам ES6, вам придется переключиться на синтаксис class.

В основном: 

class Tween {
  constructor(...args) {
    // whatever you want on instantiation
  }

  start() {
    // whatever it does
  }
}
...
class TweenExtended extends Tween {
  constructor(...args) {
    super(...args) // this calls the constructor of Tween
    // any additional initialization you want
  }

  stop() {
    // you can override the Tween method or leave it be
  }

  start() {
    // you can any new methods you want
  }
}

, а затем просто 

export default TweenExtended

или 

export TweenExtended

Надеюсь, это поможет.

...