Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / New
Stats: 3,154,763 members, 7,824,188 topics. Date: Saturday, 11 May 2024 at 03:46 AM

A Brief View On Asynchronous Modular Dependency Javascript - Webmasters - Nairaland

Nairaland Forum / Science/Technology / Webmasters / A Brief View On Asynchronous Modular Dependency Javascript (1425 Views)

Wapmasters - Learn How To Create Mobile And PC View On Wapka.mobi / Make Your Blog Appear In Desktop View On Mobile Browser / How To Use Ajax (asynchronous Javascript) (2) (3) (4)

(1) (Reply) (Go Down)

A Brief View On Asynchronous Modular Dependency Javascript by Nobody: 10:18pm On Jan 07, 2012
Hi outta boredom and reading for exams decided to roll out a simple discussion on the new way of writing JavaScript, and its a specification proposed by CommonJS the group who regulate APIs and specs for JS on Browser, Environments and Servers. to skip the boring part if you have ever written JavaScript you know how easy it is to get lost in function upon functions, after all unlike static type languages JavaScript has no support for class like system or package system. the closest was the framework which i use Dojo and it provide the ability to create a modular way of writing JavaScript with AMD, all frameworks can be written in a modular manner which will split files into numerous parts(modules) and can be accessed at will, also now it makes it easier to only request certain features from a framework, meaning i could use my dojo loader and require a jquery animation module. there are two api in AMD Define and Require.

Defines is used to define a module lets just say it creates a comptabile module that would be loaded with the require function and it goes like this.

define(
module_id /*optional*/,
[dependencies] /*optional*/,
definition function /*function for instantiating the module or object*/
);

//creating a dummy module
because i work with dojo i omit the module id, as it usually used for the legacy module system which i dont use anymore
but i'll add it for brevity
define("dummyClass",["dummyObj","name"],function(dummy,name){
//where dummyObj will map to dummyObj.js and name.js which be loaded and the result is mapped the function as a callback
//now i want to return a simpe class with methods

var returnedObject={
people:[{
name:"Dhtml",
skills:["drupal","dhtml","php","c++","spanish language"],
age:29,
marital:single},
{
name:"Yawatide",
skills:["seo","css","html"],
age:31,
marital:single}]


};

return returnedObject;

});

//what happens is that it creates a module and returns an object upon the request assuming the file is stored in ./home/js/
in the home/index.html

