jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

renovations

Browse source
This commit is contained in:
Ilya Kantor 2015-02-19 23:57:02 +03:00
parent e706693c7e
commit 24171550ae
23 changed files with 196 additions and 76 deletions
Download patch file Download diff file Expand all files Collapse all files

27
2-ui/4-forms-controls/2-focus-blur/6-input-nice-placeholder/solution.view/index.html
View file

@ -2,32 +2,7 @@
<html>
<head>
<meta charset="utf-8">
<style>
body
{
font: 14px/14px Arial, sans-serif;
}
input
{
font: 14px/14px Arial, sans-serif;
width: 12em;
padding: 0;
margin: 0;
}
#placeholder
{
font: 14px/14px Arial, sans-serif;
position: absolute;
margin: -1.2em 0 0 0.2em;
color: red;
}
</style>
<link rel="stylesheet" href="style.css">
</head>
<body>

17
2-ui/4-forms-controls/2-focus-blur/6-input-nice-placeholder/solution.view/style.css Normal file
View file

@ -0,0 +1,17 @@
body {
font: 14px/14px Arial, sans-serif;
}
input {
font: 14px/14px Arial, sans-serif;
width: 12em;
padding: 0;
margin: 0;
}
#placeholder {
font: 14px/14px Arial, sans-serif;
position: absolute;
margin: -1.2em 0 0 0.2em;
color: red;
}

1
2-ui/4-forms-controls/2-focus-blur/6-input-nice-placeholder/source.view/index.html
View file

@ -2,6 +2,7 @@
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>

17
2-ui/4-forms-controls/2-focus-blur/6-input-nice-placeholder/source.view/style.css Normal file
View file

@ -0,0 +1,17 @@
body {
font: 14px/14px Arial, sans-serif;
}
input {
font: 14px/14px Arial, sans-serif;
width: 12em;
padding: 0;
margin: 0;
}
#placeholder {
font: 14px/14px Arial, sans-serif;
position: absolute;
margin: -1.2em 0 0 0.2em;
color: red;
}

3
2-ui/5-widgets/2-widgets-structure/menu-dom.view/index.html
View file

@ -3,8 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<script src="https://cdn.polyfill.io/v1/polyfill.js?features=Element.prototype.closest"></script>
<script src="https://cdn.polyfill.io/v1/polyfill.js?features=Element.prototype.closest"></script>
<script src="menu.js"></script>
</head>
<body>

2
2-ui/5-widgets/4-template-lodash/3-menu-template/solution.view/index.html
View file

@ -4,7 +4,7 @@
<meta charset="utf-8">
<link rel="stylesheet" href="menu.css">
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>
<script src="menu.js"></script>
</head>
<body>

2
2-ui/5-widgets/4-template-lodash/3-menu-template/source.view/index.html
View file

@ -4,7 +4,7 @@
<meta charset="utf-8">
<link rel="stylesheet" href="menu.css">
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>
<script src="menu.js"></script>
</head>
<body>

48
2-ui/5-widgets/4-template-lodash/article.md
View file

