Javascript
Vuex
Vuex — это паттерн управления состоянием и библиотека для приложений на Vue.js. Он служит центральным хранилищем данных для всех компонентов приложения и обеспечивает предсказуемость изменения данных при помощи определённых правил.
Getters
Функции возвращающие значения из store. Используйте их, когда над значениями в store надо произвести какие то действия прежде чем передать их вызвавшему. (Вы так же можете считывать напрямую.)
Mutations
Функции которые коммитят изменения в store. Могут быть использованы для пред-обработки значений перед сохранением. Вы так же можете изменять state напрямую
Actions
Функции похожие на мутации. исключая коммиты данных во время асинхронных таксов. Они не являются обязательными, но вы должны привыкнуть использовать их всякий раз, когда присутствуют мутации.
Жизненный цикл 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
React JS fetch from api
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 native JS
$(document).ready(function(){ console.info("document is ready"); });
Нативный Аналог
document.addEventListener("DOMContentLoaded", function(){ console.info("document is ready"); });
isArray
class Utils { static isArray(value) { return value && typeof value === 'object' && value.constructor === Array; } }
Javascript: Наследование
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();
JavaScript: Синтаксис классов
Синтаксис
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: примеры
Перед тем как будем использовать фантом его надо запустить как демона
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
я познакомился с BEM в июне 2015 в проекте stmegi.com.
В чем разница между БЭМ и Bootstrap?
В терминах БЭМ Bootstrap — это набор сверстанных блоков. БЭМ — не библиотека элементов интерфейса, а методология, позволяющая:
создавать архитектуру проекта;
разрабатывать веб-приложения независимыми блоками;
упрощать поддержку проектов.
Библиотека блоков, сделанных на БЭМ — bem-components. Существуют также и другие БЭМ-библиотеки.
памятка
имя-блока__имя-элемента_имя-модификатора имя-блока_имя-модификатора
AngularJS: Контроллеры
проба пера с ангуляром
Контроллеры (Controller)
<html ng-app="ngApp"> // ... <div class="row row-content" ng-controller="nameController"> </div> // ... </html>
Область видимости контроллера распространяется на тот узел DOM в котором он задекларирован
Uncaught ReferenceError: BX is not defined
Ошибка Uncaught ReferenceError: BX is not defined
Решение
- Вариант 1
В header.php подключаем ядро BX следующей строчкой
CJSCore::Init();
Javascript: Класс (Объект)
«Классы» или объекты в 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();
Ссылки по теме:
Визуальный редактор 1С-Битрикс. Кастомизация.
Emerge
Emerge — система управления загрузкой веб-страниц.
При открытии обычной страницы картинки появляются в случайном порядке, неряшливо мелькая. Продвинутые разработчики управляют загрузкой с помощью скриптов. Emerge упрощает задачу, снимая необходимость в программировании. В системе используется декларативный подход, то есть для каждого элемента прописывается желаемое поведение, а система сама обеспечивает его реализацию.
Emerge использует Jquery.
AngularJS: Service
Я сервисы использую ка модели в которые помещаю методы получения данных от сервера
/** * 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); });