新ブログ「ごんフラブログG2」

WordPressで始めてみました


ごんたろうのぼやきトップ

2018年07月09日

メモリ処理は絶対に必要

昨日の教訓「なにがなんでも メモリは解放せよ」
「要らなくなった変数は破棄」
プログラミング教則本に「変数」が出てきたら、
次に「メモリの解放」を教えるって言うのを標準にするべきでは?
メモリの解放については書いてない書籍が多いんだよね。
メモリは無限ではない。
また使いまくると処理速度が低下する。
posted by ごんたろう(Gontaro-Soft) at 17:26 | Comment(0) | 備忘録/お知らせ

2018年06月23日

【JavaScript】動的にscriptタグ、link rel〜を挿入する[CSS]

━━━━━━━━━━
■2018/06/25 15:32 追記
キャッシュが回避されていなかったのと
URLパスを指定する際に/を含むURLを指定すると
うまく動かなかったのを修正しました。
失礼致しました。
━━━━━━━━━━
HTML5ではdocument.writeの仕様が強く非推奨・・・
の続き。
(http://gon-fla.sblo.jp/article/183580209.html)

なんとか組んでみた関数ではhead内にscriptタグやlink(css)タグを
追加できなかったのでチラホラと調べてみて、自分なりに作ってみた。

キャッシュがものすごくやっかいで静的なファイルを作った場合
更新が反映されないなど(jsとかcss)
気付かないでいると結構ハマってしまうので、
キャッシュの対策もしつつ動的にjsやcssを読み込む処理を組んでみた。

■まず、更新しないっていうのを前提の関数を作り、
そこから読み込みたいファイル(js、css)を呼び出すって方法。
ファイルは一つでも良いけど複数ある場合にも対応させたつもり。
確認はChromeとIE11にて行った。
サンプルはjsファイルとcssを読み込むっていうもの。
cssは適用するクラスを作成しておけば、読み込んだ後
cssが反映されるっぽい。

a.jsの次にb.jsというファイルでワンクッション
はさんで、キャッシュ対策をしてます。

カスタマイズすべき所は
b.jsのarr.push()のところ。
読み込みたいjsとcssファイルの数だけpushで。
そんな感じです。
サンプルの01〜03.jsと
test_css.cssはありませんので適当に作って下さい。
.test_class_dayo{
background-color:#FFE;
}
とかで試せばちゃんと反映します。(PC上のみ確認)



--------------------
■ファイル a.js
function kokokara(src_url){
var r=String(Math.random());
var str="";
str=r.substr(-8);
var ctag;
ctag=document.createElement("script");
ctag.setAttribute("type","text/javascript");
ctag.setAttribute("src",src_url+"?"+str);
document.head.appendChild(ctag);
}
--------------------
--------------------
■ファイル b.js
function yobareru(){

var arr=new Array();
//
//▼以下にjs、cssファイルのパスを記述する▼
//
arr.push("01.js");
arr.push("02.js");
arr.push("03.js");
arr.push("test_css.css");
//
//▲▲
//
var r=String(Math.random());
var str="";
str=r.substr(-8);
for(var i=0;i<arr.length;i++){
var strs=arr[i];
var dam;
if(strs.match('\/')){
var sla=strs.split("/");
var end_str=sla[sla.length-1];
dam=end_str.split(".");
}else{
dam=strs.split(".");
}

var ctag;
if((dam[1] == 'js')||(dam[1] == 'php')){
ctag=document.createElement("script");
ctag.setAttribute("type","text/javascript");
ctag.setAttribute("src",src_url);
}else{
ctag=document.createElement("link");
ctag.setAttribute("rel","stylesheet");
ctag.setAttribute("href",src_url);
ctag.setAttribute("type","text/css");
}

document.head.appendChild(ctag);
}
}
yobareru();
--------------------
--------------------
■ファイル test.html
<html>
<head>
<script type="text/javascript" src="a.js"></script>
<script type="text/javascript">kokokara("b.js");</script>
</head>
<body>

<p>
test01
</p>

<p class="test_class_dayo">
test02
</p>

</body></html>



例により<>は全角なので半角にしてくださいね。
posted by ごんたろう(Gontaro-Soft) at 18:20 | Comment(0) | 備忘録/お知らせ

2018年06月19日

[JavaScript]document.writeの代替え

━━━━━━━━━━
■2018/06/23 追記
scriptタグなんかがhead内で動作しなかったので
完全なdocument.writeの代替えとしては成立しない気がする。

━━━━━━━━━━
document.writeはHTML5では非推奨とのことで

代替え処理を調べていたら
innerHTMLを使おうってな事になったのは良いんだけど
多くはid指定して・・・な感じ。
それではdocument.writeの代替えにはならないのでは?
と思ったのでさらに調べてみたら
良い感じのサンプルを公開されている方が
いらっしゃったので、関数化していじってみた。

勝手にブログカスタマイズ さんのページ
http://blog12345.seesaa.net/article/371431098.html


<script type="text/javascript">
function newDocumentWrite(str){
var e_ele=document.createElement('div');
e_ele.innerHTML=str;
var s=document.getElementsByTagName('script');
var sco=s[s.length-1];
sco.parentNode.insertBefore(e_ele, sco);
}
</script>
<script type="text/javascript">
newDocumentWrite(表示する文字列);
</script>


コレでOK。
(全角<>は半角に直してくださいね。)
さらに下記のようにコードを追加したら
固定されたクラス、もしくは引数を増やして
任意のクラスも付加できるようになる


function newDocumentWrite2(str){
var e_ele=document.createElement('div');
e_ele.innerHTML=str;
e_ele.classList.add('sample_class');
var s=document.getElementsByTagName('script');
var sco=s[s.length-1];
sco.parentNode.insertBefore(e_ele, sco);
}
function newDocumentWrite3(str,cls){
var e_ele=document.createElement('div');
e_ele.innerHTML=str;
e_ele.classList.add(cls);
var s=document.getElementsByTagName('script');
var sco=s[s.length-1];
sco.parentNode.insertBefore(e_ele, sco);
}


しかし、newDocumentWrite3を使用する場合classの引数を
投げてやらなかった場合の処理も追加しておくと吉かと。



function newDocumentWrite3(str,cls=""){
var e_ele=document.createElement('div');
e_ele.innerHTML=str;
if(cls != ""){
e_ele.classList.add(cls);
}

var s=document.getElementsByTagName('script');
var sco=s[s.length-1];
sco.parentNode.insertBefore(e_ele, sco);
}





以上です。
posted by ごんたろう(Gontaro-Soft) at 17:00 | Comment(0) | 備忘録/お知らせ
ブログランキング・にほんブログ村へ
にほんブログ村

インターネット・コンピュータランキング