краткие ответы на вопросы
1. Какова роль преобразования в функции css3: translateZ(0)
Отвечать:Ускорение графического процессора для оптимизации производительности интерфейса
2. Перечислите три поля заголовка, которые запрещают кеширование браузера, и напишите значение параметра ответа
Истекает: сообщите браузеру, как долго кэшировать возвращенный ресурс -1 или 0 не кэшируетсяКратко: добавление заголовка Expires может эффективно использовать возможности кэширования браузера для повышения производительности страницы и может эффективно избежать многих ненужных запросов Http на последующих страницах.Веб-сервер использует заголовок Expires, чтобы сообщить веб-клиенту, что он может использовать компонент текущую копию до указанного времени.Например: Expires: Thu, 15 Apr 2010 20:00:00 GMT; Он сообщает браузеру, что срок действия кеша длится до 15 апреля 2010 года, в течение этого времени тот же запрос использует кеш, вне этого времени используйте http ask.
Кэш-контроль: без кеша Кате-Контроль: max-age=315360000
У Expires есть очень большой недостаток, он использует фиксированное время, требует, чтобы сервер и часы клиента поддерживали строгую синхронизацию, и когда наступает день, сервер должен сбросить новое время. HTTP1.1 представил Cathe-Control, который использует max-age, чтобы указать, как долго компонент кэшируется, а браузер использует кеш в пределах времени max-age от запроса и использует запрос вне его, так что ограничение Expires можно устранить. Если у вас высокие требования к совместимости браузера, вы можете использовать оба.
Прагма: без кеша
3. Какие есть способы точного получения положения элементов страницы
То есть использовать метод getBoundingClientRect(). Он возвращает объект, содержащий четыре свойства: левое, правое, верхнее и нижнее, которые соответствуют расстоянию между левым верхним и нижним правым углами элемента относительно левого верхнего угла окна браузера (окна просмотра).
var X= this.getBoundingClientRect().left;
var Y =this.getBoundingClientRect().top;
//再加上滚动距离，就可以得到绝对位置
var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;
var Y =this.getBoundingClientRect().top+document.documentElement.scrollTop;
4. Регулярно извлекайте результаты из 2018-10-07T11:48:47 Asia/zh-cn [2018,10,07,11,48,47]
"2018-10-07T11:48:47 Asia/zh-cn".match( /\d{1,}/g )
5. Как определить, что объект является массивом?
alert(typeof 1); // 返回字符串"number"
alert(typeof "1"); // 返回字符串"string"
alert(typeof true); // 返回字符串"boolean"
alert(typeof {}); // 返回字符串"object"
alert(typeof []); // 返回字符串"object "
alert(typeof function(){}); // 返回字符串"function"
alert(typeof null); // 返回字符串"object"
alert(typeof undefined); // 返回字符串"undefined"
Среди них результаты typeof{} и typeof[] являются объектами, поэтому вопрос в том, как я могу определить, является ли объект типом массива с помощью typeof?
Объекты — это объекты, массивы — тоже объекты, и все в js — это объекты Очевидно, цель не может быть достигнута простым оператором typeof, и мы должны изменить метод.
1. Начните с прототипа Array.prototype.isPrototypeOf(obj);
Используйте метод isPrototypeOf(), чтобы определить, находится ли массив в цепочке прототипов obj, если да, верните true, иначе false.
Array.isArray([1, 2, 3]); // true
Array.isArray({foo: 123}); // false
Array.isArray('foobar'); // false
Array.isArray(undefined); // false 
вопросы по программированию
1. Знайте пользователей структуры данных, пожалуйста, реализуйте поддержку синтаксиса user.unique может дедуплицировать в соответствии с полем имени, а структура вывода: ["a", "b"]
var users=[{
id:1,name:"a"
},{
id:2,name:"a"
},{
id:3,name:"b"
},{
id:4,name:"v"
}]
Array.prototype.unique = function () {
var res;
this.map(item => {
this[item.id - 1] = item.name
})
// ES6里新添加了两个很好用的东西，set和Array.from
// set是一种新的数据结构，它可以接收一个数组或者是类数组对象，自动去重其中的重复项目。
res=new Set(this);
console.log("new Set对象",res)
// 但是这里大家可以看到，set返回的是一个对象，但是我们想要的是数组啊。
// 这回，就该轮到Array.from出场了，它的作用，就是可以把类数组对象、可迭代对象转化为数组。
res=Array.from(new Set(this));
return res//es6 数组去重
}
console.log(users.unique());
2. Если известны следующие объекты, разработайте пример операции перехвата и чтения свойств на основе прокси-метода es6.Когда реализация требуется для доступа к свойствам, которых нет в примере целевого объекта, будет выдано сообщение об ошибке : Свойство "$(свойство)" не существует
const man={
name:'jscoder',
age:22
}
//补全代码
const proxy = new Proxy(...)
proxy.name //"jscoder"
proxy.age //22
proxy.location //Property "$(property)" does not exist
испытательный центрМетоды прокси-экземпляра es6 javascript,get()Метод get используется для перехвата операции чтения свойства.
var man = {
name:'jscoder',
age:22
};
var proxy = new Proxy(man, {
get: function(target, property) {
if(property in target) {
return target[property];
} else {
throw new ReferenceError(`Property ${property} does not exist.`);
}
}
});
console.log(proxy.name)
console.log(proxy.age)
console.log(proxy.location)
Для других методов методов экземпляра прокси обратитесь к этой ссылке, которая очень подробнаяblog.CSDN.net/QQ_30100043…
3. Учитывая структуру данных следующего виртуального дома, как реализовать простой виртуальный дом и отобразить его в целевом дереве домов
//样例数据
let demoNode = ({
tagName: 'ul',
props: {'class': 'list'},
children: [
({tagName: 'li', children: ['douyin']}),
({tagName: 'li', children: ['toutiao']})
]
});
// Создайте функцию рендеринга для рендеринга объекта demoNode в виде следующего dom
<ul class="list">
<li>douyin</li>
<li>toutiao</li>
</ul>
Видя виртуальный DOM, не кажется ли он очень загадочным, но когда вы снимаете его великолепный слой, вот и все:
- Создайте виртуальную древовидную структуру DOM с помощью JavaScript и визуализируйте ее на странице;
- При изменении данных структура дерева DOM меняется, таким образом генерируется новое виртуальное дерево DOM, сравнивается его с предыдущим DOM и применяется измененная часть к реальному дереву DOM, то есть к странице. С помощью приведенного выше введения давайте реализуем простой виртуальный DOM и свяжем его с реальным DOM.
Создайте виртуальный DOM
Виртуальный DOM, по сути, заключается в использовании объектов JavaScript для построения дерева DOM, такого как шаблон компонента ul выше, его древовидная структура выглядит следующим образом:
var elem = Element({
tagName: 'ul',
props: {'class': 'list'},
children: [
Element({tagName: 'li', children: ['item1']}),
Element({tagName: 'li', children: ['item2']})
]
});
примечание: Element — это конструктор, возвращающий объект Element. Чтобы более четко представить виртуальную структуру DOM, мы опускаем new и реализуем его в Element.
/*
* @Params:
* tagName(string)(requered)
* props(object)(optional)
* children(array)(optional)
* */
function Element({tagName, props, children}){
if(!(this instanceof Element)){
return new Element({tagName, props, children})
}
this.tagName = tagName;
this.props = props || {};
this.children = children || [];
}
Что ж, через Element мы можем произвольно построить виртуальное DOM-дерево. Но есть проблема, виртуальный все-таки виртуальный, мы должны отрисовывать его на странице, иначе он бесполезен. .
Как это представить?
Из вышеизложенного мы знаем, что это дерево, тогда мы можем создавать настоящие DOM-узлы один за другим через обход:
1.создатьЭлемент;
2. createTextNode.
Как его пройти?
Поскольку это дерево, есть только два обхода древовидной структуры:
1. Обход в глубину (DFS)
2.Обход в ширину (BFS)
Для реальной ситуации мы должны использовать DFS, почему?
Потому что мы должны добавить дочерний узел к родительскому узлу.
Что ж, давайте воспользуемся DFS, давайте реализуем функцию рендеринга следующим образом:
Element.prototype.render = function(){
var el = document.createElement(this.tagName),
props = this.props,
propName,
propValue;
for(propName in props){
propValue = props[propName];
el.setAttribute(propName, propValue);
}
this.children.forEach(function(child){
var childEl = null;
if(child instanceof Element){
childEl = child.render();
}else{
childEl = document.createTextNode(child);
}
el.appendChild(childEl);
});
return el;
};
На этом этапе мы можем легко преобразовать виртуальный DOM в указанный реальный DOM. Предположим, мы отобразим обращение ul virtual DOM в тело страницы следующим образом:
var elem = Element({
tagName: 'ul',
props: {'class': 'list'},
children: [
Element({tagName: 'li', children: ['item1']}),
Element({tagName: 'li', children: ['item2']})
]
});
document.querySelector('body').appendChild(elem.render());