随笔

随笔

1. 关于router-link:对于需要拦截的跳转,目前个人还没找到好的方式,所以只好手 动写跳转

2. 关于vue中监听屏幕大小的问题

     data(){
       return{
         windowHeight: document.documentElement.clientHeight,
         defaultHeight: document.documentElement.clientHeight
       }
     }
   

     //1.
     mounted() {
       let this_ = this;
       window.addEventListener("resize", function() {
         this_.windowHeight = document.documentElement.clientHeight;
       })
     };
   

     //2.
     mounted() {
       window.onresize = () => {
         return (() => {
           this.windowHeight = document.documentElement.clientHeight;
         })();
       }
     };
   

   1. 在项目中 window.onresize 只能挂载一次，在多个页面中同时挂载 window.onresize 时，只有其中一个 window.onresize 会起作用
   2. 避免 window.onresize 频繁挂载

3. 关于vue中路由守卫: https://www.jianshu.com/p/a02ca43c371d

4. 回流和重绘: https://www.zhoulujun.cn/html/webfront/browser/webkit/2016_0506_7820.html

5. 数组去重

   1.   let arr = [1, 2, 8, 9, 6, 3, 3, 3, 8];
        console.log(Array.from(new Set([...arr])));//[1,2,8,9,6,3]
      

   2. 数组对象去重

        let obj = {};
          this.Modelcolumns = this.Modelcolumns.reduce(function(item, next) {
            obj[next.id] ? "" : (obj[next.id] = true && item.push(next));
            return item;
          }, []);
      

6. vue跳转后回到顶部

     //在main.js中添加
       router.afterEach((to,from,next) => {
         window.scrollTo(0,0);
       })
     //或在router.js
     scrollBehavior(to, from, savedPosition) {
       if (savedPosition) {
         return savedPosition
       } else {
         return { x: 0, y: 0 }
       }
     },
   

7. vue 中模板语法嵌套三层报错问题

     <span v-if="a.b">{{a.b.c}}span>
   

     data:{
       a:{}
     }
     //mounted中
     this.a={b:{c:12}}
   

8. 对于请求数据数组对象新增属性的问题,最好使用this.$set而非a[b] = '1' ,这样可能会导致视图无法更新

9. vue中定义全局函数

   • 1. 新建 global.js 函数文件

          exports.install = function (Vue, options) {
            Vue.prototype.changeData = function (){
              alert('执行成功');
            };
          };
        

     2. main.js 中引入并挂载

          import global from './global'
          Vue.use(global);
        

     3. 所有组件中通过 this.global() 调用
   • main.js 直接写入,子组件通过 this.changeData() 调用

       Vue.prototype.changeData = function (){
         alert('执行成功');
       }
     

10. vue 中自己封装组件

    1. 其实原理是组件通信,谁引用,谁就是父组件,在main.js中注册
    2. 例:引用:import Upload from 'common/upload'; 注册:Vue.component('Upload', Upload);

11. 数组push
    之前一直在用 map 遍历后单个push,后来发现用

      let arr = [1,2,3,4];
      let arr2 = [];
      arr2.push(...arr)
    

    这种写法更加的简洁

12. Promise

    1. 使用Promise对象处理异步

      new Promise((resolve,reject)=>{
        resolve()
        //resolve和reject后状态改变,之后不会执行,resolve代表成功的,会触发.then,reject代表错误,触发.catch
      }).then(res=>{
        //此处放置异步操作
      })
    

