August 11, 2021

  • async await
  • The article published
  • vuedraggable
  • Sortable
  • Custom events
  • Js design pattern
  • ❌ Object prototype
  • ❌ encoding and decoding

August 12, 2021

  • Git fetch is required for branches that are not up-to-date

  • If you want to rename the input variable, the import command uses the as keyword to rename the input variable.

    import { lastName as surname } from './profile.js';
Copy the code

  • eventbus

  • Components need to be pulled again when they change

August 13, 2021

  • The computed style
  • cursor: not-allowed; // Mouse disable styles

August 14, 2021

  • const escapeRegexpString = (value = ' ') = > 
String(value).replace(/[|\\{}()[\]^$+*?.]/g.'\ \ $&'); Regular matches are escapedCopy the code

  • The select component inside element searches for typed values. Determine the current category respectively and jump to the method in the component inside option for regular judgment.

  • ForEach returns from this loop; End loop throw an error

  • Vant computer side has a problem // string input plus judgment

August 15, 2021

  • rest

August 16, 2021

  • Local development.editor-container-wrapper mask problem

  • Sourcetree view

  • Json. schema resizeable- resizable

      // If it is only adjustable width height adaptive
  if (option === 'width' || option === 'none') {
    shapStyle.height = undefined
    shapStyle.minHeight = style.height + 'px'
  }
Copy the code
  • // CSS hover when editing Nice.shape{&:hover {
    border: 1px dotted $--color-primary;
    .shape-tool-bar-wrapper {
      display: flex; }}}Copy the code

  • Cross – env across the environment

August 17, 2021

  • NPM init vite@latest my-vue-app --template vue-ts $NPM init vite@latestCopy the code

  • Vite starts the development server with the current working directory as the root directory. You can also specify an alternative root directory by using vite serve some/sub/dir.

  • The role of shims-vue.d.ts is to help TS identify VUE files

  • Volar is very Nice for VUE3

  • TypeScript uses tsconfig.json files as its configuration files

  • Dotenv Dotenv is a zero-dependency module that loads environment variables from the.env file into process.env. Storing configuration in a separate environment from code is based on the twelve-factor application approach.

  • Failed to load config “@vue/typescript/recommended” to extend from.

  • Example Configure TS, ts Saves prettier, formats the project, initializes vite, and vue3

  • Vue SUGAR requires ESLint to ignore some component declarations.

  • The mock data

August 18, 2021

  • Routing installation, SCSS installation, Ant-Design-Vue construction, X6 construction
  • Environment variables dev, FAT, production

August 19, 2021

  • interface LabelledValue {
  label: string;
}

function printLabel(labelledObj: LabelledValue) {
  console.log(labelledObj.label);
}

let myObj = {size: 10.label: "Size 10 Object"};
printLabel(myObj);

//The LabelledValue interface is like a name that describes the requirements in the example above. It represents that there is a label attribute of typestringThe object. It is important to note that we cannot say that the object passed to printLabel implements this interface as we do in other languages. We're just going to focus on what the value looks like. As long as the object passed in meets the necessary conditions mentioned above, it is allowed.Copy the code

August 20, 2021

  • Ts learning

  • X6 code source code

  • Umi, which can be pronounced as Umi in Chinese, is an extensible enterprise front-end application framework.

  • X6 code reading

A few examples

Er diagram:

Drawing (flow chart) : Some parameters of the Graph instance are initialized at initialization time

This.initstencil () initializes the small icon on the left side of the flowchart

This.initevent () initializes the time inside the artboard

This.initkeyboard () Keyboard registration event

August 21, 2021

August 22, 2021

August 23, 2021

  • Js import?

  • The NPM run NPM script works very simply. Whenever NPM run is executed, a new Shell is automatically created in which the specified script command is executed. Therefore, any command that a Shell (usually Bash) can run can be written into an NPM script.

    In particular, the Shell created by NPM run adds the node_modules/. Bin subdirectory of the current directory to the PATH variable, and then restores the PATH variable after execution. This means that all scripts in the node_modules/.bin subdirectory of the current directory can be called with the script name instead of the path

  • The **

    ** element in SVG allows you to include elements from different XML namespaces. In the context of a browser, it’s likely XHTML/HTML.

  • The configuration items can be seen first in the diagram example.

  • git clone https://[email protected]/FNInfraFront/platform/lowcode/component-develop-platform.git

August 24, 2021

  • Nuxt. js server render client requests resources -> Server responds (generally asyncData will pre-request the main page data, and the obtained data will be sent to the server for stitching into HTML and returning to the front-end rendering, so as to improve the first screen loading speed and SEO optimization). SSR merge processing -> Return to HTML for rendering
  • Component development platform debugging
  • Visualize the build process
  • Json Schema is a specification for defining JSON data structures based on THE JSON format.

