总结

Dreamcatcher
290 阅读5分钟

函数式编程合集

6449203-5fab60041beae52a.webp

1.png

1-1.png

1-2.png

1-3.png

1-4.png

2-1.png

2-2.png

2-3.png

2-4.png

2-5.png

2-6.png

2-7.png

2-8.png

2-9.png

2-10.png

2-11.png

2-12.png

2-13.png

3-1.png

3-2.png

3-3.png

3-4.png

3-5.png

3-6.png

3-7.png

4-1.png

4-2.png

4-3.png

5-1.png

5-2.png

5-3.png

5-4.png

5-5.png

5-6.png

5-7.png

5-8.png

5-9.png

5-10.png

5-11.png

5-12.png

5-13.png

5-14.png

5-15.png

5-16.png

5-17.png

5-18.png

5-19.png

5-20.png

5-21.png

5-22.png

5-23.png

5-24.png

5-25.png

5-26.png

5-27.png

5-28.png

5-29.png

5-30.png

5-31.png

5-32.png

5-33.png

5-34.png

5-35.png

5-36.png

5-37.png

5-38.png

5-39.png

5-40.png

5-41.png

5-42.png

5-43.png

5-44.png

5-45.png

5-46.png

5-47.png

5-48.png

5-49.png

5-50.png

5-51.png

5-52.png

5-53.png

5-54.png

5-55.png

5-56.png

5-57.png

5-58.png

12-1.png

12-2.png

12-3.png

12-4.png

12-5.png

14-1.png

14-2.png

14-3.png

15-1.png

15-2.png

17-1.png

17-2.png

微信截图_20210814180615.png

微信截图_20210814180625.png 微信截图_20210814180520.png

微信截图_20210814180533.png 微信截图_20210814180401.png 微信截图_20210810172702.png 微信截图_20210803105521.png 微信截图_20210803105521.png 微信截图_20210803105521.png 微信截图_20210803105521.png 1.png 3.png

4.png

5.png

6.png 1.png

2.png 1.png

1.png 1.png 1.png

2.png

vue加载时文件的执行顺序

  • 执行index.html文件
  • 执行main.js文件
  • main.js挂载了app.vue文件，用app.vue的templete替换index.html中的
  • main.js中注入了路由文件，将对应的组件渲染到router-view中
  • router-view中加载Layout文件
  • Layout 加载Navbar, Sidebar, AppMain 这里有两个问题
  • 为什么项目启动时默认显示index.html文件
  • 为什么默认加载main.js文件 这两个都在webpack中有相应的配置，可在配置文件中查看

vue-router中，require代替import解决vue项目首页加载时间过久的问题

vue的路由配置文件(routers.js)，一般使用import引入的写法，当项目打包时路由里的所有component都会打包在一个js中，在项目刚进入首页的时候，就会加载所有的组件，所以导致首页加载较慢，而用require会将component分别打包成不同的js，按需加载，访问此路由时才会加载这个js，所以就避免进入首页时加载内容过多。

require: 运行时调用，理论上可以运用在代码的任何地方，import：编译时调用，必须放在文件开头

示例： import写法：

import userCenter from '@/page/usercenter/index.vue'
export default [
    {
      path: '/userCenter',
      name: 'user-center',
      component: userCenter
    },
    {
      path: '/news/detail',
      name: 'news-detail',
      component: () => import('@/page/news/detail.vue')
    }
]

require写法：

export default [
    {
      path: '/userCenter',
      name: 'user-center',
      component: resolve => require(['@/page/userCenter/index.vue'], resolve)
    },
    {
      path: '/news/detail',
      name: 'news-detail',
      component: () => resolve => require(['@/page/news/detail.vue'], resolve)
    }
]

v-model

在官网我们可以得知，v-model只是语法糖而已。 语法糖：也译为糖衣语法，主要是方便程序员使用，通常来说使用语法糖能够增加程序的可读性，从而减少程序代码出错的机会。

v-model在input元素上时  第一行的代码其实只是第二行的语法糖

<input v-model="sth" />
<input v-bind:value="sth" v-on:input="sth = $event.target.value" />

然后第二行代码还能简写成这样：

<input :value="sth" @input="sth = $event.target.value" />

