Componentized visualization performance optimization Reason

Components and abstractions

(1) Components are programming abstractions designed to reuse (2) generic components, business components, (3) The Programmer's Way, DRY (Dont 'T Repeat Yourself), Refactoring to improve existing code design, and (4) the Three-fold PrincipleCopy the code

Component library design principles

Principles, Patterns and Practices of Agile Software Development 1. Cohesion granularity 2. Stable coupling (high cohesion and low coupling)Copy the code
Particle size
1. Common reuse principle SRP single responsibility principle 2. Common closure principle (a component should not contain more than one reason for its change)Copy the code
Should one component not refer to another?
Disadvantages of dependencies 1. Coupling = high maintenance costs + instability 2. Code is more maintainable than reusableCopy the code
stable
A H= "B M, N=" C Stability: A>B>C 2. Stability abstract principleCopy the code

How do parent and child components depend on each other?

1. The parent component container is responsible for the initialization and invocation of child components. 2Copy the code

Design forbidden area

Side effects of out-of-bounds operations invasive ring dependence properties are numerousCopy the code

Five, design specifications first

1. Unified visual style: color, layout, font, icon unified interactive effect: slow moving, moving path, deformation arrangement (refer to website: Material Design) 2. Style separation: Requirements: Theme customization, style differentiation 3. Auxiliary platforms/tools: scaffolding, documentation, examples, iterationCopy the code

Best practice of component library engineering

Multi-package management tool: Lerna Multi-package management tool Advantages: One-click installation dependency, automatic update dependency, independent version management, non-NPM package component management solution: Test solution: (1)Karma driver, Mocha test framework, CHAI assertion Library, Sinon Mock, Istanbul Coverage (2)Jest one-stop test solution document: DocsifyCopy the code

7. Summarize the outlook

The component library has to be well designed and the ecology around it is important to build the wheelsCopy the code

Real-time case presentation

https://github.com/QingWei-Li/vuep.runCopy the code