Prototype study and document downloads and tutorials

2009-10-01  来源:本站原创  分类:AJAX  人气:466 

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.

相关文章
  • Prototype study and document downloads and tutorials 2009-10-01

    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 inclu

  • Prototype study entry 2009-10-28

    Prototype by Sam Stephenson developed a Javascript library as well as the originator of other frameworks. Part of its existing Javascript objects such as Object, Function, Dom, String, such as expansion, and Ajax application package, to provide a sta

  • JavaScript prototype study notes (change) 2010-06-12

    prototype from the French, the software industry standards translated as "prototype", representing the initial shape of things, but also with models and model significance. Learning the Java object-oriented thinking, on the prototype of a number

  • prototype Study - Ajax. Updater 2009-06-20

    Achieve html page, to load data to the page 1, prototype.js 2, js part <script type="text/javascript"> var url ='/pork/ep/reportEpLevel.do'; new Ajax.Updater( {success: 'eplevelDiv'}, url, { method: 'get', onFailure: reportError, // Failed

  • Prototype extension Array, document, String, Function, Number 2010-11-20

    Array expansion <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> Exte

  • prototype.js tutorial and prototype Chinese manual 2009-10-03

    Prototype.js collection of online tutorials and manuals Chinese prototype to facilitate the use of prototype.js 1.4 English tutorial doc format http://www.dayanmei.com/upload/prototype1.4.doc prototype.js 1.4 Chinese prototype 1.5 English tutorial an

  • SpringMVC basic configuration to study 2009-07-16

    The introduction of SpringMVC it is first necessary to configure the web.xml to configure the control request forwarding servlet - DispatcherServlet, <servlet> <servlet-name> Springmvc </ servlet-name> <servlet-class> org.springfra

  • javascript xml document processing 2010-06-06

    A few days ago about the next javascript xml parsing for some knowledge here, a little record. Here mainly for IE, Mozilla associated coding and testing, does not involve the browser chrome, chrome browser, so may be related to the code not work corr

  • Handover from the project see the project document management 2010-11-16

    From the Network Project documents for the project management function has not to talk about this, but the document management project management but is often the most easy to overlook the content. Practical for any project, the document must have, b

  • Prototype of a brief introduction 2010-11-20

    Prototype is a JavaScript library, can be http://www.prototypejs.org/download site to download the latest version, clicking on the link "Save Target As" on it. It is very simple to use copy to the project, then: <script type="text/javasc

  • Study books and videos Daquan 2011-04-26

    Mobile Development Android/3G: Flash Professional CS5: game video tutorials produced iOS Devices http://www.hztraining.com/bbs/showtopic-1393.aspx Android project video tutorial (DVDRip) http://www.hztraining.com/bbs/showtopic-1392.aspx Android-based

  • prototype 1.5 & scriptaculous 1.6.1 学习笔记 2014-03-17

    最近做otalk,开始是基于prototype1.4的,后来因为我加上了scriptaculous 1.6.1,她要求prototype的版本是1.5的,所以就升级到了1.5,看着demo学习起了scriptaculous的用法. 用法稍后整理,因为在使用过程中很多次效果都不让自己满意,想看代码又看不明白,经过一次折磨,我下定决心,一定要把scriptaculous和prototype的代码看明白! 这里作为我的学习笔记,可能没有什么顺序了逻辑,等到学习完,最后整理 首先是定义类 看着笑笑老师的

  • prototype 1.5相关知识及他人笔记 2014-03-25

    一直没有没有时间看prototype,现在好了,已经更新到了1.5 pre1,呵呵,强大的功能不得不学习啊,这个是提升自己JS能力的又一个捷径. 1. Prototype是什么? 或许你还没有用过它, prototype.js 是一个由Sam Stephenson写的JavaScript包.这个构思奇妙编写良好的一段兼容标准的一段代码将承担创造胖客户端, 高交互性WEB应用程序的重担.轻松加入Web 2.0特性. 如果你最近体验了这个程序包,你很可能会发现文档并不是它的强项之一.像所有在我之前的

  • document.getElementBy("id")与$("#id")有什么区别 2014-04-20

    有朋友问document.getElementBy("id")与$("#id")的区别,其实第一个就是js中获取对象的方法, 第二个是通过自定义函数方便调用,而第三个是jquery中获取id对象的方法 下面简单介绍下: 第一个就是js中获取对象的方法,比较直接,如果一个页面有多个id,每次都要写这么长的document.getElementBy("id") document.getElementBy("id") documen

  • prototype 学习笔记整理 2014-05-09

    prototype 学习笔记整理,学习prototype的朋友可以参考下. var Class = { create: function() { return function() { this.initialize.apply(this, arguments); } } } 定义了一个class函数作为创建类的模版或者说是原型 使用方法 <html> <title>Test Class.create()</title> <head> <script

  • Prototype Selector对象学习 2014-05-17

    这个对象在帮助文档上并没有,但是这个对象确是整个DOM操作的核心类,工具函数$$,其实就是调用这个类的方法 function $$() { return Selector.findChildElements(document, $A(arguments)); } 这个类可以分成三个部分:第一个部分就是根据不同的浏览器,判断使用什么DOM操作方法.其中操作IE就是用普通的getElementBy* 系列方法:FF是document.evaluate:Opera和Safari是selectorsAP

  • 类之Prototype.js学习 2014-05-19

    Prototype.js作为javascript的成功的开源框架,封装了很多好用的功能,虽然官方没提供什么文档,不过在google上一搜,好多相关的文档,不过在学习使用的过程中还是碰到了一些问题,希望熟悉的朋友能多加指点,对于prototype.js学习我关注这么几点,同时针对每点也讲讲学习的结果和碰到的问题,^_^ 1.类的创建 prototype.js已经封装好了,这个很简单. var Person=Class.create(); 这样就创建了一个Person类,这个Person类必须提供i

  • Array.prototype.slice.apply的使用方法 2014-07-16

    arguments在JavaScript语法中是函数特有的一个对象属性(Arguments对象),用来引用调用该函数时传递的实际参数. function test(){ //将参数转为一个数组 var args = Array.prototype.slice.apply(arguments); alert(args); } arguments在JavaScript语法中是函数特有的一个对象属性(Arguments对象),用来引用调用该函数时传递的实际参数.这个对象很象数组,拥有length属性且

  • document.getElementById的简写方式(获取id对象的简略写法) 2015-04-24

    在js编写中,经常需要获取id对象,如果直接用getElementById来获取,代码多而且老的浏览器不支持这属性,所有大家可以考虑用下面的代码. 比如用_$(id)代替document.getElementById(id). 如果是纯粹的代替可以使用下面的代码 function $(id){document.getElementById(id)} 个人比较推荐用prototype中对document.getElementById的定义: 复制代码 代码如下: function $() { va

  • 理解 JavaScript 中的 Function.prototype.bind 2013-11-06

    函数绑定(Function binding)很有可能是你在开始使用JavaScript时最少关注的一点,但是当你意识到你需要一个解决方案来解决如何在另一个函数中保持this上下文的时候,你真正需要的其实就是 Function.prototype.bind(),只是你有可能仍然没有意识到这点. 第一次遇到这个问题的时候,你可能倾向于将this设置到一个变量上,这样你可以在改变了上下文之后继续引用到它.很多人选择使用 self, _this 或者 context 作为变量名称(也有人使用 that)