分类目录归档：Javascript

vue的directive的两种实现方式

引入第三方js组件的正确姿势是采用vue.directive的方式，而其它方式如下，

//以下方式引入第三方组件，会出现两次绘制对，也即在调试过程中可能会出现一些奇怪的问题，不建议使用这种方法。
export default {
   mounted: function () {
      this.$nextTick(function () {
         // todo: editor = CodeMirror.fromTextArea(document.getElementById('editor');
      }
   }
}

第一种，直接在app.js中添加指令如下：

Vue.directive('drag', {  
    inserted:function(el){  
        el.onmousedown=function(e){  
            let l=e.clientX-el.offsetLeft;  
            let t=e.clientY-el.offsetTop;  
            document.onmousemove=function(e){  
                el.style.left=e.clientX-l+'px';  
                el.style.top=e.clientY-t+'px';  
            };  
            el.onmouseup=function(){  
                document.onmousemove=null;  
                el.onmouseup=null;  
            }  
        }  
    }  
})  
new Vue({  
　　el:'#app'  
});

第二种，直接在vue的组件中添加如下

<template>
    <div>
        <input v-model="dir1" v-my-directive1="dir1"/>
　　　　 <input v-model="dir2" v-my-directive2="dir2"/>
    </div>
</template>
<script>
    export default {
        data(){
            return {
　　　　　　　　　dir1:'',
　　　　　　　　　dir2:''
 
　　　　　　　}
        },
        directives:{
　　　　　　　//直接绑定函数，作用等同于update,不做准备工作和扫尾工作
            myDirective1(val){
                console.log(val)
            },
　　　　　　　myDirective2:{
　　　　　　　　　　bind(){
　　　　　　　　　　　　　//第一次绑定到元素的准备工作
　　　　　　　　　　},
　　　　　　　　　　update(val，old){
　　　　　　　　　　　　//在绑定到元素后立即以初始值第一次调用，然后每次example2变化都会调用update
　　　　　　　　　　　　console.log(val)
　　　　　　　　　　},　　
　　　　　　　　　　unbind(){
　　　　　　　　　　　　//销毁前的清理工作
　　　　　　　　　　}
　　　　　　　}
        }
    }
</script>

node.js的cms收集

—–
keystone.js是一个基于express&mongodb的cms框架。
https://github.com/keystonejs/keystone
—–
DoraCMS是基于Nodejs+express+mongodb编写的一套内容管理系统，结构简单，较目前一些开源的cms，doracms易于拓展，特别适合前端开发工程师做二次开发。
https://github.com/doramart/DoraCMS

webrtc的开发资源

DataChannel版本，以下仓库是使用node.v6.x.x版本。node.v8或node.v9都无法运行。
——–WebRtc M60版本—————————————
https://github.com/mayeut/libwebrtc/releases/tag/v1.1.1

——————————————-
https://js-platform.github.io/node-webrtc/


—————-node.js的历史版本————————-
https://nodejs.org/en/download/releases/
——————————————————-
———————————————
快速开发webrtc应用的rtc.io应用
http://rtc.io/index.html
———————
这个库是一个完整的datachannel库，提供了类似浏览器端的API功能，免文档，可直接开发，【已经验证过其是可以编译成功的】。
https://github.com/helloIAmPau/datachannel.git
————————–
https://github.com/seemk/WebUDP
————————————-
node.js的webrtc实现，但仅是datachannel部份。
https://github.com/js-platform/node-webrtc/
https://js-platform.github.io/node-webrtc/

前端技术演进收集

https://segmentfault.com/a/1190000011233764
最初的时代——web1.0
前端的春天——Ajax
前端的框架——MVC、MVP、MVVM
MVC 的变种——FLux
———-web1.0时代————————
HTML1.0是在1993年6月诞生，1999年12月发布的HTML4.01，这段时间每年一版本，08年H5被提出，到14年完成标准。
静态页时代：内容提供为主。
PHP是1997年发版，但在此之前就有。
———web2.0时代—————–
动态网页时候：用户互动，用户产生内容。

———Ajax的出现与兴起————————-
1999年，微软公司发布IE5，第一次引入新功能：允许javascript脚本向服务器发起HTTP请求。这个功能当时并没有引起注意，直到2004年Gmail发布和2005年Google Map发布，才引起广泛重视。2005年2月，ajax这个词第一次正式提出，指围绕这个功能进行开发的一整套做法。从此，ajax成为脚本发起HTTP通信的代名词，W3C也在2006年发布了它的国际标准。
——–后端的MVC时代——————-
SpringMVC
———–前间MVC时代—–

直接使用XMLHttpRequest对象的例子 

var mp4check_xhr = function (weburls, url, callback) {
        var url_mp4 = url.replace(".webm", ".mp4");
        var xhr = new XMLHttpRequest;
        xhr.open('head', url_mp4);
        xhr.onload = function () {
            var length = xhr.getResponseHeader('content-length');
            if(length > 100){
                var weburl = weburls[url];
                for(var id in weburl) {
                    weburl[id].recordFile = url_mp4;
                }
                delete weburls[url];
                if(Object.keys(weburls).length <= 0) {
                    callback();
                }
            }else{
                delete weburls[url];
                if(Object.keys(weburls).length <= 0) {
                    callback();
                }
            }
        };
        xhr.onerror = function () {
            delete weburls[url];
            if(Object.keys(weburls).length <= 0) {
                callback();
            }
        }
        xhr.send();
    };

JAVASCRIP全局错误捕获

Audit JavaScript execution errors by logging the errors.

window.addEventListener('error', function(e) {
    var errorText = [
        e.message,
        'URL: ' + e.filename,
        'Line: ' + e.lineno + ', Column: ' + e.colno,
        'Stack: ' + (e.error && e.error.stack || '(no stack trace)')
    ].join('\n');
 
    // Example: log errors as visual output into the host page.
    // Note: you probably don’t want to show such errors to users, or
    //       have the errors get indexed by Googlebot; however, it may
    //       be a useful feature while actively debugging the page.
    var DOM_ID = 'rendering-debug-pre';
    if (!document.getElementById(DOM_ID)) {
        var log = document.createElement('pre');
        log.id = DOM_ID;
        log.style.whiteSpace = 'pre-wrap';
        log.textContent = errorText;
        if (!document.body) document.body = document.createElement('body');
        document.body.insertBefore(log, document.body.firstChild);
    } else {
        document.getElementById(DOM_ID).textContent += '\n\n' + errorText;
    }
 
    // Example: log the error to remote service.
    // Note: you can log errors to a remote service, to understand
    //       and monitor the types of errors encountered by regular users,
    //       Googlebot, and other crawlers.
    var client = new XMLHttpRequest();
    client.open('POST', 'https://example.com/logError');
    client.setRequestHeader('Content-Type', 'text/plain;charset=UTF-8');
    client.send(errorText);
});