Javascript Dependency Loading – jquery.atreq

For a project I'm working on, I have a fairly complex dependency tree and was getting fed up with manually including every single one in my haml layout file. So I started looking up other solutions and eventually decided none met my needs, so, as usual, I wrote my own.

jquery.atreq @ github

Because there's not much to say beyond what I have in the readme, and because this blog is conveniently set up to format with markdown, I'm just going to display the current state of that here.

jquery.atreq

jquery.atreq loads your javascript dependencies asynchronously.

How to use

First, include your main application file with $.atreq

<script type='text/javascript' src="jquery.atreq.js"></script>
<script type='text/javascript'>
$.atreq('application.js');
</script>

Then inside your application.js and any other required files, place a require statement in the comments.

// application.js
// @require 'lib/lib1.js'
// @require 'lib/lib2.js'

Library1Function();
Library2Function();

NOTE: While //@require "blocks", $.atreq does not. This means the following will not work:

$.atreq('lib/lib1.js');
Library1Function();

Relative Require Paths

Unless the require paths begin with a /, they're assumed to be relative to the location of the file they're in.

This means, since lib1.js is in lib/, the require statement below will load lib/deb/lib1dep.js. This makes your code portable across locations.

Each of the library files can also have their own dependencies, and $.atreq will make sure they're run in the correct order.

// lib/lib1.js
// @require `dep/libdep.js`

