We Keep Coding

Is there a way to detect if a custom module exists?

Dojo 1.10+
I want to conditionally load custom module according to this post
Dojo FAQ: How can I conditionally load AMD modules?
require([
'dojo/has'
], function (has) {
var ui;
var moduleId = 'myApp/ui/';
// Assume 'has' tests for mobile and tablet
// have been defined
if (has('mobile')) {
moduleId += 'Mobile';
}
else if (has('tablet')) {
moduleId += 'Tablet';
}
else {
moduleId += 'Desktop';
}
require([moduleId], function (UiModule) {
ui = new UiModule();
ui.placeAt(document.body);
ui.startup();
});
});
However it seems dojo/has only detects certain dojo features. If that is the case is there an alternative method to detect if a custom module exists before attempting to require and then instantiate it if its a widget?

Yes, dojo/has only detects certain dojo features. But you can add your own, i was trying something like you are trying here, maybe not the best, but this work for me.
At boot time of your app, you can add you own features to dojo, i.e.
var deviceWidth = has('device-width'), hasTouch = has('touch');
has.add('mobile', (hasTouch && deviceWidth <=736));
has.add('tablet', (hasTouch && (deviceWidth > 736 && deviceWidth <=1024)));
and so on, so, later in another widget, you can require dojo/has and use the recently added features. Or event better, you can do this
require(['dojo/has!mobile?myApp/ui/Mobile:myApp/ui/Tablet'], function (UiModule) {
ui = new UiModule();
ui.placeAt(document.body);
ui.startup();
});
I've never tried nested dojo/has validations and i can not tell you if it works, but i've tried like in the example i'm giving you and it works.
Think that you can have in your project your own has lib extending the dojo version and adding all the features you want. For example:
//myApp/has.js
define(["dojo/has"], function(has){
has.add('myApp', true);
return has;
});.
Then later in your app you can include myApp/has and us it just like if it were the dojo version.

Convert a minified jQuery plugin into a plain JavaScript plugin