@ -24,7 +24,7 @@
С первой группой виджетов -- вопросов нет. Добавляем обработчики, и дело сделано.
Интересно начинается со второй группы, и совсем интересно -- с третьей группой.
Здесь нам интересна вторая группа. Третья -- это по существу оптимизация с едиными шаблонами на клиенте и сервере, рассмотрим её позже.
## Зачем нужны шаблоны?
@ -241,7 +241,7 @@ var template = document.getElementById('menu-template').innerHTML;
```html
<!--+ run height=150 -->
<!-- библиотека LoDash -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>
<!-- шаблон для списка от 1 до count -->
<script *!*type="text/template"*/!* id="list-template">
@ -408,11 +408,11 @@ function Menu(options) {
}
function render() {
var elemHtml = options.template({title: options.title});
var html = options.template({title: options.title});
elem = document.createElement('div');
elem.innerHTML = elemHTML;
elem = elem.firstChild;
elem.innerHTML = html;
elem = elem.firstElementChild;
elem.onmousedown = function() {
return false;
@ -509,12 +509,32 @@ function(obj) {
Нои здесь можно кое-что отладить. При ошибке, если она не синтаксическая, отладчик при этом останавливается где-то посередине "страшной" функции.
При этом, особенно если шаблонов много и компилируются они где-то раньше по коду -- бывает совершенно неочевидно, из какого шаблона она получена.
Попробуйте сами запустить пример с открытыми инструментами разработчика и включённой опцией "остановка при ошибке":
Попробуйте сами запустить пример с открытыми инструментами разработчика и *включённой* опцией "остановка при ошибке":
```html
<!--+ run src="index.html" -->
<!--+ run -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>
<script type="text/template" id="menu-template">
<div class="menu">
<span class="title"><%-title%>
<ul>
<% items.forEach(function(item) { %>
<li><%-item%></li>
<% }); %>
</ul>
</div>
</script>
<script>
var tmpl = document.getElementById('menu-template').innerHTML;
var compiled = _.template(tmpl);
var result = compiled({ title: "Заголовок" });
document.write(result);
</script>
```
В шаблоне допущена ошибка, поэтому отладчик остановит выполнение.
@ -523,13 +543,13 @@ function(obj) {
<img src="template-debugger.png">
**LoDash пытается нам помочь. Он добавляет к шаблонам специальный идентификатор [sourceURL](http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/#toc-sourceurl), который служит аналогом "имени файла". На картинке он отмечен красным.**
Библиотека LoDash пытается нам помочь, подсказать, в каком именно шаблоне произошла ошибка. Ведь из функции это может быть неочевидно.
Для этого она добавляет к шаблонам специальный идентификатор [sourceURL](http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/#toc-sourceurl), который служит аналогом "имени файла". На картинке он отмечен красным.
По умолчанию `sourceURL` имеет вид `/lodash/template/source[N]`, где `N` -- постоянно увеличивающийся номер шаблона. В данном случае мы можем понять, что эта функция получена при самой первой компиляции.
**Это, конечно, лучше чем ничего, но, как правило, его имеет смысл заменить `sourceURL` на свой.**
Это делается при компиляции дополнительным параметром `sourceURL`:
Это, конечно, лучше чем ничего, но, как правило, его имеет смысл заменить `sourceURL` на свой, указав при компиляции дополнительный параметр `sourceURL`:
```js
...
@ -537,7 +557,7 @@ var compiled = _.template(tmpl, null, {sourceURL: '/template/menu-template'});
...
```
Попробуйте запустить [исправленный пример](/tutorial/widgets/template-error-sourceurl/) и вы увидите в качестве имени файла `/template/menu-template`.
Попробуйте запустить [исправленный пример](template-error-sourceurl/) и вы увидите в качестве имени файла `/template/menu-template`.
[warn header="Не определена переменная -- ошибка"]
Кстати говоря, а в чём же здесь ошибка?
@ -551,7 +571,7 @@ var compiled = _.template(tmpl, null, {sourceURL: '/template/menu-template'});
Шаблоны полезны для того, чтобы отделить HTML от кода. Это упрощает разработку и поддержку.
В этой главе подробно разобрана система шаблонизации из библиотеки [LoDash](https://github.com/bestiejs/lodash).
В этой главе подробно разобрана система шаблонизации из библиотеки [LoDash](https://lodash.com).
Теперь, когда мы с ней знакомы, мы можем как использовать её в своих проектах, так и перейти к более глобальному рассмотрению подходов к шаблонизации.

3
2-ui/5-widgets/4-template-lodash/menu-template.view/index.html
View file

@ -3,7 +3,8 @@
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="menu.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>
<script src="https://cdn.polyfill.io/v1/polyfill.js?features=Element.prototype.closest"></script>
<script src="menu.js"></script>
</head>
<body>

6
2-ui/5-widgets/4-template-lodash/menu-template.view/menu.js
View file

@ -7,11 +7,11 @@ function Menu(options) {
}
function render() {
var elemHtml = options.template({title: options.title});
var html = options.template({title: options.title});
elem = document.createElement('div');
elem.innerHTML = elemHTML;
elem = elem.firstChild;
elem.innerHTML = html;
elem = elem.firstElementChild;
elem.onmousedown = function() {
return false;

4
2-ui/5-widgets/4-template-lodash/index.html → 2-ui/5-widgets/4-template-lodash/template-error-sourceurl.view/index.html Executable file → Normal file
View file

@ -2,7 +2,7 @@
<html>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>
<script type="text/template" id="menu-template">
<div class="menu">
@ -18,7 +18,7 @@
<script>
var tmpl = document.getElementById('menu-template').innerHTML;
var compiled = _.template(tmpl);
var compiled = _.template(tmpl, null, {sourceURL: '/template/menu-template'});
var result = compiled({ title: "Заголовок" });
document.write(result);

2
2-ui/5-widgets/5-custom-events/menu-callback.view/index.html
View file

@ -4,7 +4,7 @@
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>
<script src="menu.js"></script>
</head>
<body>

2
2-ui/5-widgets/5-custom-events/menu-event.view/index.html
View file

@ -4,7 +4,7 @@
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>
<script src="eventMixin.js"></script>
<script src="menu.js"></script>
</head>