Core Concepts

1. Scaffolding

Definition: In programming, scaffolding refers to automated tools that generate project structure and file templates, enabling developers to start coding efficiently. It also encompasses code generation techniques related to database access in MVC frameworks and project generation technologies supported by various tools.

2. Components

Components are encapsulated code blocks that implement specific functionality. They significantly improve code reusability by being importable and usable across projects. Different frameworks define and implement components differently:

• Vue.js: Components are reusable instances that can receive data through props
• React: Components can be JavaScript classes or functions
• General Concept: Components can be viewed as class combinations that conform to specific standards and provide particular functionality

---

Fundamental Technologies

1. HTML (HyperText Markup Language)

HTML provides the structural foundation for web pages:

• Basic Syntax: Understanding tags, elements, and attributes
• Semantic Tags: Using meaningful elements like <header>, <nav>, <article>, <section>, <footer>
• Forms: Creating interactive forms with various input types
• Tables: Building structured data displays
• Lists: Ordered (<ol>), unordered (<ul>), and definition lists (<dl>)
• Media: Embedding images, audio, and video content

2. CSS (Cascading Style Sheets)

CSS handles visual presentation:

• Selectors: Element, class, ID, attribute, and pseudo selectors
• Box Model: Content, padding, border, margin
• Positioning: Static, relative, absolute, fixed, and sticky positioning
• Flexbox: Modern layout system for one-dimensional layouts
• Grid: Two-dimensional layout system
• Transitions and Animations: Creating smooth visual effects
• Transforms: 2D and 3D transformations
• Gradients and Shadows: Enhancing visual appeal

3. JavaScript

Definition: JavaScript is a lightweight, interpreted (or JIT-compiled) programming language with first-class functions. It is prototype-based and multi-paradigm, supporting object-oriented, imperative, declarative, and functional programming styles. Originally developed for web pages, JavaScript now powers server-side applications through environments like Node.js. JavaScript enables complex functionality in web pages including interactive maps, animations, and video playback.

JavaScript Core Concepts

Variables

Variables are containers that store values. They are not the values themselves but rather named storage locations.

// Variable declaration and assignment
let count = 0;
const API_URL = 'https://api.example.com';
var legacyVariable = 'not recommended';

Data Types

Type	Description
Number	Numeric values (integers and decimals)
String	Textual data enclosed in quotes
Boolean	true or false
Undefined	Declared but unassigned variables
Null	Intentional absence of value
Object	Complex data structures
Symbol	Unique identifiers
BigInt	Large integers beyond Number.MAX_SAFE_INTEGER

Operators

• Arithmetic: +, -, *, /, %, **
• Comparison: ==, ===, !=, !==, >, <, >=, <=
• Logical: &&, ||, !
• Assignment: =, +=, -=, *=, /=

Control Flow

// Conditional statements
if (condition) {
    // executed when condition is true
} else if (anotherCondition) {
    // executed when first condition is false but this is true
} else {
    // executed when all conditions are false
}

// Switch statement
switch (value) {
    case 'option1':
        // handle option1
        break;
    case 'option2':
        // handle option2
        break;
    default:
        // handle default case
}

// Ternary operator
const result = condition ? 'yes' : 'no';

// Loops
for (let i = 0; i < array.length; i++) {
    console.log(array[i]);
}

while (condition) {
    // repeated execution
}

do {
    // executes at least once
} while (condition);

Arrays

Arrays store ordered collections of values:

const fruits = ['apple', 'banana', 'orange'];

// Common array methods
fruits.push('grape');      // Add to end
fruits.pop();              // Remove from end
fruits.shift();            // Remove from beginning
fruits.unshift('mango');   // Add to beginning
fruits.includes('banana'); // Check if contains
fruits.find(f => f.startsWith('a')); // Find first match
fruits.map(f => f.toUpperCase()); // Transform each element
fruits.filter(f => f.length > 5); // Filter elements
fruits.reduce((acc, f) => acc + f, ''); // Reduce to single value

Functions

Functions are reusable blocks of code:

// Function declaration
function greet(name) {
    return `Hello, ${name}!`;
}

// Arrow function
const add = (a, b) => a + b;

// Function with default parameters
function configure(options = {}) {
    const timeout = options.timeout || 3000;
    return timeout;
}

DOM (Document Object Model)

The DOM provides an interface for manipulating HTML and XML documents:

// Selecting elements
const element = document.getElementById('myId');
const elements = document.querySelectorAll('.classname');
const firstMatch = document.querySelector('.classname');

// Modifying content
element.textContent = 'New text';
element.innerHTML = '<span>HTML content</span>';

// Modifying styles
element.style.color = 'blue';
element.style.display = 'none';

// Creating elements
const newDiv = document.createElement('div');
newDiv.textContent = 'Created element';
document.body.appendChild(newDiv);

// Event handling
element.addEventListener('click', function(event) {
    console.log('Element clicked:', event.target);
});

BOM (Browser Object Model)

BOM provides access to browser window properties:

// Navigator
console.log(navigator.userAgent);
console.log(navigator.language);

// Location
console.log(window.location.href);
window.location.reload();

// History
history.back();
history.forward();
history.go(-1);

// Timers
const timeoutId = setTimeout(() => {
    console.log('Executed after delay');
}, 2000);

