How to write jQuery plugins in Haxe

This blog post recorded how I came up with the idea. You may jump to the GitHub repo directly, example usage is written there.

Everthing started from an old jQuery plugin

Recently I started to use Haxe as my primary programming language. I have always been thinking about what I can do with this modern language. Until I dug out an old jQuery plugin, which I wrote several years ago, while I was cleaning up some old files in my server. I remembered that it wasn’t easy to develop in javascript. It is because at that time there was no (or at least I was not aware of any) decent IDE for javascript. Even with the powerful debugger FireBug, which just began to gain popularity at that time, I still found it painful to debug javascript programs. Therefore I have stopped writing in javascript since then. Looking at the plugin’s forgotten to-do list and the unfinished next-version, I decided to find a way writing jQuery plugins (again) in Haxe.

Here is my goal to be done in Haxe:

  1. Register a function as a jQuery plugin by adding it to the jQuery.fn object
  2. Able to access the “this” object within the plugin function as in vanilla javascript
  3. The javascript output should be as simple and clean as possible
  4. Most important: Leverage Haxe’s feature such as Macros, Code-Completion, Compiler Checks to write a decent plugin

Attempt 1


  • Line 5: Register the plugin function as a jQuery plugin.
  • Line 11-14: The plugin function

This seems working well, I am able to call the function as a jQuery plugin in pure javascript like this.

 
$(".test").plugin();

But at this point I can’t access to the “this” object as in javascipt. (Read more about this.)

What type of function to use?

I have tried to implement the plugin function as static function, member function and function in an abstract class. The following summarizes the how (not) they fulfill my goals as set above:

Static method

class MyPlugin { public static function pluginFunc(){} }
Fulfilled goal #1 and I deem the output clean and simple enough to pass goal #3. But it is not possible to use the “this” keyword in the static context.

Member Function

class MyPlugin() { public function pluginFunc(){} }
Haxe generated a complex $bind function in the output when I reference a member function (not meaning to call it) and the plugin mechanism is not working. I am not going to dig into the $bind function as I am looking for a simple output. Failed goal #1 and #3.

Abstact

abstract MyPlugin(JQuery) { public function pluginFunc(){} }
Passed goal #1 and #3. Abstract worked similar to static method, but the output is a little bit more complicated. And I still can’t find a way to use the “this” to directly reference the “this” in javascript context.

At this stage, it seems legit to conclude that it is impossible to use the “this” keyword in Haxe directly. So I decided to use an alias variable to reference the javascript “this”.

Attempt 2


This is not the perfect solution to goal #2, but I think this is the closest one I can do. With this piece of code I am able to perform actions on “this” in the javascript context with the “_this” alias, which in fact refers to the jQuery object returned from the $(“.test”) function when it is run as $(“.test”).plugin().

Wrap Everything Up

Finally, I managed to use Haxe’s Macro to inject the “var _this = untyped __js__("this");” expression into the beginning of a function. So that I don’t need to manually type that for every plugin. It also makes the Haxe code cleaner and less hackish looking.
I have pushed the code to GitHub. Those who are also interested in writing jQuery plugins in the powerful Haxe language may want to have a look.

Next step would be to start working on goal #4.

One thought on “How to write jQuery plugins in Haxe

Leave a Reply

Your email address will not be published. Required fields are marked *