Web front-end development Best Practices (3)

Selector note

• Try not to use the ID selector
• Reduce the level of sub-selectors (less and sass abuse)
• Using the composite CSS class selector

Compatible with IE browser

• Code that is compatible with the old browser, known as the hack code
• Familiarity with common compatibility styles in IE browser
• Detach Style compatible code

em,px,%

• PX: Relative size, but due to the same environment, it is also an absolute size em: Twice times the font size on the applied element,%: percent relative to the parent element
• Set relative dimensions as much as possible
• Absolute dimensions are used only in the case of predictable element sizes
• Use EM to set the size of the font

Use an efficient CSS selector

• Matching principle: Right to Left
• Avoid using wildcard characters
• Avoid using labels and individual property selectors as key selectors
• Do not use the label signature before the ID selector
• Csscomb sort, CSS selectors Test selector performance test Site

Other high performance practices

• Avoid using @imoport
• Avoid using the unique style of IE browser: Picture filters and CSS expressions

Browser support Scenarios

• Online tool: CSS3 Click Chart (provides examples of compatible code), CSS content and browser compatibility
• Add prefix: Prefix,autoprefix (Sublime plugin), with sass and less
• Do not over-add prefixes
• Add CSS3 standard attribute definition, see html5please

High Performance JS

• Avoid defining global variables and functions
• Wrap variables and methods in a variable object and include global variables in a local scope
• Returns the need to expose the interface using the return statement
  var mycurrent = (function () {
  var length = 0;
  function init () {..}
  return {
  Init:init;
  }})
• Avoid using with statements, difficult to read, easy to create bugs
• Avoid using eval
• Do not write code that detects the browser
• Event handling and business logic code separated
• Configuration data and code logic separation, replacing dead data with configuration data (JSON)
• Separation of logical and structural styles
• JS Separate HTML structure
  
  • Dynamically fetching HTML code (AJAX) from the server side
  • Dynamically generate page structure via client (template label)
  • JS Template: Mustache,underscore,handlebars,jade,ejs (template-engine-chooser template engine)
  • Try not to misuse logical blocks in templates
  • Don't build templates that are too complex
  • Using pre-compiled templates
• Using the MVC format:
  
  • Backbone,angularjs,ember,knockout
• JS Specification:
  
  • COMMONJS: Load modules synchronously, mostly using Nodejs server-side environments (loaded with require)
  • AMD: Load modules asynchronously, more in a browser environment with network latency (using callback functions), mostly in Requirejs and curl

Using Ajax wisely

• Explicitly using Ajax
  
  • The frontend will dynamically acquire back-end data based on user requirements and then update the Web interface
  • Expect to get any resource or page by not refreshing the page
  • Dynamic validation of user input
  • Any other situation where resources are expected to be obtained asynchronously
  • BUG: Using AJAX is dynamic, without adding extra processing, Ajax can break back buttons
• Using JSON as the data format for AJAX transmissions

Web front-end development Best Practices (3)