Js widget Development

I saw a js plug-in on Github, so I came up and tried to sit down... so I made a simple experiment by referring to a project on GIthub.

You can first refer to the organization and structure of other projects to develop Code. The Code Format of the js plug-in on Github is generally as follows:

(Function () {var MyApp ={}; // Module name/** other module members * // such as var Component ={}; (function () {Component. xxx = function () {// do something}); MyApp. component = Component; // use the CommonJs module type if (typeof exports! = 'Undefined') {if (typeof module! = 'Undefined' & module. exports) {exports = module. exports = MyApp;} exports. myApp = MyApp;} // AMD module if (typeof define = 'function' & define. amd) {define ('myapp', [], function () {return MyApp ;});} // browser if (typeof window ==== 'object' & typeof objects using Doc ument === 'object') {window. myApp = MyApp ;}})();

Here (function () {}) anonymous closure is the basis for making everything possible, and this is also the best feature of JavaScript. Let's create a simplest closure function, the code inside the function is always in the closure. During the entire running cycle, the closure ensures that the internal code is private.

Function (){

// All variables and functions are declared here, And the scope can only be in this anonymous closure.
//... But the code here can still access external global objects
}());
(Function () {/* Internal Code */}) (); // refer to the blog for a deep understanding of javascript (http://www.cnblogs.com/TomXu/archive/2011/12/30/2288372.html) blog or
Content in Javascript patterns

Then, call the javascript file where you want to use it. The call method is also relatively simple, for example, var myapp = MyApp; com1 = myapp. Component. com1.xxx

Create a hello project using a simple table:

Table. js

(Function () {var hello = {}; var table ={}; (function () {table. init = function () {var element = document. body; var table = document. createElement ('table'); table. id = 'someid'; table. border = '2'; element. appendChild (table); var table = document. getElementById ('someid'); var rowCount = table. rows. length; var row = table. insertRow (rowCount); var cell1 = row. insertCell (0); cell1.innerHTML = 'username'; var cell2 = row. insertCell (1); cell2.innerHTML = 'Password' ;}; table. append = function (user_list) {var table = document. getElementById ('someid'); console.info (user_list); for (var I = 0, max = user_list.length; I <max; I ++) {var rowCount = table. rows. length; console.info (user_list [I]); var row = table. insertRow (rowCount); var cell1 = row. insertCell (0); cell1.innerHTML = user_list [I]. name; var cell2 = row. insertCell (1); cell2.innerHTML = user_list [I]. age ;};}) (); hello. table = table; if (typeof window === 'object' & typeof objects using Doc ument === 'object') {window. hello = hello ;}})();

Test page:

 Develop js controls<Script type = "text/javascript" src = "table. js "> </script> <script type =" text/javascript "> var table = hello. table; table. init (); var users = []; for (var I = 0; I <10; I ++) {var data = {}; data ['name'] = 'user' + I; data ['age'] = I; users. push (data);} table. append (users); </script>

:

Is it very simple... so that when there is such a demand, you can develop your favorite things into such js plug-ins .. And has good portability.