This is the 26th day of my participation in the August Text Challenge.More challenges in August

1. Source code skills analysis

1.1 Pass some far-scoped variables into functions as parameters to improve code efficiency

Eg: Pass the Window operation seemingly superfluous

(function (window) {
    
})(window);
Copy the code

Reason: Saves scope-chain lookup time and improves code performance.

You can use window in a function if you don’t pass it, but it will look up the scope chain all the way to the top.

When passed to the window, arguments are used as local variables to the function.

1.2 Paying attention to the permissions of variables

Eg: In VUE, if you want all components to have a property, you define that property on the prototype object. For example, vue-router can be modified, resulting in serious consequences.

Vue does for vue-router:

$router = {}; $router = {}; Object.defineproperty (vue.prototype, "$router", {// Set only get attribute, return _router source Object get: function () { return _router; }}) // Define attributes for the object via defineProperty. This attribute cannot be changed without setting setCopy the code

Inspiration:

  • Focus on the permissions of variables
  • When you need to set an immutable property to an Object, you can use Object.defineProperty()

1.3 The module supports detection

  • Modularity history

    • Folk — AMD CMD UMD
    • es6–import
    • node–commonjs
    • < script >

Due to compatibility issues caused by different versions of the specification, modules in almost all frameworks (such as Vue and jquery) support detection to determine which modular specification environment the current user is in and which specification is used to expose the front-end framework. So be careful when building your own wheel.

2.JS architecture scheme (3 kinds)

There are three ways to build source code

  • The factory pattern
  • Build huge classes – Builder pattern
  • Front-end unique — functional

2.1 Factory Mode

  • Provide a factory method
  • Call the factory method, passing in the required
  • Return the desired object

Don’t worry about how the object is built, just ask the factory method for the object.

Application scenario: When your requirements require frequent production of objects.

eg:

$('.dom'); // We just pass in the dom object we need, and $will create the object and return it. We don't need to create objects ourselves. // in the DOM era, you need to obtain a large number of DOMCopy the code

/ / jquery’s architecture

(function () { window.$ = jQuery; }) ()Copy the code

2.2 Builder mode

Build a complex class by combining individual modules. (new Vue)

Application scenario: When your requirements require a complex class.

2.3 Front-end Specificity — Functional Programming (VUE3)

It is suitable for writing large and complete functional libraries for all users.

Benefits of functional programming:

  • Higher scalability and composability
  • !!!!!!!!! Easy tree-shaking vue jquery LoDash (help us remove methods and variables that are defined but not used