waqashassan98

The Revealing Module Pattern in Javascript

Zach Caceres

Javascript does not have the typical 'private' and 'public' specifiers of more traditional object oriented languages like C# or Java. However, you can achieve the same effect through the clever application of Javascript's function-level scoping. The Revealing Module pattern is a design pattern for Javascript applications that elegantly solves this problem.

The central principle of the Revealing Module pattern is that all functionality and variables should be hidden unless deliberately exposed.

Let's imagine we have a music application where a musicPlayer.js file handles much of our user's experience. We need to access some methods, but shouldn't be able to mess with other methods or variables.

Using Function Scope to Create Public and Private Methods

waqashassan98

<?php
function get_post_count( $post_status = 'publish' ) {
    $cache_key = 'post_count_'. $post_status;
    $_posts = wp_cache_get( $cache_key );
    if ( false === $_posts ) {
        $_posts = $wpdb->get_var(
                    $wpdb->prepare(
                        "SELECT COUNT(*) FROM $wpdb->posts WHERE post_type = 'post' AND post_status = %s",
                        $post_status
                    ));

waqashassan98

.class_checkbox {
    display:none;
}

.class_checkbox + label:before{
    background:url('/img/checkbox.png') no-repeat;
    width: 42px!important;
    height: 43px!important;

waqashassan98

<?php

    //src: https://www.php.net/manual/en/function.spl-autoload-register.php
    // Example to auto-load class files from multiple directories using the SPL_AUTOLOAD_REGISTER method.
    // It auto-loads any file it finds starting with class.<classname>.php (LOWERCASE), eg: class.from.php, class.db.php
    spl_autoload_register(function($class_name) {

        // Define an array of directories in the order of their priority to iterate through.
        $dirs = array(
            'project/', // Project specific classes (+Core Overrides)

waqashassan98

<!-- Style -->
<style>
#y_video_container{
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}
#y_video_container>iframe{
     position: absolute;

waqashassan98

<?php

/**
 * This function assumes that "fedex_is_insured" filter is enabled
 * in WooCommerce Fedex Plugin. This was manually added by me by altering the Fedex plugin code.
 * $this->insure_contents = apply_filters( 'fedex_is_insured', $this->insure_contents);
 */
function nb_update_insurance_for_fedex(){
    $insurance = WC()->session->get( 'nb_insurance' );   
    if ( "1" == $insurance ) {

waqashassan98

<?php

/**
 * Add checkbox field to the checkout
 **/
add_action('woocommerce_after_order_notes', 'my_custom_checkout_field');
 
function my_custom_checkout_field( $checkout ) {
 
    echo '<div id="my-new-field"><h3>'.__('My Checkbox: ').'</h3>';

waqashassan98

/*
NPM Setup
npm init
npm install -g gulp
npm install --save-dev gulp
npm install jshint gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-rename --save-dev
*/


// Include gulp

waqashassan98

/*
 * This is an abbreviated "ES5" script (though it has some ES6 language, just not JSX, or dependencies on npm)
 * demonstrating how to get the WordPress "Gutenberg" SelectControl to allow dynamic options.
 *
 * It probably isn't elegant, but neither am I...I included more context than may be necessary.
 *
 * (SelectControl pukes on dynamic options because it completely dies, never to be seen again, if it
 * is sent an empty options array. This prevents that with a placeholder until your results come back.)
 */

waqashassan98

// Get helper functions from global scope
const { registerBlockType } = window.wp.blocks;
const { __ } = window.wp.i18n;

// Use registerBlockType to create a custom block
registerBlockType(
  'example-plugin/example-custom-block',
  {
    // Localize title using wp.i18n.__()
    title: __( 'Block Title' ),