jade,Code片段,代码实例,代码示例,代码片段库

jade 随机图像背景mixin

https://www.sassmeister.com/gist/0344deebfb7fb9493af410ed8c0ce1c7

SassMeister-input.scss

// ----
// libsass (v3.5.0.beta.2)
// ----

$doc-blocks: true !default;
$styleguide: true !default;
@mixin doc-block(){
  @if($doc-blocks == true){
    @at-root {
      @content;
    }
  }
}

@mixin styleguide(){
  @if($styleguide == true){
    @at-root {
      @content;
    }
  }
}
@include doc-block(){
/** # Dummy images

Random images from https://picsum.photos/, classified by tags

Usage:
```
  .dummy-background{
    @include dummy-image('800/450', sea);
  }
```

$dummy-img-provider-url {string} - image provider url  
$dummy-images {map} - list images id's by categories

@link - https://picsum.photos/

Styleguide tools.dummy.images
*/
};
$dummy-img-provider-url: 'https://picsum.photos/' !default;
$dummy-images : (
  cars: (1070,1071,1072,1013,45,111),
  peoples: (1027,1005,1001,996,978,974),
  nature: (89,1035,1036,1037,1039,1064,1044,1012,1011,1006,980,977),
  animals: (1074,1003,40),
  sea: (1041,1019,1002,994,990,989,970),
  food: (999,102),
  work: (20,7,3,48,60),
  architectural: (1031,985,983),
  city: (1067,1048,1033,985,972,43),
  sport: (1077,1011,)
);

@mixin dummy-image($size: 800, $theme: cars, $background-size: cover){
  $images: map-get($dummy-images,$theme);
  $image: nth($images, random(length($images)));
  $url: $dummy-img-provider-url + $size + '/?image=' + $image ;
  background-image: url('#{$url}');
  background-repeat: no-repeat;
  background-size: $background-size;
}

@include styleguide(){
  .dummy-background {
    @include dummy-image('800/450', sea);
    width: 100%;
    height: 100vh;
  }
};

SassMeister-output.css

/** # Dummy images

Random images from https://picsum.photos/, classified by tags

Usage:
```
  .dummy-background{
    @include dummy-image('800/450', sea);
  }
```

$dummy-img-provider-url {string} - image provider url  
$dummy-images {map} - list images id's by categories

@link - https://picsum.photos/

Styleguide tools.dummy.images
*/
.dummy-background {
  background-image: url("https://picsum.photos/800/450/?image=994");
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100vh;
}

browserslist

> 1%
last 2 versions

SassMeister-rendered.html


<div class="dummy-background"></div>

SassMeister-input-HTML.jade

.test

jade 剪辑img svg

.sass

.cliped-svg
  display: block
  polygon
    transform: translate(112px, 240px)
