It only takes a minute to sign up. Connect and share knowledge within a single location that is structured and easy to search. I am not trying create application using both of them, but I am in a situation where I need to modify mootool based application framework, so I am used to jquery, I don't want to waste my time learning mootools and I think jquery is better than the mootools in many contexts like number of applications, plugins etc.
You can use them both together as they both have no conflict modes, but you shouldn't. While there are some major differences in coding philosophy between the two, there is also a lot of overlapping functionality. Pick one and use it. If you're thinking of using both because of one or two plugins, do some more searching. Most plugins in one will have been ported across to the other. If you can't find something that works, you should invest the time to learn JavaScript better so that you can port it yourself.
It simply isn't worth it in terms of page weight to include both frameworks. To learn more about the differences between the two frameworks, check out jQuery vs MooTools. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API. While, jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. Thus, if you may use them both.
I know the MooTools code works on its own. Once I load the MooTools library in the page, jQuery stops functioning. When I load the page, the Moo code works but the jQ code does not. For testing purposes, the Moo code I'm loading is a simple 12 Accordion script. There are more complex ones I need to use if I get this problem resolved. From what I understand, this should be possible given Dollar Safe Mode.
The important thing to recognize is that the first time we assign a value to bob 's energy, we assign him his own value and we no longer look at the prototype for it. So the first time bob eats, he gets his own definition for energy set to 2. Note that bob 's name and age are unique to him; these are assigned to him when the class is initialized in the initialize method.
This whole pattern may seem a little odd to you, but the value here is that we can define functionality for a pattern and create instances of that pattern every time we need it. Each instance maintains its own state. So if we create another instance each one is independent of the other, but inherits from the same base pattern:. Let's revisit our jQuery faq plug-in. What would happen if we wanted to add more functionality to that plug-in.
What if we wanted to make an ajax version that fetched the answers to the questions from the server? Let's imagine that the faq plug-in was authored by someone else and we want to add more to it without altering it in any way we don't want to fork it. Our only real choices are to either duplicate the faq plug-in's logic entirely remember, it's a single function , essentially forking it, or we can invoke it and then add more logic to it.
Given a choice, the latter seems to save us the most trouble. It would look something like this:. This has some down sides. First of all, our faq class is going to repeat our selector for the definitions, which might be expensive; there's no way to store the retrieved definitions and pass it on for the second time they are needed. Secondly, we can't add our ajax logic into the middle of the faq plug-in's own logic for displaying the definition.
The original plug-in called slideToggle which expands the definition using an effect. This is problematic because this effect is going to go off before our ajax finishes loading.
There's no real solution here unless we just duplicate the entire faq plug-in. Now let's consider our MooTools Human class. It has properties like isAlive and energy and it has a method called eat. What if we wanted to make a new version of Human that had additional properties?
With MooTools, we extend the class:. You can see that we've added a lot of functionality here into a subclass. This subclass has all these properties that are unique to Ninjas. Ninjas start off with an initial energy value of Ninjas get a side. They also get an attack method that lets them kill other Humans , but it costs the Ninja energy. Picking this apart a bit, there are some interesting things to consider here. Note that we have an initialize method in the Ninja class.
This would appear to overwrite the initialize method in the Human class, but we can still access it by calling this. Further, we can control when our logic occurs; before or after the call to the parent. We can assign new values to properties like the energy value and we can define new functionality. Imagine if we could do this with our faq plug-in for jQuery.
We could load our ajax and THEN slide open the value. MooTools has another pattern called a Mixin. Unlike the parent to child relationship that is defined by extending one class into a subclass, you can also define classes that are mixed into other classes to imbue them with their properties.
Here's an example:. Here we've broken the qualities that make a Ninja different from a Human and put them in a class of their own. This lets us reuse this code outside of Ninja. We could then imbue our Ninja class with the qualities of a warrior like so:. Ninja still works as it did before, but Warrior is at our disposal to reuse:. Now we have a Samurai class and a Ninja class.
But look at how little code both Ninja and Samurai took to define. Both of them are similar in that they are humans with warrior qualities, but they are different in that samurais are always, always good, while ninjas have shifting allegiances. By spending the time to write a Human class and a Warrior class, we're able to have three different classes with no repetition of code while maintaining a very granular level of control over when methods are called and how they relate to each other.
Each instance we create has its own state and the code itself is very legible. Now that you have an overview of how classes work in MooTools, let's look at our faq class that we wrote in jQuery and write it as we would in MooTools and then extend it to add Ajax to it just as we did with jQuery. That's a lot of code. Even if we remove all the comments it's still two dozen lines long. I already illustrated above that we could build this plug-in with roughly the same amount of code as the jQuery version.
So why is this one so much longer? Well, we've made it much more flexible. To use the class, we just call the constructor, like this:. We can access methods and properties of the instance. But what about our ajax functionality? The problem with our ajax extension to the jQuery version was that we couldn't delay the opening of the definition until after it loaded.
We don't have that problem with our MooTools version:. Now we have a version of our FAQ class that allows us to get the definitions from the server. Note that we were able to integrate the new logic in a way that doesn't expand the definition until after the content comes back from the server which we couldn't do with the jQuery version. Also note that we really only had to describe the new functionality the ajax and little else.
This extensibility makes it possible for you to create families of plug-ins that offer different shades of functionality. It also means that you can use someone else's plug-in and alter just the bits that you to be want different if you need to without forking it.
This helps explain why, for any given design pattern - a date picker, a tab interface, etc, that you typically only find a few plug-ins for MooTools. Most of the plug-ins you get either solve your problem or, if not, you can just extend them to add the things you need. As I illustrated earlier, it's possible to write complex jQuery widgets with methods and state.
Most of the code you write when doing this is vanilla JavaScript when you need to express logic that isn't related to the DOM. But jQuery's model doesn't offer a system for extending these instances into subclasses.
Nor does it help you with mixins that can be reused easily. Finally, jQuery's plugins are always attached to DOM elements. If you wanted to write a class that, say, processed URLs, there's no stateful system for such a thing unless you write it yourself.
If you put those two things on opposite sides of a scale, the jQuery side translates into something with which it's easy to get started and see quick results but in my experience can turn into code that's harder to reuse and maintain but really that's up to you; it's not jQuery's problem, per se , while the MooTools side takes longer to learn and requires you to write more code upfront before you see results, but afterwards is more reusable and more maintainable.
Further, the MooTools core does not contain every feature you can imagine and neither does the jQuery core. Both frameworks keep their cores rather lean, leaving it to you and others to write plug-ins and extensions. Their job is not to give you every feature you could want but to give you the tools so that you can implement anything you can imagine.
This is the power of JavaScript, and of JavaScript frameworks in general, and both frameworks excel at it. Thanks so much Anthony for your quick reply! Thanks again for your help Joel. You have an unnecessary comma here: formatItem: formatItem, IE is quite strict about this sort of thing and will break You probably have a syntax error being reported somewhere.
GetContent [Highlights. GetCurrentIndex ].
0コメント