Phalacrocorax/JS_tools.md

Last active August 14, 2020 17:03

Star (0) You must be signed in to star a gist
Fork (0) You must be signed in to fork a gist

Select an option

Learn more about clone URLs
Clone this repository at <script src="https://gist.github.com/Phalacrocorax/f41f98432ad02a22e337cfdeeab768b5.js"></script>
Save Phalacrocorax/f41f98432ad02a22e337cfdeeab768b5 to your computer and use it in GitHub Desktop.

Download ZIP

[snippets] javascripts/js

Raw

js_snippets__browser.md

console Logger

export default function logger() {
    var logger = function logger(){
    };

    logger.LEVEL = {
        RUN   : 0,
        ERROR : 1,
        WARN  : 2,
        LOG   : 3,
        INFO  : 4,
        DEBUG : 5,
        FULL  : 5,
    };
    logger.level = logger.LEVEL.FULL;

    logger.debug = function(msg){ (this.level >= this.LEVEL.DEBUG) && console.debug(msg); };
    logger.info  = function(msg){ (this.level >= this.LEVEL.INFO) && console.info("%c "+ msg, "color: green"); };
    logger.log   = function(msg){ (this.level >= this.LEVEL.LOG) && console.log(msg); };
    logger.warn  = function(msg){ (this.level >= this.LEVEL.WARN) && console.warn(msg); };
    logger.error = function(msg){ (this.level >= this.LEVEL.ERROR) && console.error(msg); };
    return logger;
}

Raw

JS_tools.md

JS 从入门到放弃

叨叨叨=babel？

Fashion frontend uh-huh

从gulp， sass， webpack， AMD， CommonJS， vuejs， vuex， es2015， babel， transpile 层出不穷。本来npm这些nodejs之流就苦手但是12条专业的JavaScript规则 | kancloud中有提到JS应该自动构建，实际使用中也确实的体会到了方便之处，比如用了sass之后，再去改css简直就是折磨。

transpile

JavaScript Transpilers: What They Are & Why We Need Them

JS报错

JavaScript 调试常见报错以及修复方法

Uncaught TypeError / Uncaught RangeError / Uncaught URIError / InvalidStateError 有个一个自己常见的error： uncaught(in promise) message(The message port closed before a response was received)
目前只找到一篇讲promise的文章： You're Missing the Point of Promises

Author

Phalacrocorax commented Feb 18, 2017 •

edited

Loading

console JS crawler？

下面示例代码是为了得到scrollmagic.io example 的各项菜单名。

var el = document.getElementById("menu").getElementsByTagName ('a');
var saveData = '';
for(var k in el){
	saveData = saveData+el[k].innerHTML+'\n';
}   
console.log(saveData);

数据多的话可以直接生成文件down下来，感谢 jsfiddle | uzhr6

function fake_click(obj) {
    var ev = document.createEvent("MouseEvents");
    ev.initMouseEvent(
        "click", true, false, window, 0, 0, 0, 0, 0
        , false, false, false, false, 0, null
        );
    obj.dispatchEvent(ev);
}

function export_raw(name, data) {
    var urlObject = window.URL || window.webkitURL || window;

    var export_blob = new Blob([data]);

    var save_link = document.createElementNS("http://www.w3.org/1999/xhtml", "a")
    save_link.href = urlObject.createObjectURL(export_blob);
    save_link.download = name;
    fake_click(save_link);
}

js scroll to the bottom of page

window.scrollTo(0,document.body.scrollHeight);

贴吧页面简化

function remove() {
	for (var i= document.images.length; i-->0;)
	document.images[i].parentNode.removeChild(document.images[i]);


	var itemsArr = ['p_author_face','d_icons','p_badge','j_user_card lzl_p_p'];
	for(var i = itemsArr.length-1; i >= 0;i--){
		var items = document.getElementsByClassName(itemsArr[i]);
		for(var j = items.length-1; j >= 0;j--){
			if(items[j])items[j].remove();
		}
	}
　
	var blocks = [
		'tbui_aside_float_bar'
		,'right_section right_bright'
		,'tb_rich_poster_container'
		,'core_title core_title_theme_bright'];

	for(var i = 0;i<blocks.length;i++){
		var block = document.getElementsByClassName(blocks[i]);
		if(block[0])block[0].remove();
	}
　　//5ch
      var itemsArr = ['ad','header_cell_title','js-ad_iframe_wrap'];
	for(var i = itemsArr.length-1; i >= 0;i--){
		var items = document.getElementsByClassName(itemsArr[i]);
		for(var j = items.length-1; j >= 0;j--){
			if(items[j])items[j].remove();
		}
	}
        var ads = document.querySelectorAll('[class^="ad"]');
	for(var j = ads.length-1; j >= 0;j--){
		if(ads[j])ads[j].remove();
	}

}

