Vue.component('style-slot', {
functional: true,
render(h, {scopedSlots, data}) {
if (!scopedSlots.default) return;
const map = ['class','staticClass','style','staticStyle'];
const elements = scopedSlots.default();
return elements.map(vNode => {
if (!vNode.tag) return vNode;
let vData;
if (vNode.data) {
vData = Object.assign({}, vNode.data);
map.forEach((key, i) => {
const dataKey = map[i - i % 2];
if(key in data) {
if(dataKey in vNode.data) {
vData[dataKey] = Array.isArray(vData[dataKey])
? vData[dataKey].concat(data[key])
: [vData[dataKey], data[key]];
}
else
vData[dataKey] = data[key];
}
});
} else {
vData = map.reduce((obj, key, i) => {
if(key in data)
obj[key] = data[key];
return obj
}, {});
}
return h(vNode.tag, vData, vNode.children || vNode.text)
})
}
})
<template>
<div>
<style-slot class="sl-sl" style="border:2px">
<slot/>
</style-slot>
</div>
</template>
<template>
<div>
<slot className="slot-class"/>
</div>
</template>
<template>
<component-a v-slot="{className}">
<p :class="['p-class', className]">text</p>
</component-a>
</template>
this.name
, а проект должен работать в любых условиях, то для работы import(`mdi-vue/${this.name}`)
собирается вообще всё, что лежит в папке mdi-vue/
. const data = [0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5, 5.5, 6, 6.5, 7, 7.5, 8, 8.5, 9];
const data2 = [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1, 1.1, 1.2, 1.3, 1.4, 1.5, 1.6, 1.7, 1.8, 1.9, 2];
function narrow(data, length, precision) {
const start = data[0];
const end = data[data.length-1];
const result = new Array(length);
let step = (end - start) / (length - 1);
if(precision) {
if(step < precision)
throw new RangeError(`Шаг не может быть кратен ${precision} при длине результирующего массива ${length}`);
step = (step / precision | 0) * precision;
}
result[0] = start;
while(--length)
result[length] = step * length;
return result;
}
console.log(
narrow(data, 5, 0.5)
)
console.log(
narrow(data2, 5)
)
console.log(
narrow(data, 5)
)
console.log
не вызывает неявного приведения к строке, а потому в консоли мы увидим не 8
, а то что там и есть на самом деле, т.е. function inner() {}
toString
же неявно вызывается именно в случае использования объекта как строки. console.log(sum(1)(2)(2)(3) + 'px') // 8px
.var app = new Vue({
el: '#vue-app-one',
data: {
sitename: 'The Shop',
string: 'Hello',
product: {
id: 1001,
title: 'Phone',
description: 'The best one <em>phone</em> ever',
price: 1000000,
image: 'This is an image',
},
filters: {
formatPrice: function(price){
if (!parseInt(price)) {return "";}
if (price > 9999){
var priceString = (price /100).toFixed(2);
var priceArray = priceString.split("").reverse();
var index = 3;
while (priceArray.length > index +3){
priceArray.splice(index+3, 0, ',');
index +=4;
}
return '$' + priceArray.reverse().join('');
} else{
return '$' + (price/100).toFixed(2);
}
}
}
},
});
Ничего не замечаете?head
и прочие body
.XMLHttpRequest
вызывает событие readystatechange\onprogress
несколько раз с промежуточными результатами, а также имеет метод abort
для остановки. Однако с современными скоростями интернета весь контент скорее всего будет загружен быстрее чем браузер сможет остановить зарос.function parseHead(text) {
if(!parseHead.parser)
parseHead.parser = new DOMParser();
return parseHead.parser.parseFromString(
text.match(/<head>[\s\S]*?<\/head>/i)[0],
"text/html"
).head;
}
function getHead(url) {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.onreadystatechange = function(event) {
if (xhr.readyState === 3) { // если частично загружено
if(/<\/head>/i.test(xhr.responseText)) { // если в загруженном есть закрывающий тег </head>
resolve(parseHead(xhr.responseText)); // парсим текст и возвращаем head
xhr.onreadystatechange = null; // убираем дальнейшую обработку изменения состояния
xhr.abort(); // останавливаем дальнейшую загрузку
}
} else if (xhr.readyState === 4){ // если запрос завршён
if(xhr.status === 200) // если завершён успешно
resolve(parseHead(xhr.responseText)); // парсим текст и возвращаем head
else
reject(xhr);
}
};
xhr.send();
})
}
getHead('/').then(console.log, console.error)