Questions front end surface (3) of modern technology

What is a single-page application (SPA)?

• Single Page Application (SPA) is a user to load a single HTML page in a browser, all subsequent requests do not need to leave this page
• Objectives: designed to provide users with a local moving closer to APP or desktop application experience.
• Process: the first request, the navigation pages to the client, the remaining data request acquisition REST API JSON
• Implementation: transmission of data through the Web Socket API or the RPC (Remote Procedure Call).
• Advantages: smooth user experience, small pressure on the server, separating the front and rear ends of duties
• Cons: Keywords layout more difficult, is not conducive to SEO

What is the "front-end routing"? When applicable "front-end routing"? What are the advantages and disadvantages?

• Front-end routing is achieved by switching the page URL and History
• Application: front-end routing is mainly applied to "separate the front and rear end," the single-page application (SPA) project
• Pros: good user experience, interaction and smooth
• Cons: browser "forward", "back" will re-request, not the rational use of cache

Modular Development how to do?

• As the envelope object namespace - the internal state may be externally rewritten
• Immediate execution of the function (IIFE) - multiple JS files need to rely on, and the load in the exact order
• Using the module loader - require.js, sea.js, EC6 module

Norms prevailing Javascript module What?

• CommonJS - mainly used in server node.js

var math = require('./math');
math.add(2,3);

• The AMD (Asynchronous module definition) - require.js

require(['./math'], function (math) {
    math.add(2, 3);
});

• The CMD (common module definition) - sea.js

var math = require('./math');
math.add(2,3);

• ES6 module

import {math} from './math';
math.add(2, 3);

The difference between AMD and CMD standard?

• Standardization of output:

  • AMD promotion by the output RequireJS
  • CMD output from the SeaJS promotion

• Module dependencies:

  • AMD ahead of execution, respected depend front
  • CMD deferred execution, the nearest dependent respected

• API functions:

• • AMD's default multi-functional API (points require global and local require)
  • CMD of API functions respected single pure (no global require)

• Module defines rules:

  • AMD default outset load all dependent modules

  define(['./a', './b'], function(a, b) {
      a.doSomething();
      b.doSomething();
  });

• CMD dependent modules when used near loading

  define(function(require, exports, module) {
      var a = require('./a');
      a.doSomething();
      var b = require('./b');
      b.doSomething();
  })

What is the core principle requireJS?

• Each module will depend on the module than the module of the present pre-loaded

Node.js of the advantages, disadvantages put forward their own views? Node.js features and application scenarios?

• Node.js features: single-threaded, non-blocking I / O, event-driven
• The advantages Node.js: good high concurrent treatment; for I / O intensive applications

• Node.js drawback: Not suitable for CPU-intensive operations; can not take full advantage of multi-core CPU; low reliability, a link error will cause the entire system to crash

  • The Node.js application scenarios:

    • RESTful API
    • Real-time applications: online chat, graphic live
    • Application tools: front-end deployment (npm, gulp)
    • Form collection: Questionnaire

How to determine the current script running in the browser or node environment?

• Global determine whether the object is a window, if not a window, the current script is not running in the browser

What is npm?

• npm is Node.js modules management and publishing tools

What is functional programming?

• Functional programming is a "programming paradigm", the main idea is to try operational process written a series of nested function calls
• For example: var result = subtract (multiply (add (1,2), 3), 4);

• Functional programming features:

  • The core functions of: as a function of a variable assignment, other parameters of the function, the function returns the value of the other
  • Only the "expression", instead of "statement": Requires each step is a simple operation, must have a return value
  • No "side effects": All functions only to return a new value, without modifying external variables
  • Transparent reference: do not rely on external variables, dependent only on the input parameters

• Functional programming advantages:

  • Code is simple and close to natural language, easy to understand
  • Easy to maintain, facilitate testing, debugging, combined
  • Easy "Concurrent Programming", without fear of data a thread, is modified by another thread
  • May be "hot upgrade" code in the operating state upgrade code directly, without rebooting, no downtime

What is the function currying Currying)?

• Currying:

  • Often said partial evaluation, meaning the parameters passed to the function stepwise, each part of the application delivery reference parameter, and returns a more specific functions, continue to receive the remaining parameters
  • Continuously return during a particular function until you return the final result. Therefore, the function parameter passing currying gradually, to gradually narrow the scope of the function, the process of gradually solved
  • Curried effect: delay calculation; multiplexing parameter; dynamic creation function

• Currying disadvantages:

  • Function currying imposes overhead (nested functions, accounting for more than the average memory function), but the first performance bottleneck from other causes (DOM operation)

What is dependency injection?