I'm running a project where people can find doctors on the map and And book Online , ...
Previously I decided to use Angularjs and change the whole project, so I had to forget about some jQuery plugins which I've used before.
**Problem ** :
I'm using a jQuery plugin that works awesome with Google map API (Landcarte) , and I haven't find anything else to compare with this plugin in AngularJS.
So I couldn't do anything but to use both jquery and angular and this plugin in my site , But I dont know , I feel that its wrong to use both jquery and angular because I think that makes my firstload heavy.
**Questions : **
1- Is this possible to convert this plugin into a normal Javascript so I can omit the Jquery in my site ?
2- If not , What can I do ?
3- Can I use RequireJS to load jquery and this plugin later in my site ? (I dont know how to :()

I don't know about the Landcarte plugin so I can't help you with question 1.
If you want to initialize a jquery plugin but it's not working, a common cause of the problem is that the DOM is not ready yet.
To solve this, there are three options:
Method 1 Initialize the plugin inside of the link property of your directive. Within the link function, the children of the directive element have already been compiled and linked. If your plugin relies only on the children of the element being DOM ready, then this option is suitable.
app.directive('myDirective', function(){
return {
link: function(scope, element,attr){
element.plugin();
}
}
});
Method 2 Using $evalAsyc which runs after the compile and link phase but before the Render phase. Use this method if your plugin relies on the entire page being DOM ready, but it is not important that expressions have been rendered.
app.directive('myDirective', function(){
return {
link: function(scope, element,attr){
scope.$evalAsync(function(scope){
element.plugin();
});
}
}
});
Method 3 Using $timeout which runs after the render phase. Use this method if your plugin relies on the entire page being DOM ready, and all the expressions have been rendered.
app.directive('myDirective', function($timeout){
return {
link: function(scope, element,attr){
$timeout(function(){
element.plugin();
});
}
}
});
Depending on the plugin, one of these options should work for you. Prefer one that meets the need of the plugin minimally - meaning prefer option 1, over option 2, over option 3, but ultimately go with the one that works.

To turn min.js file into normal.js you can use this
but it just set tabulations and spaces and make script readable.
For example this script:
var a={log:function(){try{var e=Array.prototype.slice.call(arguments);if(typeof e[0]==="string"){if(/[\{\}]/.test(e[0])&&e.length>1){var t=e.length>2?e.slice(1):e[1];return console.log(this.text(e[0],t))}}return console.log.apply(console,e)}catch(n){}}}
will be:
var a = {
log: function () {
try {
var e = Array.prototype.slice.call(arguments);
if (typeof e[0] === "string") {
if (/[\{\}]/.test(e[0]) && e.length > 1) {
var t = e.length > 2 ? e.slice(1) : e[1];
return console.log(this.text(e[0], t))
}
}
return console.log.apply(console, e)
} catch (n) {}
}
}

Landcarte can be used in a pure JS code without jQuery as well. A map can be initialized by an explicit call of the at.geo.Map class constructor:
var container = document.getElementById("map");
var map = new at.geo.Map(container);
This class is mentioned in the reference.

JQuery Plugin Pattern - Code Organization for multiple scripts

I'm developing a client using JQuery based on lightweighted plugin pattern as listed here.
https://github.com/jquery-boilerplate/jquery-patterns/blob/master/patterns/jquery.basic.plugin-boilerplate.js
I've been working on one file, but it's getting bloated with over 1000 lines of code. So I've decided to split scripts, but I haven't been able to locate best practice for keeping multiple scripts with jQuery.
My main script is the following:
;(function($, window, document, undefined) {
function MainClass(){
this.other = new Otherclass(); // Otherclass is defined in separate script
}
MainClass.prototype = {
...
}
$.fn.mainclass = function(){
...
}
})(jQuery, window, document);
HTML is the following:
<html>
<head>
// JQuery included
<script type="text/javascript" src="mainclass.js></script>
<script>
$(function() {
$("body").mainclass();
});
</script>
</head>
</html>
Question: I need to define otherclass on the separate file. What is the best way to accomplish this? If Plugin Pattern wasn't meant to have multiple scripts, are there any other practice suitable for this?
Thank you.

The module pattern that you are using is a good first step in the right direction. The plugin pattern was really intended to encapsulate one specific functionality for a given set of elements and follows the open/closed principle pretty well, by design (open for extension). However, it isn't a good approach for multiple object interaction due to its primary behavior as an extension method of the jQuery object.
One thing that I was able to do to split my JavaScript out into pages/multiple files was to use a combination of Namespacing and Module Augmentation/Importing/Exporting.
The namespacing was great for importing and dereferencing other portions of the application and the module pattern helped with selection of exposure and exporting just the right amount of reusable members of an object. From there, I could dereference any object that was in the namespace, create new instances from that, and so forth:
//In some common site-wide file, declare a common namespace and known base objects within it:
var App = {
View: {},
Utilities: {}
};
// view.js
App.View = (function($, window, document, undefined) {
var localProp = "Hi, i'm a private property for App.View to access";
function doSomething(){
// a private method for use
}
return {
reuseableMethod: function() {
// exported for access through App.View.reusableMethod()
}
};
})(jQuery, window, window.document, undefined);
// another script, more specific, different file
// NOTE: the import and export of App.View and view
(function($, window, document, view) {
// consume your other objects after importing them
var me = Object.create(view);
me.reuseableMethod();
function localFunction() {
//do something private
}
})(jQuery, window, window.document, App.View);

using requirejs to only load jquery plugins on user interaction

I am starting to play with require js / modular development for the first time and am liking what I see.
What I am trying to achieve is basically only load certain custom jQ modules when needed. My main goal is page performance. At present I am only loading require.js (which in turns loads jQ async) then other jQ code/plugins only fire on user interaction.
Would the following code be considered good/bad practice? Is there anything anyone would change? (super basic example below)
MAIN.JS
require.config({
paths: {
"jquery": "//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min"
}
});
require(["jquery"], function($) {
// overlay plugin
$("a").on("click", function(e){
var self = this;
require(["overlay"], function (overlay) {
overlay.init(self);
});
e.preventDefault();
});
});
OVERLAY.JS
define(function () {
return {
init: function(self) {
$.ajax({
url: self.href,
success: function (data) {
$("#results").html($(data).filter('#details').html());
},
dataType: 'html'
});
$('#results').fadeIn();
}
}
});
Cheers,
Adi.

Your method of loading overlay is a correct use of require, however a couple of things:
Overlay.js should list jQuery as a dependency. Ensure your modules have all the code they need to run. In this case it's fine (as you're grabbing jQuery in the require) but say you used document.addEventListener to attach your click then you're no longer sure jQuery will be available for use by the $.ajax. It's nice to know your modules ask for everything they need rather than getting it by luck.
One rule I try to follow is to keep all my DOM related stuff in main. So for example:
Overlay
// Example code, and not complete
define(function(require) {
var $ = require('jquery');
return {
init: function(elements) {
this.trigger = $(elements.trigger);
this.target = $(elements.target);
this.trigger.on('click', this.someEvent.bind(this));
},
someEvent: function() {
this.getAjax();
}
}
});
And then in main.js just pass in the DOM elements
require(['overlay'], function(overlay) {
overlay.init({
trigger: 'a',
target: '#results'
})
});
Keeping the DOM elements separate and in one place makes updating them breeze. You could also pass in an options object for other things (such as class names) much like a jQuery plugin does.
Finally, in your example code your $('#results').fadeIn(); is outside the success callback and would run immediately.

Prototype "classes" vs Jquery

I currently work with prototype, so for instance if i want to create a class or something i would do something like (using it with asp.net)
function MyTestClass()
{
this.MyHtmlDiv = $("myHtmlDiv");
this.MyButton = $("myButton");
this.init();
}
MyTestClass.prototype.init = function()
{
Event.Observe(...some code here ..);
Event.Observe(...more code...);
}
So you get the idea. I like the way it is organized but I have read here in other posts that jquery is better. I would like to start using it but.. is it possible to create "classes" like this, neat?. I usually have a separate .js file for each aspx page. How can I create a class like this with JQuery?
Any pointers, links, ideas or suggestions would be appreciated. When I google this, I see some jquery functions but havent really found a nice template that i can follow to maintain it like above if i was to move to jquery.

jQuery has no confliction with the style you use now, you just need to change your mind of how jQuery selector work and how to bind event handler etc.
function MyTestClass() {
// note jQuery's selector is different from Prototype
this.MyHtmlDiv = $("#myHtmlDiv");
this.MyButton = $("#myButton");
this.init();
}
MyTestClass.prototype.init = function() {
this.MyHtmlDiv.on('event_type', function() {
// some code
});
this.MyButton.on('event_type', function() {
// some code
});
}