AST抽象语法树相关

这个感觉属于Javascript的高级魔法..搜集相关资料然后钻研钻研.

如果想开发js插件,工具都必须会这个..前置技能点是编译原理…也需要补补

文章https://segmentfault.com/a/1190000016231512

工具https://astexplorer.net

文章2 https://juejin.im/post/5bfc21d2e51d4544313df666

IntelliJ idea运行java 报错解决方法.

在用intelliJ运行java的时候提示报错.

objc[5498]: Class JavaLaunchHelper is implemented in both /Library/Java/JavaVirtualMachines/jdk1.8.0_111.jdk/Contents/Home/bin/java (0x1007044c0) and /Library/Java/JavaVirtualMachines/jdk1.8.0_111.jdk/Contents/Home/jre/lib/libinstrument.dylib (0x1017294e0). One of the two will be used. Which one is undefined.

继续阅读“IntelliJ idea运行java 报错解决方法.”

Vue自定义命令,实现捕获点击对象外部事件处理.

Vue一直有个问题就是,像JQuery这种处理下面这行代码的时候可以直接获取html,body之类的DOM对象.但是Vue的组件没办法这么做.

$('html').click(function() {
      $('.nav-dropdown').hide();
});

常见场景是,下图这样一个下拉框,要点击空白处去隐藏就非常难做.

解决方法就是,添加自定义指令

Vue.directive('click-outside', {
  bind: function (el, binding, vnode) {
    el.clickOutsideEvent = function (event) {
      // here I check that click was outside the el and his childrens
      if (!(el == event.target || el.contains(event.target))) {
        // and if it did, call method provided in attribute value
        vnode.context[binding.expression](event);
      }
    };
    document.addEventListener('click', el.clickOutsideEvent);
  },
  unbind: function (el) {
    document.removeEventListener('click', el.clickOutsideEvent);
  },
});

使用方法v-click-outside=’closeEvent’

 

<ul class="nav-list" v-click-outside='closeEvent' v-show="showList">
            <li v-for="item in menuList" :key="item.title" v-on:click="item.isShow = !item.isShow" >
                <router-link :to=item.href>{{item.title}}</router-link>
                <!-- 有子菜单的 -->
                <ul class="nav-dropdown" v-if="item.dropDown" v-show="item.isShow">
                  <li v-for="subTitle in item.dropDown" :key="subTitle.title">
                    <router-link :to=subTitle.href>{{subTitle.title}}</router-link>
                  </li>
                </ul>
            </li>
          </ul>

methods: {
      backHome: function () {
        this.$store.commit("viewState/updateView", "home");
      },
      closeEvent:function(event){
        // console.log('close event called');
        this.menuList.forEach(function(value,key,arr){
          value.isShow=false;
        });
        // this.showList=false;
      }
    }

类似这样.

还有就是使用插件,但是感觉略麻烦.

https://github.com/ndelvalle/v-click-outside

个人主页开发记录

当前目标:在Mars项目,方向,将固定头部和响应式布局结合起来.

后台,直接用iview了.

3D的话让threejs嵌入项目中.

完成目标: 响应式布局研究.


解决了一个组件外关闭下拉框的问题.=.=

-.iView Cli3有插件了,不要用以前的安装方法了.

2.主页写的还好.有些坑处理了.

现在完成了的内容有,点击切换跳转不同的页面,

MGOW是响应式布局固定头.关于现在是响应式布局界面.

博客自然是跳博客.

主页还没想好,在测试多语言.

3D还没开始

后台也没开始.

继续阅读“个人主页开发记录”

响应式设计

一个创建友好移动端网站的初学者教程.

“响应式设计”意味着你的网站显示在各个端应该都相似.他是一个网站设计和开发消除差异化的过程.

响应式通过media queries css完成.media queries检测用户设备告诉浏览器什么忽略或者什么显示什么.

继续阅读“响应式设计”

vue cli 3.0 引入 jQuery 插件

虽然说,jQuery可以做到的,都可以用vue做到.

但是有时候用习惯了有些还是想用下jQuery.

不说废话了.网上都是cli2 的教程,我就写一下3.0的改法.

步骤其实很简单,首先安装

npm install jquery --save

第二步改配置vue.config.js

 

增加

chainWebpack: config => {
    config
        .plugin('provide')
        .use(webpack.ProvidePlugin, [{
            $: 'jquery',
            jquery: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery'
        }]);
  },

例子

// vue.config.js
const webpack = require('webpack');

module.exports = {
  // options...
  assetsDir: 'vasset',

  lintOnSave: undefined,
  chainWebpack: config => {
    config
        .plugin('provide')
        .use(webpack.ProvidePlugin, [{
            $: 'jquery',
            jquery: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery'
        }]);
  },

  pluginOptions: {
    i18n: {
      locale: 'zh',
      fallbackLocale: 'zh',
      localeDir: 'locales',
      enableInSFC: false
    }
  }
  
}

就可以了.