now depending on your framework because i use Dojo it comes with an amd loader so those using requireJs and others will still have a similar style
//loading Dojo
<script src="dojo">
require(["js/dummyjs"],function(r){
//where r is the returned dummy object
r.people.forEach(function(item){ //since people is an array and array has forEach method and takes a function and passes the item as arg which our
item is a object
//
console.log("Hello my name is"+item.name+" and my skils are "+item.skills.join(","wink +" and i am "+item.marital);

});


});

</script>



i have been using this for a mobile web app and it makes sense splitting my codes in multiple files however you should read more on it as this is just a simple note on AMD infact there's a possibility my syntax might be wrong since i didn't run any jlint to check my code. take care all.
Re: A Brief View On Asynchronous Modular Dependency Javascript by Nobody: 8:41am On Jan 08, 2012
What am I doing in the json output?
There is a tool somewhere on my site - mycodes - that is like pastebin but can run jscript codes, html and php self.
@newbies, you can use jsonlint.com to test your json - I hope url Is corecta.
@op, this your thread, only pros can follow it o
Re: A Brief View On Asynchronous Modular Dependency Javascript by Nobody: 4:08pm On Jan 08, 2012
for some reason the first name that comes as an example name is always ur name, even in every tutorial i have written. #nohomo grin
Re: A Brief View On Asynchronous Modular Dependency Javascript by Nobody: 4:45pm On Jan 08, 2012
I kinda noticed, well, try break it down, i am sure you have convinced everybody except few
Re: A Brief View On Asynchronous Modular Dependency Javascript by Nobody: 5:26pm On Jan 08, 2012
ok i will soon. with a simple example
Re: A Brief View On Asynchronous Modular Dependency Javascript by Nobody: 2:30am On Jan 09, 2012
Now we will create a simple application called nairaland application what it does is simply list all the banned members from the Database(obviously lietral objects) but we will do it in a manner that is modular and easy to do.
first create a simple html.

<html>
<head>
	<title></title>
</head>
<body>

</body>
</html>


now we have the html file we need to download the RequireJS library for Dojo user it comes with Dojo but this is a general tutorial so no dojo involved here.

link for requre.js is in requirejs.org, just dowload the require.js file
now in the html add the file to the tag

<script type="text/javascript" src="require.js"></script>
Re: A Brief View On Asynchronous Modular Dependency Javascript by Nobody: 2:37am On Jan 09, 2012
next we need to create the nairaland application so we create a js file called nairaland.js

define(["banned"],function(e){

	var obj= {
		forum:"Nairaland",
		country:"Nigeria",
		type:"Open Forum",
		owner:"Seun Orewa",
		hasMultiRooms:true,
		bannedMembers:e.getBannedMember()
		
	};

	return obj;
});



what define does is to create a module,you have the option of passing a function if you need to setup some connections or simple as properties of the module because i want the module to just simply return an object i passed a function which returns an obj, now if you look at the first parameter it has an array argument with the name "banned", the banned refers to a dependency meaning a file that this nairaland will require before it returns the nairaland object. think of it as php include and java import. now while the files loads the result of the files is passed as a callback this is an asynchronous operation becuz we have no idea when the file will finish a callback is registered, once it finish it passes the result as an argument to the callback functions. now the banned.js will simply be a class/object/module in the first parameter, so before i explain lets create the banned class to understand what i mean.
Re: A Brief View On Asynchronous Modular Dependency Javascript by Nobody: 2:43am On Jan 09, 2012
we create another banned file called banned.js

define(function(){
	var bannedMembers={
    list:[{
	    	name:"dhtml",
           meta:{
			reason:'attempting to hack nairaland and spambot-killer',
			banned_durations:'2 weeks',
			limited_access:'true'
				  }

        },
        {
	    	name:"yawatide",
           meta:{
			reason:'too much SEO advise :',
			banned_durations:'2 weeks',
			limited_access:'true'
				  }

        },
        {
	    	name:"donpuzo",
           meta:{
			reason:'Disturbing potential female programmers on nairaland',
			banned_durations:'4 weeks',
			limited_access:'true'
				  }

        },
         {
	    	name:"omo_to_dun",
           meta:{
			reason:'SpamBot personal reason',
			banned_durations:'4 weeks',
			limited_access:'true'
				  }

        }]
	}

      
    



//create an object that returns a the list in a closure
return {
	getBannedMember:function(){
		return bannedMembers.list;
	}
};
});


as usual we create the define to create a module, then pass a function because i dont want the nairaland class to have access to the list so i return an object with a function that returns the list data through the help of Closures. "Closure is a complicated thing to explain" but it simply refers to a variable within its execution environment,  trust me not sure what that means cuz my head is tied to function only referring to local scopes and removing them from stack after the function has finished python guys can explain to you better, now our banned module will return an object with the method getBannedMember which is just a simple literal objects of keys and value. lets jump back to nairaland.
Re: A Brief View On Asynchronous Modular Dependency Javascript by Nobody: 2:49am On Jan 09, 2012 

define(["banned"],function(e){

}

because the banned file is in the same folder i just simply use the name "banned" which will translate to banned.js

now our e is the result of banned.js which is our object now thanks to this pattern i no longer have to worry about my empty object being attached to Global object with no name,e is my banned returned object

e.getBannedMember()

so i now have access to the method with ease and this is awesome because if i wanted to change the implementation i can easily go to banned,js and change what i what.

now how to use it in the html
Re: A Brief View On Asynchronous Modular Dependency Javascript by Nobody: 2:58am On Jan 09, 2012 

function init(){

}

a function that would run when document is ready

require(["nairaland"],function(a){
//code goes here
});

this will load nairaland.js which in turn will also load banned.js dependency files are always loaded first so no more worry about the order of placing scripts like jquery users face when they boot the src below the implementation.

require(["nairaland"],function(a){ //remember a is the nairaland object
                //a.bannedMembers takes the ist from the return method of getBannedMembers so a.bannedMembers is an array

                //an array has a function foreach that allows you iterate over its item it takes an anonymous function with item as the argument
		a.bannedMembers.forEach(function(item){
                //this will get the div with the id list
		var doc=document.getElementById('list');
                //appends to the html values from the object
		doc.innerHTML+='<p>Banned Member Name:'+item.name+'</p><hr/>';
                //now remember that the banned members is an array of objects in each item in the array is an object with name and meta and meta
                //is also an object so we traverse/scan each property in the meta object
               //for in is used for objects where i the property, you should know that function is also a property think of it as a hash dictionary obj['onclick']

                //dump our datas and thats all
		for(var i in item.meta){
			doc.innerHTML+="<p><strong>"+i+"</strong>=>"+item.meta[i]+"</p>";
		}
		doc.innerHTML+="<hr/>";
			
		});
	});
Re: A Brief View On Asynchronous Modular Dependency Javascript by Nobody: 3:00am On Jan 09, 2012
//remember we need to run it so we 
<body onload="init()">
<div id="list">
<h1>Querying Data from Nairaland Server </h1>
<hr/>
</div>
Re: A Brief View On Asynchronous Modular Dependency Javascript by Nobody: 3:02am On Jan 09, 2012
Screenshot

Re: A Brief View On Asynchronous Modular Dependency Javascript by Nobody: 3:04am On Jan 09, 2012
yawn and i'm going to sleep getting my gun corked for tomorrow's protest. #occupynigeria angry
Re: A Brief View On Asynchronous Modular Dependency Javascript by Nobody: 8:24pm On Jan 09, 2012
ehmmmm questions and answer ?
Re: A Brief View On Asynchronous Modular Dependency Javascript by Nobody: 10:20pm On Jan 09, 2012
Skip the questions. Most people on this board cannot follow this thread because they don't know basic jscript. So they wil prefer to ask their questions in private. But do continue. I wil help fill in the gap later.
Re: A Brief View On Asynchronous Modular Dependency Javascript by Nobody: 12:06am On Jan 10, 2012
i will continue on the next one, just trying to read for exams gosh i hate exams. embarassed
Re: A Brief View On Asynchronous Modular Dependency Javascript by ask4all: 11:11am On Jan 19, 2012
Pls help me i reg to dis site today bcoz i want u people to help me develop my programming so i see dis thread and im interesting in it and i dint understand any thing u post pls i need ur help and pls and pls help me with the list of software to require for programming pls here is my email aminu.saminu@yahoo.com pls and pls *crying* *respect* God bless u all lol pls.
Re: A Brief View On Asynchronous Modular Dependency Javascript by Nobody: 8:02pm On Jan 19, 2012
whoa i had forgotten about this post. ok dhtml is right people might not know basic JavaScript so where do i start from ? there are free tools everywhere just download them. if u need help you should go the extra mile to get help and not dropping email and expecting someone to answer, download dreamweaver for basic
Re: A Brief View On Asynchronous Modular Dependency Javascript by Nobody: 9:16pm On Jan 19, 2012
^^^Aye, i kuku told you. . .look at the view/response ratio of the thread. Many people appreciate it, but they cant make head or tail out of it.
Anyway, folks, if you are interested in learning javascript, please check out the classrooms section of my website - www..net
Mehn, i hope they will not vanish the bandwidth again. . . .
Re: A Brief View On Asynchronous Modular Dependency Javascript by Nmeri17: 10:27am On Mar 27, 2016

(1) (Reply)

How To Design Bank Payment Page / Do You Need A Website? / 10GB Huge Space, Unlimited Bandwidth & More With a Free .COM Domain for N3500/yr

(Go Up)

Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health
religion celebs tv-movies music-radio literature webmasters programming techmarket

Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10)

Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 39
Disclaimer: Every Nairaland member is solely responsible for anything that he/she posts or uploads on Nairaland.