alljs/index.html at master · sbrsv/alljs · GitHub

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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AllJS system Examples</title>
</head>
<body>
<div class="container-fluid">
    <h1 class="well">AllJS System</h1>
    <div class="row-fluid">
        <div class="span2">
            <ul class="nav nav-tabs nav-stacked">
                <li class="active"><a href="#">Introduction</a></li>
                <li><a href="#">Profile</a></li>
                <li><a href="#">Messages</a></li>
            </ul>
        </div>
        <div class="span10">

            <p>The system is designed to facilitate prototyping Javascript functionality to your project.
                The advantages are that the system is actually the only one dependency: jQuery, which is used for easier DOM manipulation.
                In addition, the benefits of the system are:
                <ol>
                    <li>Ability to wrap any other system or framework functionality and provide very easy layer between DOM and JavaScript functionality. No matter what you use: Backbone.js or jQuery with it's plugins or any other framework or library</li>
                    <li>Ability to exclude all JavaScript code from html</li>
                    <li>Ability to pass any number of arguments to a function in data-tags without necessity to write id of element and play with it</li>
                    <li>Ability to include alljs file and modules in any order and don't worry about that</li>
                    <li>Ability to to write your functionality (that can use any frameworks and libraries) using strong modular OOP structure </li>
                    <li>Functionality that helps you to develop and debug</li>
                    <li>Number of useful modules to solve certain problems</li>
                </ol>

                Do not forget that AllJS not a panacea, and is intended only to serve as a very thin layer between the actual JavaScript systems
                and html-document<br><br>
                Features that soon will be done:
                <ul>
                    <li>Remove jQuery dependency and make AllJS standalone</li>
                </ul>
            </p>

            <hr>
            <h2>Example #1</h2>

            <h3>Step 1. Initializing div, wich contains function name for execution</h3>
            <?prettify lang=html?>
            <pre class="prettyprint" style="padding-left: 10px;">
<!-- index.html -->

<script src="http://code.jquery.com/jquery.js"></script>
<script src="all.js" ></script>
<script src="testmodule.js" ></script>

<div
class="alljs-dispatcher-"
data-function="testmodule.testfunc1"
></div>
</pre>

            <h3>Step 2. Writing module</h3>
            <?prettify lang=js?>
            <pre class="prettyprint" style="padding-left: 10px;">
// contents of alljs.testmodule.js
'use strict';

var testmodule = testmodule || {};

testmodule.testfunc1 = function() {
    alljs.system.log($(arguments[0]).attr('class'));
};
</pre>

            <h3>Result will be in console</h3>
            <?prettify lang=js?>
            <pre class="prettyprint" style="padding-left: 10px;">
Executing: testmodule.testfunc1
alljs-dispatcher-executed
</pre>

    <hr>
    <h2>Example #2. Initializing options</h2>
    <?prettify lang=js?>
    <pre class="prettyprint" style="padding-left: 10px;">
<div
class="alljs-dispatcher-"
data-function="alljs.options.init"
data-options-DEBUG_MODE="1"
></div>
</pre>

    <p>Since this will be dispatched - system will work in debug mode.
        This means that everything will be logged and available in browser's console and also in array
        <b>alljs.system.log_array</b>. You can also add some of your own one-dimensional options.
        <br>For example:
            <?prettify lang=js?>
            <pre class="prettyprint" style="padding-left: 10px;">
<div
    class="alljs-dispatcher-"
    data-function="alljs.options.init"
    data-options-foo="bar"
    data-options-bar="baz"
    data-options-baz="foo"
></div></pre>

            Contents of <b>alljs.options</b> object will be:
            <?prettify lang=js?>
            <pre class="prettyprint" style="padding-left: 10px;">
Object {debug_mode: "1", init: function, foo: "bar", bar: "baz", baz: "foo"}</pre>

            If you need multi-dimensional options, you can do it with special initialization method for that:
            <?prettify lang=js?>
            <pre class="prettyprint" style="padding-left: 10px;">
<div
        class="alljs-dispatcher-"
        data-function="alljs.options.init_json"
        data-options='{"foo2": "bar2", "bar": {"baz": "endofjson"}}'
        ></div></pre>

            Result will be:
            <?prettify lang=js?>
            <pre class="prettyprint" style="padding-left: 10px;">
bar: Object
    baz: "endofjson"
    __proto__: Object
debug_mode: "0"
foo2: "bar2"
init: function () {...}
init_json: function () {...}
__proto__: Object</pre>

            You can prepare this JSON from PHP:
            <?prettify lang=php?>
            <pre class="prettyprint" style="padding-left: 10px;">
echo (mysql_escape_string(json_encode(array(
	"foo2" => "bar2",
	"bar" => array(
		"baz" => "endofjson"
	)
))));</pre>
    </p>

    </div>
</div>

<div
    class="alljs-dispatcher"
    data-function="testmodule.prettyprint.init"
></div>
<div
    class="alljs-dispatcher"
    data-function="alljs.options.init"
    data-options-DEBUG_MODE="1"
></div>
<div
    class="alljs-dispatcher"
    data-function="alljs.options.init"
    data-options-foo="bar"
    data-options-bar="baz"
    data-options-baz="foo"
></div>
<div
    class="alljs-dispatcher"
    data-function="alljs.options.init_json"
    data-options='{"foo2": "bar2", "bar": {"baz": "endofjson"}}'
></div>
<div
    class="alljs-dispatcher"
    data-function="testmodule.testfunc1"
></div>

<link href="http://netdna.bootstrapcdn.com/bootswatch/2.3.1/spacelab/bootstrap.min.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css" rel="stylesheet">
<script src="google-code-prettify/src/run_prettify.js"></script>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="alljs.js" ></script>
<script src="alljs.testmodule.js" ></script>

</body>
</html>