js 'use strict'

Envato Authors Theme Authors
1

Hi, i have read the new Theme submissions Requirements that say:

All JavaScript should be written with “use strict” mode on. For example, you can do this with jQuery as follows:

(function($) {
“use strict”;
// Author code here
})(jQuery);

When i enclose my js file this way, all my functions stop working, undefined

Site is working perfectly if i leave my functions as they are.

I declare global functions like this:

function thefunction(){
//My code
}

Then access them with

thefunction();

I have read tons of documentation about this with no luck, Could someone point me in the right direction about how to declare my functions and then access them for example when document ready ???

Really lost :frowning:

2

Call your jQuery like this;

jQuery(document).ready(function($) {
‘use strict’;
//THE FUN GOES HERE
});

If your code breaks when you do this, then you’ve got deeper .js problems I’m afraid!

NINJA EDIT: Further discussion here: http://stackoverflow.com/questions/4462478/jslint-is-suddenly-reporting-use-the-function-form-of-use-strict

3

hi tommus, thank you very much for your answer.

I think i am lost in the organization of files and functions or something

Let’s say i have:

(function($) {
“use strict”;
function myfunction(){

some code

};
})(jQuery);

Then in other file i have your code:
jQuery(document).ready(function($) {
‘use strict’;
myfunction();
});

this doesn’t work for me, it gives undefined function

Thank you very much

4

You may be over engineering your Javascript, here’s an example of valid function definition and calling;

http://jsfiddle.net/B7nTg/1/

Tom

5

Hi, yes, of course this works, but as it said in theme requirements all js must be inside
(function($) { “use strict”;

//Author Code

})(jQuery);

The fiddle you have linked works because the only difference is the “use strict”; at the begining, but the code is not enclosed in the (jQuery) function as needed.

Or i am losing something with Theme Requirements?

6

We’re all still a little confused by the new requirements, but so far I’ve had no problem with the .js used exactly as my JSFiddle above, but still, I’ve flagged this for staff reply to see if we can get a little clarificiation :slight_smile:

7

Why don’t you try to use “use strict”; for the whole document instead putting it inside of every function?

line 1: “use strict”;
line 2: your code…

8

Thank you. Just to clarify i would ask some questions:

All js means all js when enclosing it in
(function($) { “use strict”;

//Author Code

})(jQuery);

???

so i need to do:

(function($) { “use strict”;

//Author Code With my function

})(jQuery);

In other file when needed for example:

(function($) { “use strict”;
$(document).ready(function(){
//Call my function
});
})(jQuery);

Is this the needed structure?

I am only asking because i just have tried to make this work for hours, well, you know, change this, look google, change that, look google, change the other and no luck at all. Have read all the poor documentation available about “use strict”; and i am a bit confused.

Have inspected some very well known scripts written in that way, working perfectly, so i may be missing something important to make mines work in this way.

So the important question for me is how i have to rewrite my functions written in the mode TommusRhodus has linked in fiiddle, to work in this way???

:slight_smile:
Thank you very much

9
cippo said

Why don’t you try to use “use strict”; for the whole document instead putting it inside of every function?

line 1: “use strict”;
line 2: your code…

That was the first thing i did, then all the functions get undefined

Regards

10

The reason your functions are returning undefined is because you are declaring them inside a function scope, and calling them outside of it.

Define your function like this:

function my_function() {
"use strict";

// code goes here...
}

jQuery( document ).ready( function( $ ) {
"use strict";

// code goes here, and you can now use your function...
)};
11
cippo said

Why don’t you try to use “use strict”; for the whole document instead putting it inside of every function?

line 1: “use strict”;
line 2: your code…

That is not so great.

The reason why is because that way you are enforcing strict standards to the global scope, meaning that even 3rd party scripts will get affected by it.

Now, you may say, why should I care about other scripts if they suck and are not written with strict standards.

Well you should, cause it affects your customers and can break things where maybe it shouldn’t.

So yeah, use strict standards but within your code, unless you are building stuff for personal use.

12

Hi, thank you OriginalEXE for the answers, but what we were talking about was just that.

Look at the fiddle Tommus has linked, it is exactly the same example as yours but i think this cannot be done know because of the New Theme Requirements say that all js from Author must be enclosed in a function scope like:

(function($) { “use strict”;

//Author Code

})(jQuery);

I think just to prevent issues with other libraries and plugins. Or, are we missing something??

:slight_smile: :slight_smile: Thank you

13

The code you are quoting is just an example, the main thing here is to use strict standards, there is no difference between their example code and the one Tommy and I have written, in terms of standards. I am 100% sure my example is compliant with latest TF standards.

14

Well i love to hear this, then all my functions are ok, and my site works great. I was trying to make things work in that way with no luck.

As tommus has flagged this to get a staff reply, let’s wait to see what they say about this.

Best Regards

15

This:

(function($) {
“use strict”;

//Author Code
})(jQuery);

…is the same as this:

jQuery( document ).ready( function( $ ) {
"use strict";

//Author Code
)};

It sounds like you are using the long form of the document ready function and then trying to wrap it in the shorthand form of the document ready function. You need to use one or the other.

The code provided by OriginalEXE and Tommus are the same and are exactly what you need. They meet the theme requirements.

16

Thank you EugeneO. I have seen for example infinitescroll plugin js do this ,

(function($) {
“use strict”;

//Plugin functions
})(jQuery);

So for this reason i thought that was the correct way to do things.

Best Regards

17
OriginalEXE said
cippo said

Why don’t you try to use “use strict”; for the whole document instead putting it inside of every function?

line 1: “use strict”;
line 2: your code…

That is not so great.

The reason why is because that way you are enforcing strict standards to the global scope, meaning that even 3rd party scripts will get affected by it.

Now, you may say, why should I care about other scripts if they suck and are not written with strict standards.

Well you should, cause it affects your customers and can break things where maybe it shouldn’t.

So yeah, use strict standards but within your code, unless you are building stuff for personal use.

That makes sense :slight_smile: thanks for your opinion.

18

Hi,

I can’t figure out how to use the “onload” event of the tag.

If i use the code bellow when adding an <image … onload=“customFunction(this)” /> i get that that the “customFunction” does not exist.

(function($) {
“use strict”;

// Author code here

function customFunction( img ){

// custom code

}

})(jQuery);

If i place the “customFunction” outside, then it works.

Can anyone help?

Thank you

19

That is happening because you are declaring your function inside of a closed scope, so it’s only available for calling inside that scope (inside 

(function($) {})(jQuery);
)

There are multiple solutions for this.

The most simple one is the one you already discovered, moving that function declaration outside, which basically puts it in a global scope and it can be called anywhere.

20

^ this is because the function is not in the global scope (where you try to access it)

You can do this:

(function($) {
  "use strict";

// Author code here

    window.customFunction = function( img ){

    // custom code

    }

})(jQuery);

to assign your function to the global space (window) but I would recommend to add an event listener and keep everything in a scope:

(function($) {
  "use strict";

    $(window).on('load', function(){
        
        //do something with $('img')
        
    });
    
})(jQuery);