.cliped-img
  clip-path: url(#clip-path)

.pug

svg.cliped-svg(width='254', height='274', viewbox='0 0 254 274')
									clippath#clip-path
										circle(cx="50%" cy="44%" r="122")
										polygon(points="4,0 34,-4 18,24")
									image.cliped-img(xlink:href='static/img/content/values-2.png', height='274', width='254')

jade 网络工作者

JS-Web Workers

script.js

window.onload = function() {
  var N = '10';
  var mainstart = document.getElementById('mainstart');
  var workerstart = document.getElementById('workerstart');
  var clear = document.getElementById('clear');
  var output = document.getElementById('output');
  // startClock();
  
  var worker = new Worker('https://codepen.io/taquaki/pen/KZKWxj.js');
  worker.onmessage = function(e) {
  //   console.log('recieved: ' + new Date());
  //   output.innerHTML = N + '以下の最大素数 = ' + e.data;
  }
  workerstart.onclick = function() {
    console.log('send: ' + new Date());
    // worker.postMessage(N);
  }
  mainstart.onclick = function() {
    output.innerHTML = N + '以下の最大素数 = ' + prime(N);
  }
  clear.onclick = function() {
    output.innerHTML = '';
  }
  // workerの強制終了
  // worker.terminate();
}
function startClock() {
  var clock = document.getElementById('clock');
  var statTime = new Date();
  setInterval(function() {
    clock.innerHTML = ((new Date() - startTime) / 1000).toFixed(1);
  }, 100);
}

js-web-workers.markdown

JS-Web Workers
--------------


A [Pen](https://codepen.io/taquaki/pen/ypLgmQ) by [Takaaki Sato](https://codepen.io/taquaki) on [CodePen](https://codepen.io).

[License](https://codepen.io/taquaki/pen/ypLgmQ/license).

index.pug

script(src='https://codepen.io/taquaki/pen/wpvNVK.js')
#clock
input#mainstart(type='button' value='メインスレッドで実行')
input#workerstart(type='button' value='ワーカースレッドで実行')
input#clear(type='button' value='結果のクリア')
#output

jade 拖放API

JS-Drag and Drop API

style.css

#dragobj { margin-bottom: 10px; }
#dropbox {width: 150px; padding: 50px; border: 1px solid gray;}

script.js

window.onload = function() {
  var dragobj = document.getElementById('dragobj');
  var dropbox = document.getElementById('dropbox');
  
  // # ドラッグアンドドロップイベント
  
  // 1. ドラッグ要素に対してのイベント
  // dragobj.addEventListener('dragstart', function() {
  //   console.log('start');
  // }, false); 
 
  // dragobj.addEventListener('drag', function() {
  //   console.log('darg');
  // }, false); 

  // dragobj.addEventListener('dragend', function() {
  //   console.log('end');
  // }, false); 
 
  // 2. ドロップ要素に対してのイベント
  // dropbox.addEventListener('dragenter', function() {
  //   console.log('enter');
  // }, false); 
  
  // dropbox.addEventListener('dragover', function() {
  //   console.log('over');
  // }, false); 
  
  // dropbox.addEventListener('dragleave', function() {
  //   console.log('leave');
  // }, false);
  
  // dropbox.addEventListener('drop', function() {
  //   console.log('drop');
  // }, false); 
  
  
  // # DataTransferオブジェクトを使ったデータ渡し
  
  // 1. データ設定
  dragobj.addEventListener('dragstart', function(e) {
    // 指定できるデータ型 'text/plain' 'text/html' 'text/uri-list'
    e.dataTransfer.setData('text/plain', e.target.value);
  }, false);
  
  // 2. ブラウザのデフォルト動作をキャンセル
  dropbox.addEventListener('dragover', function(e) {
    // テキストやファイルをブラウザにドロップすると表示してしまうため
    e.preventDefault();
  });
  
  // 3. データ渡し
  dropbox.addEventListener('drop', function(e) {
    e.preventDefault();
    e.target.style.backgroundColor = e.dataTransfer.getData('text/plain');
  });
  
  // UX
  dropbox.addEventListener('dragenter', function(e) {
    e.target.style.borderColor = 'red';
  }, false);
  dropbox.addEventListener('dragleave', function(e) {
    e.target.style.borderColor = 'gray';
  }, false);
  dropbox.addEventListener('drop', function(e) {
    e.target.style.borderColor = 'gray';
  }, false);
}

js-drag-and-drop-api.markdown

JS-Drag and Drop API
--------------------


A [Pen](https://codepen.io/taquaki/pen/xpKXPz) by [Takaaki Sato](https://codepen.io/taquaki) on [CodePen](https://codepen.io).

[License](https://codepen.io/taquaki/pen/xpKXPz/license).

index.pug

input#dragobj(draggable='true' type='color')
#dropbox ここにドラッグ

jade コンストラクタ継承

JS-コンストラクタ継承

script.js

// スーパークラス
function Ellipse(a, b) {
  this.a = a;
  this.b = b;
}

Ellipse.prototype.getArea = function() {
  return Math.PI * this.a * this.b;
};

Ellipse.prototype.toString = function() {
  return `Ellipse ${this.a} ${this.b}`;
}

var ellipse = new Ellipse(5, 3);

console.log(ellipse.getArea());
console.log(ellipse.toString());

// サブクラス
function Circle(r) {
  this.a = r;
  this.b = r;
}
Circle.prototype = Object.create(Ellipse.prototype, {
  constructor: {
    configurable: true,
    enumerable: true,
    value: Circle,
    writable: true
  }
})
Circle.prototype.toString = function() {
  return `Circle ${this.a} ${this.b}`;
}

var circle = new Circle(2);

console.log(circle);
console.log(circle.getArea());
console.log(circle.toString());

// サブクラスその２
function Circle2(r) {
  Ellipse.call(this, r, r);
}
Circle2.prototype = Object.create(Ellipse.prototype, {
  constructor: {
    configurable: true,
    enumerable: true,
    value: Circle,
    writable: true
  }
});
Circle2.prototype.toString = function() {
  return `Circle ${this.a} ${this.b}`;
}

var circle2 = new Circle2(3);
console.log(circle2.getArea());
console.log(circle2.toString());

// サブクラスその3
// 擬古典的継承
function Circle3(r) {
  Ellipse.call(this, r, r);
}
Circle3.prototype = Object.create(Ellipse.prototype, {
  constructor: {
    configurable: true,
    enumerable: true,
    value: Circle,
    writable: true
  }
});
Circle3.prototype.toString = function() {
  var str = Ellipse.prototype.toString.call(this);
    return str.replace('Elipse', 'Circle');
}

var circle3 = new Circle3(10);
console.log(circle3.getArea());
console.log(circle3.toString());

js.markdown

JS-コンストラクタ継承
------------


A [Pen](https://codepen.io/taquaki/pen/xPoPGb) by [Takaaki Sato](https://codepen.io/taquaki) on [CodePen](https://codepen.io).

[License](https://codepen.io/taquaki/pen/xPoPGb/license).

index.pug

#cnt

jade コンストラクタの种类

JS-コンストラクタの种类

script.js

// 関数宣言文
// 巻き上げあり
function Func(a, b) {
  this.a = a;
  this.b = b;
}
Func.prototype.show = function() {
  console.log(this.a + this.b);
}

// 関数リテラル
Func = function(a, b) {
  this.a = a;
  this.b = b;
}
Func.prototype.show = function() {
  console.log(this.a + this.b);
}

// クラス宣言文
// ES6
// Class Func {
//   constructor(a, b) {
//     this.a = a;
//     this.b = b;
//   }
//   show() {
//     console.log(this.a + this.b);
//   }
// }

// クラス式
// ES6
// var Func = class {
//   constructor (a, b) {
//     this.a = a;
//     this.b = b;
//   }
//   show() {
//     console.log(this.a + this.b);
//   }
// }

// function Func()


// コンストラクタのアクセッサプロパティ
function Person(name) {
  Object.defineProperty(this, 'name', {
    get: function() {
      return 'Hello ' + name;
    },
    set: function(newName) {
      name = newName.toUpperCase();
    },
    enumerable: true,
    configurable: true
  });
}
Person.prototype.sayName = function() {
  console.log(this.name);
}

var p = new Person('Tom');
console.log(p.name);
p.name = 'Bob';
console.log(p.name);
p.sayName();

js.markdown

JS-コンストラクタの種類
-------------


A [Pen](https://codepen.io/taquaki/pen/aVrYey) by [Takaaki Sato](https://codepen.io/taquaki) on [CodePen](https://codepen.io).

[License](https://codepen.io/taquaki/pen/aVrYey/license).

index.pug

#cnt

jade JSONP

JS-JSONP

script.js

function show(data) {
  console.log('name: ' + data.name);
  console.log('price: ' + data.price);
}

window.onload = function() {
  var url = 'https://codepen.io/taquaki/pen/rYgdJx.js';
  var script = document.createElement('script');
  script.setAttribute('src', url);
  document.getElementById('cnt').appendChild
  (script);
}

js-jsonp.markdown

JS-JSONP
--------


A [Pen](https://codepen.io/taquaki/pen/jaoEvm) by [Takaaki Sato](https://codepen.io/taquaki) on [CodePen](https://codepen.io).

[License](https://codepen.io/taquaki/pen/jaoEvm/license).

index.pug

#cnt

jade КаквJadeотправитьсервернуюпеременнуювфункциюнаклиентскойстороне？

Во-первых，напрямуювставитьпеременнуюизсервернойчастивфункциюнаклиентскойстороне。 $ b $bНужнопроизводитьинъекцию。 ДляэтогоиспользуетсяметодJSON.stringify（）。

varsJade

html
    head
        title Comparing inmyroom articles changes
        link(rel='stylesheet', href='bootstrap/css/bootstrap.min.css')
        link(rel='stylesheet', href='public/css/style.css')
        script(src='diff/diff.min.js')
        script(src='jquery/jquery.min.js')
        script(src='public/js/common.js')
    body

        .container
            .row
                .col-12
                    h1 Изменение статей за определенный период

            - for(var i = 0; i < articlesSorted.length; i++) {
            - if(articlesSorted[i] !== void 0) {
            - console.log(JSON.stringify(articlesSorted[i], null, '\t'))

            - for(var j = 0; j < articlesSorted[i].length; j++) {

            .row
                .col-12
                    - if(j + 1 < articlesSorted[i].length) {
                    pre(id=displayId)
                    script(type="text/javascript").
                        displayId = 'display-' + !{JSON.stringify(i)} + '-' + !{JSON.stringify(j)};
                        //now I can use the name variable

                        getDiff(displayId,!{JSON.stringify(articlesSorted[i][j].textContent)}, !{JSON.stringify(articlesSorted[i][j+1].textContent)})

                    - }
            - }
            - }
            - }



script(src='tether/js/tether.min.js')
script(src='bootstrap/js/bootstrap.min.js')

jade 简单的标签

简单的标签jade + jquery

script

$('.tabber-menu a').on('click', function(e) {
    e.preventDefault();
    var tab = $($(this).attr('href'));
    $(this).addClass('active');
    $(this).siblings().removeClass('active');
    $('.tabber-item').removeClass('active');
    tab.addClass('active')();
 });

tabber

.tabber
	.tabber-menu
		a(href="#tab-1", class="active") tab 1
		a(href="#tab-2") tab 2
		a(href="#tab-3") tab 3
		a(href="#tab-4") tab 4

	.tabber-content
		.tabber-item.active#tab-1
			
		.tabber-item#tab-2
			
		.tabber-item#tab-3
			
		.tabber-item#tab-4

jade イベントリスナに引数を渡す

JS-イベントリスナに引数を渡す

script.js

const button = document.getElementById('button');

// 無名関数内で引数を渡す
button.addEventListener('click', function(e) {
  hello(e, 'Tom');
});

function hello(e, name) {
  console.log(`Hello ${name}`)
}

// イベントオブジェクトを引数にもつ関数を戻り値にもつ関数をイベントハンドラに登録する
button.addEventListener('click', hey('Bob'), false);

function hey(name) {
  return function(e) {
    console.log(`Hey ${name}`);
  }
}

js.markdown

JS-イベントリスナに引数を渡す
----------------


A [Pen](https://codepen.io/taquaki/pen/POyEay) by [Takaaki Sato](https://codepen.io/taquaki) on [CodePen](https://codepen.io).

[License](https://codepen.io/taquaki/pen/POyEay/license).

index.pug

input#button(type='button' value='button')