DOCSEARCHbyAlgolia
Submit Docs

namewyf's Technical Notes and Interview Guides

website·Indexed 30 days ago

https://namewyf.github.io

A collection of technical documentation and study notes focusing on frontend development, including LeetCode algorithm solutions, Vue3 and Koa administration project guides, frontend interview preparation (eight-part essays), Git operation manuals, and MySQL concurrency control experiments.

Tokens
13.3K
Snippets
58
Records
87
Agent score
75%

What's inside namewyf Notes

  1. Implement JWT-based authentication for cross-domain requests

    JWT (JSON Web Token) is used as a cross-domain authentication solution that does not rely on cookies. After login, the client stores a token and sends it in the Authorization header of every request. This approach is more efficient for clusters and Single Sign-On (SSO) compared to traditional session-based authentication.
    // Frontend request with JWT
fetch('http://api.example.com/data', {
  headers: {
    'Authorization': `Bearer ${token}`
  }
})

  2. Understanding Frontend Engineering (前端工程化)

    Frontend engineering is the application of software engineering methods and principles to frontend development to improve efficiency, code quality, maintainability, and team collaboration. It focuses on the process, aiming to reduce costs and increase efficiency across the entire lifecycle—from development and testing to release and deployment—through standardization, automation, and formalized workflows.

  4. Create a recursive dynamic menu with Element Plus

    To implement a multi-level navigation menu, create a recursive component (e.g., TreeMenu) that iterates over a menu array. Use el-sub-menu for items with children and el-menu-item for leaf nodes. When defining props for arrays or objects in Vue, use a factory function for the default value to avoid shared references across component instances.
    <template v-for="menu in userMenu">
    <el-sub-menu v-if="menu.children && menu.children.length > 0 && menu.children[0].menuType == 1" 
        :key="menu._id" :index="menu.path">
        <template #title>
            <el-icon><setting /></el-icon>
            <span>{{ menu.menuName }}</span>
        </template>
        <tree-menu :userMenu="menu.children" />
    </el-sub-menu>
    <el-menu-item v-else-if="menu.menuType == 1" :index="menu.path" :key="`item-${menu._id}">
        {{ menu.menuName }}
    </el-menu-item>
</template>

<script>
export default {
    props: {
        userMenu: {
            type: Array,
            default() { return [] }
        }
    }
}
</script>

  5. Disable reactivity for large data objects using Object.freeze()

    When dealing with large data objects that do not need to be reactive (i.e., their values will not change or do not need to trigger UI updates), use Object.freeze(). This prevents Vue from converting the object into a reactive proxy, reducing memory and CPU overhead.
    const largeData = {
  /* Large data object */
};

// Prevent Vue from making this object reactive
this.largeData = Object.freeze(largeData);

  7. Remove tracked files from remote repository after updating .gitignore

    When files are committed to a Git repository before a .gitignore file is created, Git continues to track them even after they are added to .gitignore. To stop tracking these files while keeping them on your local machine, you must clear the Git index (cache) and then commit the changes.
    # 1. Update your .gitignore file with the patterns you want to ignore

# 2. Remove everything from the Git index (this does not delete local files)
git rm -r --cached .

# 3. Re-add files (Git will now respect the updated .gitignore)
git add .
git commit -m "Update .gitignore and remove ignored files from remote"
git push

  8. Create a namespaced LocalStorage wrapper

    Since localStorage only stores strings, a wrapper is used to serialize objects using JSON.stringify() and deserialize them using JSON.parse(). Using a namespace prevents key collisions between different applications on the same domain.
    import config from "../config";
export default {
    setItem(key, val) {
        let storage = this.getStorage()
        storage[key] = val
        window.localStorage.setItem(config.namespace, JSON.stringify(storage));
    },
    getItem(key) {
        return this.getStorage()[key]
    },
    getStorage() {
        return JSON.parse(window.localStorage.getItem(config.namespace) || '{}')
    },
    clearItem(key) {
        let storage = this.getStorage()
        delete storage[key]
        window.localStorage.setItem(config.namespace, JSON.stringify(storage));
    },
    clearAll() {
        window.localStorage.clear()
    }
}

  9. Follow Git commit message conventions

    Use the following prefixes in Git commit messages to categorize changes and maintain a clean project history:

    • feat: New features or new functionality
    • fix: Bug fixes
    • perf: Code changes that improve performance
    • refactor: Code restructuring that does not change internal behavior or functionality
    • docs: Documentation changes
    • style: Formatting changes (e.g., missing semi-colons) that do not affect the meaning of the code (not CSS changes)
    • test: Adding or modifying test cases
    • build: Changes affecting the build system or external dependencies
    • revert: Reverting a previous commit
    • ci: Changes to continuous integration configuration files
    • chore: Other changes that do not fit into the above categories
    • release: New version releases
    • workflow: Changes to workflow-related files
    git commit -m "feat: add user authentication logic"
git commit -m "fix: resolve memory leak in data processor"
git commit -m "docs: update API installation guide"