AXForum  
Вернуться   AXForum > Microsoft Dynamics NAV > NAV: Blogs
All
Забыли пароль?
Зарегистрироваться Правила Справка Пользователи Сообщения за день Поиск Все разделы прочитаны

 
 
Опции темы Поиск в этой теме Опции просмотра
Старый 12.12.2018, 00:17   #1  
Blog bot is offline
Blog bot
Участник
 
25,459 / 846 (79) +++++++
Регистрация: 28.10.2006
Navigate Into Success: Why doesn’t my jQuery work?
Источник: http://vjeko.com/why-doesnt-my-jquery-work/
==============

First, a disclaimer. This post is written for (C/)AL developers who are struggling with JavaScript, who copy and paste JavaScript code from Stack Overflow right into VS Code and are happy when it works, and confused when it doesn’t. Still, if you are not a (C/)AL developer but want to learn a bit of JavaScript yourself, this post is not at al about AL, it’s purely about JavaScript, and about demystifying a piece of it that JavaScript developers take for granted, and that developers with experience only with simpler languages (such as AL) find confusing.

Now let’s jump into the point. A friend asked me for help with a control add-in in which “jQuery doesn’t work, I can do jQuery() but I cannot do $()”

This is one of the schoolbook examples of what happens when you don’t isolate scope in JavaScript, so let’s first see what happened, and then let’s see how you can fix it.



What happened?

Everyone is used to do jQuery stuff through the $ variable. Almost every AL control add-in out there does this at some point



What is this $ and why can you access it anyway? $ is a function exposed globally by jQuery and it allows you to invoke jQuery functionality. jQuery in fact exposes two variables globally: jQuery and $ and both refer to the same function, so using either of them achieves exactly the same results. You could say that $ is a shortcut to jQuery. People are using $ simply because it’s simpler to write $(“something”) than jQuery(“something”). It also looks cooler, doesn’t it?

However, JavaScript has a funky trait: it allows variables to be redeclared (if you click the link, search for Redeclaring part, it’s not directly linkable). While “normal” languages would go bananas if you do something like this…



… JavaScript almost couldn’t care less. It’s fine with you doing it as often as you want. It has its function and it’s very useful, but it can also be dangerous.

In short, what happened when your jQuery still works and your $ doesn’t is that you, or somebody else in a script you are using, has redeclared
$.

jQuery does this (effectively, not literally) at the global level:



And his allows you to invoke jQuery functionality either through jQuery or $. However, if you (or someone you trust enough to load their script) does this at the global scope:




… in short, you are screwed.

From that point on jQuery still refers to whatever it used to refer to, but $ refers to “banana”, and while doing jQuery(“whatever”) may make sense, doing “banana”(“whatever”) does a lot less so.

Keep in mind, the officially supported way of invoking jQuery is through the jQuery keyword, and $ is provided just as a shortcut.

How to fix it?

To fix this, you need to do something that nearly all of jQuery examples out there do:




Yes, you’ve seen it, but you never thought it necessary, maybe because you didn’t quite understand the syntax, and for you it all worked without all this (function() {})() scaffolding. But this (function() {})() stuff is essential, and in fact it’s so essential that when you understand what it does and how, you’ll want to use it forever and you’ll want to rewrite all your existing JavaScript code to use it back since you started writing JavaScript.

So, what exactly does (function() {})() do, how, and why?

First of all, in JavaScript, unlike in AL, functions are first-class. It means that you can declare a variable of function type:




… or you can pass a function to another function as an argument (this one is very commonly used!):




… or you can return a function from another function as a return value:




All of these are used a lot in JavaScript. In all of these situations we call these functions anonymous functions, and they are anonymous because they don’t have a name through which you can invoke them (which doesn’t mean you can’t invoke them, it’s just that they don’t have a name).

However, JavaScript has another trait that’s at work here, and that’s the fact that it has expression statements, which means that if it encounters an expression that seemingly does nothing at all, the runtime will still evaluate that expression even though the rest of the code does nothing at all with the return value of an expression. Expressions can be implicit, like:




(where b + c is an implicit expression)

… or explicit:




(where (b + c) is an explicit expression achieved by applying the grouping operator).

Expressions in JavaScript can evaluate to any type, including function type, which is why you can do this:




This simply evaluates to a function. Since it evaluates to a function, you can invoke that function using function invocation syntax () like this:




Obviously, just like any other language, functions can accept arguments, so you could do this:




If it’s not immediately obvious, here you have a function that declares parameters a and b, and returns their sum, then you return that entire function from an expression, and then you immediately invoke that function by passing 1 and 2 to it. This concept is called Immediately Invoked Function Expression and it’s all over the place in JavaScript. If you didn’t click that link, this pattern is also called Self-Executing Anonymous Function, and it’s called that for a reason: it’s an anonymous function that self-executes (kind of, it’s the runtime that executes it, it doesn’t execute itself).

Now, thinking of our original situation (function($) {})(jQuery) it should be obvious why it solves the problem.

First, it declares a function expression for a function that has one parameter $. Then you immediately invoke that function by passing jQuery as its parameter. From within that function parameter $ – which is now in function’s local scope! – hides the global $ (which may refer to jQuery or “banana” or whatever else) and replaces it with whatever jQuery is at time of invocation. So, if you did $ = “banana” but left jQuery variable alone, doing this:




… will allow you to use $ from within your function just like that piece of code you copied from Stack Overflow has it, without having to worry about

What if…

Yes, what if somebody tramples over jQuery the way they trampled over $?

In that case your jQuery is lost and you cannot salvage it. The only way is to find the offending script and get rid of it (or fix it if it’s feasible).

But can you do anything to prevent this kind of thing? No, there isn’t, because anyone can redeclare any variable as they see fit. But yes, there is, because JavaScript is such a beautiful language that it allows you to do things that many other languages cannot do. But let’s talk about in the next post, shall we?

Read this post at its original location at http://vjeko.com/why-doesnt-my-jquery-work/, or visit the original blog at http://vjeko.com. 5e33c5f6cb90c441bd1f23d5b9eeca34The post Why doesn’t my jQuery work? appeared first on Vjeko.com.




Источник: http://vjeko.com/why-doesnt-my-jquery-work/
__________________
Расскажите о новых и интересных блогах по Microsoft Dynamics, напишите личное сообщение администратору.
 

Похожие темы
Тема Автор Раздел Ответов Посл. сообщение
Navigate Into Success: State of .NET Affairs Blog bot NAV: Blogs 1 07.06.2017 11:03
Navigate Into Success: From C/AL to executable: how NAV runs your C/AL code Blog bot NAV: Blogs 0 06.10.2016 13:11
DynamicsAxSCM: WHS Work List Blog bot DAX Blogs 0 19.06.2015 15:11
Navigate Into Success: Long time no see, Vienna, Nashville, demo gods, and other things Blog bot Dynamics CRM: Blogs 0 09.10.2013 01:15
Navigate Into Success: Top 10 things I miss in .NET Interoperability in NAV 2013 Blog bot Dynamics CRM: Blogs 0 20.06.2013 02:04
Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск
Опции просмотра

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.
Быстрый переход

Рейтинг@Mail.ru
Часовой пояс GMT +3, время: 15:20.
Powered by vBulletin® v3.8.5. Перевод: zCarot
Контактная информация, Реклама.