Author

Phalacrocorax commented Feb 21, 2017 •

edited

Loading

前端工程化 blog

websocket

Okay another fashion concept, WebSocket is based on http, but different with it, it's a persistent protocol.

Author

Phalacrocorax commented Feb 25, 2017 •

edited

Loading

DESIGN TOOLS

像我这种18流美工，还是需要提升一下自己的，跟专业的还是差远了。

coolors.co

c7sky看到的，马上注册了一个拯救配色，另外还推荐了两个平铺纹理的网站 Subtle Patterns & The Pattern Library
coolors.co保存palettes，然后可以在materialui.co上挑选，也可以逛逛什么日本传统色中国传统色站，配色完美解决。

Editor

用了一年半sublime，准备试试visual studio code。

font for coding

What font is used in Sublime Text 3 for OS X?
While Menlo is the right answer, I have come to love working with Source Code Pro which you can download for free from Google Fonts.

感觉还不错。记录一些快捷。

multiple edit: [s] ctrl+leftclick | [vsc] alt+leftclick
goto symble: [s] ctrl+R | [vsc] ctrl+shif+o
auto reindent: [s] edit->indent | [vsc | custome] ctrl+R+L
Select all instances: [s]Alt+F3| [vsc][right click menu]change all occurence

Author

Phalacrocorax commented Apr 19, 2017 •

edited

Loading

js snippets

time format

String.prototype.toHHMMSS = function () {
    var sec_num = parseInt(this, 10); // don't forget the second param
    var hours   = Math.floor(sec_num / 3600);
    var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
    var seconds = sec_num - (hours * 3600) - (minutes * 60);

    if (hours   < 10) {hours   = "0"+hours;}
    if (minutes < 10) {minutes = "0"+minutes;}
    if (seconds < 10) {seconds = "0"+seconds;}
    return hours+':'+minutes+':'+seconds;
}

JSON convert to

testJson = eval("(" + testJson + ")");

//json array string to json array object
(loginfo_g == '') ? loginfo_g = []:loginfo_g =JSON.parse(loginfo_g);
//json array object to json array  string 
loginfo_g = JSON.stringify(loginfo_g);

JavaScript正则进阶之路——活学妙用奇淫正则表达式

数组去重 / 获取url参数 / digital format / trim

js 只允许输入数字

onkeyup="this.value=this.value.replace(/\D/gi,0);"

js正则验证

if(!(/^1[3|4|5|8][0-9]\d{4,8}$/.test(telphone))){ } //手机

h5 webapi 图片上传预览

 $("#img").change(function() {
        if(typeof FileReader==='undefined') alert("抱歉，你的浏览器不支持 FileReader");
        var file = this.files[0];
        if (file) {
            size = file['size']/1024/1024;
            if(size>2) return alert("上传的图片大小不能超过2M");
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function(e) {$(".img-preview").attr('src',e.target.result); }
        }
    });

判断是否移动端

if(!navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)){}

// 真正全能的来了，加了kindle用的silk浏览器
function browserredirect() { 
var suseragent= navigator.useragent.tolowercase();  //这里有坑
var bisipad= suseragent.match(/ipad/i) == "ipad"; 
var bisiphoneos= suseragent.match(/iphone os/i) == "iphone os"; 
var bismidp= suseragent.match(/midp/i) == "midp"; 
var bisuc7= suseragent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4"; 
var bisuc= suseragent.match(/ucweb/i) == "ucweb"; 
var bisandroid= suseragent.match(/android/i) == "android"; 
var bisce= suseragent.match(/windows ce/i) == "windows ce"; 
var biswm= suseragent.match(/windows mobile/i) == "windows mobile";
 var biskindle = suseragent.match(/silk/i) == "silk"; 
if (bisipad || bisiphoneos || bismidp || bisuc7 || bisuc || bisandroid || bisce || biswm ||  biskindle) { 
//window.location.href=link1; 
} else { 
//window.location=link2; 
} 
} 
browserredirect();

scroll down hide scroll up show

<script type="text/javascript">
$(function() {
    var mywindow = $(window);
    var mypos = mywindow.scrollTop();
    mywindow.scroll(function() {
        if(mywindow.scrollTop() > mypos)
        {
            $('.index-navigation').fadeOut();  
        }
        else
        {
            $('.index-navigation').fadeIn();
        }
        mypos = mywindow.scrollTop();
     });
    })
