分类目录归档: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);
});