2019-07-29 07-31 08-05 08-06 到達点メモ

2019-07-29 07-31 08-05 08-06 到達点メモ

  8月 07, 2019    nonoNaga

---

jQuery

.html()で出力をさせていたのだが
その際にコード上だと<br />なのに
何故か.html()で出力させた場合は、<br>になっていた。
調べてみると、そもそも<br />はXHTMLで使うものであって
HTMLは＜br＞になるらしい。

これが混在しているという事は、違いを理解して使っていないという事だよなぁ・・・。

参考サイト：<br> と <br /> タグの違い　【HTML と XHTML 】
https://ameblo.jp/midorieng03/entry-10929028852.html

メソッド名を踏まえて考えると <br /> が自動的に<br>になるのは
まぁ納得かな。

class内でclickの中にclassのメソッドを呼び出すのは無理っぽい？
＊方法はあるかもしれんが、分からんかった。
一先ず、下記のようにclickと同じネストで関数を定義すれば
呼び出すことは出来る。

class RewriteTestPage {
  constructor () {}
  addTestButton () {
    function testCall () {
      console.log ('test');
    }

    var h1Html = '<button type="button" class="test_title">テスト</button>';
    $ ('div.test_add td').append (h1Html);
    $ ('.test_title').click (function (e) {
      testCall ();
    });
  }
}

例えば、長くなった且つごちゃごちゃになったjsを分割したい時などに
jsからjsを呼び出したいとする
jsでjsを呼び出すには基本的には、importで大丈夫なのだが、
エクステンションの場合はちょっと話が異なるようである

大まかに項目を上げると
・呼び出し元のクラスは、static newとexport文を宣言する必要がある
・content_main.jsとcontent_script.jsを作成し
content_scriptでcontent_mainを呼び出すようにする
・content_mainで呼び出したいクラスのファイル名を書く

参考サイト：chrome-extension-es6-import
https://github.com/otiai10/chrome-extension-es6-import/tree/81199dcf1caa25df566e5e1dd9837989f151b775


あと、良く理由が分かっていないのだが
先ほど記載した参考サイトを元に行ってみたのだが
非同期処理内でwindow.onloadのfunction内で
クラス関数を実行しようとしても何故か実行しない。
window.onloadの部分をコメントアウトすると動くことは確認できている。


ちょっと書かないと特に縁のない言語はやはりすぐに忘れてしまう・・・。
変数を含んだ置換処理を行いたい場合は、
new RegExp()を使えばよい

＊使用例
var tempHtmlString = $ ('.test_div').html ();
var tempRegExp = new RegExp (
'<div>' +
  testValue +
  '<\/div>(\n(.*?)|(.*?))<\/th>\n(.*?)<td'
);
tempHtmlString = tempHtmlString.replace (tempRegExp, 'TestReplace');

◆参考サイト
javascript:replace()で正規表現に変数を使う場合
RegExp  by Mozilla Contributors is licensed under CC-BY-SA 2.5.

他にも作業しようと思ったが、力尽きたので今日はここまで