CODEWITHSUNDEEP
javascriptjqueryangularjsminify
Milad
Milad

Reputation: 28592

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 :()

Upvotes: 0

Views: 789

Answers (3)

Michael Kang
Michael Kang

Reputation: 52847

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.

Upvotes: 1

midwinterday
midwinterday

Reputation: 11

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.

Upvotes: 0

raskalbass
raskalbass

Reputation: 740

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) {}
    }
}

Upvotes: 0

Related Questions