Backbone Model

hardcodingJavaScriptClassesDesign PatternsEvents~45 min

Asked at Meta, Google

Overview

Implement a Model class:

get(attr) — returns attribute value
set(attr, value) — sets attribute and emits change:attr if different
on(event, handler) — listen for events
off(event, handler) — remove listener

Examples

const m = new Model({ name: 'Alice' });
m.on('change:name', (val) => console.log(val));
m.set('name', 'Bob'); // logs 'Bob'
m.get('name'); // 'Bob'

Solution

Reveal solution

class Model {
  constructor(attrs = {}) {
    this._attrs = { ...attrs };
    this._events = {};
  }
  get(attr) { return this._attrs[attr]; }
  set(attr, value) {
    const old = this._attrs[attr];
    this._attrs[attr] = value;
    if (old !== value) {
      const handlers = this._events['change:' + attr] || [];
      handlers.forEach(h => h(value, old));
    }
  }
  on(event, handler) {
    if (!this._events[event]) this._events[event] = [];
    this._events[event].push(handler);
  }
  off(event, handler) {
    if (this._events[event]) this._events[event] = this._events[event].filter(h => h !== handler);
  }
}

backbone-model.js

Backbone Model

hardcodingJavaScriptClasses

Overview

Implement a Model class:

get(attr) — returns attribute value
set(attr, value) — sets attribute and emits change:attr if different
on(event, handler) — listen for events
off(event, handler) — remove listener

Examples

const m = new Model({ name: 'Alice' });
m.on('change:name', (val) => console.log(val));
m.set('name', 'Bob'); // logs 'Bob'
m.get('name'); // 'Bob'

Solution

Reveal solution

class Model {
  constructor(attrs = {}) {
    this._attrs = { ...attrs };
    this._events = {};
  }
  get(attr) { return this._attrs[attr]; }
  set(attr, value) {
    const old = this._attrs[attr];
    this._attrs[attr] = value;
    if (old !== value) {
      const handlers = this._events['change:' + attr] || [];
      handlers.forEach(h => h(value, old));
    }
  }
  on(event, handler) {
    if (!this._events[event]) this._events[event] = [];
    this._events[event].push(handler);
  }
  off(event, handler) {
    if (this._events[event]) this._events[event] = this._events[event].filter(h => h !== handler);
  }
}

NameTopicDifficulty

Add BinaryAlgorithmseasy Balanced Binary TreeAlgorithmseasy Balanced BracketsAlgorithmseasy Binary SearchAlgorithmseasy Binary Search Tree Lowest Common AncestorAlgorithmseasy Binary Tree Maximum DepthAlgorithmseasy Binary Tree SubtreeAlgorithmseasy Bit CountingAlgorithmseasy Bit ReversalAlgorithmseasy Count Set Bits in a Binary NumberAlgorithmseasy Diameter of Binary TreeAlgorithmseasy Find Duplicates in ArrayAlgorithmseasy First Bad VersionAlgorithmseasy Flip Binary TreeAlgorithmseasy Flood FillAlgorithmseasy Linked List Detect CycleAlgorithmseasy Linked List ReversalAlgorithmseasy Linked Lists Combine Two SortedAlgorithmseasy Longest PalindromeAlgorithmseasy Middle of the Linked ListAlgorithmseasy Most Common ElementsAlgorithmseasy Optimal Stock TradingAlgorithmseasy Pair SumAlgorithmseasy Ransom NoteAlgorithmseasy Staircase Climbing CombinationsAlgorithmseasy String AnagramAlgorithmseasy String PalindromeAlgorithmseasy 01 MatrixAlgorithmsmedium Accounts MergeAlgorithmsmedium Array Product Excluding CurrentAlgorithmsmedium Binary Search Tree Kth Smallest ElementAlgorithmsmedium Binary Tree Level Order TraversalAlgorithmsmedium Binary Tree Rebuilding from Preorder and Inorder TraversalsAlgorithmsmedium Binary Tree Right Side ViewAlgorithmsmedium Combinations for Target SumAlgorithmsmedium Count Islands in a GridAlgorithmsmedium Course DependencyAlgorithmsmedium Decode MessageAlgorithmsmedium Disjoint IntervalsAlgorithmsmedium Distinct Paths in GridAlgorithmsmedium Evaluate Reverse Polish NotationAlgorithmsmedium Find All Anagrams in a StringAlgorithmsmedium Find Element in Rotated ArrayAlgorithmsmedium Find the Longest Palindromic SubstringAlgorithmsmedium Find Word in GridAlgorithmsmedium Graph CloneAlgorithmsmedium Graph Count Connected ComponentsAlgorithmsmedium Is the Graph a TreeAlgorithmsmedium K Closest Points to OriginAlgorithmsmedium Letter Combinations of a Phone NumberAlgorithmsmedium Longest Increasing SubsequenceAlgorithmsmedium Longest Non-repeating SubstringAlgorithmsmedium Longest Repeating Substring After ReplacementsAlgorithmsmedium Lowest Common Ancestor of a Binary TreeAlgorithmsmedium Matrix RotationAlgorithmsmedium Matrix Spiral TraversalAlgorithmsmedium Matrix ZeroingAlgorithmsmedium Maximum Sum in Contiguous ArrayAlgorithmsmedium Maximum Water Trapped Between WallsAlgorithmsmedium Merge New IntervalAlgorithmsmedium Merge Overlapping IntervalsAlgorithmsmedium Minimum Coins for ChangeAlgorithmsmedium Minimum Height TreesAlgorithmsmedium Palindromic SubstringsAlgorithmsmedium Partition Equal Subset SumAlgorithmsmedium PermutationsAlgorithmsmedium Rotting OrangesAlgorithmsmedium Segment WordsAlgorithmsmedium Sort ColorsAlgorithmsmedium String Anagram GroupsAlgorithmsmedium String to Integer (atoi)Algorithmsmedium SubsetsAlgorithmsmedium Sum Without AdditionAlgorithmsmedium Task CoordinationAlgorithmsmedium Trie (Prefix Tree)Algorithmsmedium Triplet SumAlgorithmsmedium Validate Binary Search TreeAlgorithmsmedium Basic CalculatorAlgorithmshard Binary Tree EqualAlgorithmshard Binary Tree Maximum Total PathAlgorithmshard Delete Nth Node from End of Linked ListAlgorithmshard End of Array ReachableAlgorithmshard Extraterrestrial LanguageAlgorithmshard Find Missing Number in SequenceAlgorithmshard Find Words in GridAlgorithmshard Largest Rectangle in HistogramAlgorithmshard Linked Lists Combine K SortedAlgorithmshard Longest Common SubsequenceAlgorithmshard Longest Consecutive Number SequenceAlgorithmshard Maximum Product in Contiguous ArrayAlgorithmshard Maximum Profit in Job SchedulingAlgorithmshard Meeting CalendarAlgorithmshard Minimum Meeting Rooms NeededAlgorithmshard Neighborhood TheftAlgorithmshard Neighborhood Theft (Circular)Algorithmshard Number Stream MedianAlgorithmshard Ocean FlowAlgorithmshard Rearrange Linked ListAlgorithmshard Shortest Substring Containing CharactersAlgorithmshard Smallest Element in Rotated Sorted ArrayAlgorithmshard Trapping Rain WaterAlgorithmshard Word FinderAlgorithmshard Word LadderAlgorithmshard

103 of 103 problems