• When a class instance dependent instances of another class, it does not create an instance, to create and inject their own container by the IOC, so called dependency injection.
• Dependency injection solve is how to effectively organize the code module dependencies

Design Patterns: What is singleton, factory, strategy, decorator?

• Singleton (singleton) a class has only one instance, which has a global access point in the entire program
• Factory's (factory) solution produced a solid object column duplication
• Strategy (Strategy) will each algorithm package together, so that they can also replace each other, so that the algorithm is independent of the use
• The Observer (observer) a plurality of observers simultaneously monitor body, when the main object is changed, all observers are notified and
• Example Prototype (prototype) a fully initialized, for copying or cloning
• Adapter (adapter) for the different types of interfaces matching adjustment, although incompatible internal interface, or different classes can work
• Proxy (proxy mode) to act as a filter to forward the objects used to represent a real object
• Iterator (iterator) in the case does not need to set up the internal workings of sequentially access a set of elements which
• Chain of Responsibility (even duty) processing request object composed of a chain, the chain transfer request until the object can be processed

What is the front-end engineering?

• Front-end engineering is to use a set of front-end workflow automation tools to complete

• The basic front-end development process:

  • Project initialization: yeoman, FIS
  • Introducing dependencies: bower, npm
  • Modular Management: npm, browserify, Webpack
  • Code compilation: babel, sass, less
  • Code optimization (compression / combined): Gulp, Grunt
  • Code inspection: JSHint, ESLint
  • Code testing: Mocha
• The most famous building tools: Gulp, Grunt, npm + Webpack

What Yeoman introduce that?

• Yeoman - Scaffolding front-end development tools, best practices and tools will automatically integrate framework to build the project

• Yeoman actually fit three types of tools, three types of tools independently:

  • YO --- scaffold, automatic generation tool (corresponding to a pressure-sensitive adhesive, the bonding tool together Yeoman)
  • Grunt, gulp --- automated build tools (initially only grunt, before joining gulp)
  • Bower, npm --- package management tool (originally bower, before joining npm)

What introduce WebPack that? What are the advantages?

• WebPack is a [Module Loader] and [packaging tool] for the various static resource (js / css / image, etc.) is used as a module

• WebPack advantages:

  • WebPack supports commonJS and AMD / CMD, easy code migration
  • Not only can the modular JS, also including CSS, Image, etc.
  • You can replace part of the grunt / gulp of work, such as packing, compression confused picture base64
  • Scalability, improve the plug-in mechanism, especially to support hot-plug functionality React

Describes the differences libraries and frameworks?

• Class library is a collection of functions to help developers write applications WEB, the leading role is developer's code
• WEB application framework is a special, developers have realized just fill it specific business logic, play a leading role in the framework

What is the MVC / MVP / MVVM / Flux?

• MVC(Model-View-Controller)

  • V->C, C->M, M->V
  • Communications are unidirectional; C only play the role of routing, business logic deployed on V
  • Backbone

• MVP(Model-View-Presenter)

  • V<->P, P<->M
  • Communication is bidirectional; V and M do not contact (P pass through) occurs; V is very thin, are deployed in the logic P
  • Riot.js

• MVVM(Model-View-ViewModel)

  • V->VM, VM<->M
  • Two-way data binding: View and ViewModel changes will be mapped to objects on top of each other
  • Angular

• Flux(Dispatcher-Store-View)

  • Action->Dispatcher->Store->View, View->Action
  • Facebook in order to solve engineering problems encountered in MVC application proposes a framework for thinking
  • Based on a simple principle: one-way flow of data in an application (unidirectional data flow)
  • React (Flux in View, only concerned with the presentation layer)

What Backbone that?

• Backbone is a (MVC) based on the front end of the frame and underscore the jquery

What AngularJS that?

• AngularJS is a complete front-end MVVM framework that contains the template, two-way data binding, routing, modular, services, dependency injection
• AngularJS maintained by Google, to help large single page application development.

What React yes?

• React not MV * framework for building user interface JavaScript libraries, focused on View layer

• React main principles:

  • Virtual DOM + diff algorithm -> not directly manipulate the DOM object
  • Components Components -> Virtual DOM node
  • Rendering State Trigger View -> one-way data binding
  • React Solution: React + Redux + react-router + Fetch + webpack

The principle react-router routing system?

• The principle: the location and synchronization between components
• Responsibility is to ensure that the route and the URL of the synchronization UI
• In the react-router, URL corresponding to a Location object, UI react components determined by
• Thus, in route to the react-router into the location and synchronization between components

---

• The period classic front-end CSS Interview
• Past classic React learning book

Continually updated in - like leaving a like oh!