const intervalId = setInterval(() => {
    console.log('Repeats every second');
}, 1000);

clearInterval(intervalId);
clearTimeout(timeoutId);

Object-Oriented JavaScript

// Constructor function
function Person(name, age) {
    this.name = name;
    this.age = age;
}

Person.prototype.greet = function() {
    return `Hi, I'm ${this.name}`;
};

const person = new Person('Alice', 30);

// Class syntax (ES6+)
class Animal {
    constructor(name) {
        this.name = name;
    }
    
    speak() {
        console.log(`${this.name} makes a sound`);
    }
}

class Dog extends Animal {
    constructor(name, breed) {
        super(name);
        this.breed = breed;
    }
    
    speak() {
        console.log(`${this.name} barks`);
    }
}

const dog = new Dog('Rex', 'German Shepherd');

---

Modern JavaScript Frameworks

Vue 3

Vue 3 is a progressive JavaScript framework for building user interfaces. Its goal is to achieve responsive data binding and composable view components through a simple API. Vue 3 introduces the Composition API, making logic reuse more straightforward.

Each Vue component is an independent Vue instance with its own template, data, methods, and lifecycle hooks, allowing self-contained functionality and style management.

<template>
  <div class="counter">
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const count = ref(0);

function increment() {
  count.value++;
}
</script>

<style scoped>
.counter {
  text-align: center;
}
</style>

uniapp

uniapp is a Vue.js-based multi-platform development framework that allows developers to write code once and deploy it across iOS, Android, Web (H5), WeChat Mini Programs, Alipay Mini Programs, Baidu Mini Programs, and other platforms.

Project Structure:

├── uniCloud/          # Cloud space directory
├── components/        # Reusable Vue components
├── pages/             # Application pages
│   └── index/
│       └── index.vue
├── static/            # Local static resources
├── uni_modules/       # Uni modules
├── platforms/         # Platform-specific code
├── nativeplugins/     # Native plugins
├── hybrid/            # Local HTML files
├── wxcomponents/      # Mini program components
├── main.js            # Application entry
├── App.vue            # Global app configuration
├── pages.json         # Page routing and navigation
└── manifest.json      # App packaging configuration

---

UI Component Libraries

uView

uView is a UI framework specifically designed for the uni-app ecosystem. The name derives from "uni-app" while expressing its foundation in Vue.js, making it the most popular UI framework for uni-app development.

---

Network Requests

Axios

Axios is a promise-based HTTP library for both browsers and Node.js, suitable for making network requests:

import axios from 'axios';

// GET request
axios.get('/api/users')
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

// POST request
axios.post('/api/users', {
    name: 'John',
    email: 'john@example.com'
})
  .then(response => console.log(response.data));

// Using async/await
async function fetchData() {
    try {
        const response = await axios.get('/api/data');
        return response.data;
    } catch (error) {
        console.error('Error:', error);
    }
}

---

Build Tools

Vite

Vite is a modern build tool that provides an extremely fast development environment. It leverages native ES modules and offers instant server start and hot module replacement (HMR).

---

Common Interview Questions

1. Differences Between let, const, and var

Feature	var	let	const
Scope	Function scope	Block scope	Block scope
Hoisting	Yes (initialized as undefined)	Yes (temporal dead zone)	Yes (temporal dead zone)
Redeclaration	Allowed	Not allowed	Not allowed
Reassignment	Allowed	Allowed	Not allowed

2. JavaScript Data Types

• Primitive Types: Number, String, Boolean, Undefined, Null, Symbol, BigInt
• Reference Types: Object (including Arrays, Functions, Dates)

3. DOM vs BOM

DOM (Document Object Model): A programming interface for HTML and XML documents that allows programs to dynamically access, modify, and manipulate document content, structure, and style.

BOM (Browser Object Model): Provides properties and methods to control the browser itself, such as managing browser windows or frames.

4. CSS Selector Priority (Highest to Lowest)

1. Inline styles (specificity: 1000)
2. ID selectors (specificity: 100)
3. Class and pseudo-class selectors (specificity: 10)
4. Element and pseudo-element selectors (specificity: 1)

5. Child Selectors vs Descendant Selectors

• Child Selector (>): Selects only direct children of an element
• Descendant Selector (space): Selects all descendants including grandchildren

6. jQuery

jQuery is a JavaScript library created in 2006 that simplifies DOM manipulation, event handling, AJAX requests, and animations. Based on the principle of "write less, do more," it makes HTML document traversal, event handling, and adding animations to web pages straightforward.

---

Array Operations

Merging Arrays

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];

// Using spread operator
const merged = [...array1, ...array2];

// Using concat
const concatenated = array1.concat(array2);

Extracting Array Portion

const sourceArray = [1, 2, 3, 4, 5];
const extracted = sourceArray.slice(1, 4); // Returns [2, 3, 4]

Iterating Over JSON Objects

const data = {
    name: 'John',
    age: 30,
    city: 'New York'
};

// Using for...in
for (const key in data) {
    console.log(`${key}: ${data[key]}`);
}

// Using Object.entries
Object.entries(data).forEach(([key, value]) => {
    console.log(`${key}: ${value}`);
});

// Using Object.keys
Object.keys(data).forEach(key => {
    console.log(`${key}: ${data[key]}`);
});