13. 使用 wangeditor 插入图片时,最好自己控制上传过程

    1. 上传图片

       let this_ = this;
       this.editor.customConfig.customUploadImg = function(files, insert) {
         // files 是 input 中选中的文件列表
         // insert 是获取图片 url 后，插入到编辑器的方法
         // var image = new Image();
         // image.src = window.URL.createObjectURL(files[0]);
         let reader = new FileReader();
         reader.readAsDataURL(files[0]);
         reader.onloadend = function() {
           // 图片的 base64 格式, 可以直接当成 img 的 src 属性值
           let dataURL = reader.result; //base64
           // 显示图片
           this_
             .$axios({
               url: "/api/image/upload",
               method: "post",
               headers: {
                 "Content-Type": "application/json"
               },
               data: JSON.stringify({
                 image: dataURL
               })
             })
             .then(res => {
               this_.imgUrl.push(res.data.data);
               // 上传代码返回结果之后，将图片插入到编辑器中
               insert(res.data.data);
             });
         };
       };
       //  创建富文本编辑器
       //  this.editor.create();
       

    2. 上传后的图片当不需要时需要删除,但 wangeditor 没有提供删除图片的方法,则此刻需要自己去查找方法。
       1. 基本思路:上面上传的方法中 imgUrl 是自己定义的一个空数组,每次添加图片时会把返回的路径添加到里面,到提交的时候再从输出的html字符串中获取到所有的src属性添加到新的数组中,两个数组相比较取差集,将差集的数据删除即可
       2. 代码:

        let imgReg = /|\/>)/gi;
        //匹配src属性
        let srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i;
        let arr = this.editor.txt.html().match(imgReg);
        if (arr) {
          arr.map((item, index) => {
            arr[index] = item.match(srcReg)[1];
          });
          let a = new Set(this.imgUrl);
          let b = new Set(arr);
          let delImgUrl = [...new Set([...a].filter(x => !b.has(x)))];
          // 提交时和上传的图片的差值/为了将这些冗余图片从服务器删除
          delImgUrl = Array.from(new Set([...delImgUrl]));//将Set结构的数据转换为真正的数组
          console.log(delImgUrl);//无用的图片
       

14. vue中使用 mock 来进行模拟数据

    1. 首先安装 mockjs npm install mockjs -D or yarn add mockjs
    2. 新建 mock.js 文件,在 main.js 中引入 require('./mock.js') 注:路径自己选择
    3. mock.js文件

       //引入mockjs
       const Mock = require('mockjs')
       // 获取 mock.Random 对象
       // const Random = Mock.Random;
       // url :请求的路径
       // methed:请求的方式
       // 最后是数据
       Mock.mock('url', 'methed', (req, res) => {
         let data = Mock.mock({
           //生成10条数据
           'list|10': [{
             'fee|1-100': 1,
             'amount|1-10000': 1,
             'date': '@date(yyyy-MM)'
           }]
         })
         return {
           page: {
             data: data.list
           }
         }
       })
       // http://mockjs.com/examples.html 具体想要生成的数据去官网看文档
       

    4. 需要使用的数据的文件中去请求就可以了(此处有坑，上传图片有时会报错l.upload.addEventListener is not a function)

15. const 定义的数据

    1. 举个简单的例子

     const a = 1 ;
     console.log( a ) ;//1
     a = 2 ;
     console.log( a ) ;//报错
     //对于const定义的这种类型的数据是无法进行更改的
    

     const obj = {
       a : 1 ,
       b : 2 
     }
     console.log( obj ) //{ a:1 , b:2 }
     obj.a = 3 ;
     console.log( obj ) //{ a:3 , b:2 }
     //const 定义的对象的属性值是可以更改的
    

    3. 由上面两个例子可以引申出堆和栈的概念
       • 栈主要存储基本类型的数据,是一种简单存储,存放的是一种地址,例如Number、Boolean、Undefined、Null、String 等,当const或let定义变量时,首先会遍历栈,如果没有会添加到栈中,有的话会返回错误。
       • 堆主要负责存储引用类型的数据,是复杂数据类型,当我们访问堆中存放的值时,首先会查找栈中对应的地址,然后在堆中查找地址对应的值，效率比栈要低。
       • 我们所说的常量其实就是指针(个人理解也叫作地址吧),改变const定义的常量就是在改变他的指针,不被允许,当然,const定义的对象的指针也是不允许改变的,而定义的对象它的属性和值却是保存在堆中,上面说到,堆中存放值,所以改变对象的值当然可以了。
    4. 此时会引出另外一个问题,就是深拷贝和浅拷贝
       • 所谓深拷贝是创建一个新的对象,拷贝值给新的对象,改变这个对象并不会引起原对象的改变,而浅拷贝则不然,浅拷贝拷贝的是地址,改变这个地址势必会带来原来定义变量的变化,致使一改全改。

16. vue中键盘事件

      1. //创建时加入键盘事件的监听
      document.addEventListener("keydown", this.watchEnter);
      //
      1. //方法监听键盘事件
      watchEnter(e) {
        var keyNum = window.event ? e.keyCode : e.which; //获取被按下的键值
        //判断如果用户按下了回车键（keycode=13）
        if (keyNum == 13) {
          //要进行的操作
        }
      }
      3.//离开销毁监听
      document.removeEventListener("keydown", this.watchEnter);
    

17. markdown 生成文件目录

    1. 进入文件目录下
    2. yarn add mddir
    3. node mddir "../../../" //如果没有指定路径，mddir将默认为mddir/src文件夹之上上的三个文件夹

18. 关于百度地图刷新失效问题 (将百度的api引入时放置body#app之前,这样就会先调用api,不会出现报错的问题)

19. 对于动态改变列表的事件,使用数组的方法进行修改,而不应重新请求数据(体验极差)(暂时还不知使用何种方法)

20. plus.storage 手机存储: http://www.html5plus.org/doc/zh_cn/storage.html

21. keep-alive: https://www.jianshu.com/p/4b55d312d297

22. 百度地图报错https:在链接以后增加&s=1;,http改成https; 注:& 可以用 & 代替

23. 关于IOS 11.0 以上系统禁止缩放的解决方法:

      <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    

24. 移动端开发时应当注意手机返回键的操作,从而避免路由传值无效

25. 移动端点击按钮会有阴影，解决：
    * { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; }