August 25, 2021

  • Basic knowledge learning
  • Ready to build the wheel
  • React hooks Are used to write function and class components. Before Hooks, components requiring State could only be implemented through class components
  • Math. Ceil (3.45) / 4

August 26, 2021

  • The script generates a local test file
  • You don’t know Js
  • Process. The stdin. On control
  • A SHIM is a library that introduces a new API into an old environment, and implementing a polyfill using only the tools already in the old environment is a ShiM used on the browser API. The usual approach is to check if the current browser supports an API and load the corresponding Polyfill if it doesn’t. The API is then available to both old and new browsers

August 27, 2021

  • Scroll bar style

  • Js execution mechanism

     async function async1() {
      console.log('async1 start')
      await async2()
      console.log('async1 end')}async function async2() {
      console.log('async2')}console.log('script start')
   
    setTimeout(function () {
      console.log('setTimeout')},0)
    
    async1()

    new Promise((resolve) = > {
      console.log('promise1')
      resolve()
    }).then(function () {
      console.log('promise2')})console.log('script end')

/ / output
Copy the code

  • For style changes, you can check for fake elements if you can’t find a specific value

August 29, 2021

  • The element formthis.$refs.experienceInfoTable.clearSort();
  • Element table sorting logic can be written using data

August 30, 2021

  • Why is webpack packed with so many annotations, removed in Production mode for easy reading in Development

  • Custom analysis WebPack packaging process analysis

  • Create a new branch and switch to Git checkout -b

  • ❓ Parent set min-height child set height100% cannot inherit

  • background-color: revert; You can override the previous style

  • Git branch -m oldName newName Changes the branch name

  • The compiler’s work can be broken down into three main stages: Parsing, Transformation, and Code Generation

  • Assert. DeepStrictEqual (actual, expected[, message]) assert output when an assertion is wrong

  • ✊ Single-line text mobile development

August 31, 2021

  • ** Prototype chain: **JavaScript states that all objects have their own prototype. On the one hand, any object can serve as a prototype for other objects. On the other hand, since a prototype object is also an object, it also has its own prototype. As a result, there is a prototype chain: object to prototype, prototype to prototype
  • The call stack is a mechanism by which the parser tracks the flow of function execution. This mechanism allows you to track which function is executing when multiple functions are called in the execution environment.
  • The JavaScript engine never does anything other than execute a single block at any given time. Common to all environments is a built-in mechanism called an event loop, which handles the execution of multiple blocks of a program over a period of time, calling the JS engine each time.
  • ✊ Optional component mobile terminal development

September 1, 2021

  • Event Loop is a very important concept, which refers to a kind of operation mechanism of computer system.

  • What is An Event Loop?

  • ❗How JavaScript works: Event loop and the rise of Async programming + 5 ways to better coding with async/await

  • #! /usr/bin/env node is required to specify that the script interpreter is node

  • Nuxt. Js debug

  • Async-validator code debugging

  • ✊ Numerical component development

September 2, 2021

  • Vue use() checks if the plug-in is installed, and if not, calls the plug-in’s install method and passes in a Vue instance
  • Wechat reading is good to see a lot of books

September 3, 2021

  • rem -> root em

  • CSS priority

  • Initial and inherit are universal

  • It all starts with the familiar display property. Add display: flex to the element and it becomes an elastic container, and its immediate children become elastic children (Flex Item). Elastic child elements are arranged side by side on the same line from left to right by default. Elastic containers fill the available width like block elements, but elastic child elements do not necessarily fill the width of their elastic container. Elastic child elements have the same height, which is determined by their contents.

  • NPM Link When developing NPM modules, we sometimes want to try them out as we go along

    Example: the NPM link in the project will register the bin directive in the global directory and execute it directly.

  • Husky Husky is a Git Hook tool. Husky is simply a tool for adding hooks to Git clients. Installing it into the repository automatically adds hooks to the.git/ directory and executes a series of procedures during the pre-commit phase to ensure that each commit is correct.

  • Pure functions – easy to read, easy to debug, with few side effects

  • Scaffolding implementation

  • Commander – The complete Node.js command-line solution.

September 15, 2021

  • feature/sww_
  • Pseudo-classes are a type of selector that is used to select elements in a particular state, such as when they are the first element of the type, or when the mouse pointer is hovering over the element. They behave as if you were applying a class to a part of your document, helping you reduce the number of redundant classes in your markup text and making your code more flexible and maintainable.
  • flex 1
  • History is different from hash

