background preloader

Javascript

Facebook Twitter

Prototypal Inheritance. Douglas Crockford www.crockford.com Five years ago I wrote Classical Inheritance in JavaScript (Chinese Italian Japanese). It showed that JavaScript is a class-free, prototypal language, and that it has sufficient expressive power to simulate a classical system. My programming style has evolved since then, as any good programmer's should. I have learned to fully embrace prototypalism, and have liberated myself from the confines of the classical model. My journey was circuitous because JavaScript itself is conflicted about its prototypal nature. New () produces a new object that inherits from .prototype This indirection was intended to make the language seem more familiar to classically trained programmers, but failed to do that, as we can see from the very low opinion Java programmers have of JavaScript.

Fortunately, it is easy to create an operator that implements true prototypal inheritance. Function object(o) { function F() {} F.prototype = o; return new F(); } if (typeof Object.create ! Private Members in JavaScript. Douglas Crockford www.crockford.com JavaScript is the world's most misunderstood programming language. Some believe that it lacks the property of information hiding because objects cannot have private instance variables and methods. But this is a misunderstanding. JavaScript objects can have private members.

Objects JavaScript is fundamentally about objects. If a value is a function, we can consider it a method. Objects can be produced by constructors, which are functions which initialize objects. Public The members of an object are all public members. In the constructor This technique is usually used to initialize public instance variables. Function Container(param) { this.member = param; } So, if we construct a new object var myContainer = new Container('abc'); then myContainer.member contains 'abc'. In the prototype This technique is usually used to add public methods. Container.prototype.stamp = function (string) { return this.member + string; } So, we can invoke the method Private Privileged. Classical Inheritance in JavaScript. Douglas Crockford www.crockford.com And you think you're so clever and classless and free — John Lennon JavaScript is a class-free, object-oriented language, and as such, it uses prototypal inheritance instead of classical inheritance.

This can be puzzling to programmers trained in conventional object-oriented languages like C++ and Java. JavaScript's prototypal inheritance has more expressive power than classical inheritance, as we will see presently. But first, why do we care about inheritance at all? There are primarily two reasons. The second reason is code reuse. To demonstrate this, we will introduce a little sugar which will let us write in a style that resembles a conventional classical language. Classical Inheritance First, we will make a Parenizor class that will have set and get methods for its value, and a toString method that will wrap the value in parens. The syntax is a little unusual, but it is easy to recognize the classical pattern in it. So now we can write Sugar Conclusion.

AngularJS

The Design of Code: Organizing JavaScript. Great design is a product of care and attention applied to areas that matter, resulting in a useful, understandable, and hopefully beautiful user interface. But don’t be fooled into thinking that design is left only for designers. There is a lot of design in code, and I don’t mean code that builds the user interface—I mean the design of code. Well-designed code is much easier to maintain, optimize, and extend, making for more efficient developers. That means more focus and energy can be spent on building great things, which makes everyone happy—users, developers, and stakeholders. There are three high-level, language-agnostic aspects to code design that are particularly important. System architecture—The basic layout of the codebase. In looser languages, specifically JavaScript, it takes a bit of discipline to write well-designed code. Below, I’ll walk through how to craft your code into well-organized components that can be reused in projects to come.

The module pattern#section1. Introducing Prism: An awesome new syntax highlighter. For the past three weeks, on and off, I’ve been working on releasing Dabblet’s syntax highlighter as standalone, since many people had requested it. Zachary Forrest suggested the name “Prism” and I liked it so much I decided to go with it, even though there is an abandoned Mozilla project with the same name. I ended up refactoring and extending it so much that I will need to backport it to Dabblet one of these days!

This doesn’t mean I bloated it, the core is still a tiny 1.5KB minified & gzipped. It just means it’s more awesome. In certain ways, Prism is better than any other syntax highlighter I’ve seen: It’s tiny. The core is only 1.5KB minified & gzipped, which can go up to 2KB with the currently available language definitions (CSS, Markup and JS). However, there are some limitations too: Pre-existing HTML in the code block will be stripped off. Enjoy: prismjs.com. How do I "think in AngularJS" if I have a jQuery background.