63 lines
3.7 KiB
Markdown
63 lines
3.7 KiB
Markdown
|
---
|
|||
|
|
id: 587d7db2367417b2b2512b8c
|
|||
|
|
title: Use an IIFE to Create a Module
|
|||
|
|
challengeType: 1
|
|||
|
|
videoUrl: ''
|
|||
|
|
localeTitle: Использование модуля IIFE для создания модуля
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## Description
|
|||
|
|
<section id="description"> <code>IIFE</code> <code>immediately invoked function expression</code> ( <code>IIFE</code> ) часто используется для группировки связанных функций в один объект или <code>module</code> . Например, более ранняя задача определила два микшина: <blockquote> функция glideMixin (obj) { <br> obj.glide = function () { <br> console.log («Скольжение по воде»); <br> }; <br> } <br> функция flyMixin (obj) { <br> obj.fly = function () { <br> console.log («Flying, wooosh!»); <br> }; <br> } </blockquote> Мы можем сгруппировать эти <code>mixins</code> в модуль следующим образом: <blockquote> let motionModule = (function () { <br> вернуть { <br> glideMixin: function (obj) { <br> obj.glide = function () { <br> console.log («Скольжение по воде»); <br> }; <br> }, <br> flyMixin: function (obj) { <br> obj.fly = function () { <br> console.log («Flying, wooosh!»); <br> }; <br> } <br> } <br> }) (); // Две скобки приводят к немедленному вызову функции </blockquote> Обратите внимание, что вы <code>immediately invoked function expression</code> ( <code>IIFE</code> ), которое возвращает объект <code>motionModule</code> . Этот возвращенный объект содержит все поведение <code>mixin</code> как свойства объекта. Преимущество шаблона <code>module</code> заключается в том, что все поведение движения может быть упаковано в один объект, который затем может использоваться другими частями вашего кода. Вот пример использования: <blockquote> motionModule.glideMixin (уток); <br> duck.glide (); </blockquote></section>
|
|||
|
|
|
|||
|
|
## Instructions
|
|||
|
|
<section id="instructions"> Создать <code>module</code> с именем <code>funModule</code> , чтобы обернуть два <code>mixins</code> <code>isCuteMixin</code> и <code>singMixin</code> . <code>funModule</code> должен возвращать объект. </section>
|
|||
|
|
|
|||
|
|
## Tests
|
|||
|
|
<section id='tests'>
|
|||
|
|
|
|||
|
|
```yml
|
|||
|
|
tests:
|
|||
|
|
- text: <code>funModule</code> должен быть определен и возвращать объект.
|
|||
|
|
testString: 'assert(typeof funModule === "object", "<code>funModule</code> should be defined and return an object.");'
|
|||
|
|
- text: <code>funModule.isCuteMixin</code> должен получить доступ к функции.
|
|||
|
|
testString: 'assert(typeof funModule.isCuteMixin === "function", "<code>funModule.isCuteMixin</code> should access a function.");'
|
|||
|
|
- text: <code>funModule.singMixin</code> должен получить доступ к функции.
|
|||
|
|
testString: 'assert(typeof funModule.singMixin === "function", "<code>funModule.singMixin</code> should access a function.");'
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
## Challenge Seed
|
|||
|
|
<section id='challengeSeed'>
|
|||
|
|
|
|||
|
|
<div id='js-seed'>
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
let isCuteMixin = function(obj) {
|
|||
|
|
obj.isCute = function() {
|
|||
|
|
return true;
|
|||
|
|
};
|
|||
|
|
};
|
|||
|
|
let singMixin = function(obj) {
|
|||
|
|
obj.sing = function() {
|
|||
|
|
console.log("Singing to an awesome tune");
|
|||
|
|
};
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
## Solution
|
|||
|
|
<section id='solution'>
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
// solution required
|
|||
|
|
```
|
|||
|
|
</section>
|