Skip to content

Commit 382bec8

Browse files
eGavreGavr
committed
Add russian doc
1 parent c5811b4 commit 382bec8

1 file changed

Lines changed: 262 additions & 0 deletions

File tree

‎README.ru.md‎

Lines changed: 262 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,262 @@
1+
# html-differ [![Build Status](https://travis-ci.org/bem/html-differ.svg)](https://travis-ci.org/bem/html-differ) [![Coverage Status](https://img.shields.io/coveralls/bem/html-differ.svg)](https://coveralls.io/r/bem/html-differ?branch=master) [![Dependency Status](https://david-dm.org/bem/html-differ.svg)](https://david-dm.org/bem/html-differ)
2+
3+
Сравнивает два `HTML`-кода.
4+
5+
## Алгоритм сравнения
6+
7+
`html-differ` сравнивает `HTML`-коды по следующим критериям:
8+
9+
1. Два соответствующих списка атрибутов считаются эквивалентными, даже если они записаны в разном порядке.
10+
2. Два соответствующих атрибута `class` считаются эквивалентными, если они ссылаются на одни и те же группы `CSS`-стилей.
11+
12+
Например, cледующие два кода будут считаться эквивалентными:
13+
14+
```html
15+
<html>
16+
<head>
17+
<title>Test</title>
18+
</head>
19+
<body>
20+
<label>label for input</label>
21+
<input id="random" class="ab bc cd" tabIndex="1">
22+
</body>
23+
</html>
24+
```
25+
26+
```html
27+
<html>
28+
<head>
29+
<title>Test</title>
30+
</head>
31+
<body>
32+
<label>label for input</label>
33+
<input class=" cd ab bc" tabIndex="1" id="random">
34+
</body>
35+
</html>
36+
```
37+
38+
## Установка
39+
40+
```bash
41+
$ npm install html-differ -g
42+
```
43+
44+
## Использование
45+
46+
###Как js-модуль###
47+
48+
####html-differ####
49+
50+
**html-differ.diffHtml**<br>
51+
**@param** *{String}* - 1-й `HTML`-код<br>
52+
**@param** *{String}* - 2-й `HTML`-код<br>
53+
**@returns** *{Array of objects}* - [массив с отличиями](https://github.com/kpdecker/jsdiff#change-objects) между `HTML`-кодами
54+
55+
**html-differ.isEqual**<br>
56+
**@param** *{String}* - 1-й `HTML`-код<br>
57+
**@param** *{String}* - 2-й `HTML`-код<br>
58+
**@returns** *{Boolean}*
59+
60+
####diff-logger####
61+
62+
**diff-logger.getDiffText**<br>
63+
**@param** *{Array of objects}* - результат работы метода `html-differ.diffHtml`<br>
64+
**@param** *{Object}* - опции:<br>
65+
* `charsAroundDiff: Number` - количество символов перед отличием между `HTML`-кодами и после него (по умолчанию: `40`)
66+
67+
**@returns** *{String}* - отличия
68+
69+
**diff-logger.log**<br>
70+
**@param** *{Array of objects}* - результат работы метода `html-differ.diffHtml`<br>
71+
**@param** *{Object}* - опции:<br>
72+
* `charsAroundDiff: Number` - количество символов перед отличием между `HTML`-кодами и после него (по умолчанию: `40`)
73+
74+
**@returns** - вывод отличий:
75+
76+
<img src='https://cloud.githubusercontent.com/assets/6376693/3648928/a6b9d48a-110d-11e4-8a07-d9b156145017.png'/>
77+
78+
**Пример**
79+
80+
```js
81+
var fs = require('fs'),
82+
HtmlDiffer = require('html-differ').HtmlDiffer,
83+
diffLogger = require('html-differ/lib/diff-logger');
84+
85+
var html1 = fs.readFileSync('1.html', 'utf-8'),
86+
html2 = fs.readFileSync('2.html', 'utf-8');
87+
88+
var options = {
89+
ignoreHtmlAttrs: [],
90+
compareHtmlAttrsAsJSON: [],
91+
ignoreWhitespaces: true,
92+
ignoreHtmlComments: true,
93+
bem: false
94+
}
95+
96+
var htmlDiffer = new HtmlDiffer(options);
97+
98+
var diff = htmlDiffer.diffHtml(html1, html2);
99+
100+
var isEqual = htmlDiffer.isEqual(html1, html2);
101+
102+
var res = diffLogger.getDiffText(diff, { charsAroundDiff: 40 });
103+
104+
diffLogger.log(diff, { charsAroundDiff: 40 });
105+
```
106+
107+
Где `options` – это `Object`:
108+
109+
* **ignoreHtmlAttrs: [ Array ]**
110+
111+
Устанавливает, значения каких атрибутов следует игнорировать при сравнении (по умолчанию: `[]`).
112+
113+
**Пример**: `['id', 'for']`<br>
114+
Следующие два кода будут считаться эквивалентными:
115+
116+
```html
117+
<label for="random">label for input</label>
118+
<input id="random">
119+
```
120+
121+
```html
122+
<label for="sfsdfksdf">label for input</label>
123+
<input id="sfsdfksdf">
124+
```
125+
126+
* **compareHtmlAttrsAsJSON: [ Array ]**
127+
128+
Устанавливает, значения каких атрибутов следует сравнивать как `JSON`-объекты, а не как строки (по умолчанию: `[]`).
129+
130+
**Пример**: `['onclick']`<br>
131+
Следующие два кода будут считаться эквивалентными:
132+
133+
```html
134+
<div onclick='return {"bla":{"first":"ololo","second":"trololo"}}'></div>
135+
```
136+
137+
```html
138+
<div onclick='return {"bla":{"second":"trololo","first":"ololo"}}'></div>
139+
```
140+
141+
* **ignoreWhitespaces: Boolean**
142+
143+
`html-differ` будет игнорировать пробельные символы (пробелы, табуляция, переводы строк и т. д.) при сравнении (по умолчанию: `true`).
144+
145+
**Пример**: `true`<br>
146+
Следующие два кода будут считаться эквивалентными:
147+
148+
```html
149+
<html>Text Text<head lang="en"><title></title></head><body>Text</body></html>
150+
```
151+
152+
```html
153+
<html>
154+
Text Text
155+
<head lang ="en">
156+
<title > </title>
157+
158+
159+
</head>
160+
161+
<body>
162+
Text
163+
164+
</body>
165+
166+
167+
168+
169+
</html>
170+
171+
```
172+
173+
* **ignoreHtmlComments: Boolean**
174+
175+
`html-differ` будет игнорировать `HTML`-комментарии при сравнении (по умолчанию: `true`).
176+
177+
**Пример**: `true`<br>
178+
Следующие два кода будут считаться эквивалентными:
179+
180+
```html
181+
<!DOCTYPE html>
182+
<!-- comments1 -->
183+
<html>
184+
<head lang="en">
185+
<meta charset="UTF-8">
186+
<title><!-- comments2 --></title>
187+
</head>
188+
<body>
189+
Text<!-- comments3 -->
190+
</body>
191+
</html>
192+
```
193+
194+
```html
195+
<!DOCTYPE html>
196+
197+
<html>
198+
<head lang="en">
199+
<meta charset="UTF-8">
200+
<title></title>
201+
</head>
202+
<body>
203+
Text
204+
</body>
205+
</html>
206+
```
207+
208+
* **bem: Boolean**
209+
210+
Устанавливает предопределенные опции для `БЭМ` (по умолчанию: `false`).
211+
212+
**Пример**: `true`
213+
214+
* `ignoreHtmlAttrs: ['id', 'for']`
215+
* `compareHtmlAttrsAsJSON: ['data-bem', 'onclick', 'ondblclick']`
216+
217+
218+
###Как программа###
219+
220+
```bash
221+
$ html-differ --help
222+
Сравнивает два HTML-кода
223+
224+
Использование:
225+
html-differ [ОПЦИИ] [АРГУМЕНТЫ]
226+
227+
Опции:
228+
-h, --help : Помощь
229+
-v, --version : Показывает номер версии
230+
--config=CONFIG : Путь к конфигурационному JSON-файлу
231+
--chars-around-diff=CHARSAROUNDDIFF : Количество символов перед отличием и после него (по умолчанию: 40)
232+
233+
Аргументы:
234+
PATH1 : Путь к 1-ому HTML-файлу (обязательный аргумент)
235+
PATH2 : Путь ко 2-ому HTML-файлу (обязательный аргумент)
236+
```
237+
238+
**Пример**
239+
240+
```bash
241+
$ bin/html-differ путь/к/html1 путь/к/html2
242+
243+
$ bin/html-differ --config=путь/к/конфигу --chars-around-diff=40 путь/к/html1 путь/к/html2
244+
```
245+
246+
####Конфигурационный файл###
247+
248+
Рассмотрите следующий файл `config.json`:
249+
250+
```js
251+
{
252+
"ignoreHtmlAttrs": [],
253+
"compareHtmlAttrsAsJSON": [],
254+
"ignoreWhitespaces": true,
255+
"ignoreHtmlComments": true,
256+
"bem": false
257+
}
258+
```
259+
260+
## Лицензия
261+
262+
[MIT License](http://en.wikipedia.org/wiki/MIT_License)

0 commit comments

Comments
 (0)