function Library1Function() {
    alert('Awesome!");
}

Redundant or Duplicate Requires

Duplicate requires of the same file will neither request nor run the same file twice. This is true even if the relative path is different from files. This means that:

// lib/lib2.js
// @require '../shared/shared.js'

and

// lib/lib3.js
// @require '../shared/shared.js'

will only make one request out to shared/shared.js.

Alternatives and How They're Different

$.include

A jQuery plugin by Tobiasz Cudnik, this does load external files asynchronously, but these dependencies are non-blocking. He dodges this issue by delaying the document.ready event

It even has the ability to load dependencies for included scripts like so (taken from his blog post):

$.include(
    // URL
    'js/my-script.js',
    // will be loaded after this script
    $.include(baseURL+'js/my-other-script.js')
);
$.include('js/src/behaviors.js',
    // dependencies can also be an array
    [
        $.include('js/src/jquery-metadata.js'),
        $.include('js/src/jquery.form.js')
    ]
);

This is great, except that it requires all the dependencies to be loaded from the same file. This means you won't get useful behaviour if one of the files you're including has internal dependencies.

See: $.include() @ tobiasz123.wordpress.com

$.require

Another jQuery plugin, $.require doesn't have the problem of $.include: required files can require files of their own and scripts will still be parsed in the correct order.

The way it does this is it forces the scripts to be included synchronously. Functionality wise, this has no effect. However, it will result in slower load times for complex dependency trees.

The require paths in this script are relative to the inclusion point (the HTML file), not the script itself.

Comparison of load times for the following dependency tree:

application.js
|--- 1.js
|    |--- 1a.js
|    |--- 1b.js
|    \--- shared.js
\--- 2.js
     |--- 2a.js
     |--- 2b.js
     \--- shared.js

Inside each file is the required include statements, a loop iterating 10000 times, and ~4kb of lorem ipsum in comments to bloat the file size.

$.atreq:

$.require:

Note the difference in the load order - there's no reason why 1.js and 2.js shouldn't load at the same time.

See: $.require @ plugins.jquery.com

WARNING: At time of writing, the script provided on that page does not work and makes some strange assumptions about the location of your javascript files on the server. Use with caution.

$(function() {
    $.mktag("#demo").jsonimal([
        ["h1", {text: "JSONimal!"}],
        ["table",{style: 'border: 1px solid black'},[
            ["thead",[
                ["tr",{style: 'text-transform: uppercase'},[
                    ["th", {text: "one"}],
                    ["th", {text: "two"}],
                    ["th", {text: "three"}]
                ]]
            ]],
            ["tbody", [
                ["tr",[
                    ["td", {html: "<u>a</u>"}],
                    ["td", {text: "b"}],
                    ["td", {text: "c"}]
                ]],
                ["tr",[
                    ["td",[
                        ["a", {href: "http://www.google.ca", text: "Google"}]
                    ]],
                    ["td", {text: "b"}],
                    ["td", {text: "c"}]
                ]],
                ["tr",[
                    ["td", {text: "a"}],
                    ["td", {text: "b"}],
                    ["td", {text: "c"}]
                ]]
            ]]
        ]]
    ]).appendTo("body");
});

package learning {
  import org.flixel.*;

  public class Debugger {
    public static function pr(obj:*, level:int = 0, output:String = ""):* {
      var objtype:String = typeof(obj);
      if (objtype == "boolean" || objtype == "string" || objtype == "number") {
        return obj;
      }

      var tabs:String = "";
      for(var i:int = 0; i < level; i++) { 
        tabs += "\t"
      }

      output += "{\n";
      for(var child:* in obj) {
        output += tabs +"\t["+ child +"] => ";

        var childOutput:String = pr(obj[child], level+1);
        if(childOutput != '') output += childOutput

        output += "\n";
      }
      output += tabs + "}\n";

      return output;
    }

    public static function log(obj:*):void {
      FlxG.log(pr(obj));
      // This is a flixel thing. If you're not using flixel
      // Just use trace(pr(obj));
    }
  }
}

{
    [0] => {
        [tile] => 4
        [rule] => {
            [0] => xxx
            [1] => x1x
            [2] => x1x
        }
    }
    [1] => {
        [tile] => 8
        [rule] => {
            [0] => x1x
            [1] => x1x
            [2] => xxx
        }
    }
}

flashlog() { 
  tail -f $* ~/Library/Preferences/Macromedia/Flash\ Player/Logs/flashlog.txt; 
}

  [learning]  flashlog -100
Warning: 'flash' has no property 'prototype'
Warning: 'flash' has no property 'prototype'
flixel v2.35 [debug]
----------------------------------------------------
{
    [0] => {
        [tile] => 4
        [rule] => {
            [0] => xxx
            [1] => x1x
            [2] => x1x
        }
    }
    [1] => {
        [tile] => 8
        [rule] => {
            [0] => x1x
            [1] => x1x
            [2] => xxx
        }
    }
}

Commandline Tips and Tricks

Alas, I have been stricken with the plague of half-finished posts and projects. But, as I feel the need to have at least one post per month, here's some stuff you might find useful.

I forget where I discovered this, but commandlinefu.com is an awesome site.

It's so awesome in fact, that I think the productivity gains I've gotten from it almost outweigh the time I wasted looking through the site and testing it.

Here are some of the more useful ones from the site and a few I learned at work and elsewhere.

In all the examples below, the stuff inside [ ]'s is my current working directory. It's the result of my .bash_profile command

export PS1="[\e]2;Jamie@Local \a\e[32;1m] 
\033[1;32m  [\W]  \033[1;34;40m\033[1;32;0m"

And yes, I have been spending a lot of time on Stack Overflow.

Change to previous working directory

From: Change to the previous working directory @ commandlinefu.com

  [stackoverflow]  pwd
/Users/jamiewong/code/stackoverflow


[stackoverflow]  cd /usr/bin

[bin]  pwd
/usr/bin

[bin]  cd -
/Users/jamiewong/code/stackoverflow

[stackoverflow]  pwd
/Users/jamiewong/code/stackoverflow

Rerun the last command

From: Run the previous command with sudo @ commandlinefu.com

  [stackoverflow]  echo hello
hello


[stackoverflow]  !!
echo hello
hello

  [stackoverflow]  ln -s some_script.sh /usr/bin/some_script
ln: /usr/bin/some_script: Permission denied


[stackoverflow]  sudo !!
sudo ln -s some_script.sh /usr/bin/some_script

[stackoverflow]  ls -l /usr/bin/some_script
lrwxr-xr-x  1 root  wheel  14 30 Jun 00:44 /usr/bin/some_script -> some_script.sh

  [stackoverflow]  cat /etc/apache2/passenger_pane_vhosts/searchgraph* 
<VirtualHost :80>
  ServerName searchgraph.local
  DocumentRoot "/Users/jamiewong/Code/searchgraph/public"
  RailsEnv development
  <Directory "/Users/jamiewong/Code/searchgraph/public">
    Order allow,deny
    Allow from all
  </Directory>
</VirtualHost> 
  [stackoverflow]  echo "!!"
echo "cat /etc/apache2/passenger_pane_vhosts/searchgraph "
cat /etc/apache2/passenger_pane_vhosts/searchgraph.local.vhost.conf

Modify the last command and run it

From: Runs the previous command but replacing @ commandlinefu.com

  [stackoverflow]  echo hello world
hello world


[stackoverflow]  ^world^friends
echo hello friends
hello friends

  [stackoverflow]  ls *.php
bolding.php shd.php     stream.php


[stackoverflow]  ^php^rb
ls *.rb
hms.rb           split_orderby.rb
 

  [stackoverflow]  cds ..
-bash: cds: command not found


[stackoverflow]  ^s
cd ..

[code]

List your last n commands

  [stackoverflow]  history 10
  522  locate mysqld
  523  sudo /Library/StartupItems/MySQLCOM/MySQLCOM start
  524  sudo /Library/PreferencePanes/MySQL.prefPane/Contents/MacOS/MySQL
  525  sudo mysqld_safe
  526  sudo /usr/local/mysql/bin/mysqld_safe
  527  mysql
  528  history
  529  history | awk '{a[$2]++}END{for(i in a){print a[i] " " i}}' | sort -rn | head
  530  history
  531  history 10

Edit and run a previous command

From: Edit the last command line in an editor then execute @ commandlinefu.com This one requires a bit of explanation. The fc command will, by default, open your last command in the console editor you specify (emacs by default - yuck). If you want it to be vim (yay!), stick this in your .bash_profile to just run it when you want to use it.

export EDITOR=vim

Then run fc, and it will open up your editor with your last command in it. Save and exit (:wq) to run that command. If you just want to execute it immediately, use fc -s.

  [stackoverflow]  history 5
   86  cat /etc/apache2/passenger_pane_vhosts/searchgraph.local.vhost.conf 
   87  echo "cat /etc/apache2/passenger_pane_vhosts/searchgraph.local.vhost.conf "
   88  history 10
   89  echo "cat /etc/apache2/passenger_pane_vhosts/searchgraph.local.vhost.conf "
   90  history 5


[stackoverflow]  fc -s 87
echo "cat /etc/apache2/passenger_pane_vhosts/searchgraph.local.vhost.conf "
cat /etc/apache2/passenger_pane_vhosts/searchgraph.local.vhost.conf 

If you don't care to look up the history number but happen to remember that it was the command you executed two lines ago, you can use negative history numbers

  [stackoverflow]  echo hello
hello


[stackoverflow]  echo world
world

[stackoverflow]  fc -s -2
echo hello
hello

Follow new output to a log

This one comes from my coworkers

  [stackoverflow]  tail -f ~/code/searchgraph/log/development.log


Processing HomeController#bp (for 127.0.0.1 at 2010-06-23 22:19:27) [GET]
Rendering home/bp
Completed in 6ms (View: 5, DB: 0) | 200 OK [http://searchgraph.local/bp]

Processing HomeController#bp (for 127.0.0.1 at 2010-06-23 22:20:46) [GET]
Rendering home/bp
Completed in 9ms (View: 7, DB: 0) | 200 OK [http://searchgraph.local/bp]

Then if I go open up searchgraph.local, my console window will get updated on its own

Copying and pasting from files

The pbcopy and pbpaste commands copy and paste from your clipboard.

  [stackoverflow]  echo test > test.txt


[stackoverflow]  pbcopy < test.txt

[stackoverflow]  pbpaste
test

And if you want to paste content you have in your clipboard to a file, just redirect, with

pbpaste > output.txt

That's all for now - I'll write more down as I find them.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

P: #.........	S: ..........
P: ##........	S: #.........
P: #.........	S: .#........
P: ###.......	S: ##........
P: #.........	S: ..#.......
P: ##........	S: #.#.......
P: #.........	S: .##.......
P: ####......	S: ###.......
P: #.........	S: ...#......
P: ##........	S: #..#......
P: #.........	S: .#.#......
P: ###.......	S: ##.#......
P: #.........	S: ..##......
P: ##........	S: #.##......
P: #.........	S: .###......
P: #####.....	S: ####......
P: #.........	S: ....#.....
P: ##........	S: #...#.....
P: #.........	S: .#..#.....
P: ###.......	S: ##..#.....
P: #.........	S: ..#.#.....
P: ##........	S: #.#.#.....
P: #.........	S: .##.#.....
P: ####......	S: ###.#.....
P: #.........	S: ...##.....
P: ##........	S: #..##.....
P: #.........	S: .#.##.....
P: ###.......	S: ##.##.....
P: #.........	S: ..###.....
P: ##........	S: #.###.....

1
2
3
4
5
6
7
8
9
10
11
12
13
14

#include <iostream>
using namespace std;
int main() {
	int T,N,K;
	cin >> T;
	for(int t = 0; t < T; t++) {
		cin >> N >> K;
		int mask = (1 << N) - 1;
		printf("Case #%d: ",t+1);
		if ( (mask & K) == mask) puts("ON");
		else puts("OFF");
	}
	return 0;
}

1
2
3
4
5

  [google]  time ./a.out < snapper.in > snapper.out
 
real    0m0.071s
user    0m0.026s
sys     0m0.040s

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

def gcd(x,y):
    while x:
        x, y = y % x, x
    return y
 
testcases = open("warning.in").readlines()
t = 1
for tc in testcases[1:]:
	tc = map(lambda x: int(x), tc.split(" ")[1:])
	if len(tc) == 0:
		break
	tc.sort()
	#print tc
 
	diff = []
	for i in range(len(tc)-1):
		diff += [tc[i+1] - tc[i]]
 
	T = diff[0]
	for d in diff[1:]:
		T = gcd(T,d)
 
	#print T
	print "Case #%d: %d" % (t, (-tc[0] % T))
 
	t += 1

1
2
3
4
5

  [google]  time python warning.py > warning.out
 
real    0m0.250s
user    0m0.037s
sys     0m0.021s

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

#include <cmath>
#include <algorithm>
#include <iostream>
#include <fstream>
#include <cstdio>
#include <cstdlib>
#include <cstring>
#include <queue>
#include <set>
#include <map>
#include <sstream>
#include <vector>
using namespace std;
 
#define FR(i,a,b) for(int i=(a);i<(b);++i)
#define FOR(i,n) FR(i,0,n)
#define SETMIN(a,b) a = min(a,b)
#define SETMAX(a,b) a = max(a,b)
#define PB push_back
#define FORALL(i,v) for(typeof((v).end())i=(v).begin();i!=(v).end();++i)
#define CLR(x,a) memset(x,a,sizeof(x))
#define BEND(v) v.begin(),v.end()
#define MP make_pair
#define A first
#define B second
 
typedef unsigned long long int ull;
typedef long double ld;
 
int main() {
    freopen("themepark.in","r",stdin);
    freopen("themepark.out","w",stdout);
 
    int T;
    cin >> T;
    FOR(t,T) {
        int R,k,N;
        cin >> R >> k >> N;
        int grps[1001], done[1001], pts[1001], next[1001];
        CLR(done,0);
        queue<pair<int,int> > q;
        FOR(i,N) {
            cin >> grps[i];
            q.push(MP(i,grps[i]));
        }
 
        while(!done[q.front().A]) {
            int cur = 0;
            int start = q.front().A;
            done[start] = 1;
 
            FOR(i,N) {
                if (cur + q.front().B > k) break;
 
                cur += q.front().B;
                q.push(q.front());
                q.pop();
            }
            next[start] = q.front().A;
            pts[start] = cur;
        }
 
        while (!q.empty()) q.pop();
 
        int curFront = 0;
        ull ans = 0;
        FOR(i,R) {
            ans += pts[curFront];
            curFront = next[curFront];
        }
 
        printf("Case #%d: %lld\n", t+1, ans);
    }
    return 0;
}

1
2
3
4
5

  [google]  time ./a.out
 
real    0m11.606s
user    0m11.542s
sys     0m0.022s

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

function car(price) {
    this.price = price;
 
    this.setPrice = function(price) {
        this.price = price;
    };
}
 
function pass666(func) {
    func(666);
}
 
var redcar = new car(2000);
alert(redcar.price);
redcar.setPrice(123);
alert(redcar.price);
pass666(redcar.setPrice);
alert(redcar.price);

1
2
3
4
5
6
7
8

function car(price) {
	this.price = price;
 
	var self = this;
	this.setPrice = function(price) {
		self.price = price;
	};
}

106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121

sendQuery: function(target,respFunc) {
	// Send a query to the omegle server
	//log('sending');
	var self = this;
	if (respFunc == null) {
		respFunc = function(self,data) {}
	}
	$.ajax({
		url: 'omegle.php?'+target,
		type: 'GET',
		dataType: 'json',
		success: function(data) {
			respFunc(self,data);
		}
	});
},

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

function car(price) {
    this.price = price;
 
    this.setPrice = function(price) {
        this.price = price;
    };
}
 
function pass666(func) {
    func(666);
}
 
var redcar = new car(2000);
alert(redcar.price);
redcar.setPrice(123);
alert(redcar.price);
 
pass666(redcar.setPrice.bind(redcar));
 
alert(redcar.price);

18

pass666(redcar.setPrice.bind(redcar));

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

// Standard Javascript method:
var tables = document.getElementsByTagName("table");
for (var i = 0; i < tables.length; i++) {
    var rows = tables[i].tBodies[0].rows;
    for (var j = 0; j < rows.length; j++) {
        var rowColor;
        if (j % 2 == 1) {
            rowColor = "#eef"; 
        } else {
            rowColor = "#fff";
        }
 
        var cells = rows[j].cells;
        for (var k = 0; k < cells.length; k++) {
            cells[k].style.backgroundColor = rowColor;
            cells[k].style.borderBottom = "1px solid #ccc";
        }
    }
} 
 
// jQuery way:
$("td").css("border-bottom","1px solid #ccc");
$("tr:even > td").css("background-color","#fff");
$("tr:odd > td").css("background-color","#eef");

open "Office Space.avi"

open http://www.jamie-wong.com

open -a "Adobe Photoshop CS3"

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<?
$COLOR_BLACK = "\033[0;30m";
$COLOR_DARKGRAY = "\033[1;30m";
$COLOR_BLUE = "\033[0;34m";
$COLOR_LIGHTBLUE = "\033[1;34m";
$COLOR_GREEN = "\033[0;32m";
$COLOR_LIGHTGREEN = "\033[1;32m";
$COLOR_CYAN = "\033[0;36m";
$COLOR_LIGHTCYAN = "\033[1;36m";
$COLOR_RED = "\033[0;31m";
$COLOR_LIGHTRED = "\033[1;31m";
$COLOR_PURPLE = "\033[0;35m";
$COLOR_LIGHTPURPLE = "\033[1;35m";
$COLOR_BROWN = "\033[0;33m";
$COLOR_YELLOW = "\033[1;33m";
$COLOR_LIGHTGRAY = "\033[0;37m";
$COLOR_WHITE = "\033[1;37m";
$COLOR_DEFAULT = "\033[0;37m";
 
echo <<< EOT
One fish, 
two fish, 
{$COLOR_RED}red{$COLOR_DEFAULT} fish, 
{$COLOR_BLUE}blue{$COLOR_DEFAULT} fish.
 
EOT;
?>

1
2
3
4
5
6
7
8
9
10
11

 function Prompt($prompt_text,$hide = false) {
     echo $prompt_text;
     $input = "";
     if ($hide) {
         $input = trim(`stty -echo;head -n1;stty echo`);
         echo "\n";
     } else {
         $input = trim(fgets(STDIN));
     }
     return $input;
 }