Working with Eclipse for Javascript, Ctrl-click seems to work on some objects but will not take me outside of the current javascript file. Is there any way to get this "go to definition" to work more fully? I use Eclipse for Java and depend on this functionality, would like to see it work better in Javascript as I'm just trying to learn Javascript.
I think it probably doesn't work because of the many ways in JavaScript to define something..
function foo() {}
var foo = function() {};
window.foo = function() {};
window['foo'] = function() {};
var z = 'foobar'; window[z.substr(0, 3)] = function() {};
Especially the last one would be - even though it's unlikely to be ever used in real code - pretty much impossible to be detected by an IDE without executing the whole code and then tracking where a global is defined for the first time.
Another example would be with libraries implementing a class system. Without knowing the details of every library it's pretty hard to find out what class names they define.
Intellij Idea support that functionality. I was looking to see if Eclipse has a plugin and came across your post, I use to work with Intellij Idea and I have that functionality that is very helpful so to the user that is saying that is impossible for a IDEA please take a look in Intellij Idea you will be surprise of all the functionality that you can find.
Related
CODE:
function stop(reason){
throw(reason);
}
function pragma_once(file_name){
if(window[file_name] !== undefined)
stop("Duplicate symbol: "+file_name);
window["__INCLUDE__"+file_name]=true;
return true;
}
function include(file_name){
var x = document.createElement('script');
x.src = file_name;
document.getElementsByTagName("head")[0].appendChild(x);
}
I've been using node.js and the require() seemed really useful for keeping my code clean, easier to track and easier to read. But as I noticed javascript for web doesn't have "require()". I found requirejs which adds require() functionality to web javascript. But i don't know if using a library is that useful for what seems to be a pretty minor task. So I wrote something that works kind of like like require (more like c #include). The only real problem i noticed is that it loads everything asynchronously. This isn't the final version, but the idea how this functions isn't going to change.
Are there any underlying problems I do not know? Any reason NOT to use this?
I think the main reason people tell others not to do this is because of these 3 reasons.
It makes another HTTP GET request for this script, and it's not during the initial loading of the page.
It is possible to include the same file multiple times from what I've seen.
If you need the feature then a more optimized version of that can be found in a web framework or a scripting language that extends Javascript.
I've inherited responsibility for a moderately complex Rails app, which has meant learning Ruby and Rails besides trying to understand a lot of code that I did not write myself. The project also contains a non-trivial Backbone.js app written in Coffeescript. Since I will be the sole developer on this project for a long time, and since I don't know Coffeescript, I plan to move the entire source code to straight Javascript.
I would like to know what the best approach to doing this would be. Compiling to javascript is easy enough, but there is a lot of refactoring to do to make the code look "normal".
Cleaning up cruft by replacing stuff like
var a;
a = 1;
with
var a = 1;
is simple enough, or perhaps not even worth bothering with. I am more worried about the overall structure of the project. Coffeescript produces files that begin like this Backbone view code:
(function() {
var extend = function(child, parent) {
for (var key in parent) {
if (hasProp.call(parent, key)) child[key] = parent[key];
} function ctor() {
this.constructor = child;
}
ctor.prototype = parent.prototype;
child.prototype = new ctor();
child.__super__ = parent.prototype; return child;
},
hasProp = {}.hasOwnProperty;
App.Views.MyClass = (function(superClass) {
extend(MyClass, superClass);
function MyClass() {
return MyClass.__super__.constructor.apply(this, arguments);
}
# rest of the code here...
});
}).call(this);
I would just like to know what a sane approach to dealing with this would be, and I haven't found any kind of "best practices" for doing what I would like to do.
What would be best: just check everything into git and keep going? Use the Backbone/Underscore version of extend instead of redefining the same function at the top of every file? Use a different method entirely for stringing together all of the separate files?
Just looking for a general direction. I'll figure out the details.
You could try using a tool like decaffeinate if you are ok with using ES6.
Otherwise, if you are sure you want to port to Javascript, then you'd be better rewriting by hand, than trying to fix the generated code.
Start by recreating the files one at a time, writing unit tests as you go. Not only will this help you better understand the project, but you'll also learn Coffeescript (and probably some good techniques as you go).
If you read the overview on the Coffeescript website, it provides a translation table for going between the two languages. Every time you come across syntax you don't understand, see what it generates when you enter it into js2.coffee. There's another good reference for migrating from Coffeescript to ES6 here.
You will end up spending more time and much more effort (not to mention most likely introduce bugs trying to replicate things like super or sub-classes in CoffeeScript). Instead of trying to rewrite a working CoffeeScript web app, just dig in and soak up the CoffeeScript as you go along and find the need to change things. Stop resisting! CoffeeScript is well documented and has proven itself as a very useful language to know. Learn it, its only scary because its new!
Calling the javascript gurus out there.
Basically my question is regarding how you structure your code, both visually and for functionality for example do you wrap everything in objects using this structure:
var myapp={
binds:function(){
//put some event listeners for jquery etc...
},
otherfunc:function(){
//do some other thing
},
init:function(){
//call myapp.binds and other functions and other stuff to intialize your app.
}
};
Then finally
$(document).ready(myapp.init);
The thing is with a structure like this I think JSLint complains doesn't it? Whats the pros and cons using a structure like this or is there a generally better way to structure your code? Do you follow a certain pattern from $(document).ready(call) to putting all your event listeners and "initializing" your app, do you use separate objects for methods and variables?
I also think "visually" if you have a very large webapp this structure eventually looks very messy, but maybe it's just me I don't know, any input is appreciated thanks.
Using Inheritance Patterns to Organize Large jQuery Applications
explain in detail and with better practice by Alex
http://alexsexton.com/?p=51
its very very well explain, must see
other links
How To Manage Large jQuery Apps 5 months ago
It doesn't matter much how you structure your code as long as you follow the essentials rules of programming that your teacher thought you:
Don't write repetitive code
A function must do 1 and only 1 thing
Document your code
Some other small things but mostly the above... oh and apply lots of common sense
The only error you get from that is "implied global." You can get rid of the warning for document by using this.document instead (since window is the context). The implied global for $ will stay unless you paste in the jQuery source (then gl with all the errors in that).
I trust JSLint--a lot. On big projects I tend to make object literals as you did above but I use a module pattern for object security:
var myapp = (function () {
var secret_stuff, public_stuff;
return {
stuff: public_stuff
}
}());
I've tried some of the editors/IDEs regularly recommended for coding JavaScript (Aptana, WebStorm, ...) but none of them has a satisfying autocomplete functionality. I'm probably spoiled by Microsoft's IntelliSense for .NET. There is some JavaScript-IntelliSense in WebDeveloper, but that seems to be a stripped-down version. The best I've found so far is WebStorm, but its code completition is easily distracted by imported libraries (offering hundreds of suggestions) and identical function names.
Did I miss an editor/IDE that uses refactoring (or something else) to offer proper code completition, so that it really "knowns" what that variable-name stands for, I just put a dot behind? Or is something like this on its way?
I always recommend Komodo Edit from ActiveState (now up to version 6, with support for HTML 5 and CSS3 as well as recent versions of Javascript, PHP, etc.) Note that you may have to install addons for the languages you're working in, but you should find them through the Mozilla-like Addon manager.
Also supports jQuery and even lets you use jQuery (along with vanilla Javascript or Python) in its powerful macro IDE.
Code completion example:
<script type="application/x-javascript">
var obj = {};
obj.personnel = [{firstName:"John", lastName:"Brick", age:43},
{firstName:"Jane", lastName:"Motte", age:26}
];
// now type obj. and code completion immediately offers you "personnel"
// note: file must be saved for the app to find all members of declared
// variables, but I save about every 10 seconds so it's not a problem
</script>
The best I've found so far is
WebStorm, but its code completition is
easily distracted by imported
libraries (offering hundreds of
suggestions) and identical function
names.
This comment confuses me. If you import the libraries, and your code is using them, why is it bad to include the function names in the code completion suggestions? Wouldn't you want to have jQuery's functions included if you're using it?
If you're using Microsoft's IntelliSense with jQuery, does it stick to its guns and only show JavaScript core functions? Sounds limited to me, unable to be smart when I add libraries.
Or is something like this on it's [sic] way?
It sounds to me like you want a clairvoyant interface. I don't think it is on the way anytime soon.
By the way, "it's" == "it is"; "its" is the possessive.
I'm working on a project where we are doing a lot of custom javascript and especially jquery, on an mvc style project.
The only problem is that I keep adding more and more global functions/variables and they are piling up. I've got a few files but I'm unsure how to split some of the stuff up into separate files.
I've thought about composing some of these function and global variables into objects, but the object syntax in javascript seems a little awkward to me (because of the absence of classic classes). Though if I had a good example to follow maybe I could come around.
How do you deal with a project where the global javascript functions and variables start piling up like this?
A very simple way to pile a bunch of global variables and functions into a single global object:
// Awful pile of globally-scoped names
var foo = 1
var bar = 2
function go = function(){
console.log('Yeehaw!');
}
// Instead, just dump everything into a global-level object
var MyApp = {
foo: 1,
bar: 2,
go: function(){
console.log('Yeehaw!');
}
}
// Now access stuff like this
console.log(MyApp.foo);
console.log(MyApp.bar);
MyApp.go();
For "simple" top-level variables and functions, I can recommend this. There are plenty of improvements that can be made to this, but they'll probably fall under the category of premature optimizations; this is a great first step.
The Crockford Videos on YUI theater are a good example of how to set up JavaScript namespaces among other things.
You could break them up similarly to what jquery.ui does... by categories or by action/control
ex:
effects.blind.js
effects.bounce.js
ui.accordion.js
Can they be broken up into the Controls that they deal with?
Or by what they do?
Just some suggestions...
If you are working with jQuery, the first way to organize your code is to build jquery plugins:
http://docs.jquery.com/Plugins/Authoring
http://www.learningjquery.com/2007/10/a-plugin-development-pattern
As you mentioned mvc, there is various javascript implementations out there, but I'm not sure they are hugely popular: jamal, javascript mvc,
http://jamal-mvc.com
http://javascriptmvc.com