</script>

中英文情况下判断字数并截取固定长度

getBLen = function(str) {  
        if (str == null) return 0;  
        if (typeof str != "string"){  
            str += "";  
        }  
        return str.replace(/[^\x00-\xff]/g,"01").length;  
    } 
    function cutstr(str, len) {
        var str_length = 0;
        var str_len = 0;
        str_cut = new String();
        str_len = str.length;
        for (var i = 0; i < str_len; i++) {
            a = str.charAt(i);
            str_length++;
            if (escape(a).length > 4) {
                //中文字符的长度经编码之后大于4  
                str_length++;
            }
            str_cut = str_cut.concat(a);
            if (str_length >= len) {
                // str_cut = str_cut.concat("...");
                return str_cut;
            }
        }
        //如果给定字符串小于指定长度，则返回源字符串； 
        if (str_length < len) {
            return str;
        }
    }

csv-writter

csvWriter

Author

Phalacrocorax commented Aug 9, 2018

VUE

file upload

Author

Phalacrocorax commented Jan 23, 2019

Grab Data | js

755 daily latest posting time analysis

<a class="_2pN-CR8- Link" href="/okada-nana/18950" data-reactid="415"><time datetime="2018-04-25T10:19:40+09:00" data-reactid="416">1分前</time></a>
<a class="_2pN-CR8- Link" href="/okada-nana/18947" data-reactid="301"><time datetime="2018-04-24T22:31:26+09:00" data-reactid="302">11時間前</time></a>

var time = document.getElementsByTagName('time');
var savedata = '';
for(var i=time.length-1;i>=0;i--)
{
	savedata+=time[i].dateTime+'\n';
}

setTimeout(function(){
  window.scrollTo( 0, 0 );
}, 500);

export_raw('okd.csv', savedata)
export_raw('yuiri.csv', savedata)

# export into table
select substr(post,1,10),max(substr(post,12,16)),max(post) from test_20180425
where substr(post,12,16) >= '14:00' or substr(post,12,16) <= '04:00'
group by substr(post,1,10)
order by substr(post,1,10)

Get tweets with replies

var texts = [];
//node = document.querySelectorAll('article,span,time');
node = document.querySelectorAll('div[lang="ja"],*[dir="auto"],time');
for(i = 0;i < node.length; i++)
{
    if(node[i].nodeName == "TIME"){
        texts.push(node[i].getAttribute("datetime"));
    }else{
        texts.push(node[i].textContent);
    }
}
var saveData = texts.join("\n");
console.log(saveData);

Phalacrocorax/JS_tools.md

Select an option

No results found

Select an option

No results found

console Logger

JS 从入门到放弃

叨叨叨=babel？

transpile

JS报错

Phalacrocorax commented Feb 18, 2017 •

edited

Loading

Uh oh!

Phalacrocorax commented Feb 21, 2017 •

edited

Loading

Uh oh!

Phalacrocorax commented Feb 25, 2017 •

edited

Loading

Uh oh!

Phalacrocorax commented Apr 19, 2017 •

edited

Loading

Uh oh!

Phalacrocorax commented Aug 9, 2018

Uh oh!

Phalacrocorax commented Jan 23, 2019

Uh oh!

Phalacrocorax/JS_tools.md

console Logger

JS 从入门到放弃

叨叨叨=babel？

transpile

JS报错

Phalacrocorax commented Feb 18, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

console JS crawler？

js scroll to the bottom of page

贴吧页面简化

Uh oh!

Phalacrocorax commented Feb 21, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

前端工程化 blog

websocket

Uh oh!

Phalacrocorax commented Feb 25, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

DESIGN TOOLS

coolors.co

Editor

font for coding

Uh oh!

Phalacrocorax commented Apr 19, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

js snippets

time format

JSON convert to

JavaScript正则进阶之路——活学妙用奇淫正则表达式

js 只允许输入数字

js正则验证

h5 webapi 图片上传预览

判断是否移动端

scroll down hide scroll up show

中英文情况下判断字数并截取固定长度

csv-writter

Uh oh!

Phalacrocorax commented Aug 9, 2018

VUE

Uh oh!

Phalacrocorax commented Jan 23, 2019

Grab Data | js

755 daily latest posting time analysis

Get tweets with replies

Uh oh!

Phalacrocorax commented Feb 18, 2017 •

edited

Loading

Phalacrocorax commented Feb 21, 2017 •

edited

Loading

Phalacrocorax commented Feb 25, 2017 •

edited

Loading

Phalacrocorax commented Apr 19, 2017 •

edited

Loading