Zayn Hao EryouHao

You should not use OOP (in javascript)

I've been coding javascript for some time now, including interacting with several javascript VMs.

Having said that, this is just a rant about what I think could be a good approach on how to actually do things in javascript. This after looking at how other projects are dealing with it, my personal experience and finally "getting" the way javascript was meant to be used (if there's such a thing). I do not consider myself an expert in javascript, so take whatever you read here with a grain of salt and think of it as just my personal experience and of course, I'll be happy to hear what you know or your best practices around it.

The real purpose for this post is to initiate a discussion about the subject of not really using OOP when dealing with javascript, and the good way to design and think about

People

`:bowtie:`	😄 `:smile:`	😆 `:laughing:`
😊 `:blush:`	😃 `:smiley:`	☺️ `:relaxed:`
😏 `:smirk:`	😍 `:heart_eyes:`	😘 `:kissing_heart:`
😚 `:kissing_closed_eyes:`	😳 `:flushed:`	😌 `:relieved:`
😆 `:satisfied:`	😁 `:grin:`	😉 `:wink:`
😜 `:stuck_out_tongue_winking_eye:`	😝 `:stuck_out_tongue_closed_eyes:`	😀 `:grinning:`
😗 `:kissing:`	😙 `:kissing_smiling_eyes:`	😛 `:stuck_out_tongue:`

	var parser = document.createElement('a');
	parser.href = "http://example.com:3000/pathname/?search=test#hash";

	parser.protocol; // => "http:"
	parser.hostname; // => "example.com"
	parser.port; // => "3000"
	parser.pathname; // => "/pathname/"
	parser.search; // => "?search=test"
	parser.hash; // => "#hash"
	parser.host; // => "example.com:3000"

	/**
	* Function to fix native charCodeAt()
	*
	* Now, we can use fixedCharCodeAt("foo€", 3); for multibyte (non-bmp) chars too.
	*
	* @access public
	* @see https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/charCodeAt
	* @note If you hit a non-bmp surrogate, the function will return false
	* @param str String Mixed string to get charcodes
	* @param idx Integer Position of the char to get

	# Thanks to this post:
	# http://blog.ikato.com/post/15675823000/how-to-install-consolas-font-on-mac-os-x

	$ brew install cabextract
	$ cd ~/Downloads
	$ mkdir consolas
	$ cd consolas
	$ curl -O http://download.microsoft.com/download/f/5/a/f5a3df76-d856-4a61-a6bd-722f52a5be26/PowerPointViewer.exe
	$ cabextract PowerPointViewer.exe
	$ cabextract ppviewer.cab

	var searchBox = new google.maps.places.SearchBox(document.getElementById('searchinput'));

	google.maps.event.addListener(searchBox, 'places_changed', function() {
	var place = searchBox.getPlaces()[0];

	if (!place.geometry) return;

	if (place.geometry.viewport) {
	map.fitBounds(place.geometry.viewport);
	} else {

	// Simulate a call to Dropbox or other service that can
	// return an image as an ArrayBuffer.
	var xhr = new XMLHttpRequest();

	// Use JSFiddle logo as a sample image to avoid complicating
	// this example with cross-domain issues.
	xhr.open( "GET", "http://fiddle.jshell.net/img/logo.png", true );

	// Ask for the result as an ArrayBuffer.
	xhr.responseType = "arraybuffer";

	<?xml version="1.0" encoding="UTF-8" ?>
	<opml version="1.0">
	<head>
	<title>寸志 subscriptions in Digg Reader</title>
	</head>
	<body>
	<outline text="Framer Blog" title="Framer Blog" type="rss" xmlUrl="http://framerjs.tumblr.com/rss" htmlUrl="http://framerjs.tumblr.com/" />
	<outline text="粉丝日志" title="粉丝日志" type="rss" xmlUrl="http://blog.fens.me/feed/" htmlUrl="http://blog.fens.me" />
	<outline text="AngularJS" title="AngularJS" type="rss" xmlUrl="http://blog.angularjs.org/feeds/posts/default" htmlUrl="http://blog.angularjs.org/" />
	<outline text="blog.izs.me" title="blog.izs.me" type="rss" xmlUrl="http://blog.izs.me/rss" htmlUrl="http://blog.izs.me/" />

	'use strict';

	// simple express server
	var express = require('express');
	var app = express();
	var router = express.Router();

	app.use(express.static('public'));
	app.get('/', function(req, res) {
	res.sendfile('./public/index.html');

	var autoElm = document.getElementById('elm-name');
	autocomplete = new google.maps.places.Autocomplete(autoElm);
	google.maps.event.addListener(autocomplete, 'place_changed', function () {
	var place = autocomplete.getPlace();
	if (!place.geometry) {
	return;
	}

	instance.setCenter(place.geometry.location);
	instance.setZoom(19);