window.addEventListener('resize', resizeHandlerSlider);
clientWidth
при вызове хэндлера и дестроишь свой слайдер.const slider = document.querySelector('#slider');
let { clientWidth } = document.body;
let yourSlider;
const sliderInit = () => {
yourSlider = new Swiper(slider, {...})
}
const resizeHandlerSlider = () => {
if (clientWidth !== document.body.clientWidth) {
clientWidth = document.body.clientWidth;
if (yourSlider) {
yourSlider.destroy();
}
sliderInit();
}
}
(function() { ... })()
var var_a = 5
(var_a) /* или */ (5) // не является ошибкой, возвращает значение переменной или выражения
function func_b() { }
(func_b) /* или */ (function func_b() { }) // не является ошибкой, возвращает ссылку на функцию
var var_c = { key: "val" }
(var_c) /* или */ ({ key: "val" }) // не является ошибкой, возвращает объект
var var_d = [ "one", "two" ]
(var_d) /* или */ ([ "one", "two" ]) // не является ошибкой, возвращает массив
(func_b)
- это ссылка на функцию func_b
, то значит её можно сразу же вызвать.(var_c)
- это объект, то значит можно сразу же использовать его(var_d)
- это массив, то значит можно сразу же использовать его(func_b)()
или (function func_b() { })()
вызвать функцию(var_c).key
или ({ "key": "val" }).key
использовать объект(var_d)[0]
или ([ "one", "two" ])[0]
использовать массив( )
function func_b() { }()
ошибка "Unexpected token )"{ key: "val" }["key"]
["one", "two"][0]
var a = "test"
alert(a)
a
болтается в глобальной области видимости(function(){
var a = "test"
})()
alert(a) // недоступно, потому что она была локальной переменной внутри анонимной функции
( )
пустые?function() { ... }
нет формальных параметров, значит и вызывать можно без параметров.(function (w, d, $) {
// некоторым нравится сокращать код путём использования коротких имён переменных
w['fizz'] = "buzz" // вот так можно принудительно зарегистрировать
// глобальную переменную fizz
$('body').css({background: 'red'}) // вот так можно работать с jQuery через привычную $
// даже если библиотека была загружена в режиме noСonflict
}(window, document, jQuery))
(function (message1, message2, empty) {
// это и есть проверка на undefined
if (message1 === empty)
alert('message1 is undefined')
else
alert('message1 = ' + message1)
if (message2 === empty)
alert('message2 is undefined')
else
alert('message2 = ' + message2)
})("test") // вызвана только с одним параметром, значит второй по имени message2
// будет пустой, а третий empty специально ввели в качестве образца
// данных с типом "undefined", для служебного использования
$mainPage = $modx->makeUrl(1);
$resource = $modx->resource;
$orderPage = $modx->makeUrl($resource->get('id')) . $get;
switch ($step) {
case "clear":
setcookie ("myOrder", "");
break;
case "check":
if(!isset($_COOKIE["myOrder"])){
setcookie ("myOrder", $value);
$modx->sendRedirect($orderPage,array('responseCode' => 'HTTP/1.1 301 Moved Permanently'));
}
if($_COOKIE["myOrder"] != $value){
$modx->sendRedirect($mainPage,array('responseCode' => 'HTTP/1.1 301 Moved Permanently'));
}
break;
}
callApi(url,prms,callback){
this.setServerError('',''); // это функция, которая в data выставляет определенные поля
//в результате чего ошибки выводятся прямо на странице, удобно для отладки
axios({
method:"post",
url:url,
data:prms
}).then((response) => {
// в response.data получаем JSON,
// в моем случае сервер формирует обязательные поля success,error,buffer
// в buffer перед выдачей JSON снимается html-вывод, возможно это отладочная информация,
// которую выдает backend, возможно PHP-warnings
let dt=response.data;
if(!dt.success){
this.setServerError(dt.error,dt.buffer);
}else{
// ну и, собственно, сам вызов колбека, который происходит только в случае успешного приема данных
callback(dt);
}
}).catch((error) => {
// эту часть вызывает сам axios при возникновении серверных ошибок, то есть все, что не 200 OK
// позволяет увидеть, в частности, ошибку 500, вернее сам факт ее возникновения, если она обрабатывается
// "стандартным" методом апача - пустая страница и все
this.setServerError(error.message,error.stack);
});
},
this.$root.$on('callApi',(url,prms,callback)=>{this.callApi(url,prms,callback)});
this.$root.$emit('callApi', '/api/goods', {action: 'getgoodsinfo', article: '12345678'}, (dt) => {
this.articleinfo=dt.data.articleinfo;
})
<?php
// регистрируем функцию завершения, чтобы обрабатывать грубые ошибки,
//например вызов несуществующего метода у объекта
register_shutdown_function(function () {
$error = error_get_last();
if ($error && ($error['type'] == E_ERROR || $error['type'] == E_PARSE || $error['type'] == E_COMPILE_ERROR)) {
$res=array(
'buffer'=>ob_get_contents(),
'success'=>false,
'error'=>"PHP Fatal: ".$error['message']." in ".preg_replace('/(.*)\/(.*)/', "$2", $error['file']).":".$error['line']
);
ob_clean();
header('HTTP/1.1 200 Ok');
header("Access-Control-Allow-Origin: *");
echo json_encode($res);
// ... завершаемая корректно ....
}
});
// для кроссдоменного CORS, при необходимости - закомментировать или заменить звездочку на требуемое
if($_SERVER['REQUEST_METHOD']=='OPTIONS' ){
ob_clean();
header("Access-Control-Allow-Origin: *");
header("Content-type: application/json; charset=utf-8");
header("Access-Control-Allow-Headers: X-Requested-With, Content-Type");
header("Access-Control-Request-Method: POST");
return true;
}
// /*
// протокол обмена
// - вход - команда по сегменту, например http://site.ru/api/goods - api - попали сюда, goods - команда REST
// в php://input должен быть json, в котором обязателен параметр action, например getgoodsinfo
// в результате формируется имя функции класса goods_getgoodsinfo, которая вызывается
// с параметром входящего json
// функция класса должна вернуть массив с тремя полями - data & success & error
// в поле data возвращается непосредственно результат функции, в нашем случае - реестр чеков
// в поле success возвращается true | false - признак успешного выполнения
// в поле error возвращается описание ошибки в случае неудачного выполнения функции
// */
$api=new ApiCls();
// функция, проверяющая залогиненность юзера
if(is_user_login()){
$api->checkcommand();
}else{
$res=array('succes'=>false,'error'=>'Пользователь не авторизован','data'=>'');
ob_clean();
header("Content-type: application/json; charset=utf-8");
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: X-Requested-With, Content-Type");
echo json_encode($res);
}
return true;
class ApiCls{
function checkcommand(){ // точка входа для класса api, здесь первичный разбор,
//вызов метода и возврат результата
// главное - определить второй сегмент в url, то есть в случае http://site.ru/api/goods
$segment=????????; // в $segment должен оказаться 'goods'
$res=array('success'=>false,'error'=>'Empty action'); // сразу проверка на наличие action в параметрах
if(!$segment){
$res['error']='Empty command';
}else{
if($_SERVER['REQUEST_METHOD']=='PUT' || $_SERVER['REQUEST_METHOD']=='POST'){
$reqdata = file_get_contents('php://input');
$b=json_decode($reqdata);
$b=get_object_vars($b);
if(isset($b['action'])){
$res['error']='no error';
$nm=$segment.'_'.$b['action'];
$r=$this->$nm($b); // вызов метода по action из пост и дальнейшая обработка результатов
// чё-то тут намутил, но работает - и ладно
if(!isset($r['success'])){
$res['success']=false;
$res['error']='No success flag in method '.$nm;
}else{
if(!isset($r['data'])){
$res['success']=false;
$res['error']='No result data in method '.$nm;
}else{
$res['success']=$r['success'];
$res['data']=$r['data'];
if(!$r['success']){
if(isset($r['error'])){
$res['error']=$r['error'];
}else{
$res['error']='Success is false, but no error message in method '.$nm;
}
}
}
}
}
}
}
// непосредственная выдача данных
$this->_printresponse($res);
}
function _printresponse($res){
// проверяем наличие html-вывода (отладка или warnings)
$res['buffer']=ob_get_contents();
if($res['buffer']!=''){
$res['success']=false;
isset($res['error'])?$res['error']=implode(',',array('module error',$res['error'])):$res['error']='module error';
}
// очищаем буфер вывода и формируем свои заголовки
ob_clean();
header("Content-type: application/json; charset=utf-8");
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: X-Requested-With, Content-Type");
// ну и, наконец, выдаем результирующий JSON
echo json_encode($res);
}
function __call($name,$post){
// эта функция вызывается при попытке вызвать несуществующий метод класса, то есть при вызове '/api/blablabla' получим отлуп
$info=array('method'=>$name,'post'=>$post,'error'=>'Method not found','success'=>false);
return $info;
}
/*********************************************************/
// начинаем блок методов api
function goods_getgoodsinfo($prm){
// формируем заготовку ответа
$res=array('data'=>array(),'success'=>true,'error'=>'');
// при необходимости здесь можно вставить проверку наличия полномочий у пользователя
// и если что не так, то выключить success, прописать "облом!" в error и не возвращать данные
$res['data']['articleinfo']= getArticleInfo($prm['article']); // вызов функции,
//которая собирает требуемые данные для определенного артикула и возвращает, опять же
// в формате JSON
return $res;
}
}
?>
Error: Cannot find module 'gulp-sass'
у Вас не хватает пакета для запуска gulp'a. npm i gulp-sass --save-dev
node-sass
в package.json, в devDependencies:"node-sass": "4.7.2"
npm i
<script type="text/javascript">
$(function () {
var target = null;
$(':input').focus(function() {
target = $(this).val();
});
// НЕ ПЕРЕНОСИТЕ ЭТОТ ФРАГМЕНТ В SUBMIT
$('form').submit( function () {
if ( target == 'save' ) {
alert('[Save] is pressed')
} else if ( target == 'delete' ){
alert('[Delete] is pressed')
} else {
alert('{unknown button is pressed}')
}
return false;
});
});
</script>
<form action="" method="post">
<button type="submit" value="save" name="action">Сохранить</button>
<button type="submit" value="delete" name="action">Удалить</button>
</form>
<div id="pdopage">
<div class="rows">
[[!pdoPage?
&elementClass=`modSnippet`
&element=`pdoResources`
&tpl=`newscategoryTpl`
&includeContent=`1`
&includeTVs=`image`
&processTVs=`1`
&hideContainers=`1`
&sortby=`menuindex`
&sortdir=`ASC`
&showHidden=`1`
&parents=`4`
&depth=`1`
&ajaxMode=`scroll`
&limit=`5`
]]
</div>
[[!+page.nav]]
</div>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.10.1.min.js'></script>
<script type='text/javascript'>
$(window).on('load', function () {
$('#wrap_preloader').delay(500).fadeToggle(500);
});
</script>
<div id='wrap_preloader'>
Идет загрузка...
</div>
#wrap_preloader {
width: 100%;
height: 100%;
position: fixed;
margin: 0px auto;
background: #282828;
z-index: 9999;
text-align: center;
color: #fff;
letter-spacing: 5px;
font-family: arial;
font-size: 50px;
padding-top: 260px;
}
<!-- preloader -->
<style type="text/css">
.preloader_bg { position: fixed; background: rgba(15,15,15,1); width: 100%; height: 100%; top: 0; left: 0; z-index: 200; }
.preloader_content { position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 201; font-size: 14px; }
.preloader_content span { display: block; margin: auto; text-align: center; text-transform: uppercase; color: rgba(225,225,225,1);}
</style>
<script type="text/javascript">
$(function(){
$('.preloader_bg, .preloader_content').fadeIn(0);
$(window).load(function(){
$('.preloader_bg').delay(250).fadeOut(1500);
$('.preloader_content').delay(250).fadeOut(750);
});
});
</script>
<div class="preloader_bg"></div>
<div class="preloader_content">
<span>Идет загрузка...<br>Подождите...</span>
</div>
<noscript>
<style>
html, body { opacity: 1 !important; }
.preloader_bg, .preloader_content { display: none !important; }
</style>
</noscript>
<!-- /preloader -->
@import "normalize";
includePaths: require('node-normalize-scss').includePaths
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function () {
gulp.src('path/to/input.scss')
.pipe(sass({
// includePaths: require('node-normalize-scss').with('other/path', 'another/path')
// - or -
includePaths: require('node-normalize-scss').includePaths
}))
.pipe(gulp.dest('path/to/output.css'));
});
npm install -g gulp --save-dev
-g
означает глобальную установку в системе.--save-dev
npm install -g gulp-cli
gulp -v
[14:08:42] CLI version 2.0.1
npm install
gulp
, не обязательно указывать default