Mercurial > js4py
annotate core-javascript/solution-2.rst @ 213:0ea90a1819c2 default tip
Custom theming
| author | Radomir Dopieralski <radomir.dopieralski@allegro.pl> |
|---|---|
| date | Wed, 27 Jun 2012 16:35:54 +0200 |
| parents | 6c98b9680b2a |
| children |
| rev | line source |
|---|---|
| 108 | 1 Solution two |
| 2 ============ | |
| 3 | |
| 4 Here's the code we are studying. The first task is make a loop that | |
| 5 does the assignments. | |
| 6 | |
|
145
58e4f484903f
Fix errors caused by mv in previous commit.
Jonathan Fine <jfine@pytex.org>
parents:
108
diff
changeset
|
7 .. literalinclude:: /core-javascript-work/exercise-2.js |
| 108 | 8 :language: javascript |
| 9 | |
| 10 | |
| 11 Making a loop | |
| 12 ------------- | |
| 13 | |
| 14 As previously hinted, we use item access rather than attribute access. | |
| 15 The problem with attribute access is that the name of the key is | |
| 16 hard-coded and we want it to vary during the loop. | |
| 17 | |
| 18 Here's the solution. There's a bit of overhead in setting up the | |
| 19 loop, but the body of the loop is straightforward. | |
| 20 | |
|
145
58e4f484903f
Fix errors caused by mv in previous commit.
Jonathan Fine <jfine@pytex.org>
parents:
108
diff
changeset
|
21 .. literalinclude:: /core-javascript-work/solution-2-a.js |
| 108 | 22 :language: javascript |
| 23 | |
| 24 | |
| 25 Factory function | |
| 26 ---------------- | |
| 27 | |
| 28 The second task is to write a factory function that takes the list of | |
| 29 keys as a parameter. | |
| 30 | |
| 31 This is a common refactoring pattern, and so is worth learning well. | |
| 32 First we give the code, and then the explanation. | |
| 33 | |
|
145
58e4f484903f
Fix errors caused by mv in previous commit.
Jonathan Fine <jfine@pytex.org>
parents:
108
diff
changeset
|
34 .. literalinclude:: /core-javascript-work/solution-2-b.js |
| 108 | 35 :language: javascript |
| 36 | |
| 37 | |
| 38 Here's what we've done. We created a wrapper function, with *keys* as | |
| 39 its only parameter. This will be our factory function. We've placed | |
| 40 the original function into the body of the wrapper, and return it (as | |
| 41 the value of the wrapper function). Finally, we clean up by removing | |
| 42 the *keys* constant from the inner function. | |
| 43 | |
| 44 There, it's done! When the factory function executes it returns an | |
| 45 instance of the inner function for which *keys* is the argument we | |
| 46 supplied to the factory. | |
| 47 | |
| 48 | |
| 49 A prototype class | |
| 50 ----------------- | |
| 51 | |
| 52 The third task is to write a Fields class that has a copy_attributes | |
| 53 method. | |
| 54 | |
| 55 Here's a function prototype based solution. It relies on the user of | |
| 56 the class supplying the *new* operator to create the new instance (and | |
| 57 chaos results if the user forgets). | |
| 58 | |
|
145
58e4f484903f
Fix errors caused by mv in previous commit.
Jonathan Fine <jfine@pytex.org>
parents:
108
diff
changeset
|
59 .. literalinclude:: /core-javascript-work/solution-2-c.js |
| 108 | 60 :language: javascript |
| 61 | |
| 62 A minor point is the trailing sequence of right curly braces. Two are | |
| 63 followed by a semicolon, but the middle one is not. Why? What | |
| 64 happens if we put a semicolon there? | |
| 65 | |
| 66 | |
|
146
6c98b9680b2a
Revisions to solution-2.rst and its solutiion-2-d.js component.
Jonathan Fine <jfine@pytex.org>
parents:
145
diff
changeset
|
67 A SimpleClass solution |
|
6c98b9680b2a
Revisions to solution-2.rst and its solutiion-2-d.js component.
Jonathan Fine <jfine@pytex.org>
parents:
145
diff
changeset
|
68 ---------------------- |
| 108 | 69 |
| 70 Here's another solution to the third task, which does not require the | |
| 71 user to supply a *new* operator when creating instances. Instead it | |
| 72 uses a factory function, which we call *Class* , that creates an | |
| 73 instance constructor function from a prototype object. | |
| 74 | |
|
145
58e4f484903f
Fix errors caused by mv in previous commit.
Jonathan Fine <jfine@pytex.org>
parents:
108
diff
changeset
|
75 .. literalinclude:: /core-javascript-work/solution-2-d.js |
| 108 | 76 :language: javascript |
| 77 | |
| 78 | |
|
146
6c98b9680b2a
Revisions to solution-2.rst and its solutiion-2-d.js component.
Jonathan Fine <jfine@pytex.org>
parents:
145
diff
changeset
|
79 Exercise: write test |
| 108 | 80 -------------------- |
| 81 | |
|
146
6c98b9680b2a
Revisions to solution-2.rst and its solutiion-2-d.js component.
Jonathan Fine <jfine@pytex.org>
parents:
145
diff
changeset
|
82 Here's an exercise. Write a JavaScript file that tests this solution. |
|
6c98b9680b2a
Revisions to solution-2.rst and its solutiion-2-d.js component.
Jonathan Fine <jfine@pytex.org>
parents:
145
diff
changeset
|
83 |
|
6c98b9680b2a
Revisions to solution-2.rst and its solutiion-2-d.js component.
Jonathan Fine <jfine@pytex.org>
parents:
145
diff
changeset
|
84 |
|
6c98b9680b2a
Revisions to solution-2.rst and its solutiion-2-d.js component.
Jonathan Fine <jfine@pytex.org>
parents:
145
diff
changeset
|
85 Exercise: bound method class |
|
6c98b9680b2a
Revisions to solution-2.rst and its solutiion-2-d.js component.
Jonathan Fine <jfine@pytex.org>
parents:
145
diff
changeset
|
86 ---------------------------- |
|
6c98b9680b2a
Revisions to solution-2.rst and its solutiion-2-d.js component.
Jonathan Fine <jfine@pytex.org>
parents:
145
diff
changeset
|
87 |
|
6c98b9680b2a
Revisions to solution-2.rst and its solutiion-2-d.js component.
Jonathan Fine <jfine@pytex.org>
parents:
145
diff
changeset
|
88 |
| 108 | 89 Recall that this-based instance methods are somewhat fragile. In |
| 90 other words, code like this will fail (and make unwanted changes to | |
| 91 the global object): | |
| 92 | |
| 93 .. code-block:: javascript | |
| 94 | |
| 95 var instance = MyClass(arg1, arg2); | |
| 96 | |
| 97 var fn = instance.method; | |
| 98 element.onclick(fn); | |
| 99 | |
| 100 Let's say that a class *has bound methods* if we can safely pass | |
| 101 around instance methods. In other words, we want *instance.method* to | |
| 102 have no dependence on the value of *this*. | |
| 103 | |
| 104 We can achieve this by using a different class factory function. | |
| 105 | |
| 106 .. code-block:: javascript | |
| 107 | |
| 108 var myclass = {} // The prototype object. | |
| 109 // Add methods to myclass. | |
| 110 var MyClass = BoundMethodClass(myclass); | |
|
146
6c98b9680b2a
Revisions to solution-2.rst and its solutiion-2-d.js component.
Jonathan Fine <jfine@pytex.org>
parents:
145
diff
changeset
|
111 |
|
6c98b9680b2a
Revisions to solution-2.rst and its solutiion-2-d.js component.
Jonathan Fine <jfine@pytex.org>
parents:
145
diff
changeset
|
112 The exercise is to create (and test) a BoundMethodClass factory. |