Vuex — это паттерн управления состоянием и библиотека для приложений на Vue.js. Он служит центральным хранилищем данных для всех компонентов приложения и обеспечивает предсказуемость изменения данных при помощи определённых правил.

Gett­ers

Функции возвращающие значения из store. Используйте их, когда над значениями в store надо произвести какие то действия прежде чем передать их вызвавшему. (Вы так же можете считывать напрямую.)

Muta­tions

Функции которые коммитят изменения в store. Могут быть использованы для пред-обработки значений перед сохранением. Вы так же можете изменять state напрямую

Acti­ons

Функции похожие на мутации. исключая коммиты данных во время асинхронных таксов. Они не являются обязательными, но вы должны привыкнуть использовать их всякий раз, когда присутствуют мутации.

Жизненный цикл Vuex (Life Cycle)

пример использования Getters

<template>
     <div>
        <div>Value = {{ getMyProperty }}</div>
        <div>Value = {{ getStoredProp }}</div>
    </div>
</template>

<script>
    import { mapGetters } from 'vuex';
    export default {
        computed: {
            ...mapGetters([
                'getMyProperty'
            ]),
            // or, without helper...
            getStoredProp: () => {
                  return this.$store.getters.getMyProperty;
            }
        }
    }
</script>

пример использования Mutations

<template>
    <div>
        <button @click="setMyProperty(22)">Set to 22</button>
        <button @click="setThatProp(0)">Reset to 0</button>
    </div>
</template>

<script>
    import { mapMutations } from 'vuex';
    export default {
        methods: {
            ...mapMutations([
                'setMyProperty'
            ]),
            // Or without helper...
            setThatProp( value ) {
                this.$store.commit( 'setMyProperty', value );
            }
        }
    }
</script>

пример использования Actions

<template>
    <div>
        <button @click="doChangeMyProperty(5)">Change me to 5</button>
    </div>
</template>

<script>
    import {mapActions} from 'vuex';
    export default {
        methods: {
            ...mapActions([
                'doAsyncChangeMyProperty',
            ]),
            // Or without helper...
            doThatThing( value ) {
                this.$store.dispatch('doAsyncChangeMyProperty', value);
            }
        }
    }
</script>

двусторонний биндинг

<template>
    <div>
        <input type="text" v-model="my_property"/>
        {{ my_property }}
    </div>
</template>

<script>
    export default {
        computed: {
            my_property: {
                get() {
                    return this.$state.getters.my_property;
                },
                set( value ) {
                    this.$state.dispatch('setMyProperty', value);
                }
            }
        }
    }
</script>

On Store Object

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export const store = new Vuex.Store({
    state: {
        my_property: 47
    },
    getters: {
        getMyProperty: state => {
            return state.my_property;
        }
    },
    mutations: {
        setMyProperty: ( state, payload ) => {
            state.my_property = payload;
        }
    },
    actions: {
        doChangeMyProperty: ( context, payload ) => {
            context.commit('setMyProperty', payload);
        },
        doAsyncChangeMyProperty: ( { commit }, payload ) => {
            // Using a timeout, but any async operation can go here
            setTimeout(function () {
                commit('setMyProperty', payload);
            }, 1000);

        }
    }
});

On Modules

const moduleA = {
    state: { ... },
    mutations: { ... },
    actions: { ... },
    getters: { ... }
}

const moduleB = {
    state: { ... },
    mutations: { ... },
    actions: { ... }
}

const store = new Vuex.Store({
    modules: {
        a: moduleA,
        b: moduleB
    }
})


store.state.a // moduleA's state
store.state.b // moduleB's state

fetch("/api/v1/periodic/")
                 .then((response) => response.json())
                 .then((responseJson) => {
                     this.list = responseJson.elements;
                     this.state = {
                        displayedElements: responseJson.elements,
                        elements: responseJson.elements
                     };
                     this.setState(this.state);
                     return responseJson.elements;
                })
                .catch((error) => {
                  console.error(error);
                });

$(document).ready(function(){
console.info("document is ready");
});

Нативный Аналог

document.addEventListener("DOMContentLoaded", function(){
console.info("document is ready");
});

class Utils {
 static isArray(value) {
  return value && typeof value === 'object' && value.constructor === Array;
 }
}

function extend(Child, Parent) {
    var F = function() { }
    F.prototype = Parent.prototype;
    Child.prototype = new F();
    Child.prototype.constructor = Child;
    Child.superclass = Parent.prototype;
}

function Box(){
  console.log("constructor");
}

Box.prototype.show = function(){
  console.log("show();");
};

