JavaScript – 默默的点滴

vue中router-view与父组件之间的通信

在项目当中，遇到一个问题。当父页面的某个属性变化时，需要router-view中的页面根据不同的值进行不同的操作。

仔细想一下，其实类似父子组件之间的传值。

实现过程如下：

父组件绑定属性和事件

<template>
   <router-view v-on:test="testP" v-bind:msg="msg"></router-view>
</template>
<script type="text/javascript">
   export default {
      data() {
         return {
            msg: "把我带给router-view吧！"
         }
      },
      methods: {
        testP: function (data) {
          // 从router-view返回来的数据
          console.log(data)
          // 打印出来就是
          // 把我带给父组件吧！第一次！
          // 把我带给父组件吧！第二次！
        }
      }
   }
</script>

<router-view v-on:test="testP" v-bind:msg="msg"></router-view>

</template>

export default {

data() {

return {

msg: "把我带给router-view吧！"

}

methods: {

testP: function (data) {

// 从router-view返回来的数据

console.log(data)

// 打印出来就是

// 把我带给父组件吧！第一次！

// 把我带给父组件吧！第二次！

}

</script>

router-view关联的属性和监听动作

<template>
   <div>{{msg}}</div>
</template>
<script type="text/javascript">
   export default {
      props:['msg'],
      data() {
         return {}
      },
      watch: {
        // 监听父组件的msg的变化
        msg: function() {
          console.log(this.msg)
          // 打印出来就是
          // 把我带给router-view吧！
        }
      },
      mounted() {
        // this.init()
      },
      methods: {
        init() {
          // 第一次向父组件传值
          this.$emit("test", "把我带给父组件吧！第一次！")
          // 第二次向父组件传值
          this.$emit("test", "把我带给父组件吧！第二次！")
        }
      }
   }

</template>

export default {

props:['msg'],

data() {

return {}

watch: {

// 监听父组件的msg的变化

msg: function() {

console.log(this.msg)

// 打印出来就是

// 把我带给router-view吧！

}

mounted() {

// this.init()

methods: {

init() {

// 第一次向父组件传值

this.$emit("test", "把我带给父组件吧！第一次！")

// 第二次向父组件传值

this.$emit("test", "把我带给父组件吧！第二次！")

}

参考链接

Evaluating JavaScript code via import()

The import() operator lets us dynamically load ECMAScript modules. But they can also be used to evaluate JavaScript code (as Andrea Giammarchi recently pointed out to me), as an alternative to eval(). This blog post explains how that works.

`eval()` does not support `export` and `import`

A significant limitation of eval() is that it doesn’t support module syntax such as export and import.

If we use import() instead of eval(), we can actually evaluate module code, as we will see later in this blog post.

In the future, we may get Realms which are, roughly, a more powerful eval() with support for modules.

Evaluating simple code via `import()`

Let’s start by evaluating a console.log() via import():

const js = `console.log('Hello everyone!');`;
const encodedJs = encodeURIComponent(js);
const dataUri = 'data:text/javascript;charset=utf-8,'
  + encodedJs;
import(dataUri);

// Output:
// 'Hello everyone!'

const js = `console.log('Hello everyone!');`;

const encodedJs = encodeURIComponent(js);

const dataUri = 'data:text/javascript;charset=utf-8,'

+ encodedJs;

import(dataUri);

// Output:

// 'Hello everyone!'

What is going on here?

First we create a so-called data URI. The protocol of this kind of URI is data:. The remainder of the URI encodes the full resource instead pointing to it. In this case, the data URI contains a complete ECMAScript module – whose content type is text/javascript.
Then we dynamically import this module and therefore execute it.

Warning: This code only works in web browsers. On Node.js, import() does not support data URIs.

Accessing an export of an evaluated module

The fulfillment value of the Promise returned by import() is a module namespace object. That gives us access to the default export and the named exports of the module. In the following example, we access the default export:

const js = `export default 'Returned value'`;
const dataUri = 'data:text/javascript;charset=utf-8,'
  + encodeURIComponent(js);
import(dataUri)
  .then((namespaceObject) => {
    assert.equal(namespaceObject.default, 'Returned value');
  })
  .catch((err) => {
     console.log(err.message); // "Importing a module script failed."
     // apply some logic, e.g. show a feedback for the user
   });

const js = `export default 'Returned value'`;

const dataUri = 'data:text/javascript;charset=utf-8,'

+ encodeURIComponent(js);

import(dataUri)

.then((namespaceObject) => {

assert.equal(namespaceObject.default, 'Returned value');

})

.catch((err) => {

console.log(err.message); // "Importing a module script failed."

// apply some logic, e.g. show a feedback for the user

});

Creating data URIs via tagged templates

With an appropriate function esm (whose implementation we’ll see later), we can rewrite the previous example and create the data URI via a tagged template:

const dataUri = esm`export default 'Returned value'`;
import(dataUri)
  .then((namespaceObject) => {
    assert.equal(namespaceObject.default, 'Returned value');
  })
  .catch((err) => {
     console.log(err.message); // "Importing a module script failed."
     // apply some logic, e.g. show a feedback for the user
   });

const dataUri = esm`export default 'Returned value'`;

import(dataUri)

.then((namespaceObject) => {

assert.equal(namespaceObject.default, 'Returned value');

})

.catch((err) => {

console.log(err.message); // "Importing a module script failed."

// apply some logic, e.g. show a feedback for the user

});

The implementation of esm looks as follows:

function esm(templateStrings, ...substitutions) {
  let js = templateStrings.raw[0];
  for (let i=0; i<substitutions.length; i++) {
    js += substitutions[i] + templateStrings.raw[i+1];
  }
  return 'da

function esm(templateStrings, ...substitutions) {

let js = templateStrings.raw[0];

for (let i=0; i<substitutions.length; i++) {

js += substitutions[i] + templateStrings.raw[i+1];

}

return 'da

For the encoding, we have switched from charset=utf-8 to base64. Compare:

Source code: 'a' < 'b'
Data URI 1: data:text/javascript;charset=utf-8,'a'%20%3C%20'b'
Data URI 2: data:text/javascript;base64,J2EnIDwgJ2In

Each of the two ways of encoding has different pros and cons:

Benefits of charset=utf-8 (percent-encoding):
- Much of the source code is still readable.
Benefits of base64:
- The URIs are usually shorter.
- Easier to nest because it doesn’t contain special characters such as apostrophes. We’ll see an example of nesting in the next section.

btoa() is a global utility function that encodes a string via base 64. Caveats:

It is not available on Node.js.
It should only be used for characters whose Unicode code points range from 0 to 255.

Evaluating a module that imports another module

With tagged templates, we can nest data URIs and encode a module m2 that imports another module m1:

const m1 = esm`export function f() { return 'Hello!' }`;
const m2 = esm`import {f} from '${m1}'; export default f()+f();`;
import(m2)
  .then(ns => assert.equal(ns.default, 'Hello!Hello!'))
  .catch((err) => {
     console.log(err.message); // "Importing a module script failed."
     // apply some logic, e.g. show a feedback for the user
   });

const m1 = esm`export function f() { return 'Hello!' }`;

const m2 = esm`import {f} from '${m1}'; export default f()+f();`;

import(m2)

.then(ns => assert.equal(ns.default, 'Hello!Hello!'))

.catch((err) => {

console.log(err.message); // "Importing a module script failed."

// apply some logic, e.g. show a feedback for the user

});

参考链接

判断网页是通过PC端还是移动终端打开的

通过判断打开设备，跳转不同页面，可以根据 User-Agent 来区分：

if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
    window.location.href = "";     //手机
} else {
    window.location.href = "";        //电脑
}

if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {

window.location.href = ""; //手机

} else {

window.location.href = ""; //电脑

}

也可以执行其他操作：

if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
    alert('您正在通过手机访问');
} else {
    alert("您在PC端访问");
}

if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {

alert('您正在通过手机访问');

} else {

alert("您在PC端访问");

}

JS判断客户端是否是iOS或者Android手机移动端：

通过判断浏览器的 userAgent，用正则来判断手机是否是ios和Android客户端。代码如下：

<script type="text/javascript">
    var u = navigator.userAgent;
    var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
    var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    alert('是否是Android：'+isAndroid);
    alert('是否是iOS：'+isiOS);
</script>

var u = navigator.userAgent;

var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端

var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

alert('是否是Android：'+isAndroid);

alert('是否是iOS：'+isiOS);

</script>

下面一个比较全面的浏览器检查函数，提供更多的检查内容，你可以检查是否是移动端（Mobile）、ipad、iphone、微信、QQ等。

第一种：

<script type="text/javascript">
    //判断访问终端
    var browser={
        versions:function(){
            var u = navigator.userAgent, app = navigator.appVersion;
            return {
                trident: u.indexOf('Trident') > -1, //IE内核
                presto: u.indexOf('Presto') > -1, //opera内核
                webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
                gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,//火狐内核
                mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
                ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
                android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android终端
                iPhone: u.indexOf('iPhone') > -1 , //是否为iPhone或者QQHD浏览器
                iPad: u.indexOf('iPad') > -1, //是否iPad
                webApp: u.indexOf('Safari') == -1, //是否web应该程序，没有头部与底部
                weixin: u.indexOf('MicroMessenger') > -1, //是否微信 （2015-01-22新增）
                qq: u.match(/\sQQ/i) == " qq" //是否QQ
            };
        }(),
        language:(navigator.browserLanguage || navigator.language).toLowerCase()
    }
    //使用方法：
    //判断是否IE内核
    if(browser.versions.trident){ alert("is IE"); }
    //判断是否webKit内核
    if(browser.versions.webKit){ alert("is webKit"); }
    //判断是否移动端
    if(browser.versions.mobile||browser.versions.android||browser.versions.ios){
        alert("移动端"); 
    }
</script>

//判断访问终端

var browser={

versions:function(){

var u = navigator.userAgent, app = navigator.appVersion;

return {

trident: u.indexOf('Trident') > -1, //IE内核

presto: u.indexOf('Presto') > -1, //opera内核

webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核

gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,//火狐内核

mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端

ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端

android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android终端

iPhone: u.indexOf('iPhone') > -1 , //是否为iPhone或者QQHD浏览器

iPad: u.indexOf('iPad') > -1, //是否iPad

webApp: u.indexOf('Safari') == -1, //是否web应该程序，没有头部与底部

weixin: u.indexOf('MicroMessenger') > -1, //是否微信（2015-01-22新增）

qq: u.match(/\sQQ/i) == " qq" //是否QQ

};

}(),

language:(navigator.browserLanguage || navigator.language).toLowerCase()

}

//使用方法：

//判断是否IE内核

if(browser.versions.trident){ alert("is IE"); }

//判断是否webKit内核

if(browser.versions.webKit){ alert("is webKit"); }

//判断是否移动端

if(browser.versions.mobile||browser.versions.android||browser.versions.ios){

alert("移动端");

}

</script>

检测浏览器语言

currentLang = navigator.language;   //判断除IE外其他浏览器使用语言
if(!currentLang){//判断IE浏览器使用语言
    currentLang = navigator.browserLanguage;
}
alert(currentLang);

currentLang = navigator.language; //判断除IE外其他浏览器使用语言

if(!currentLang){//判断IE浏览器使用语言

currentLang = navigator.browserLanguage;

}

alert(currentLang);

第二种：

if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
    //alert(navigator.userAgent);  
    window.location.href ="iPhone.html";
} else if (/(Android)/i.test(navigator.userAgent)) {
    //alert(navigator.userAgent); 
    window.location.href ="Android.html";
} else {
    window.location.href ="pc.html";
};

if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {

//alert(navigator.userAgent);

window.location.href ="iPhone.html";

} else if (/(Android)/i.test(navigator.userAgent)) {

//alert(navigator.userAgent);

window.location.href ="Android.html";

} else {

window.location.href ="pc.html";

};

也可以通过这样来适配，然后直接转跳到移动端页面：

function mobile_device_detect(url){
  var thisOS=navigator.platform;
  var os=new Array("iPhone","iPod","iPad","android","Nokia","SymbianOS","Symbian","Windows Phone","Phone","Linux armv71","MAUI","UNTRUSTED/1.0","Windows CE","BlackBerry","IEMobile");
  for(var i=0;i<os.length;i++){
    if(thisOS.match(os[i])){
      window.location.href=url;
    }
  }
  if(navigator.platform.indexOf('iPad') != -1){
    window.location.href=url;
  }
  var check = navigator.appVersion;
  if( check.match(/linux/i) ){
    if(check.match(/mobile/i) || check.match(/X11/i)){
      window.location.href=url;
    }
  }
}

function mobile_device_detect(url){

var thisOS=navigator.platform;

var os=new Array("iPhone","iPod","iPad","android","Nokia","SymbianOS","Symbian","Windows Phone","Phone","Linux armv71","MAUI","UNTRUSTED/1.0","Windows CE","BlackBerry","IEMobile");

for(var i=0;i<os.length;i++){

if(thisOS.match(os[i])){

window.location.href=url;

}

if(navigator.platform.indexOf('iPad') != -1){

window.location.href=url;

}

var check = navigator.appVersion;

if( check.match(/linux/i) ){

if(check.match(/mobile/i) || check.match(/X11/i)){

window.location.href=url;

}

参考链接

判断网页是通过PC端还是移动终端打开的

window.onerror的总结

最近一直在做前端js错误监控的工作，在不断的打磨和完善中，发现里面还是知识点不少，现在就前端js错误监控做一些笔记和总结

我们知道前端js错误监控主要是利用了window.onerror函数来实现，onerror函数会在页面发生js错误时被调用。

window.onerror = function(message, source, lineno, colno, error) { ... }

1	window.onerror = function(message, source, lineno, colno, error) { ... }

我们可以看到函数正常是可以收集到错误字符串信息、发生错误的js文件，错误所在的行数、列数、和Error对象（里面会有调用堆栈信息等）。

我们只需要把这些信息回传到server端即可，再配合sourcemap的话我们就可以知道是源码中的哪一行出错了，从而实现完美的错误实时监控系统了。然而要完美还是需要做很多工作的。

继续阅读window.onerror的总结

Vue理解v-model以及监听数据变化

最近在学习使用 Vue 开发简单的页面，界面库使用了 Quasar 。

由于刚刚开始接触 Vue，很多地方不熟悉，浪费了不少时间。

继续阅读Vue理解v-model以及监听数据变化

vue中template的三种写法

第一种(字符串模板写法):

直接写在vue构造器里,这种写法比较直观,适用于html代码不多的场景,但是如果模板里html代码太多,不便于维护,不建议这么写.

<!DOCTYPE html>
<html>
  <!--
    WARNING! Make sure that you match all Quasar related
    tags to the same version! (Below it's "@1.7.4")
  -->

  <head>
     <!--
     <link href="https://cdn.jsdelivr.net/npm/quasar@1.7.4/dist/quasar.min.css" rel="stylesheet" type="text/css">
     -->
     <link href="https://www.mobibrw.com/wp-content/uploads/2020/06/quasar@1.7.4.css" rel="stylesheet" type="text/css">
  </head>

  <body>
    <div id="q-app">

    </div>

    <!-- Add the following at the end of your body tag -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/quasar@1.7.4/dist/quasar.umd.min.js"></script>
    -->
    <script src="https://www.mobibrw.com/wp-content/uploads/2020/06/vue@2.0.0.js"></script>
    <script src="https://www.mobibrw.com/wp-content/uploads/2020/06/quasar.umd@1.7.4.js"></script>
    
    <script>
      /*
        Example kicking off the UI. Obviously, adapt this to your specific needs.
        Assumes you have a <div id="q-app"></div> in your <body> above
       */
      new Vue({
        el: '#q-app',
        data: function () {
          return {
            version: Quasar.version
          }
        },
        template: `<div class="q-ma-md"> Running Quasar v{{ version }}</div>`
        // ...etc
      })
    </script>
  </body>
</html>

<!DOCTYPE html>

<html>

<!--

WARNING! Make sure that you match all Quasar related

tags to the same version! (Below it's "@1.7.4")

-->

<head>

<!--

-->

</head>

<body>

</div>

<!--

-->

Example kicking off the UI. Obviously, adapt this to your specific needs.

Assumes you have a <div id="q-app"></div> in your <body> above

new Vue({

el: '#q-app',

data: function () {

return {

version: Quasar.version

}

// ...etc

})

</script>

</body>

</html>

第二种:

直接写在template标签里,这种写法跟写html很像。

<!DOCTYPE html>
<html>
  <!--
    WARNING! Make sure that you match all Quasar related
    tags to the same version! (Below it's "@1.7.4")
  -->

  <head>
     <!--
     <link href="https://cdn.jsdelivr.net/npm/quasar@1.7.4/dist/quasar.min.css" rel="stylesheet" type="text/css">
     -->
     <link href="https://www.mobibrw.com/wp-content/uploads/2020/06/quasar@1.7.4.css" rel="stylesheet" type="text/css">
  </head>

  <body>
    <div id="q-app">
        <template id='template1'>
          <div class="q-ma-md">
            Running Quasar v{{ version }}
          </div>
        </template>
    </div>

    <!-- Add the following at the end of your body tag -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/quasar@1.7.4/dist/quasar.umd.min.js"></script>
    -->
    <script src="https://www.mobibrw.com/wp-content/uploads/2020/06/vue@2.0.0.js"></script>
    <script src="https://www.mobibrw.com/wp-content/uploads/2020/06/quasar.umd@1.7.4.js"></script>
    
    <script>
      /*
        Example kicking off the UI. Obviously, adapt this to your specific needs.
        Assumes you have a <div id="q-app"></div> in your <body> above
       */
      new Vue({
        el: '#q-app',
        data: function () {
          return {
            version: Quasar.version
          }
        },
        template: '#template1'
        // ...etc
      })
    </script>
  </body>
</html>

<!DOCTYPE html>

<html>

<!--

WARNING! Make sure that you match all Quasar related

tags to the same version! (Below it's "@1.7.4")

-->

<head>

<!--

-->

</head>

<body>

Running Quasar v{{ version }}

</div>

</template>

</div>

<!--

-->

Example kicking off the UI. Obviously, adapt this to your specific needs.

Assumes you have a <div id="q-app"></div> in your <body> above

new Vue({

el: '#q-app',

data: function () {

return {

version: Quasar.version

}

// ...etc

})

</script>

</body>

</html>

第三种:

写在script标签里,这种写法官方推荐,vue官方推荐script中type属性加上"x-template",即:

<!DOCTYPE html>
<html>
  <!--
    WARNING! Make sure that you match all Quasar related
    tags to the same version! (Below it's "@1.7.4")
  -->

  <head>
     <!--
     <link href="https://cdn.jsdelivr.net/npm/quasar@1.7.4/dist/quasar.min.css" rel="stylesheet" type="text/css">
     -->
     <link href="https://www.mobibrw.com/wp-content/uploads/2020/06/quasar@1.7.4.css" rel="stylesheet" type="text/css">
  </head>

  <body>
    <div id="q-app"></div>
	
	<script type="x-template" id="template1">
    	<div class="q-ma-md">
      	  Running Quasar v{{ version }}
    	</div>
    </script>

    <!-- Add the following at the end of your body tag -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/quasar@1.7.4/dist/quasar.umd.min.js"></script>
    -->
    <script src="https://www.mobibrw.com/wp-content/uploads/2020/06/vue@2.0.0.js"></script>
    <script src="https://www.mobibrw.com/wp-content/uploads/2020/06/quasar.umd@1.7.4.js"></script>
    
    <script>
      /*
        Example kicking off the UI. Obviously, adapt this to your specific needs.
        Assumes you have a <div id="q-app"></div> in your <body> above
       */
      new Vue({
        el: '#q-app',
        data: function () {
          return {
            version: Quasar.version
          }
        },
        template: '#template1'
        // ...etc
      })
    </script>
  </body>
</html>

<!DOCTYPE html>

<html>

<!--

WARNING! Make sure that you match all Quasar related

tags to the same version! (Below it's "@1.7.4")

-->

<head>

<!--

-->

</head>

<body>

Running Quasar v{{ version }}

</div>

</script>

<!--

-->

Example kicking off the UI. Obviously, adapt this to your specific needs.

Assumes you have a <div id="q-app"></div> in your <body> above

new Vue({

el: '#q-app',

data: function () {

return {

version: Quasar.version

}

// ...etc

})

</script>

</body>

</html>

推荐这个写法的主要原因就可以把模版文件写到另外的一个JS文件里面，然后动态加载，实现模版复用以及文件分离。不至于一个页面里面实现太多的东西，导致页面代码混乱。

参考链接

16款优秀的Vue UI组件库推荐

Vue 是一个轻巧、高性能、可组件化的MVVM库，API简洁明了，上手快。从Vue推出以来，得到众多Web开发者的认可。
在公司的Web前端项目开发中，多个项目采用基于Vue的UI组件框架开发，并投入正式使用。
开发团队在使用Vue.js框架和UI组件库以后，开发效率大大提高，自己写的代码也少了，很多界面效果组件已经封装好了。
在选择Vue UI组件库的过程中，通过GitHub上根据star数量、文档丰富程度、更新的频率以及维护等因素，也收集整理了一些优秀的Vue UI组件库。

PS：国内的UI组件大部分都只有一部分的，常用的头部导航，底部导航，listview，grid表格很多都是没有的。

后面才发现，基于Vue的Quasar Framework 介绍这个框架UI组件很全面，准备下次使用这个框架了

基于Vue的Quasar Framework 中文网
http://www.quasarchs.com/

quasarframework/quasar: Quasar Framework
https://github.com/quasarframework/quasar

Quasar（发音为/kweɪ.zɑɹ/)是MIT许可的开源框架（基于Vue），可帮助Web开发人员创建：
响应式网站
PWA（Progressive Web App）
通过Apache Cordova构建移动APP（Android，iOS，…）
多平台桌面应用程序（使用Electron）
Quasar允许开发人员编写一次代码，然后使用相同的代码库同时部署为网站、PWA、Mobile App和Electron App。使用最先进的CLI设计应用程序，并提供精心编写，速度非常快的Quasar Web组件。

当使用Quasar时，你不需要像Hammerjs，Momentjs或Bootstrap这样的额外重型库。它拥有这些功能，而且体积很小！

==============

1、 iView UI组件库
iView 是一套基于 Vue.js 的开源 UI 组件库，主要服务于 PC 界面的中后台产品。iView的组件还是比较齐全的，更新也很快，文档写得很详细。有公司团队维护，比较可靠的Vue UI组件框架。iView生态也做得很好，还有开源了一个iView Admin，做后台非常方便。官网上介绍，iView已经应用在TalkingData、阿里巴巴、百度、腾讯、今日头条、京东、滴滴出行、美团、新浪、联想等大型公司的产品中。
iView官网：https://www.iviewui.com/

2、Vux UI组件库
Vux是基于WeUI和Vue2.x开发的移动端UI组件库，主要服务于微信页面。Vux的定位已经很明确了，一是：Vue移动端UI组件库，二是：WeUI的基础样式库。Vux的组件涵盖了所有的WeUI的内容，还扩展了一些常用的组件。比如：Sticky、timeline、v-chart、XCircle。Vux是个人维护的。但是GitHub上star还是很高的，达到13k。在GitHub上看到对issue的关闭还是很迅速的。Vux文档基本的组件用法和效果都讲解到位了。在vux官网上也展示了很多Vux的使用案例。在微信页面开发中，基本没有太多的bug，开发还是比较顺手的。
Vux官网：https://vux.li/

3、Element UI组件库
Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。Element是饿了么前端开源维护的Vue UI组件库，更新频率还是很高的，基本一周到半个月都会发布一个新版本。组件齐全，基本涵盖后台所需的所有组件，文档讲解详细，例子也很丰富。没有实际使用过，网上的Element教程和文章比较多。Element应该是一个质量比较高的Vue UI组件库。
Element官网：http://element.eleme.io/#/zh-CN

4、Mint UI组件库
Mint UI基于 Vue.js 的移动端组件库，同样出自饿了么前端的项目。Mint UI是真正意义上的按需加载组件。可以只加载声明过的组件及其样式文件。Mint UI 采用 CSS3 处理各种动效，避免浏览器进行不必要的重绘和重排，从而使用户获得流畅顺滑的体验。网上的视频教程很多都是基于Mint UI来讲的，开发移动端web项目还是很方便，文档也很简介明了。很多页面Mint UI组件都已经封装好，基本可以照着例子写，简单的调整一下就可以实现。不过，在GitHub上看最后一次代码提交在2018年1月16日。不知道是项目比较稳定没有更新，还是项目有被废弃的可能。
Mint UI官网：http://mint-ui.github.io/#!/zh-cn

5、Bootstrap-Vue UI组件库
Bootstrap-VUE提供了基于vue2的Bootstrap V4组件和网格系统的实现，完成了广泛和自动化的WAI ARA可访问性标记。Bootstrap 4是最新发布的版本，与 Bootstrap3 相比拥有了更多的具体的类以及把一些有关的部分变成了相关的组件。同时 Bootstrap.min.css 的体积减少了40%以上。Bootstrap4 放弃了对 IE8 以及 iOS 6 的支持，现在仅仅支持 IE9 以上以及 iOS 7 以上版本的浏览器。想当初刚流行响应式网站的时候，Bootstrap是世界上最受欢迎的建立移动优先网站的框架，Bootstrap可以说风靡全球。就算放在现在很多企业网站都是采用Bootstrap做的响应式。Bootstrap-Vue可以让你在Vue中也实现Bootstrap的效果。
Bootstrap-Vue官网：https://bootstrap-vue.js.org/

6、Ant Design Vue UI组件库
Ant Design Vue是 Ant Design 3.X 的 Vue 实现，开发和服务于企业级后台产品。在GitHub上可以找到几个Ant Design的Vue组件。不过相比较而言，Ant Design Vue更胜一筹。Ant Design Vue共享Ant Design of React设计工具体系，实现了所有Ant Design of React的组件，支持现代浏览器和 IE9 及以上（需要 polyfills）。可以让熟悉Ant Design的在使用Vue时，很容易的上手。
Ant Design Vue官网：https://vuecomponent.github.io/ant-design-vue/docs/vue/introduce-cn/

7、AT-UI UI组件库
AT-UI 是一款基于 Vue.js 2.0 的前端 UI 组件库，主要用于快速开发 PC 网站中后台产品，支持现代浏览器和 IE9 及以上。AT-UI 更加精简，实现了后台常用的组件。
AT_UI官网：https://at-ui.github.io/at-ui/#/zh

8、Vant UI组件库
Vant是一个轻量、可靠的移动端 Vue 组件库。Vant是有赞团队开源的，主要维护也是有赞团队。Vant Weapp 是有赞移动端组件库 Vant 的小程序版本，两者基于相同的视觉规范，提供一致的 API 接口，助力开发者快速搭建小程序应用。截止到目前，Vant已经开源了50+ 个经过有赞线上业务检验的组件。比如：、AddressEdit 地址编辑、AddressList 地址列表、Area 省市区选择、Card 卡片、Contact 联系人、Coupon 优惠券、GoodsAction 商品页行动点、SubmitBar 提交订单栏、Sku 商品规格弹层。如果做商城的，不太在意界面，实现业务逻辑的话，用Vant组件库开发还是很快的。
Vant官网：https://youzan.github.io/vant/#/zh-CN/intro

9、cube-ui UI组件库
cube-ui 是基于 Vue.js 实现的精致移动端组件库。由滴滴内部组件库精简提炼而来，经历了业务一年多的考验，并且每个组件都有充分单元测试，为后续集成提供保障。在交互体验方面追求极致。遵循统一的设计交互标准，高度还原设计效果；接口标准化，统一规范使用方式，开发更加简单高效。支持按需引入和后编译，轻量灵活；扩展性强，可以方便地基于现有组件实现二次开发。
cube-ui官网：https://didi.github.io/cube-ui/#/zh-CN

10、Muse-UI UI组件库
Muse-UI基于 Vue 2.0 优雅的 Material Design UI 组件库。Muse UI 拥有40多个UI 组件，用于适应不同业务环境。Muse UI 仅需少量代码即可完成主题样式替换。Muse UI 可用于开发的复杂单页应用
Muse-UI官网：https://muse-ui.org/#/zh-CN

11、N3-components UI组件库
N3组件库是基于Vue.js构建的，让前端工程师和全栈工程师能快速构建页面和应用。N3-components超过60个组件组件列表、自定义样式、支持多种模化范式（UMD）、使用ES6进行开发。
N3官网：https://n3-components.github.io/N3-components/component.html

12、Mand Mobile
Mand Mobile是面向金融场景的Vue移动端UI组件库，丰富、灵活、实用，快速搭建优质的金融类产品，让复杂的金融场景变简单。Mand Mobile含有丰富的组件30+的基础组件，覆盖金融场景，极高的易用性组件均有详细说明文档、案例演示，汲取最前沿技术，组件化轻量化实现，兼顾稳定和品质，努力实现金融场景的全覆盖。
Mand Mobile官网：https://didi.github.io/mand-mobile/#/zh-CN/home

下面是1.x的文档和演示地址：（文档地址已经迁移了）

https://mand-mobile.github.io/1x-doc/
https://mand-mobile.github.io/2x-doc/

之前的地址打不开了

13、we-vue UI组件库
we-vue 是一套基于 Vue.js 的移动关组件库，结合 weui.css 样式库，封装了一系列组件，非常适于微信公众号等移动端开发。we-vue 包含35+ 个组件，单元测试覆盖率超 98%，支持 babel-plugin-import，完善的在线文档，详细的在线示例。
we-vue官网：https://wevue.org/

14、veui UI组件库
veui是一个由百度EFE team开发的Vue企业级UI组件库。目前文档还没有，只有demo。
GitHub上说是正在进行的一项工作。那我们就耐心等待吧。
veui官网：https://ecomfe.github.io/veui/components/#/

15、Semantic-UI-Vue UI组件库
Semantic-UI-Vue是基于 Vue.js对Semantic-UI 框架的实现。
Semantic作为一款开发框架，帮助开发者使用对人类友好的HTML语言构建优雅的响应式布局。Semantic-UI-Vue提供了一个类似于 Semantic-UI 的 API 以及一组可定制的主题。
Semantic-UI-Vue官网：https://semantic-ui-vue.github.io/#/
在选择框架的时候一定要根据实际Web开发情况和团队的熟悉程度来选择。一个好的UI组件库对一个Web项目来说很重要

16.Vue.js Material Component Framework — Vuetify.js

https://vuetifyjs.com/zh-Hans

Vuetify完全根据Material Design规范开发。每个组件都是手工制作的，为您的下一个伟大的应用程序带来最好的UI工具。开发并没有停留在Google规范中的核心组件上。通过社区成员和赞助商的支持，更多的组件将被设计并提供给大家享受。

这个主要是国外比较流行的vue ui组件，各种功能都有，有中文翻译的，但有些还是英文的，翻译得不是很好

PS：国内的UI组件大部分都只有一部分的，常用的头部导航，底部导航，listview，grid表格很多都是没有的。

参考链接

Javascript：如何循环遍历页面上的所有DOM元素？

传递一个*到getElementsByTagName()，以便它将返回页面中的所有元素：

var all = document.getElementsByTagName("*");

for (var i=0, max=all.length; i < max; i++) {
	// Do something with the element here
	var node = all[i];
	/*以获取所有label标签的内容为例*/
	if(node.tagName && (node.tagName.toLowerCase() == "label")){
		console.log("innerText:" + node.innerText);
	}
}

var all = document.getElementsByTagName("*");

for (var i=0, max=all.length; i < max; i++) {

// Do something with the element here

var node = all[i];

/*以获取所有label标签的内容为例*/

if(node.tagName && (node.tagName.toLowerCase() == "label")){

console.log("innerText:" + node.innerText);

}

参考链接

原生JS写Ajax的请求函数

一般我们写网页的时候，如果用到Ajax请求服务器，都是使用JQuery等已经封装好的库来调用，比较简单。

但是一般这些库的功能很多，引入了太多我们用不到的东西，如果我们需要写一个功能单一，简单的页面，完全用不到引用如此庞大的库文件。

我们可以简单实现一个自己的Ajax请求功能，具体的代码如下：

var ajax = {};
ajax.x = function () {
	if (typeof XMLHttpRequest !== 'undefined') {
		return new XMLHttpRequest();
	}
	var versions = [
	"MSXML2.XmlHttp.6.0",
	"MSXML2.XmlHttp.5.0",
	"MSXML2.XmlHttp.4.0",
	"MSXML2.XmlHttp.3.0",
	"MSXML2.XmlHttp.2.0",
	"Microsoft.XmlHttp"
	];

	var xhr;
	for (var i = 0; i < versions.length; i++) {
		try {
			xhr = new ActiveXObject(versions[i]);
			break;
		} catch (e) {
		}
	}
	return xhr;
};

ajax.send = function (url, method, data, success,fail,async) {
	if (async === undefined) {
		async = true;
	}
	var x = ajax.x();
	x.open(method, url, async);
	x.onreadystatechange = function () {
		if (x.readyState == 4) {
			var status = x.status;
			if (status >= 200 && status < 300) {
				success && success(x.responseText,x.responseXML)
			} else {
				fail && fail(status);
			}
			
		}
	};
	if (method == 'POST') {
		x.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
	}
	x.send(data)
};

ajax.get = function (url, data, callback, fail, async) {
	var query = [];
	for (var key in data) {
		query.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]));
	}
	ajax.send(url + (query.length ? '?' + query.join('&') : ''), 'GET', null, callback, fail, async)
};

ajax.post = function (url, data, callback, fail, async) {
	var query = [];
	for (var key in data) {
		query.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]));
	}
	ajax.send(url,'POST', query.join('&'), callback, fail, async)
};

var ajax = {};

ajax.x = function () {

if (typeof XMLHttpRequest !== 'undefined') {

return new XMLHttpRequest();

}

var versions = [

"MSXML2.XmlHttp.6.0",

"MSXML2.XmlHttp.5.0",

"MSXML2.XmlHttp.4.0",

"MSXML2.XmlHttp.3.0",

"MSXML2.XmlHttp.2.0",

"Microsoft.XmlHttp"

];

var xhr;

for (var i = 0; i < versions.length; i++) {

try {

xhr = new ActiveXObject(versions[i]);

break;

} catch (e) {

}

return xhr;

};

ajax.send = function (url, method, data, success,fail,async) {

if (async === undefined) {

async = true;

}

var x = ajax.x();

x.open(method, url, async);

x.onreadystatechange = function () {

if (x.readyState == 4) {

var status = x.status;

if (status >= 200 && status < 300) {

success && success(x.responseText,x.responseXML)

} else {

fail && fail(status);

}

};

if (method == 'POST') {

x.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

}

x.send(data)

};

ajax.get = function (url, data, callback, fail, async) {

var query = [];

for (var key in data) {

query.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]));

}

ajax.send(url + (query.length ? '?' + query.join('&') : ''), 'GET', null, callback, fail, async)

};

ajax.post = function (url, data, callback, fail, async) {

var query = [];

for (var key in data) {

query.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]));

}

ajax.send(url,'POST', query.join('&'), callback, fail, async)

};

使用方法：GET

ajax.get('/test.php', {foo: 'bar'}, function(response,xml) {
	//success
},
function(status){
	//fail
});

ajax.get('/test.php', {foo: 'bar'}, function(response,xml) {

//success

function(status){

//fail

});

POST

ajax.post('/test.php', {foo: 'bar'}, function(response,xml) {
	//succcess

},function(status){
	//fail
	
});

ajax.post('/test.php', {foo: 'bar'}, function(response,xml) {

//succcess

},function(status){

//fail

});

这里需要注意一个问题，如果我们想要发送类似

http://www.mobibrw.com/control?op_code=code&op_cmd=cmd

1	http://www.mobibrw.com/control?op_code=code&op_cmd=cmd

的URL，是不能通过上面的发送方式（字段填写在data参数中）发送的，上面的发送方式是属于表单的上传方式。

我们需要用下面的方式进行处理（自己拼凑URL）

var sendCmd = "?op_code=" + code + "&op_cmd=" + cmd;
ajax.post('/control' + sendCmd,'',function(response,xml) {
   console.log('success');
},
function(status){
   console.log('failed:' + status);
});

var sendCmd = "?op_code=" + code + "&op_cmd=" + cmd;

ajax.post('/control' + sendCmd,'',function(response,xml) {

console.log('success');

function(status){

console.log('failed:' + status);

});

参考链接

JavaScript修改伪元素样式(pseudo element styles)

类似如下的CSS声明：

#progress {
    background: #333;
    border-radius: 13px;
    height: 10px;
    width: 300px;
    padding: 3px;
}

#progress:after {
    content: '';
    display: block;
    background: orange;
    width: 0%;
    height: 100%;
    border-radius: 9px;
}

#progress {

background: #333;

border-radius: 13px;

height: 10px;

width: 300px;

padding: 3px;

}

#progress:after {

content: '';

display: block;

background: orange;

width: 0%;

height: 100%;

border-radius: 9px;

}

HTML中的声明如下：

<div id="progress" style="text-align: center; margin-left: auto; margin-right: auto;"></div>

1	<div id="progress" style="text-align: center; margin-left: auto; margin-right: auto;"></div>

需要动态修改CSS的width属性。
由于是伪元素样式，并不属于DOM对象,因此，我们没有办法直接通过JQuery来修改。

比较完美的解决方法如下：

定义如下函数，对样式表遍历，根据名称获取我们指定的样式对象

function getRuleWithSelector(selector) {
    var numSheets = document.styleSheets.length;
    var numRules;
    var sheetIndex;
    var ruleIndex;
    // Search through the style sheets.
    for (sheetIndex = 0; sheetIndex < numSheets; sheetIndex += 1) {
        numRules = document.styleSheets[sheetIndex].cssRules.length;
        for (ruleIndex = 0; ruleIndex < numRules; ruleIndex += 1) {
            if (document.styleSheets[sheetIndex].cssRules[ruleIndex].selectorText === selector) {
                return document.styleSheets[sheetIndex].cssRules[ruleIndex];
            }
        }
    }
    return null;
}

function isNull(arg) {
    return ((undefined == arg) || (null == arg) ||('' == arg));
}

function getRuleWithSelector(selector) {

var numSheets = document.styleSheets.length;

var numRules;

var sheetIndex;

var ruleIndex;

// Search through the style sheets.

for (sheetIndex = 0; sheetIndex < numSheets; sheetIndex += 1) {

numRules = document.styleSheets[sheetIndex].cssRules.length;

for (ruleIndex = 0; ruleIndex < numRules; ruleIndex += 1) {

if (document.styleSheets[sheetIndex].cssRules[ruleIndex].selectorText === selector) {

return document.styleSheets[sheetIndex].cssRules[ruleIndex];

}

return null;

}

function isNull(arg) {

return ((undefined == arg) || (null == arg) ||('' == arg));

}

使用时候的代码如下：

var afterRule = getRuleWithSelector("#progress::after");
if (true != isNull(afterRule)){
	afterRule.style.width = '20%';
}

var afterRule = getRuleWithSelector("#progress::after");

if (true != isNull(afterRule)){

afterRule.style.width = '20%';

}

参考链接

modify pseudo select :after in javascript

分类： JavaScript

vue中router-view与父组件之间的通信

参考链接

Evaluating JavaScript code via import()

`eval()` does not support `export` and `import`

Evaluating simple code via `import()`

Accessing an export of an evaluated module

Creating data URIs via tagged templates

Evaluating a module that imports another module

Further reading

参考链接

判断网页是通过PC端还是移动终端打开的

参考链接

window.onerror的总结

Vue理解v-model以及监听数据变化

vue中template的三种写法

参考链接

16款优秀的Vue UI组件库推荐

参考链接

Javascript：如何循环遍历页面上的所有DOM元素？

参考链接

原生JS写Ajax的请求函数

参考链接

JavaScript修改伪元素样式(pseudo element styles)

参考链接

2021年4月
一	二	三	四	五	六	日
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30

参考链接

eval() does not support export and import

Evaluating simple code via import()

Accessing an export of an evaluated module

Creating data URIs via tagged templates

Evaluating a module that imports another module

Further reading

参考链接

参考链接

参考链接

参考链接

参考链接

参考链接

参考链接

`eval()` does not support `export` and `import`

Evaluating simple code via `import()`