要理解这行代码，首先你要知道 input 元素本身有个 oninput 事件，这是 HTML5 新增加的，类似 onchange ，每当输入框内容发生变化时，就会触发oninput，把最新的value传递给 sth。

我们仔细观察语法糖和原始语法那两行代码，可以得出一个结论：

在给<input />元素添加v-model属性时，默认会把value作为元素的属性，然后把'input'事件作为实时传递value的触发事件

Vue自定义组件通过v-model通信

model：

  • model的类型定义如下，它有两个属性 prop、event v-model默认情况如下：
  • prop: 默认绑定的是value
  • event: 默认触发的事件类型是input

image.png

<my-checkbox v-model="foo" value="some value"></my-checkbox>

 
Vue.component('my-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
})

Vue.component('my-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    // this allows using the `value` prop for a different purpose
    value: String,
    // use `checked` as the prop which take the place of `value`
    checked: {
      type: Number,
      default: 0
    }
  },
  // ...
})
<my-checkbox v-model="foo" value="some value"></my-checkbox>

以上代码等价于：

<my-checkbox
  :checked="foo" 
  @change="val => { foo = val }"   
  value="some value">
</my-checkbox>

不简写

<my-checkbox
  v-bind:checked="foo" 
  v-on:change="function(val) {return foo = val }"   
  value="some value">
</my-checkbox>

插槽

baijiahao.baidu.com/s?id=166754…

sass-resources-loader

ui组件

jenkins

npm i npm rebuild node-sass npm run dist npm publish npm run build

关于使用element中的popup问题

1.前言 我们知道弹出框都是在触发了某种条件后展示，而一个个的新的弹出框的展示，总是覆盖着上一个弹出框。实现覆盖功能需要保证新的弹出框的z-index要比旧的弹出框的z-index值相等或着更高，为达到这个目的element为所有的弹出框(所有下拉框、提示框、Dialog对话框等等)直接或间接的使用到一个js组件element-ui/src/utils/vue-popper，而这个vue-popper又使用了另一个组件element-ui/src/utils/popup/popup-manager.js。

PopupManager PopupManager中有一个zIndex属性初始值为2000，所有的弹出框的z-index其实都是从这个PopupManager.zIndex中获取的，当要展示一个新的弹出框时，组件便会去获取最新的PopupManager.zIndex，然后为PopupManager.zIndex加1，这样就保证了新的弹出框总是比旧的弹出框z-index大，省去自己一个个设置的麻烦，也减少问题的出现。

2.遇到的问题 element本身的弹出框没有什么问题，问题在于我们擅自使用了element未直接暴露出来的组件，这里以el-select中的select-dropdown.vue为例。 我们通过拷贝el-select源码来定制下拉框的内容和逻辑，一切看起来都很完美，但是有一个致命的问题，自己定制的选择器的下拉框总是会出现时不时无法展示的问题，要疯狂点击才会展示。排查后发现就是z-index的值问题，自定义的下拉框的z-index总是无法跟原生的弹出框z-index同步，原因其实很简单。。。使用的不是同一个PopupManager 原来我们直接复制el-select源码，源码中引入下拉框 import ElSelectMenu from './select-dropdown.vue' 我们修改为 import ElSelectMenu from 'element-ui/packages/select/src/select-dropdown.vue' 再来看select-dropdown.vue源码中对于vue-popper的引用 import Popper from 'element-ui/src/utils/vue-popper' 没毛病，但是其实毛病就出在这引用路径上的src，src就是source源的意思，源码中互相引用没问题，但是我们在项目中使用element组件的使用，并不是来自源码，而是来自源码编译出来的依赖库，是npm模块中lib目录下的文件。所以我们的自定义组件用了一个新的PopupManager对象跟原生element组件不同的PopupManager，导致zIndex不同步，展示错误。

3.解决 复制select-dropdown.vue，将原先 import Popper from 'element-ui/src/utils/vue-popper' 修改为 import Popper from 'element-ui/lib/utils/vue-popper' el-select改引用为我们修改后的select-dropdown.vue。。。

4.最后 1.es6中import的每个模块都是单例的，同一个对象被所有引用共用 2.引用element中未暴露的组件时，要注意尽量使用lib下的，防止出现类似问题 3.引用npm包的某个文件时时，要注意引用其源码和编译后库的区别

1.png

2.png

微信截图_20210716173948.png

avatar
文章
阅读
粉丝