Front-end-Developer-Interview-Questions
A list of helpful front-end related questions you can use to interview potential candidates, test yourself or completely ignore.
I tested myself and recorded it.
preparing-front-end-job-interview
most-common-technical-interview-question-for-frontend-developers
Chaining allows us to run multiple jQuery methods (on the same element) within a single statement.like this:
$(selector).doA().doB().doC()
The Deferred object, introduced in jQuery 1.5, is a chainable utility object created by calling the jQuery.Deferred() method. It can register multiple callbacks into callback queues, invoke callback queues, and relay the success or failure state of any synchronous or asynchronous function.
The Deferred object is chainable, similar to the way a jQuery object is chainable, but it has its own methods. After creating a Deferred object, you can use any of the methods below by either chaining directly from the object creation or saving the object in a variable and invoking one or more methods on that variable.
Simplely,the deferred object is the salution of callback function and aslo a asynchronous task runner.
End the most recent filtering operation in the current chain and return the set of matched elements to its previous state.
Event namespacing provides a way to manage specific event handlers. For example, a plugin could namespace its event handlers to make them easier to unbind while still using anonymous functions. To namespace an event, just suffix the event type with a period and a name
Show or manipulate the queue of functions to be executed on the matched elements.
$ = function(){}
$.fn = $.prototype = {};
$("#bar")
refs:
deferred-object
differences-between-jquery-bind-vs-live-vs-delegate-vs-on
queue
Event delegation allows us to attach a single event listener, to a parent element, that will fire for all children matching a selector, whether those children exist now or are added in the future.the underlying cause is browser's event bubbling ;
this works in JavaScriptThe this object is bound at runtime based on the context in which a function is executed:
this is equal to the object when called as an object method.Whenever a function is created, its prototype property is also created according to a specific set of rules.
When it comes to inheritance, JavaScript only has one construct: objects. Each object has an internal link to another object called its prototype. That prototype object has a prototype of its own, and so on until an object is reached with null as its prototype. null, by definition, has no prototype, and acts as the final link in this prototype chain.
Grunt/Karma + Jasmine/QUnit
Hashtable is a data structure that associates keys with values;
function foo(){ }();.What needs to be changed to properly make it an IIFE?
The most widely accepted way to tell the parser to expect a function expression is just to wrap in in parens, because in JavaScript, parens can’t contain statements. At this point, when the parser encounters the function keyword, it knows to parse it as a function expression and not a function declaration.
null, undefined or undeclared?How would you go about checking for any of these states?
the undefined variable is a declared but has a value of undefined. To use a undeclared variable will cause an error.
Closures are functions that have access to variables from anthor function's scope.
This is often accomplished by creating a function inside a function.
The module pattern use a anonymous function that returns a object.
Inside of the anonymous function, the private variables and functions are defined first.
After that, an object literal is returned as the function value. That object literal contains only properties and methods that should be public.
Since the object is defined inside the anonymous function, all of the public methods have access to the private variables and functions.
I developing SPA with requirejs and MVC Framework recently. So I organize my code with AMD.
Native objects are those objects supplied by JavaScript. Examples of these are String, Number, Array, Image, Date, Math, etc.
Host objects are objects that are supplied to JavaScript by the browser environment. Examples of these are window, document, forms, etc.
function Person(){}
var person = Person()
var person = new Person()
var-functionname-function-vs-function-functionname
.call and .apply?These methods both call the function with a specific this value.
* the apply() method accepts two arguments: the value of this and an array of arguments.
* the call() method exhibits the same behavior as apply(),but arguments are passed to it differently.Using call() arguments must be enumerated specifically.
Function.prototype.bind?ECMAScript 5 defines an addition method called 'bind()'.the 'bind()' method create a new function instance whose this value is bound to the value to that was passed into 'bind()'.
For release, we will compress and combine code.
Whenever I have a time I will review my code and refactor it.
document.write()?document.write() although its use is frowned uponUse less as far as possible
AJAX is short for Asynchronous Javascript + XML. The technique consisted of making server requests for additional data without unloading the page,resulting in a better user experience.
There is a preproccess or precompile in javascript runtime. and 'Hoisting' occur in the preproccess.
Function declarations and variable declarations are always moved (“hoisted”) invisibly to the top of their containing scope by the JavaScript interpreter. This means that code like this:
function foo() {
bar();
var x = 1;
}
is actually interpreted like this:
function foo() {
var x;
bar();
x = 1;
}
JavaScript-Scoping-and-Hoisting
Event Flow describles the order in which events are received on the page.An event has three phases to its life cycle: capture, target, and bubbling.
Event Bubbling mean that an event start at the most specific element(the deepest possible point to the document tree) and then flow upward toward the least specific node(the document);
Often an attribute is used to describe the mechanism or real-world thing.
A property is used to describe the model.
In HTML / Javascript the terms get confused because DOM Elements have attributes (per the HTML source) which are backed by properties when those elements are represented as Javascript objects.
To further confuse things, changes to the properties can sometimes update the attributes.
For example, changing the element.href property will update the href attribute on the element, and that'll be reflected in a call to element.getAttribute('href').
However if you subsequently read that property, it will have been normalised to an absolute URL, even though the attribute might be a relative URL!
Depend on the way of extending.
Depend on the way of extending.
== and ===?The == operator will compare for equality after doing any necessary type conversions. The === operator will not do the conversion, so if two values are not the same type === will simply return false. It's this case where === will be faster, and may return a different result than ==. In all other cases performance will be the same.
1.var queryString = location.search 2.parse queryString * queryString.split("=") * regExp 3.return specific parameter.
javascript
[1,2,3,4,5].duplicate(); // [1,2,3,4,5,1,2,3,4,5]
"use strict";?what are the advantages and disadvantages to using it?
Instruct the browser to render the page.
Obviously,the css box model.
The XHTML page must be well formed.If you forgot to closed a element and the browser will not to closed it and cause error.
For "application/xhtml+xml", some old browsers no supports.
Use i18n framework.
The W3C specification for data-attributes states that:
Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.
Custom data- attributes are a great way to simplify the storage of application data in your web pages.
Now there are such way to keep data on front-end side.
localStorage - stores data with no expiration date sessionStorage - stores data for one session
Learning Angular.
So big question...
Bonus points for describing feature detection
Graceful degradation
Providing an alternative version of your functionality or making the user aware of shortcomings of a product as a safety measure to ensure that the product is usable.
Progressive enhancement
Starting with a baseline of usable functionality, then increasing the richness of the user experience step by step by testing for support for enhancements before applying them.
I agree with progressive enhancement, and increaseing user experience with feature detection.For example,once i detectived that the browser support round-corner or shadow text,i will apply the futures to pages.
Semantic HTML is the use of HTML markup to reinforce the semantics, or meaning, of the information in webpages rather than merely to define its presentation or look. Semantic HTML is processed by regular web browsers as well as by many other user agents. CSS is used to suggest its presentation to human users.
As an example, recent HTML standards discourage use of the tag
<i>(italic, a typeface)[1] in preference of more accurate tags such as<em>(emphasis); the CSS stylesheet should then specify whether emphasis is denoted by an italic font, a bold font, underlining, slower or louder audible speech etc. This is because italics are used for purposes other than emphasis, such as citing a source; for this, HTML 4 provides the tag<cite>.[2] Another use for italics is foreign phrases or loanwords; web designers may use built-in XHTML language attributes[3] or specify their own semantic markup by choosing appropriate names for the class attribute values of HTML elements (e.g. class="loanword"). Marking emphasis, citations and loanwords in different ways makes it easier for web agents such as search engines and other software to ascertain the significance of the text.
Semantic = Meaning.
Semantic elements = Elements with meaning.
Looking for a number of solutions which can include:
How many resources will a browser download from a given domain at a time?
Multiple domains could increase the number of parallel downloads that the browser can perform.
about 4 to 6 connections per domain
Not all browsers are restricted to just two parallel downloads per hostname. Opera 9+ and Safari 3+ do four downloads per hostname. Internet Explorer 8, Firefox 3, and Chrome 1+ do six downloads per hostname. Sharding across two domains is a good compromise that improves performance in all browsers.
The optimal number of domains to shard across is 2-4. After 4 domains, response time degrades.
Bonus points if it does not use JS.
Ruby On Rails. For a good job.
FOUC meaning flash of unstyled content.