Elior Boukhobza @mallowigi Front End Developer at Dynamic Yield
yes
function correctPNG(){
// correct transparence png
...
}
function nw_links_simul(){
// simule attribut target pour ouvrir nouvel onglet
...
}
function labels_for_IE(){
// outline blue woohoo
}
function focus_fields(){
// focus les champs
}
function ie5_homePage(obj) {
// support for ie5
}
function mover_newsicon(n,soft_mode){
...
}
© My first website, all rights reserved
...this is usually okay for simple portfolio websites, landing pages with little to no interaction
// Enclose the script in a local scope (AKA IIFE)
(function ($) {
// Wait until DOM is loaded
$(document).ready(function () {
// 'app' namespace
window.app = window.app || {};
// Declares a new module
window.app.myModule = {};
});
}(window.jQuery)); // Specifically require the dependency jQuery
var basketModule = (function () {
// Private functions and variables
var basket = [1, 2, 3];
function getSum() {
return basket.reduce(function(acc, el) { return acc + el }, 0);
}
// This is the module that is 'revealed'
return {
addItem: function(values) {
basket.push(values);
},
getItemCount: function() {
return basket.length;
},
getTotal: function(){
var newBasket = basket.map(function(el) { return Number(el) });
return getSum(newBasket); //private function
}
}
}());
console.log(basketModule.basket); //undefined
console.log(basketModule.getTotal()); // 6
console.log(getSum()); // ReferenceError
// Usage
var app = (function (root) {
// Import the dependencies from inside the root namespace
var basketModule = root.basketModule,
cartModule = root.cartModule;
return {
run: function () { ... }
}
}(this)); // this can be window (browser), global (nodeJS/browserify)...
// ensure that all deps are loaded before running
setTimeout(function() {
app.run();
}, 0);
RequireJS
AngularJS modules
// Create a "requireable module" that requires two dependencies
define('myModule', ['foo', 'bar'], function ( foo, bar ) {
// The last parameter of the define must be the function that creates the module
// The function will be "injected" the dependencies as parameters
// in the order they are required
var myModule = {
doStuff: function(){
console.log(foo.doStuff());
}
}
return myModule;
});
// Require is for using the deps without creating a new module
require(['foo', 'bar'], function (foo, bar) {
console.log(foo.doStuff());
// Finally, require can also be used within a require/define block
// For example, for dynamic dependencies
var dep = require(bar.getDep());
});
// Export jQuery for requireJS
define.amd = {
//supports multiple jQuery versions
jQuery: true
};
// lib is a dependency installed via npm
var lib = require("lib");
// behaviour for our module
function foo(){
lib.log( "hello world!" );
}
function bar() {
lib.log("I am private!");
}
// Only export necessary members
exports.foo = foo;
// In another file
// Require a file from the current directory
var foo = require('./foo');
// Other syntax: module.exports
module.exports = {
init: function() {
foo();
}
};
(function (root, Library) {
// The square bracket notation is used to avoid property munging by the Closure Compiler.
if (typeof define == "function" && typeof define["amd"] =="object" && define["amd"]) {
// Export for asynchronous module loaders (e.g., RequireJS, `curl.js`).
define(["exports"], Library);
}
else {
// Export for CommonJS environments, web browsers, and JavaScript engines.
Library = Library(typeof exports == "object" && exports|| (root["Library"] = {
"noConflict": (function (original) {
function noConflict() {
root["Library"] = original;
// `noConflict` can't be invoked more than once.
delete Library.noConflict;
return Library;
}
return noConflict;
})(root["Library"])
}));
}
})(this, function (exports) {
// module code here
return exports;
});
(not the University of Maryland)
Problem: Tries to define a standard by compromising between the two solutions, which means more overhead and more error-prone
Solution: Use ES Modules, the de facto standard
(I have no joke for that)
// Export public members
export const sqrt = Math.sqrt;
export function square(x) {
return x * x;
}
export function diag(x, y) {
return sqrt(square(x) + square(y));
}
// import syntax: square is not loaded until use
import { square, diag } from 'lib';
console.log(square(11)); // 121
console.log(diag(4, 3)); // 5
// Import default bindings
import React from 'react';
// Import all bindings
import * from 'material-ui';
// Like module.exports: default export
export default class ChannelList extends React.Component {
constructor (props) {
super(props);
}
// ...
}
Motivation: Allow using modules in the browser
// Example using angular1
import angular from 'angular';
import dep1 from './services/dep1';
import dep2 from './services/dep2';
import MainController from './controllers/MainController';
angular.module('myApp')
.service(['$http', dep1])
.service(['dep1', dep2])
.controller(['dep1', 'dep2', MainController]);
Example: Angular 1
// Example using commonJS
var angular = require('angular');
var _ = require('lodash');
// Global imports
import {App, Platform} from 'ionic-framework/ionic';
import {IonicApp} from "ionic-framework/ionic";
// Component import
import {HomePage} from '../homepage/homepage';
// Here I'm importing html and scss
// The transformation is done inside webpack.config.js
const appView = require('./tabsPage.html');
const appStyles = require('./tabsPage.scss');
@Page({
template: appView,
styles: [appStyles]
})
export class TabsPage {
public tab1Root;
public app:IonicApp;
constructor(app:IonicApp) {
// this tells the tabs component which Pages
// should be each tab's root Page
this.tab1Root = HomePage;
this.app = app;
}
}
Example: Angular 2
Javascript design patterns:
http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/
ESNext Modules:
http://exploringjs.com/es6/ch_modules.html
Require.JS:
http://javascriptplayground.com/blog/2012/07/requirejs-amd-tutorial-introduction/
Browserify:
https://scotch.io/tutorials/getting-started-with-browserify
Webpack and Angular2:
https://angularclass.github.io/angular2-webpack-starter/