Javascript 高级程序设计学习

让元素显示滚动到屏幕可视区:

el.scrollIntoView()  // 元素顶部与可视区顶部对齐
el.scrollIntoView(false)  // 元素底部与可视区底部对齐

监听右键菜单并阻止其显示，然后可以显示自定义菜单

window.addEventListener('contextmenu',function(e){e.preventDefault();console.log(789)}).

监听窗口关闭事件,弹出提示向用户再次确认

window.addEventListener('beforeunload',function(e){e.returnValue = "确定要关闭吗"})

监听url的哈希字段的改变

window.addEventListener('hashchange',function(e){console.log(e，location)})

兼容--文本框的选择文本方法

function selectText(textbox, startIndex, stopIndex) {
            if (textbox.setSelectionRange) {
                textbox.setSelectionRange(startIndex, stopIndex);
            } else if (textbox.createTextRange) {
                var range = textbox.createTextRange();
                range.collapse(true);
                range.moveStart("character", startIndex);
                range.moveEnd("character", stopIndex - startIndex);
                range.select();
            }

            textbox.focus();
        }

监听keypress事件，可以限制用户的输入(数字)

textInput.addEventListener('keypress',(e) => {
            let charCode = e.keyCode
            if(!/\d/.test(String.fromCharCode(charCode)) && charCode > 9 && !e.ctrlKey) {
                e.preventDefault();
            }
        })

实用兼容方法

var EventUtil = {
            //获得剪切板的记录
            getClipboardText: function (event) {
                var clipboardData = (event.clipboardData || window.clipboardData);
                return clipboardData.getData("text");
            },
            //设置剪切板的记录
            setClipboardText: function (event, value) {
                if (event.clipboardData) {
                    return event.clipboardData.setData("text/plain", value);
                } else if (window.clipboardData) {
                    return window.clipboardData.setData("text", value);
                }
            },
            //省略的代码
        };

分辨是否是原生JavaScript对象

一般我们判断是否是数组，会这样写：

var isArray = value instanceof Array;

以上代码要返回true，value 必须是一个数组，而且还必须与Array 构造函数在同个全局作用域中。（别忘了，Array 是window 的属性。）如果value 是在另个frame 中定义的数组，那么以上代码就会返回false。
解决上述问题：大家知道，在任何值上调用Object 原生的toString()方法，都会返回一个[object NativeConstructorName]格式的字符串。每个类在内部都有一个[[Class]]属性，这个属性中就指定了上述字符串中的构造函数名。

所以就有这样：

function isArray(value){
return Object.prototype.toString.call(value) == "[object Array]";
}

function isFunction(value){
return Object.prototype.toString.call(value) == "[object Function]";
}
function isRegExp(value){
return Object.prototype.toString.call(value) == "[object RegExp]";
}

请注意，Object.prototpye.toString()本身也可能会被修改。这
技巧假设Object.prototpye.toString()是未被修改过的原生版本。

base64编码与解码

function utf8_to_b64( str ) {
  return window.btoa(unescape(encodeURIComponent( str )));
}

function b64_to_utf8( str ) {
  return decodeURIComponent(escape(window.atob( str )));
}

dom 变化检测 MutationObserver， 短时间内的变化会合成一次去触发回调

var observer = new MutationObserver(function (mutations, observer) {
mutations.forEach(function(mutation) {
console.log(mutation);
});
});

var article = document.querySelector('article');

var options = {
'childList': true,
'attributes':true
} ;

observer.observe(article, options);

childList：子节点的变动（指新增，删除或者更改）。
attributes：属性的变动。
characterData：节点内容或节点文本的变动

subtree：布尔值，表示是否将该观察器应用于该节点的所有后代节点。
attributeOldValue：布尔值，表示观察attributes变动时，是否需要记录变动前的属性值。
characterDataOldValue：布尔值，表示观察characterData变动时，是否需要记录变动前的值。
attributeFilter：数组，表示需要观察的特定属性（比如['class','src']）。

// 保存所有没有被观察器处理的变动
var changes = mutationObserver.takeRecords();

// 停止观察
mutationObserver.disconnect();

window.matchMedia 媒体查询

matchMedia() 返回一个新的 MediaQueryList 对象，表示指定的媒体查询字符串解析后的结果。

matchMedia() 方法的值可以是任何一个 CSS @media 规则 的特性, 如 min-height, min-width, orientation 等。

window.matchMedia("(max-width:100px)")

MediaQueryList 对象有订阅接口：addListener，这样就可以根据媒体的改变去修改样式了。

元素左对齐与右对齐的设置

element.dir属性

'rtl' 右对齐 right to left

'ltr' 左对齐 left to right