Как сократить доступ к нескольким свойствам одного и того же объекта в JavaScript?

Выполните следующие шаги в своем компоненте: -

1) First add a reference of your external JS file for importing it to the component. 
   Import * as abcJS from '/YourExternalJS.js';

2) Now declare a "var" of the same name that your function has inside external JS.
   declare var cartstack_updatecart: any;

3) ngOninit(){
 cartstack_updatecart();
 }

4) Do remember that your JQuery should be loaded first than your external JS file.

Я вызвал эту функцию на ngoninit lifecycleHook. Кроме того, вместо объявления внешнего JS-файла внутри Index.html, я бы предпочел вам объявить его в файле angular-cli.json в массиве скриптов. Всего наилучшего.

0
задан koral 19 January 2019 в 12:58
поделиться

2 ответа

В элементах DOM нет цепных методов установки, и они все равно не будут намного короче. Но не повторяйте доступ element.style каждый раз! Просто напишите

const element = document.createElement('div');
element.id = 'element';
const style = element.style;
style.position = 'absolute';
style.width = '100%';
style.height = '100%';
style.left = '0';
style.top = '0';
style.zIndex = '10000';

В качестве альтернативы используйте Object.assign, если вы не хотите прописывать эти многочисленные присвоения свойств:

const element = document.createElement('div');
element.id = 'element';
Object.assign(element.style, {
    position: 'absolute',
    width: '100%',
    height: '100%',
    left: '0',
    top: '0',
    zIndex: '10000',
});

И, наконец, что не менее важно, вы можете просто назначить Строка CSS для свойства style напрямую (но обратите внимание, что это часто считается плохой практикой для уже существующих элементов):

const element = document.createElement('div');
element.id = 'element';
element.style = 'position:absolute; width:100%; height:100%; left:0; top:0; zIndex:10000;';

или даже

const element = Object.assign(document.createElement('div'), {
    id: 'element',
    style: 'position:absolute; width:100%; height:100%; left:0; top:0; zIndex:10000;',
});
0
ответ дан Bergi 19 January 2019 в 12:58
поделиться

Вы можете использовать синтаксис объекта и инкапсулировать ваши стили

const style1 = {
   position: 'absolute',
   width: '100%',
   height: '100%',
   left: '0',
   top:'0',
   zIndex: '10000'
}

element.id = 'element';
element.style = style1;

Затем вы можете делать такие вещи, как использовать этот объект в качестве объекта базовых стилей и заменять значения, используя синтаксис es6, т. Е.

newStyles = { 
   ...styles,
   width: '30%',
   height: '30%',
}

Document API не позволяет создавать цепочки, как вы предлагаете, если ваша цель состоит в том, чтобы уменьшить количество строк кода, вышеупомянутое решение позволит это сделать ваш код многократно используемым и расширяемым;

[116 ] https://developer.mozilla.org/en-US/docs/Web/API/Document

0
ответ дан Happy Machine 19 January 2019 в 12:58
поделиться
Другие вопросы по тегам:

Похожие вопросы: