1, Type - the type of
1) Object type. Prototype of the basic types in because js is not the type of language that non-type, when we look at the overall situation, Object to provide the overall situation for some of the static method call. These include: detection, expansion. And no pollution to the Object prototype object. (This is very important)
2) String type. String Object prototype will be further expanded to expand a number of methods are common strip, stripTags, truncate such, it is worth mentioning several ways: gsub method, which used to be a global replacement, Chuan parameters into two, one pattern, regular expressions for the second one is the replacement, to be replaced at the number of strings.
3) Array type. It has no special feature of only the expansion of some commonly used functions.
4) Hash type. JS is not a built-in type, is a Prototype is a type of self-definition, types of support for json serialization and deserialization
5) Function type. It can be said that this is the expansion of several types in a rather special place.
argumentNames. Participation has been shaped function name, and return to a shape parameter (string type) of an array, used mainly for dynamic call. And can invoke a simple Factory pattern.
bind, that popular, bind will not let this guide were abducted. Some say the theory is used to bind the context. On this point, I Context in the following section there will be a detailed description of some. bindAsEventListener, and bind similar, the main difference is that it is event object passed.
Kerry curry method approach. Dynamic parameters for the transmission. For example,
Copy Code (copy code) - Run HTML (running code) - Save Code (separate code)
<script type="text/javascript">
Function.prototype.curry = function () (
if (! arguments.length) return this;
var __method = this, args = Array.prototype.slice.call (arguments, 0);
return function () (
return __method.apply (this, args.concat (Array.prototype.slice.call (arguments, 0)));
)
)
var F = function () (alert (Array.prototype.slice.call (arguments, 0). join ( ''))};
F.curry ( 'I'). Curry ( 'am'). Curry ( 'never-online'). Curry ( 'http://www.never-online.net')();
</ script>
delay function delay in the implementation.
wrap packaging to their function and to function as a packaged form of the transfer function parameters of the first parameter, a simple package that is their own. Dynamic changes in function will have the context of packaging (the packaging function of this with the implementation of this is the same) to see examples of it.
Copy Code (copy code) - Run HTML (running code) - Save Code (separate code)
<script>
Function.prototype.bind = function () (
if (arguments.length <2 & & typeof (arguments [0 ])==' undefined ') return this;
var __method = this, args = Array.prototype.slice.call (arguments, 0), object = args.shift ();
return function () (
return __method.apply (object, args.concat (Array.prototype.slice.call (arguments, 0)));
)
)
Function.prototype.wrap = function (wrapper) (
var __method = this;
return function () (
return wrapper.apply (this, [__method.bind (this)]. concat (Array.prototype.slice.call (arguments, 0)));
)
)
var a = (
b: (
c: function () (
)
),
f: function () (
alert (this == ab);
)
);
abc = afwrap (function (F) (
F ();
));
abc ();
</ script>
af was wrap, in an anonymous function, F is the parameter af, this function has been packaged to be assigned to the function abc. We call the last line of the function abc from the source code you can see this used to be belong to a this object, according to the example mentioned before, this wrap will replace the dynamic this. The so-called dynamic, is to see how you are calling. af whom to replace this method the answer is, because af from the above abc () implementation, the object of it is ab, If this is the case
Copy Code (copy code) - Run HTML (running code) - Save Code (separate code)
var f = afwrap (function (F) (
F ();
));
f ();
this will be the window, above the natural results of the operation is false. This mystery is to return to the closed bag. If you understand the closure, understanding, apply, can be found from the wrap prototype answered. Use specific words to explain in writing, or have too much to say beside the point, it is not clear if the message in the commentary on it.
methodize
Dynamic pointer into this as a parameter in the closure. In this way, I am not very clear its specific role. Look at the code is relatively simple, but I also do not know what to do.
2, Hack
I put the word from the css hack check back in, putting that on here, means that flexibility in the use of js code to simplify the mechanism in order to achieve the role.
1) let us not refer to the specific content of the Hack, we might wish to reflect on a problem, the object type can be cited, such as: Array, Object and other objects, how to achieve an iterator interface, that is, each, the use of each realization of all (and In each iteration of the implementation of function, if the function returns false, then jump out of each iteration, but also out of all functions) and so on.
First of all, look at the ordinary method, it will be some restrictions.
Copy Code (copy code) - Run HTML (running code) - Save Code (separate code)
<script>
/ **
* As indicated above, the first realization of each, there is a parameter fn,
* Use apply to call this dynamic function and parameter value are given index
*
* @ Method each
* @ Param (function)
* @ Return void
* /
Array.prototype.each = function (fn) (
var self = this; var i = this.length;
while (i -) fn.apply (null, [self [i], i]);
)
/ **
* However, the realization of all achieved on the bad * because each is a function of the implementation cycle,
* Dr function regardless of the final value will be the implementation of an element * is why we can not be safe from the return function *
* @ Method each
* @ Param (function)
* @ Return void
* /
Array.prototype.all = function (fn) (
this.each (
function (value, index) (
if (false === fn.apply (null, [value, index])) (
return false;
)
alert ( 'this is a test for outer Function run count as' + (value));
/ / Implementation for the false story when the function returns, it will appear here 9 alert, obviously not in line with our expectations (expected to implement programs designed to false will also return all functions)
)
);
);
var arr = [1,2,3,4,5,6,7,8,9,10];
arr.all (function (value, index) (
var result = value == 6? false: true;
return result;
));
</ script>
Judging from the above example, why do we not all in the realization of this alone, but each call to achieve? Of course, we can all direct and explicit in the coding code
Copy Code (copy code) - Run HTML (running code) - Save Code (separate code)
Array.prototype.all = function (fn) (
var self = this; var i = this.length;
while (i -) if (! fn.apply (null, [self [i], i])) return;
);
Then explain why it can not now achieve. We can separate each of the iterator as a, it is the abstract design pattern that: a class can be extended, but do not modify it. Another point, with each to achieve all (of course, could be other), can save a lot of code
Prototype to see the realization of the following, and throw. The throw, normally used to throw an exception to the upper code, so that the upper code to capture and deal with them. Prototype gives us (whether or not it is his invention of this Hack) use another, thus changing the interface of all the realization of the object can be cited.
Copy Code (copy code) - Run HTML (running code) - Save Code (separate code)
<script>
var $ exception = '$ $ EXCEPTION $ $';
Array.prototype.each = function (fn) (
var self = this; var i = this.length;
try (while (i -) fn.apply (null, [self [i], i]);)
catch (e) (if (e! = $ exception) throw e;)
)
Array.prototype.all = function (fn) (
this.each (
function (value, index) (
if (false === fn.apply (null, [value, index])) (
throw $ exception;
)
alert ( 'this is a test for outer Function run count as' + (value));
/ / Implementation for the false story when the function returns, it will appear here 9 alert, obviously not in line with our expectations (expected to implement programs designed to false will also return all functions)
)
);
);
var a = [1,2,3,4,5,6,7,8,9,10];
a.all (function (value, index) (
var result = value == 6? false: true;
return result;
));
</ script>
Hack has also been used in this unusual mechanism to return to the top of its own function, thrown in to capture each time. So that we can use each to all.
2) extend. The purpose of the most primitive, in order to extend the object methods or properties to achieve a function, it is a static method of Object. Here we describe the methods Hack. For example:
Prototype's too close interdependence. Coupling is too high, perhaps Prototype team to develop the idea that the whole Prototype as a module (this size is a bit big -_-!) 。 The use of a large number of closure , debugging is a problem (I may have a limited level, Prototype realization of some of the methods a bit "ugly"), closure is not, after all, a large number of users. So pay attention when used. Abstract objects can be cited as the Enumerable. Interface to achieve _each. _each To achieve with each. Used to achieve the collection of each method. The iterator package, resulting in the drawback is that users do not consider the details of iteration, if the large amount of data, it is recommended not to use the Prototype iterators. Above in such a lazy function pattern or the use of things better.
Methods used in very good wrap, can be used to modify existing methods and to increase, such as enhanced getDay, since the definition of a week of starting time
can be interpreted as a pre-methodize will this fill in as the first parameter, and can Just fill in the parameters used behind after a lot of Element in
addClassName: function (element, className) (
if (! (element = $ (element))) return;
if (! element.hasClassName (className))
element.className + = (element.className? '':'') + className;
return element;
),
prototype of each feeling very uncomfortable, would rather use for ~
<br /> This sequence is not used to describe how to use prototype, not a tutorial, but as a theoretical study, see the network are the use of Prototype to write, but not how many people to explain the design and implementation, given the subsequent people and learning tips. Feel it is necessary to write a. But have not had any opportunity to write, one to feel that their level is still lacking, and secondly there is no time to write too much text, and the third is more difficult to statements, because, after all, in the framework of the local interaction to achieve too much, the design is also dependent on a lot. It is difficult to describe how the first set first. How to describe the design and implementation, and it easy to understand what I am talking about, can not put the whole framework was too subjective, these are relatively headache. This can have this opportunity to let me describe the design of this framework, purely by chance, do not have much time to prepare, so I will not write too many details, if there are omissions, please also indicate.
Summary
Prototype is an elegant framework, where elegance, enlightenment it brought us? Why do we have to learn it? I will be Type (type), Hack, Closure (closure), Context (context), Lazy function pattern (inertia function model), and Design (design) objective appears to prototype.
Overview, Design Design <br /> Assuming you have tomorrow, how to achieve the module, about the realization of the above Prototype, if you to write a framework, whether or not you can do it? Prototype can write better than that? I am sorry, I can not answer this question. Regardless of the answer to how to study the total did not look bad, let's talk about how the Prototype code that he organized.
1) Object. This is the Prototype testing and expansion of the realization of the core, all static methods. It provides verification within the framework of the overall situation.
2) Enumerable. It is all of the core of the object can be cited. For example: Array, Hash, Object, Element Iterative realization of the object. They have to achieve an interface. _each methods, each object of each object through the realization of each to achieve. The following chart can be said about the relationship between the level of their
Other objects are to achieve the expansion of self-iteration of the Enumerable object. is _each interface, the object of all this method should, Enumerable is like a base class object.
3) inheritance. In the new version of Prototype, the realization of a new way Class.Create is extend object instead of the original program, to achieve much more complex, a large number of dynamic method calls the other types.
The main idea is to use a prototype of the way the succession of the succession, but with the N in the realization of a closure. N> = 3 layer. $ Supper including the realization of this approach, different from traditional OO is that the $ supper method as a parameter into sub-categories (and for the first parameter) to be valid. (Prototype method is based on Alex Arnell written plugin)
4) Template. Template Class json based on data provided by the call. For example, a string can be used with Template
Copy Code (copy code) - Run HTML (running code) - Save Code (separate code)
var s = "# (name) 's website is # (uri)";
var a = new Template (s);
var o = (name: 'never-online', uri: 'http://www.never-online.net/blog');
a.evaluate (o);
/ / To be never-online's website is http://www.never-online.net/blog
The evaluate method of the String prototype dependent method gsub.
5) Selector.'s Yui-ext-based selector. The more ideas, just a rough understanding of the DOMquery (yui-ext) of ideas, that is, the use of compileMatch string assembly to form a function, the dynamic resolution selector. Selector are a few that are the same, there is a temporary data cache memory array.
6) Event. In the new version of Prototype, there is a comment saying so. Event from the original model of the worst to the best mode of the Event. Management of the incident are based on the base class object can be cited, for example, in the event of pluck, without and so on, in the realization of Event event, the use of a number of "private" method, and the final return of only a few methods, including observe, fire and stopObserving. We can also use simple map to show that
7) Ajax. Probably is following the plan, to achieve a good feel of (for example to expand)
8) Chaining stuff. This jquery above is the most used, when there jquery, promotion of the framework is to use the time to encourage and use of Chaining, which has become the representative of the jquery.
Chaining is in fact a cycle. Chaining is useful, it can use a natural language approach to programming, rather than the command-type for type, but the efficiency of consumption, because the use of excessive iterators. Prototype have also used the part of chain, the chain started from the Element in detail the realization that I do not, the principle is very simple:
$ (id). observe ( 'onclick', handler) is a case in point would be the successor to the Element on the Event to.
