Labs

<< 最初 < 前ページ 次ページ > 最後 >>
icon Targetを利用せずに新規ウィンドウを開く(rel,class) (2019/06/14)
クラス名や「rel」アトリビュートを指定して、新規ウィンドウで開く

サンプル

html_samples/popup.html

HTML

    <a href="http://yoo-s.com" rel="popup" window_name="window_name" window_option="width=500,height=500,toolbar=yes,menubar=yes,scrollbars=yes">rel New Window</a>
    <a href="http://yoo-s.com" class="popup_class" window_name="window_name" window_option="width=500,height=500,toolbar=yes,menubar=yes,scrollbars=yes">class New Window</a>
HTML属性にウィンドウ名「window_name」、オプション「window_option」を指定した

rel を指定して開く

rel属性を指定した querySelectorAll() で NodeList を取得して click イベントを登録
(IEだと単にループで回せないので、一工夫必要)
    function loadPopupRelEvent(rel_name) {
        var popupEvent = function(event) {
            var window_name = '_blank';
            var window_option = null;
            if (this.getAttribute('window_name')) window_name = this.getAttribute('window_name');
            if (this.getAttribute('window_option')) window_option = this.getAttribute('window_option');
            window.open(this.href, window_name, window_option).focus()
            event.preventDefault();
            event.stopPropagation();
        }
        var query_string = '[rel = "' + rel_name + '"]';
        let elements = document.querySelectorAll(query_string);
        if (!elements) return;
        [].forEach.call(elements, function (element) {
            element.addEventListener('click', popupEvent, false);
        });
    }
    document.addEventListener('DOMContentLoaded', function () {
      loadPopupRelEvent('popup', params);
    });

クラス指定して開く

getElementsByClassName() で HTMLCollection を取得して click イベントを登録
(IEだと単にループで回せないので、一工夫必要)
    function loadPopupClassEvent(class_name) {
        var popupEvent = function(event) {
            var window_name = '_blank';
            var window_option = null;
            if (this.getAttribute('window_name')) window_name = this.getAttribute('window_name');
            if (this.getAttribute('window_option')) window_option = this.getAttribute('window_option');
            window.open(this.href, window_name, window_option).focus()
            event.preventDefault();
            event.stopPropagation();
        }
        let elements = document.getElementsByClassName(class_name);
        if (!elements) return;
        [].forEach.call(elements, function (element) {
            element.addEventListener('click', popupEvent, false);
        });
    }
    document.addEventListener('DOMContentLoaded', function () {
      loadPopupClassEvent('popup_class', params);
    });
要素にclickイベントを登録し、正規表現でURLパースする
icon $(document).on() をネイティブでコーディング (2019/06/03)
jQuery の $(document).on() をネイティブでコーディング
document.addEventListner() で記述するが、ネイティブの場合はターゲット(Event.target)が何かによって条件分岐が必要

idの場合

    //jQuery
    $(document).on('click', '#id_name', function() {
        //working
    });

    //native
    document.addEventListener('click', function(event) {
        if (event.target.id === 'button') {
            //working
        }
    });

classの場合

    //jQuery
    $(document).on('click', '.class_name', function() {
        //working
    });

    //native
    document.addEventListener('click', function(event) {
        if(event.target.classList.contains('class_name'))
            //working
        }
    });
querySelectorAll() で取得する方法もある。
ただ、addEventListener() を事前登録するため、後にHTMLを発生さした要素では動作しないのでイベント管理が必要

classの場合

        document.querySelectorAll('.class_name').forEach(function(element) {
            element.addEventListener('click', function(event) {
                //working
            });
        });
icon [脱jQuery]始める前に (2019/03/15)

「脱jQuery」を始める前に

近年「脱jQuery」のワードが出ているが、手法を間違えると「jQuery」で良かったということにも・・・
「jQueryのここが便利だったのか」と痛感することも結構あります。

何のために「脱jQuery」をするのか?目的が明確である

周りが発言しているからという曖昧な理由でなく、「脱jQuery」した未来予想図を作っておきます。
(JavaScript、フレームワーク知識向上、半自動化などの開発効率化の目処など)
特にJSフレームワークを利用しない場合、jQueryの部分を全て自分で書き直す覚悟が必要でしょう。

代用するJSフレームワークで開発・設計が確立している

「Vue.js」「AngularJS」「React」の選択肢が決まっていて、バックエンドやテンプレート管理の設計ができている。
恐らく、これが今一番主流でしょう。
ただしフレームワークや設計方法の理解度が低いと、プロジェクトが破綻する可能性がある。

自分でライブラリ・フレームワーク・設計が確立できる

「脱jQuery」をしたことで、ソース管理が余計に複雑になってしまう事が多々ある。
特にjQuryライブラリに依存したプロジェクトを書き換えると相当な労力を要するので覚悟が必要である。

など、案件によってよく吟味して作業した方が良い。

「既存JSフレームワーク」を始める前に

現在は「Vue.js」「AngularJS」「React」が主流
「YUI」「Backbone.js」などフェイドアウトしていくフレームワークも多々あるので、選択を間違えないようにネイティブの知識の保険をかける必要がある。

個人的なロードマップとして、既存JSフレームワーク利用の前に、自作フレームワークを作成してある程度経験を積み、同時に「Vue.js(個人的にイチオシ)」「AngularJS」の情報も蓄積しつつ、効率的・自動化を踏まえて移行するつもりだ。

過去の経験から既存JSフレームワークを安易に利用すると、

・知識が浅いと構造がグチャグチャになる
・効率化するにはJSフレームワーク以外の設計知識も必要
・進化が早いので、圧倒的な仕様変更に対応できない

になるためだ。

現在(2019/03時点)は「ECMAscript 6」が主流であるので、「ECMAscript 7」は必要な時に利用していく。
更に「TypeScript」を併用するのが理想かもしれないが、まずはネイティブの知識を復習・蓄積していく。

個人的な目標

・JavaScriptネイティブ追求
・Dom操作追求
・MVC設計において他のフレームワークとの一般共通化
・View(テンプレートエンジン)の手法・管理
・バックエンドの親和性
・開発半自動化

などを目標とします。
<< 最初 < 前ページ 次ページ > 最後 >>