電子透かしを生成するための小さなツールを、シェルとして電子を使用して行うため、uiフレームワークの選択では、もちろん、vueの最初の考えですが、しばらく使ってみて、vueのメカニズムは、スクリプトの導入以下の電子で直接使用することができないことが判明し、いくつかの後悔は、その後、jqueryを使用するつもりです！私はあまりにも長い間reactとvueを書き、私は状態を変更することにより、インターフェイスのリペイントをトリガしており、この方法はあまりにも滑らかで、今私はjqueryのコードを書くために起こっている、と私は本当にそれに戻ることはできません。
そこで、小さなフレームワークとも言える、レスポンシブなjqueryベースのプラグインを自作しました。
具体的な用途は以下の通り：
<script src="https://.com/jquery/dist/..js"></script>
<script src="https://.com/jqvm/dist/..js"></script>
<template id="app">
<span>{{name}}</span>
<span>{{age}}</span>
<button>grow</button>
</template>
<script>
$('#app')
.vm({
name: 'tomy',
age: 12,
})
.on('click', 'button', state => {
state.age ++
})
.mount()
</script>
上記は最も単純な使い方です。テンプレートの定義はvueとほぼ同じですが、大きな違いがあります。vueではテンプレート内で直接イベントをバインドしますが、jqvmでは従来のjquery onを通してイベントをバインドします。
組み込みのディレクティブがいくつかありますが、最もよく使われるのは jq-if でしょう。
<template>
<div jq-if="isTouched">xxx</div>
</template>
また、いくつかのコンポーネントやディレクティブをマウントに登録することも可能です。
const { component, directive } = $.vm
component('icon', function(el, attrs) {
const { type } = attrs
return `<i class="icon icon-${type}"></i>`
})
directive('jq-link', function(el, attrs) {
const link = attrs['jq-link']
const to = this.parse(link) // this.parse これは、文字列を解析してステートに対応する値に変換する組み込みのサービスだ。
el.attr('href', to)
})
登録後、テンプレート内で使用してください。
<template>
<icon type="search"></icon>
<a jq-link="xxx">jump</a>
</template>
$('#app')
.vm({ ... })
.on('click', 'button', state => function(e) {
const color = $(this).css('color')
state.color = color
// ...
})
この小さなフレームワークは、パッケージ化され、圧縮され、50k未満の全体のボリュームは、スズメは、すべての臓器が小さいと言うことができます。特にトレンディなものはありませんが、1分以内に開始する必要があるいくつかのインターフェイスのプログラミングシナリオでは、それは適しています。
フロントエンド・テクノロジーについて語り合いましょう！