September 16, 2021

  • Ready to look into dragging

  • Scrolling personality’ about:flags’ -> scrolling personality’ is disabled

  • Draggable is essentially a grouping based on groups that can be dragged if the groups are equal. The essence of Clone is to copy a component of the target container while dragging without changing the container that the clone is dragging. The Transition animation is used to start and end the animation when dragging.

  • Rerender is triggered before and after drag, including position changes. Added class to drag and drop

  • A performance monitor TAB switch will result in memory reclamation ahead of time, and every click of an operation will basically trigger the CPU operation

September 17, 2021

  • Pc-plateform-editor -> Draggable -> Render trigger -> Write vue in HTML
  • The branch submission specification first merges with Master (Git pull) and then pushes to its own branch and finally to GitLab for merge requests
  • Native HTML adds render to modify the page
  • The Move is passed to the dragger and fired

September 18, 2021

  • After the fixed element table is removed from the container itself, we need to add Mousewheel to the fixed module. So there’s a caden. It’s not a caden

          handleFixedMousewheel(event, data) {
        const bodyWrapper = this.bodyWrapper;
        if (Math.abs(data.spinY) > 0) {
          const currentScrollTop = bodyWrapper.scrollTop;
          if (data.pixelY < 0&& currentScrollTop ! = =0) {
            event.preventDefault();
          }
          if (data.pixelY > 0 && bodyWrapper.scrollHeight - bodyWrapper.clientHeight > currentScrollTop) {
            event.preventDefault();
          }
          bodyWrapper.scrollTop += Math.ceil(data.pixelY / 5);
        } else {
          bodyWrapper.scrollLeft += Math.ceil(data.pixelX / 5);
        }/ * * /
      },
Copy the code

  • Continue to study the drag dragger is essentially to encapsulate a layer of node objects into sortable for native operations

  • The nodeType attribute is used to distinguish between different types of nodes, such as elements, text, and comments.

  • Research Sortable;

    The whole thing is still creating the instance (passing in elements, options), and the instance’s prototype function initializes many methods.

    1.On -> Register eventfunction on(el, event, fn) { el.addEventListener(event, fn, ! IE11OrLess && captureMode); }Copy the code

September 19, 2021

  • Have a holiday

September 20, 2021

  • Have a holiday

September 21, 2021

  • Have a holiday

September 22, 2021

  • Custom component V-model

  • Max cover width – the width

    • Refresh codesandBox more often

  • Sortable. js performs move dragEL on the element being dragged,targetEL on the element being dragged

  • Trigger the dragover event (every few hundred milliseconds)

September 23, 2021

  • You don’t know the JS series
  • Editor development
  • Size comparison — If both values are strings, they are compared as strings based on the value of the Unicode code point they contain. Otherwise JavaScript will try to convert a non-numeric type to a numeric value:

September 24, 2021

  • Leak fill a vacancy

September 25, 2021

  • To move the brick

September 26, 2021

  • ES6 supports several predefined built-in symbols that expose various meta-properties of JavaScript object values. However, these symbols are not registered in the global symbol table as is commonly assumed

  • ❌PUT

  • Metaprogramming: Code looks at itself, code changes itself, and code changes default language features to affect other code.

  • Meta-attributes provide special meta-information that cannot be obtained by other methods in the form of attribute access. For example, new.target, the keyword new is used as the context for attribute access. Obviously, new itself is not an object, so this feature is special. When new.target is used inside a constructor call (a function/method that is triggered by new), new becomes a virtual context, allowing new.target to point to the target constructor that called new.

  • Name is called toString(). Window.name is called toString to convert the value assigned to it to the corresponding string representation.

  • EventTarget. DispatchEvent = = to a specified target distributing a events

September 27, 2021

  • Iterators are designed to eliminate this complexity and reduce errors in loops.

  • All collection objects (arrays, sets, and maps) and strings are iterable. Symbol.iterator returns an iterator to the dependent object through the specified function

  • Business code familiarity

September 28, 2021

  • The node-sass language is lang= SCSS…
  • Requirements -> Three page message classification notifications -> Message list -> Message details all three are written
  • You don’t know js
  • Business writing

September 29, 2021

  • Offerset offset size Some size of the box relative to the parent element
  • Input events and animation frames are usually fired at about the same frequency so there is no need to use animation frames to trigger them
  • The ✅ symbol is used to create unique tokens that can then be used as non-string object attributes.
  • for… The IN statement iterates through the enumerable properties of an object except Symbol in any order. In essencefor ... inIs built to traverse object properties
  • Reduce function (Accumulator, currentValue, currentIndex, currentIndex)

September 30, 2021

  • Dom event recovery

  • Some cleanup listening can be done during component destruction (component when node is removed, such as V-if)

  • Declarative programming is about using/creating tools that are abstracted from implementation details. Therefore, you can focus on how to solve the problem.