function IconBox(){
  //IconBox.superclass.constructor();
  console.log("constructor IconBox");
};


//extend(IconBox,Box);
//IconBox.prototype = Object.create(Box.prototype);

IconBox.prototype = new Box();

var box = new IconBox();

box.show();

Синтаксис

class ClassName{
    constructor(){
        this.item = 1;
        this.name = "Name of Something";
        this.arParams = [];
        this.params = {};
    }

    methodName(){
       return 1;
    }

};

Применение

var arItems = [];
arItems.push( new ClassName()); // добавляем к массиву уже новый экземпляр класса

Перед тем как будем использовать фантом его надо запустить как демона

phantomjs --webdriver=4444 > /dev/null &

На данном этапе в интернете есть примеры, но все они довольно однобоки.
Наша же цель автоматизировать «функциональное» тестирование.
В кавычки взято потому что под функциональным тестированием в данном случае понимаем Acceptance (приёмочные) тесты

аля Hello world!

console.log("Hello from PhantomJS");
console.log("\t\t adeveloper");

phantom.exit(0);

тест страницы сайта

var page = require('webpage').create();
var config =  {
    url:"http://shop.dev:8888/",
    screenshotName:"shopdev.png",
    viewportSize:{width:1024,height:768}
};

//> размер экрана для скриншота
page.viewportSize = config.viewportSize;


page.open(config.url, function() {
    console.log("connected to :\t"+config.url);
    page.render(config.screenshotName);
    console.log("rendered screenshot :\t"+config.screenshotName);
    phantom.exit(0);
});

я познакомился с BEM в июне 2015 в проекте stmegi.com.

В чем разница между БЭМ и Bootstrap?

В терминах БЭМ Bootstrap — это набор сверстанных блоков. БЭМ — не библиотека элементов интерфейса, а методология, позволяющая:
создавать архитектуру проекта;
разрабатывать веб-приложения независимыми блоками;
упрощать поддержку проектов.

Библиотека блоков, сделанных на БЭМ — bem-components. Существуют также и другие БЭМ-библиотеки.

памятка

имя-блока__имя-элемента_имя-модификатора
имя-блока_имя-модификатора

Виталий Харисов — История создания БЭМ

проба пера с ангуляром

1. AngularJS: первое знакомство

Контроллеры (Controller)

<html ng-app="ngApp">
// ...
<div class="row row-content" ng-controller="nameController">
</div>
// ...

</html>

Область видимости контроллера распространяется на тот узел DOM в котором он задекларирован

Ошибка Uncaught ReferenceError: BX is not defined

Решение

• Вариант 1
  В header.php подключаем ядро BX следующей строчкой

CJSCore::Init();

«Классы» или объекты в JavaScript описываются функцией конструктором

// функция конструктор
function JSInfo(){
       if(!(this instanceof JSInfo){
            return new JSInfo();
       }
       this.description = "Тренировочный класс-пример.";
}

Метод связывается с классом

JSInfo.prototype.method_name = function(){ console.info(this.description); }

Инициализация экземпляра класса

var m = JSInfo();

Вызов метода класса

var m = JSInfo();
m.method_name();

Ссылки по теме:

Javascript ООП

html-редактор

КНОПКА ВСТАВКИ КОДА И ЦИТАТЫ В НОВОМ ВИЗУАЛЬНОМ РЕДАКТОРЕ БИТРИКС

Emerge — система управления загрузкой веб-страниц.

При открытии обычной страницы картинки появляются в случайном порядке, неряшливо мелькая. Продвинутые разработчики управляют загрузкой с помощью скриптов. Emerge упрощает задачу, снимая необходимость в программировании. В системе используется декларативный подход, то есть для каждого элемента прописывается желаемое поведение, а система сама обеспечивает его реализацию.

Emerge использует Jquery.

Статья об Emerge

Я сервисы использую ка модели в которые помещаю методы получения данных от сервера

/**
 * Created by adeveloper on 04.03.17.
 */
app.service('NetApi',function($http){

    this.baseUrl = null;

    this.setBaseUrl = function ($base) {
        this.baseUrl = $base;
    };

    this.getByUrl = function ($url, $handler) {

        var $params = [];
        
        var req = {
            method: 'POST',
            url: this.baseUrl+$url,
            headers: {
                'Content-Type': undefined
            },
            data: $params
        };

        return $http(req).success($handler);
    }
});

Использование

NetApi.setBaseUrl("/api/v1/calc/");
            NetApi.getByUrl("?",function (answer, status) {
               console.info(answer);
            });