Front-end technology — (JS Foundation II)

Gulp emphasizes the workflow of front-end development. We can configure a series of tasks, define the transactions that the tasks handle (such as file compression merging, Sprite graphics, server startup, version control, etc.), and then define the execution sequence so that gulP can execute these tasks, thus building the whole front-end development process of a project.

PS: Simply put, it is a Task Runner

Webpack is a modular management tool and packaging tool for front-end resources. Many loose modules can be packaged according to dependencies and rules into front-end resources suitable for production deployment. You can also separate modules that are loaded on demand and load them asynchronously when needed. Through loader conversion, any form of resources can be regarded as modules, such as CommonJs module, AMD module, ES6 module, CSS, images, JSON, Coffeescript, LESS, etc.

PS: Webpack is a module bundle

• Gulp focuses on the control and management of the whole process of front-end development. Focus on control processes. For example, automatically refresh the page, Sprite image, compression JS, CSS, compile less, check syntax and so on.
• Webpack focuses on module packaging. Treat all resources in development as modules. Webpack uses loaders and plugins to process resources. It’s a modular solution. Any AMD/CMD/ES6 style modularity can be compiled into browser-aware JS.

• XSS: Cross-site scripting (commonly referred to simply as XSS) is a type of web application security vulnerability attack that is a form of code injection. It allows malicious users to inject code into web pages that can affect other users when they view them. Such attacks often involve HTML and client-side scripting languages.

• CSRF: Cross-site request forgery Cross-site Request Forgery, also known as one-click attack or session riding, usually abbreviated as CSRF or XSRF, Is a method of hijacking a user to perform unintended actions on a currently logged Web application.

• XSS: Posting malicious JavaScript code in a forum post in a client-side scripting language (most commonly JavaScript) is called script injection. If the content of the code requests an external server, it is called XSS!

• CSRF: Also known as XSRF, initiates a request (without the knowledge of the user) by impersonating the user and completes some requests against the user’s will (such as malicious Posting, deleting posts, changing passwords, sending emails, etc.).

• Defense against XSS attack 1. Filter the data entered by the user form, escape the javascript code, and then store it in the database; 2. Escape the information on the display page to prevent javascript from being executed on the page.

• To defend against CSRF 1, all operations that need to be performed after the user logs in to the system are important operations. The parameters of these operations should be sent in POST mode for security. 2. To prevent cross-site request forgery, we must carry a CSRF_Token parameter in each request to identify whether the source of the request is legitimate. The CSRF_Token parameter is generated by the system and stored in the SESSION.

• When a user’s browser or search engine visits an old web site, the server tells the browser or search engine, “The page has moved, the new address is… please use the new address to access the page.”
• HTTP redirection is classified into permanent redirection (HTTP status code 301) and temporary redirection (HTTP status code 302). A permanent redirect means that the url has been moved to a new permanent home, and a temporary redirect means that the url has been moved to a temporary apartment
• In some cases, we may need to move a file on the site to a new location or change the name of the file. At this point, the user may still enter the previous favorite url to access the web file, so we need to make sure that both the old url and the new url can access the latest web content.

•   .box1{
        display: table-cell;
        vertical-align: middle;
        text-align: center;        
    }
  Copy the code

•   .box6 span{
        position: absolute;
        top:50%;
        left:50%;
        width:100%;
        transform:translate(-50%,-50%);
        text-align: center;
    }
  Copy the code

• The vertical-align attribute is valid only for inline elements, not block elements!

link

• This is a js keyword. The value of this can change depending on where the function is used.
• But the general rule is that this refers to the object on which the function is called.
• This is the Global object. As a method call, then this is the object

ECMAscript 5 adds a second mode: “Strict mode”. As the name suggests, this mode makes Javascript run under more stringent conditions. The main objectives of the Strict Mode are as follows:

Advantages:

• Eliminate some unreasonable and inaccurate Javascript syntax, reduce some weird behavior;
• Eliminate some unsafe code operation, to ensure the safety of code operation; Improve the efficiency of the compiler, increase the running speed; Set the stage for future versions of Javascript.
• Note: After testing IE6,7,8, and 9 do not support strict mode.

Disadvantages:

• JS on websites are now compressed, some files are in strict mode and others are not.
• These files are merged into the middle of the file, not only does it not indicate the strict mode, but it wastes bytes after compression.

1. Create an empty object that is referenced by this and inherits the prototype of the function. Properties and methods are added to the object referenced by this. 3. The newly created object is referenced by this and returns this implicitly.

• Find the browser cache
• DNS resolves, searches for the IP address corresponding to the domain name, redirects (301), and sends the second GET request
• The HTTP session is performed
• Client sends headers (request headers)
• Server feedback header (response header)
• HTML documents start to download the document tree is established, according to the tag request required to specify the MIME type of the file file display

{browser side of the work is roughly divided into the following steps: load: according to the URL for domain name resolution, to the server to initiate a request, receive files (HTML, JS, CSS, images, etc.). Parsing: Parses the loaded resources (HTML, JS, CSS, etc.) and suggests the corresponding internal data structures (such as HTML DOM tree, JS property sheets, CSS style rules, etc.)}

• 1. RootScope Principle: All applications have a rootScope that applies to all HTML elements contained in the Ng-app directive. $rootScope applies to the entire application. It is the bridge of scope in each controller. Values defined by rootScope can be used in individual controllers

• Use $location to get the parameters in the address bar

• Event broadcasting in Angular:

  • $on(name,handler) registers an event handler that will be called when a particular event is received by the current scope (from the parent or child scope).
  • $emit(name,args) sends an event to the current parent scope up to the root scope.
  • $broadcast(name,args) sends an event to subscopes under the current scope.

• 4. By service A service is a singleton in Angular, so generate an object in the service that can be shared among all controllers using dependency injection.