lzh

vue-router源码简要分析

2022-01-31T16:00:00.000Z

前言

主要分析了vue-router的部分源码，从而帮助理解vue-router的相关原理。主要从三个方面分析:

vue-router插件初始化时所做的工作;
当路由发生改变时如何渲染router-view组件;
使用router-link是如何进行路由跳转的;

vue-router插件初始化

一般在项目中引入vue-router插件时，所需代码如下

// main.js
import Vue from 'vue'
import VueRouter from 'vue-rouer'
// 引入vue-router插件
Vue.use(VueRouter)
// 实例化vue-router对象,传入options对象
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]
const router  = new VueRouter({
  routes
})
// 通过router配置参数注入路由实例化对象，使应用具有路由对象并且能够访问到路由实例化对象的属性和方法
new Vue({
  components: { App },
  router,
  store,
  template: ''
}).$mount('#app')

vue-router插件初始化调用的核心文件是index.js,install.js,base.js文件。具体分析如下:

调用install文件

当调用 Vue.use(VueRouter) 时会调用vue-router入口文件中的install方法

// index.js
import { install } from './install'
// ---
VueRouter.install = install

install方法定义在install.js文件中，从源码分析它主要完成以下内容：

在Vue中beforeCreate和destroyed钩子中全局混入代码:

Vue.mixin({
  beforeCreate () {
    if (isDef(this.$options.router)) {
      this._routerRoot = this
      this._router = this.$options.router
      this._router.init(this)
      Vue.util.defineReactive(this, '_route', this._router.history.current)
    } else {
      this._routerRoot = (this.$parent && this.$parent._routerRoot) || this
    }
    registerInstance(this, this)
  },
  destroyed () {
    registerInstance(this)
  }
})

主要作用是当vue组件渲染时，执行以下逻辑：

将Vue根实例或者子组件离它最近的父实例赋值给this._routerRoot
将this.$options.router (访问 vue的options,在main.js已将其指向vue-router的实例化对象) 赋值给this._router
调用vue-router实例化对象的init方法（后文分析）
将 this._route 赋值为 this._router.history.curren，并使其为响应式对象
执行registerInstance方法(后文分析)

定义this.$router和this.$route属性，方便Vue组件使用

Object.defineProperty(Vue.prototype, '$router', {
  // 返回vue-router实例对象
  get () { return this._routerRoot._router }
})

Object.defineProperty(Vue.prototype, '$route', {
  // 返回history实例化对象的current属性
  get () { return this._routerRoot._route }
})

1 2	Vue.component('RouterView', View) Vue.component('RouterLink', Link)

实例化vue-router对象

VueRouter类定义在index.js文件中，当在项目的main.js实例化一个vue-router对象时，在constructor会执行以下逻辑:

constructor (options: RouterOptions = {}) {
  // ....
  this.app = null // 保存根Vue实例
  this.apps = [] // 保存有this.$options.router属性的Vue实例
  this.options = options // 保存传入的路由配置
  // 保存用户定义的钩子回调函数
  this.beforeHooks = []
  this.resolveHooks = []
  this.afterHooks = []
  this.matcher = createMatcher(options.routes || [], this)

  let mode = options.mode || 'hash'
  this.fallback =
    mode === 'history' && !supportsPushState && options.fallback !== false
  if (this.fallback) {
    mode = 'hash'
  }
  if (!inBrowser) {
    mode = 'abstract'
  }
  this.mode = mode

  switch (mode) {
    case 'history':
      this.history = new HTML5History(this, options.base)
      break
    case 'hash':
      this.history = new HashHistory(this, options.base, this.fallback)
      break
    case 'abstract':
      this.history = new AbstractHistory(this, options.base)
      break
    default:
      if (process.env.NODE_ENV !== 'production') {
        assert(false, `invalid mode: ${mode}`)
      }
  }
}

主要逻辑如下:

调用createMatcher方法将传入的路由配置进行处理生成路由匹配器并赋值给this.matcher(后方分析)
根据路由创建的模式实例化history对象

Vue组件挂载渲染时VueRouter初始化

当Vue组件渲染时会触发beforeCreate钩子，从上文可以得知如果是根实例时会触发VueRouter实例的init方法，传入根实例的this。

init (app: any /* Vue component instance */) {
  this.apps.push(app)
  // ---
  // vueRouter实例已经初始化时返回
  if (this.app) {
    return
  }
  this.app = app
  const history = this.history
  if (history instanceof HTML5History || history instanceof HashHistory) {
    const handleInitialScroll = routeOrError => {
      const from = history.current
      const expectScroll = this.options.scrollBehavior
      const supportsScroll = supportsPushState && expectScroll

      if (supportsScroll && 'fullPath' in routeOrError) {
        handleScroll(this, routeOrError, from, false)
      }
    }
    const setupListeners = routeOrError => {
      history.setupListeners()
      handleInitialScroll(routeOrError)
    }
    history.transitionTo(
      history.getCurrentLocation(),
      setupListeners,
      setupListeners
    )
  }

  history.listen(route => {
    this.apps.forEach(app => {
      app._route = route
    })
  })
}

主要逻辑如下:

调用history.transitionTo方法去更新修改浏览器url路径
添加history事件监听，当浏览器url路径更新时，更新app._route(app._route是在上文install文件中的响应式对象_route)

需要注意的是在transitionTo中会调用confirmTransition方法去执行路由导航守卫钩子。

router-view渲染机制

在上文中，已经知道浏览器url改变时会触发app._route更新，而它在初始化时被设为响应式对象。

在router-view源码中可以看到在执行render函数时会调用parnet.$route, 由于 route是响应式对象，当访问 route 时会使 router-view组件对 route有依赖。

render (_, { props, children, parent, data }) {
  const route = parent.$route

  const matched = route.matched[depth]
  const component = matched && matched.components[name]


  return h(component, data, children)
}

在install文件中，可以看到获取 $route 的值时，返回的是 _router。

1
2
3

Object.defineProperty(Vue.prototype, '$route', {
  get () { return this._routerRoot._route }
})

结合上面的分析，当浏览器url改变时，会修改 _route的值，而 _route是一个响应式对象，它更新时会触发setter,从而通知route-view的渲染watcher更新，重新渲染组件。

router-link跳转机制

router-link定义在文件src/components/link中，主要的点击跳转代码如下:

const router = this.$router
const handler = e => {
  if (guardEvent(e)) {
    if (this.replace) {
      router.replace(location, noop)
    } else {
      router.push(location, noop)
    }
  }
}

const on = { click: guardEvent }
if (Array.isArray(this.event)) {
  this.event.forEach(e => {
    on[e] = handler
  })
} else {
  on[this.event] = handler
}

当router-link触发点击事件时，会执行router.replace或者push方法，从上文可以得知this.$router是vue-router的实例对象,replace和push方法定义在index.js文件中。

push (location: RawLocation, onComplete?: Function, onAbort?: Function) {
  // $flow-disable-line
  if (!onComplete && !onAbort && typeof Promise !== 'undefined') {
    return new Promise((resolve, reject) => {
      this.history.push(location, resolve, reject)
    })
  } else {
    this.history.push(location, onComplete, onAbort)
  }
}

replace (location: RawLocation, onComplete?: Function, onAbort?: Function) {
  // $flow-disable-line
  if (!onComplete && !onAbort && typeof Promise !== 'undefined') {
    return new Promise((resolve, reject) => {
      this.history.replace(location, resolve, reject)
    })
  } else {
    this.history.replace(location, onComplete, onAbort)
  }
}

可以看到会访问history实例化对象中的replace和push方法，不同的modepush和replace定义不同，当mode为hashj时，会访问到hash.js中，主要代码如下:

push (location: RawLocation, onComplete?: Function, onAbort?: Function) {
  const { current: fromRoute } = this
  this.transitionTo(
    location,
    route => {
      pushHash(route.fullPath)
      handleScroll(this.router, route, fromRoute, false)
      onComplete && onComplete(route)
    },
    onAbort
  )
}

replace (location: RawLocation, onComplete?: Function, onAbort?: Function) {
  const { current: fromRoute } = this
  this.transitionTo(
    location,
    route => {
      replaceHash(route.fullPath)
      handleScroll(this.router, route, fromRoute, false)
      onComplete && onComplete(route)
    },
    onAbort
  )
}

push和reaplace方法都会调用transitionTo方法去修改浏览器url（主要不同是修改浏览器url的方式不同），从而触发 router-view 组件重新渲染，进且更新页面。

总结

从上文可以看出，vue-router的主要原理是通过监听浏览器url的改变，来触发router-view组件根据路由定义的组件重新渲染页面。而调用路由的push，replace等方法时，最终都会触发改变浏览器的url。从而保证了组件的及时刷新。

参考资料

Vue.js 技术揭秘

PDF展示与合成Vue组件(lz-pdf-merage)

2022-01-20T16:00:00.000Z

前言

主要是介绍使用pdfjs和jsPdf在vue组件中对pdf文件进行展示和对原有pdf进行合成(包括文字，图片合成)。

体验

demo地址

npm包引入

1	npm install lz-pdf-merage

pdf展示

主要使用pdfjs(使用的版本是2.1.266)对pdf文件通过对canvas对其进行预览展示，主要原理如下:

import Pdfjs from 'pdfjs-dist'
// 获取pdf对象
this.pdf = await Pdfjs.getDocument({
  url: pdfPath
})
// 获取一页的pdf数据
this.pdf.getPage(1)
// 获取htmlK中的canvas元素
let canvas = document.getElementById('canvas')
let context = canvas.getContext('2d')
let scale = 3.2
// 放大pdf
let viewport = page.getViewport(scale, this.rotate)
// 设置canvas的宽度和高度，以解决显示模糊的问题
canvas.height = viewport.height;
canvas.width = viewport.width;
canvas.style.width = `${this.width * widthScale}px`
canvas.style.height = `${this.width/viewport.width * viewport.height * widthScale}px`;
//将pdf数据渲染到指定的canvas上
let renderContext = {
  canvasContext: context,
  viewport: viewport
};
await page.render(renderContext);

需要注意的点：

为了解决pdf在canvas上渲染后模糊的问题，需要将pdf通过getViewport(scale，0)方法进行放大。同时设置canvas的style的width和height使其在页面上正常展示。
对于对pdf进行放大缩小的功能，pdf本身已经放大了3.2倍了，所以只需要控制canvas的style样式展示（即通过widthScale控制），就可以在页面上呈现放大缩小的效果。
旋转功能的实现，一样是通过getViewport(scale, this.rotate)控制。

pdf合成

pdf合成主要是创建一个新的canvas元素，其大小与pdf预览的canvas一致，然后将需要添加的图片和文字记录坐标并添加到新的canvas元素上。最后通过drawImage分别获取到两个canvas对应的图片，通过jsPdf将两张图片合成新的pdf页，从而实现pdf合成。

canvas元素合成

主要代码及解释如下：

1
2

<canvas class="draw-canvas" ref="drawCanvas">canvas>
<Page ref="page" :defaultRotate="pageRotate" :page="currentPage" :width="pdfWidth - 25" @saveRotate="saveRotate" @drawFinish="handleFinishDraw">Page>

// 在pdfjs渲染完成canvas后触发
handleFinishDraw(canvas){
  // 获取当前pdf所在页
  let current = this.current - 1
  // 将渲染的pdf存放到baseCanvasImages中，方便后续合成
  this.baseCanvasImages[current] = {
    url: canvas.toDataURL('image/jpeg'),
    width: canvas.width,
    height: canvas.height
  }
  if (!this.canvasArray[current]) {
    let { width, height } = canvas.getBoundingClientRect()
    // 设置canvas的宽高
    let drawCanvas = this.setDrawCanvas(canvas)
    // 生成一个DrawObj实例，并存入canvasArray中，方便后续切换页时添加,
    // DrawObj是对canvas画图进行操作的类，会在后续中介绍
    // 当添加图片，文字时，都是对该实例进行操作
    this.canvasArray[current] = new DrawObj(drawCanvas, current, canvas.width/width, canvas.height/height)
    }
    // 对drawCanvas进行重绘，因为有可能进行了切换页
    this.canvasArray[current].drawItemList()
  }
  // 设置drawCanvas的宽高
  setDrawCanvas(canvas) {
    let drawCanvas = this.$refs.drawCanvas
    drawCanvas.width = canvas.width
    drawCanvas.height = canvas.height
    drawCanvas.style.width = canvas.style.width
    drawCanvas.style.height = canvas.style.height
    return drawCanvas
  },

pdf合成叠加

主要介绍对pdfjs渲染而成的canvas和drawCanvas通过jsPdf进行合成

async getTheMeragePdf() {
  const pdf = new jsPDF('p', 'pt', 'a4')
  // pdfjs渲染而成的canvas生成base64
  let pdfImages = await this.getThePdfImages()
  for(let i = 0; i< pdfImages.length; i++) {
    let imageObj = pdfImages[i]
    pdf.addImage(imageObj.url, 'JPEG', 0,0, 592.28, 592.28/imageObj.width * imageObj.height)
    //如果当前页对应的drawCanvas存在，叠加图片
    if(this.canvasArray[i]) {
      let drawCanvas = this.canvasArray[i].getDrawCanvas()
      const drawData = drawCanvas.toDataURL('image/png')
      pdf.addImage(drawData, 'PNG', 0,0, 592.28, 592.28/drawCanvas.width * drawCanvas.height)
    }
    // 大于一页时，生成新的一页
    if (i < pdfImages.length - 1) pdf.addPage() 
    }
    // 下载合成后的pdf
    pdf.save('合成的pdf')
  }\
  // 对pdf渲染而成的canvas生成base64
  async getThePdfImages() {
    let pdfImages = Array(this.total).fill(Infinity)
    for(let i = 0; ilength; i++) {
      // use the canvas after the user operation
      // 如果已存在，直接返回
      if(this.baseCanvasImages[i]){
        pdfImages[i] = this.baseCanvasImages[i]
      } else {
        // 不存在时，调用page接口渲染生成
        pdfImages[i] = await this.$refs.page.drawPage(this.pdf.getPage(i+1))
      }
    }
    return pdfImages
    },

DrawObj

DrawObj是一个自定义的类，它主要实现在canvas中进行添加图片，添加文字，对添加的图片，文字进行移动和删除功能。

对元素的操作都会反映到_drawItemList数组中,每一次操作都会清空画布，然后再重新对_drawItemList里的元素进行重绘，元素操作对_drawItemList数组的修改如下:

添加元素时，会向_drawItemList数组中添加一个元素对象(主要包括元素内容，元素类型，元素位置等信息)。
删除元素时，会删除_drawItemList数组中该元素。
移动元素时，会修改_drawItemList数组中对应元素的X,Y。

需要注意的是由于在pdf展示时是对原有canvas进行缩小展示的，所以在调用canvas绘制元素前要调用ctx.scale(this._scaleX, this._scaleY)，this._scaleX和this._scaleY在初始化DrawObj时传入：

1
2
3

// canvas.width/width, canvas.height/height, 是pdf展示的canvas缩放比例
this.canvasArray[current] = new DrawObj(drawCanvas, current, canvas.width/  width, canvas.height/height)
  }

pdf打印

pdf打印的原理主要还是pdfjs对canvas进行渲染生成，然后将每一页对应的canvas通过drawImage方法生成图片，再将图片添加到body上，并通过 @media print媒体查询控制打印样式最后调用window.print()打印。具体代码可以看这里
printPdf。

vue3.2是怎么发布vue-release的

2021-12-01T16:00:00.000Z

主要流程

流程图

重要函数分析

const inc = i => semver.inc(currentVersion, i, preId)
const bin = name => path.resolve(__dirname, '../node_modules/.bin/' + name)
const run = (bin, args, opts = {}) =>
  execa(bin, args, { stdio: 'inherit', ...opts })
const dryRun = (bin, args, opts = {}) =>
  console.log(chalk.blue(`[dryrun] ${bin} ${args.join(' ')}`), opts)
const runIfNotDry = isDryRun ? dryRun : run
const getPkgRoot = pkg => path.resolve(__dirname, '../packages/' + pkg)
const step = msg => console.log(chalk.cyan(msg))

inc函数主要是通过semver库的inc方法生成一个版本号,如：semver.inc(‘3.2.4’, ‘prerelease’, ‘beta’) => 3.2.5-beta.0
bin函数主要使用是传入name，返回node_modules/.bin/${name} ,方便获取 node_modules/.bin/ 目录下的命令
run函数主要通过execa执行命令行命令, 如: run(‘yarn’, [‘build’, ‘–release’]) => yarn build –release
dryRun函数是空跑命令，通过console.log打印传入的命令，方便调试
runIfNotDry通过一开始用户传入的命令行参数isDryRun来判断是空跑还是真的执行命令
getPKgRoot获取包路径
step函数通过chalk打印传入的信息
总结
大致明白了Vue3是如何发布包的，整个流程其实也可以应用在公司前端项目的发布中，例如通过输入的版本号修改pack.json信息，自动执行git命令，校验版本号等。
参考资料
Vue 3.2 发布了，那尤雨溪是怎么发布 Vue.js 的？
第二期 | vue3 工具函数 | 源码共读公告【必看】

vue3 工具函数源码学习

2021-11-06T16:00:00.000Z

vue3工具函数目录结构

vue3工具函数所在目录如下所示

1	vue-nex/packages/shared/src

src目录下有以下文件:

其中index.ts是入口文件，其它文件在index.ts中引入， index中定义了常用的工具函数

import { makeMap } from './makeMap'

export { makeMap }
export * from './patchFlags'
export * from './shapeFlags'
export * from './slotFlags'
export * from './globalsWhitelist'
export * from './codeframe'
export * from './normalizeProp'
export * from './domTagConfig'
export * from './domAttrConfig'
export * from './escapeHtml'
export * from './looseEqual'
export * from './toDisplayString'

主要工具函数解析

这里主要学习理解index里的工具函数，部分源码和解析如下:

export const EMPTY_OBJ: { readonly [key: string]: any } = __DEV__
  ? Object.freeze({})
  : {}
export const EMPTY_ARR = __DEV__ ? Object.freeze([]) : []
export const NOOP = () => {}

EMPTY_OBJ和EMPTY_ARR都使用Object.freeze(), 它的作用是冻结一个对象，使其不能被修改。
EMPTY_OBJ和EMPTY_ARR返回一个空对象和空数组，并且在开发环境是被冻结，主要作用应该是在开发环境修改空对象时使其报错明显。

NOOP返回一个空函数，方便判断和压缩代码，每个地方都写 ()=> {} 明显代码量会增多

export const NO = () => false

const onRE = /^on[^a-z]/
export const isOn = (key: string) => onRE.test(key)

export const isModelListener = (key: string) => key.startsWith('onUpdate:')

export const extend = Object.assign

export const remove = (arr: T[], el: T) => {
  const i = arr.indexOf(el)
  if (i > -1) {
    arr.splice(i, 1)
  }
}

NO 返回false，主要也是压缩代码量
isOn 判断通过正则判断字符串是否是on开头，并且on 后首字母不是小写字母，如 onReg
isModelListener 通过判断字符串是否是onUpdate: 开头
extend 提供Object.assign方法的缩写，应该主要也是为了压缩代码

remove 通过splice方法删除数组中的一项，传入数组和索引

const hasOwnProperty = Object.prototype.hasOwnProperty
export const hasOwn = (
  val: object,
  key: string | symbol
): key is keyof typeof val => hasOwnProperty.call(val, key)

export const isArray = Array.isArray
export const isMap = (val: unknown): val is Map =>
  toTypeString(val) === '[object Map]'
export const isSet = (val: unknown): val is Set =>
  toTypeString(val) === '[object Set]'

export const isDate = (val: unknown): val is Date => val instanceof Date
export const isFunction = (val: unknown): val is Function =>
  typeof val === 'function'
export const isString = (val: unknown): val is string => typeof val === 'string'
export const isSymbol = (val: unknown): val is symbol => typeof val === 'symbol'
export const isObject = (val: unknown): val is Record =>
  val !== null && typeof val === 'object'

export const isPromise = (val: unknown): val is Promise => {
  return isObject(val) && isFunction(val.then) && isFunction(val.catch)
}
export const objectToString = Object.prototype.toString
export const toTypeString = (value: unknown): string =>
  objectToString.call(value)

上述的主要函数的主要作用都是判断是否为ES的某一些内置类型

hasOwn 通过Object.prototype.hasOwnProerty判断对象本身是否有key对应的属性
isArray 通过Array.isArray方法判断,使用instanceof判断并不准确
isMap isSet通过Object.prototype.toString判断是否为Map,Set
isDate 通过instanceof判断
isFunction, isString,isSymbol,isObject通过typeof判断

isPromise通过val是否为对象，then和catch是否为函数判断

export const toRawType = (value: unknown): string => {
  // extract "RawType" from strings like "[object RawType]"
  return toTypeString(value).slice(8, -1)
}

export const isPlainObject = (val: unknown): val is object =>
  toTypeString(val) === '[object Object]'

export const isIntegerKey = (key: unknown) =>
  isString(key) &&
  key !== 'NaN' &&
  key[0] !== '-' &&
  '' + parseInt(key, 10) === key

export const isReservedProp = /*#__PURE__*/ makeMap(
  // the leading comma is intentional so empty string "" is also included
  ',key,ref,' +
    'onVnodeBeforeMount,onVnodeMounted,' +
    'onVnodeBeforeUpdate,onVnodeUpdated,' +
    'onVnodeBeforeUnmount,onVnodeUnmounted'
)

const cacheStringFunction = extends (str: string) => string>(fn: T): T => {
  const cache: Record = Object.create(null)
  return ((str: string) => {
    const hit = cache[str]
    return hit || (cache[str] = fn(str))
  }) as any
}

toRawType截取toTypeString中的一部分，主要是_string,object_这些，如[object Set]返回Set
isPlainObject 判断是不是纯粹的对象，如isPlainObject([]) // false
isIntegerKey 判断是不是数字型的字符串key值

cacheStringFunction 缓存函数，实现一个单例

const camelizeRE = /-(\w)/g
/**
 * @private
 */
export const camelize = cacheStringFunction((str: string): string => {
  return str.replace(camelizeRE, (_, c) => (c ? c.toUpperCase() : ''))
})

const hyphenateRE = /\B([A-Z])/g
/**
 * @private
 */
export const hyphenate = cacheStringFunction((str: string) =>
  str.replace(hyphenateRE, '-$1').toLowerCase()
)

/**
 * @private
 */
export const capitalize = cacheStringFunction(
  (str: string) => str.charAt(0).toUpperCase() + str.slice(1)
)

/**
 * @private
 */
export const toHandlerKey = cacheStringFunction((str: string) =>
  str ? `on${capitalize(str)}` : ``
)

上述函数都使用cacheStringFunction函数包裹，确保返回第一次所创建的那唯一的一个实例。

camelize 连字符 - 转驼峰，将on-click中的-c匹配并替换为C
hyphenate 将驼峰转连字符，将onClick中的C匹配到并替换为-C再通过toLowerCase转为小写
capitalize 首字母大写

toHandlerKey将click转化onClick这种

// compare whether a value has changed, accounting for NaN.
export const hasChanged = (value: any, oldValue: any): boolean =>
  !Object.is(value, oldValue)

export const invokeArrayFns = (fns: Function[], arg?: any) => {
  for (let i = 0; i < fns.length; i++) {
    fns[i](arg)
  }
}

export const def = (obj: object, key: string | symbol, value: any) => {
  Object.defineProperty(obj, key, {
    configurable: true,
    enumerable: false,
    value
  })
}

export const toNumber = (val: any): any => {
  const n = parseFloat(val)
  return isNaN(n) ? val : n
}

hasChanged: 通过Object.is()判断两个值是否严格相等
invokeArrayFns：执行数组里的函数
def: 定义对象属性，使其可删除和不可枚举

toNumber : 将值转换为数字

let _globalThis: any
export const getGlobalThis = (): any => {
  return (
    _globalThis ||
    (_globalThis =
      typeof globalThis !== 'undefined'
        ? globalThis
        : typeof self !== 'undefined'
        ? self
        : typeof window !== 'undefined'
        ? window
        : typeof global !== 'undefined'
        ? global
        : {})
  )
}

getGlobalThis: 获取全局 this 指向, 依次查找__globalThis, self ,window, global

vue-响应式原理

2021-10-23T16:00:00.000Z

通过object.defineProperty设置getter和setter

vue初始化调用_init方法, 在init中会执行initState方法，对props,methods,data等属性进行初始化, 主要代码如下：

// 省略部分代码
export function initState (vm: Component) {
  vm._watchers = []
  const opts = vm.$options
  if (opts.props) initProps(vm, opts.props)
  if (opts.methods) initMethods(vm, opts.methods)
  if (opts.data) {
    initData(vm)
  } else {
    observe(vm._data = {}, true /* asRootData */)
  }
  if (opts.computed) initComputed(vm, opts.computed)
  if (opts.watch && opts.watch !== nativeWatch) {
    initWatch(vm, opts.watch)
  }
}

其中主要方法作用如下：

initProps()调用deineReactive方法使其变成响应式。
initData()->调用observe方法使其变为响应式

observe()给对象添加getter和setter,用于依赖收集和派发更新。代码如下:

export function observe (value: any, asRootData: ?boolean): Observer | void {
  if (!isObject(value) || value instanceof VNode) {
    return
  }
  let ob: Observer | void
  if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
    ob = value.__ob__
  } else if (
    shouldObserve &&
    !isServerRendering() &&
    (Array.isArray(value) || isPlainObject(value)) &&
    Object.isExtensible(value) &&
    !value._isVue
  ) {
    ob = new Observer(value)
  }
  if (asRootData && ob) {
    ob.vmCount++
  }
  return ob
}

主要是实例化Observer实现响应式, Observer的实现如下: 通过定义getter和setter实现

export class Observer {
  value: any;
  dep: Dep;
  vmCount: number; 
  constructor (value: any) {
    this.value = value
  // 实例化Dep对象，Dep是一个订阅者，用来存放Watcher观察者对象
    this.dep = new Dep()
    this.vmCount = 0
    // 添加 this.__ob__ = value
    def(value, '__ob__', this)
    if (Array.isArray(value)) {
      const augment = hasProto
        ? protoAugment
        : copyAugment
      augment(value, arrayMethods, arrayKeys)
      this.observeArray(value)
    } else {
      this.walk(value)
    }
  }
  // 遍历对象的 key 调用 defineReactive
  walk (obj: Object) {
    const keys = Object.keys(obj)
    for (let i = 0; i < keys.length; i++) {
      defineReactive(obj, keys[i])
    }
  }
  // 遍历数组调用observe
  observeArray (items: Array) {
    for (let i = 0, l = items.length; i < l; i++) {
      observe(items[i])
    }
  }
}

definReactive定义一个响应式对象

export function defineReactive (
  obj: Object,
  key: string,
  val: any,
  customSetter?: ?Function,
  shallow?: boolean
) {
  // 实例化Dep对象
  const dep = new Dep()
  const property = Object.getOwnPropertyDescriptor(obj, key)
  if (property && property.configurable === false) {
    return
  }

  // cater for pre-defined getter/setters
  const getter = property && property.get
  const setter = property && property.set
  if ((!getter || setter) && arguments.length === 2) {
    val = obj[key]
  }
  // 对子对象递归调用
  let childOb = !shallow && observe(val)
  //给对象添加getter和setter
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter () {
      const value = getter ? getter.call(obj) : val
      if (Dep.target) {
        dep.depend()
        if (childOb) {
          childOb.dep.depend()
          if (Array.isArray(value)) {
            dependArray(value)
          }
        }
      }
      return value
    },
    set: function reactiveSetter (newVal) {
      const value = getter ? getter.call(obj) : val
      /* eslint-disable no-self-compare */
      if (newVal === value || (newVal !== newVal && value !== value)) {
        return
      }
      /* eslint-enable no-self-compare */
      if (process.env.NODE_ENV !== 'production' && customSetter) {
        customSetter()
      }
      if (setter) {
        setter.call(obj, newVal)
      } else {
        val = newVal
      }
      childOb = !shallow && observe(newVal)
      dep.notify()
    }
  })
}

依赖收集和派发更新

依赖收集

defineReactive的get方法会调用dep.depen()进行依赖收集，Dep类的主要作用是管理Watch对象

export default class Dep {
  // target全局唯一 Watcher
  static target: ?Watcher;
  id: number;
  subs: Array;

  constructor () {
    this.id = uid++
    this.subs = []
  }
  // 在 subs中添加Watcher，也就是添加属性发生改变时，要通知的watcher
  addSub (sub: Watcher) {
    this.subs.push(sub)
  }
  // 移除Wathcer
  removeSub (sub: Watcher) {
    remove(this.subs, sub)
  }
  // 依赖收集
  depend () {
    if (Dep.target) {
      Dep.target.addDep(this)
    }
  }
  // 通知Watcher更新，也就是派发更新
  notify () {
    // stabilize the subscriber list first
    const subs = this.subs.slice()
    for (let i = 0, l = subs.length; i < l; i++) {
      subs[i].update()
    }
  }
}

Watcher类的定义如下:

let uid = 0
export default class Watcher {
  constructor (
    vm: Component,
    expOrFn: string | Function,
    cb: Function,
    options?: ?Object,
    isRenderWatcher?: boolean
  ) {
    this.vm = vm
    if (isRenderWatcher) {
      vm._watcher = this
    }
    vm._watchers.push(this)
    // options
    if (options) {
      this.deep = !!options.deep
      this.user = !!options.user
      this.computed = !!options.computed
      this.sync = !!options.sync
      this.before = options.before
    } else {
      this.deep = this.user = this.computed = this.sync = false
    }
    this.cb = cb
    this.id = ++uid // uid for batching
    this.active = true
    this.dirty = this.computed // for computed watchers
    this.deps = []
    this.newDeps = []
    this.depIds = new Set()
    this.newDepIds = new Set()
    this.expression = process.env.NODE_ENV !== 'production'
      ? expOrFn.toString()
      : ''
    // parse expression for getter
    if (typeof expOrFn === 'function') {
      this.getter = expOrFn
    } else {
      this.getter = parsePath(expOrFn)
      if (!this.getter) {
        this.getter = function () {}
        process.env.NODE_ENV !== 'production' && warn(
          `Failed watching path: "${expOrFn}" ` +
          'Watcher only accepts simple dot-delimited paths. ' +
          'For full control, use a function instead.',
          vm
        )
      }
    }
    if (this.computed) {
      this.value = undefined
      this.dep = new Dep()
    } else {
      this.value = this.get()
    }
  }

  /**
   * Evaluate the getter, and re-collect dependencies.
   */
  get () {
    pushTarget(this)
    let value
    const vm = this.vm
    try {
      value = this.getter.call(vm, vm)
    } catch (e) {
      if (this.user) {
        handleError(e, vm, `getter for watcher "${this.expression}"`)
      } else {
        throw e
      }
    } finally {
      // "touch" every property so they are all tracked as
      // dependencies for deep watching
      if (this.deep) {
        traverse(value)
      }
      popTarget()
      this.cleanupDeps()
    }
    return value
  }

  /**
   * Add a dependency to this directive.
   */
  addDep (dep: Dep) {
    const id = dep.id
    if (!this.newDepIds.has(id)) {
      this.newDepIds.add(id)
      this.newDeps.push(dep)
      if (!this.depIds.has(id)) {
        dep.addSub(this)
      }
    }
  }

  /**
   * Clean up for dependency collection.
   */
  cleanupDeps () {
    let i = this.deps.length
    while (i--) {
      const dep = this.deps[i]
      if (!this.newDepIds.has(dep.id)) {
        dep.removeSub(this)
      }
    }
    let tmp = this.depIds
    this.depIds = this.newDepIds
    this.newDepIds = tmp
    this.newDepIds.clear()
    tmp = this.deps
    this.deps = this.newDeps
    this.newDeps = tmp
    this.newDeps.length = 0
  }
  // ...
}

1
2
3

this.deps = [] 
this.newDeps = [] 
//表示Wather实例持有的Dep实例，也就是订阅了多少dep

组件挂载时会调用mountComponent函数，在mountComponent中实例化一个渲染Wathcer，而在实例化Wathcer时调用this.get()

get () {
  pushTarget(this)
  let value
  const vm = this.vm
  try {
    value = this.getter.call(vm, vm)
  } catch (e) {
    // ....
  } finally {
    if (this.deep) {
      traverse(value)
    }
    popTarget()
    this.cleanupDeps()
  }
  return value
}

调用pushTarget(this)将要挂载的组件渲染Wather对象赋值给Dep.target -> 执行this.getter.call(vm,vm)，实际上是执行new Wathcer时传入的回调函数->执行updateComponent()
1
new Watcher(vm, updateComponent, //...)

updateComponent有对组件data数据的访问-> 触发defineReactive的get方法 -> 依赖收集dep.depen()->调用Dep.target.addDep(this)->实际是调用渲染Watcher实例中的addDep

addDep (dep: Dep) {
  const id = dep.id
  // 保证同一数据不会被添加多次
  if (!this.newDepIds.has(id)) {
    this.newDepIds.add(id)
    this.newDeps.push(dep)
    if (!this.depIds.has(id)) {
      dep.addSub(this)
    }
  }
}

将这个渲染Wather添加到在defineReactive中实例化的dep中的subs中,这就是整个依赖收集过程。
派发更新

set时，派发更新的主要流程如下:

set: function reactiveSetter (newVal) {
    const value = getter ? getter.call(obj) : val
    // ....
    if (setter) {
      setter.call(obj, newVal)
    } else {
      val = newVal
    }
    childOb = !shallow && observe(newVal)
    dep.notify()
  }

observe(newVal)使新设置的值变成响应式的

dep.notify()通知所有订阅了这个dep的Wathcher对象-> dep.notify()调用Watcher的update()方法

update () {
  if (this.computed) {
    if (this.dep.subs.length === 0) {
      this.dirty = true
    } else {
      this.getAndInvoke(() => {
        this.dep.notify()
      })
    }
  } else if (this.sync) {
    this.run()
  } else {
    queueWatcher(this)
  }
}

一般组件数据更新会调用queueWatcher(this)
queueWathcer使用了队列，先把Wather添加到队列queue，在下个nextTick执行flushSchedulerQueue() -> 执行watcher.run()方法
1
2
3
4
5
run () {
if (this.active) {
this.getAndInvoke(this.cb)
}
}
run()方法执行->getAndInvoke(this.cb)传入回调函数->getAndInvoke判断满足新旧值不等->执行this.cb回调函数
在渲染watcher中，this.cb为
1
2
3
updateComponent = () => {
vm._update(vm._render(), hydrating)
}
所以当修改组件相关的响应式数据时会触发组件重新渲染

computed实现

Vue实例初始化时调用initComputed()
在initComputed()中为每一个计算属性getter创建computed Wather,computed Wathcer初始化时会持有一个dep实例,用来管理computed Wathcer. 当update()时，要更新订阅了这个dep的watcher。
1
2
3
4
if (this.computed) {
this.value = undefined
this.dep = new Dep()
}

最后调用defineComputed()
defineComputed()–>调用Object.defineProperty为计算属性设置对应的key的getter和setter,一般setter为空，getter对应createComputedGetter(key)

function createComputedGetter (key) {
  return function computedGetter () {
    const watcher = this._computedWatchers && this._computedWatchers[key]
    if (watcher) {
      watcher.depend()
      return watcher.evaluate()
    }
  }
}

当render 函数访问到计算属性时-> 触发getter-> 执行watcher.depend->将渲染Wather订阅上文实例化的dep->执行watcher.evaluate()

evaluate () {
  if (this.dirty) {
    this.value = this.get()
    this.dirty = false
  }
  return this.value
}

watcher.evaluate()执行this.get()-> this.get()为计算属性定义的getter函数获取到this.value值
此时也会访问到计算属性所依赖的数据的getter,所以Dep.target为这个computed watcher,此时这个computed watcher订阅了所依赖数据持有的dep

当对计算属性依赖的数据做修改时->触发数据setter->通知订阅它变化的computed watcher更新-> 执行watcher.update()方法

if (this.computed) {
  if (this.dep.subs.length === 0) {
    this.dirty = true
  } else {
    this.getAndInvoke(() => {
      this.dep.notify()
    })
  }
}

在上文中渲染Wather订阅了this.dep, 所以渲染Wathcer通过this.getAndInvoke()的回调执行update()->重新渲染组件
this.getAndInvoke()主要是对比新旧值

在computed Watcher中this.dirty的作用时在重新渲染组件后，通过evalute()获取计算属性的值时，因为在getAndInvoke()中将this.value设为新值并置this.dirty为false,所以直接返回this.value，不触发所依赖数据的getter

// 在 getAndInvoke()中
const oldValue = this.value
this.value = value
this.dirty = false

watch的实现

Vue实例初始化时->initWatch()->调用createWatcher(vm, key, handler[i])->返回vm.$watch(expOrFn, handler, options)
$watch在执行stateMixin时定义
实例化了Wathcer

1	const watcher = new Watcher(vm, expOrFn, cb, options)

是一个 user Wathcer, options.user = true,
在实例化 user Wathcer时，调用了watcher的this.get()方法，之后的依赖收集和更新与一般组件数据相同,不同是对options属性值不同时，进入不同的分支.

构造函数笔记

2021-10-16T16:00:00.000Z

构造函数

构造函数主要作用是用于实例化类，类实例是由构造函数构造的，构造函数的主要任务是初始化实例需要的信息。(通常构造函数的首字母一般大写)。

构造函数使用new关键字调用

function Animal () {
    this.type = 'animal'
}
let dog = new Animal()
let cat = new Animal()
dog.type // animal
cat.type // animal

实现实例化类主要是new的作用，new的主要作用如下:

自动创建一个空对象
为新创建的对象添加proto,将该属性链接至构造函数的原型对象
把空对象和函数里的this 衔接起来(this指向实例化对象)

隐式返还this(即该函数没有返回对象，则返回this)；
在例子中，一个继承自Animal.prototyper的新对象被创建,this会指向dog。所以在调用时Animal里的this会指向dog,因此调用dog.type，会打印’animal’

基于new的作用，可以仿写一个new运算符

function mynew(constructor, ...arg) {
    //创建 一个空对象
    let obj = {}
    // this指向obj对象
    constructor.call(obj, ...arg)
    // 添加属性__proto__,指向构造函数的原型
    obj.__proto__ = constructor.prototype;
    // 返回 对象
    return obj
}
// 使用
    let dog = mynew(Animal)
    dog.type // animal

构造函数的原型链

因为 new会为新的对象添加proto,并将该属性链接至构造函数的原型对象,所以原型链如下所示:

其中Animal.prototype会有一个默认的constructor属性，引用对象关联的函数(在本例中是Animal)。

1 2	Animal.prototype.constructor === Animal // true dog.constructor === Animal // true

需要注意的是dog.constructor之所以会“指向创建dog的函数Animal”是因为dog本身并没有constructor属性，访问它时会委托到Animal.prototype，而Animal.prototype.constructor默认指向Foo。

也正因为构造函数有这样的原型链，所以可以用来实现工厂模式。一个简单的实现如下:

function Animal (name) {
    this.name = name
    this.type = 'animal'
}
Animal.prototype.myName = function () {
        console.log(`my name is ${this.name}`)
}
let dog = new Animal('dog')
let cat = new Animal('cat')
dog.myName() // dog
cat.myName() // cat

访问dog的myName方法，因为本身没有这个方法，会通过原型链访问到Animal.prototype上。因此我们可以在Animal.prototype上定义共有的方法来封装。

继承

构造函数其实也是一种继承，是类和实例之间的继承，dog可以”继承”Animal.prototype并访问到Animal.prototype的MyName函数。而我们更多使用的是类和类之间的继承。

类和类之间的继承主要使用的是Object.create()函数，它会创建一个新对象并把新对象的proto关联到你指定的对象。在下面的例子中就是创建一个新的Son.prototype对象并关联到Dad.prototype。(会抛弃默认的Son.prototype)

function Dad (name) {
    this.fatherName = name
}
Dad.prototype.fatherName = function () {
        console.log(`I'm father ,my name is ${this.fatherName}`)
}
function Son (name, father) {
    Dad.call(this, father) //在调用时将Dad的this指向Son,从而在Son中能访问到fatherName
    this.sonName = name
}
// 创建一个新的Son.prototype对象并关联到Dad.prototype
Son.prototype = Object.create(Dad.prototype)
// 注意此时Son.prototype.constructor属性会指向Dad,因为它关联到了Dad.prototype，需要手动修复
Son.prototype.constructor = Son

ES6 可以使用Object.setPrototypeOf直接修改现有的Bar.prototype, 此时Son.prototype.constructor不需要修复

1 2	Objcet.setPrototypeOf(Son.prototype, Dad.prototype) Son.prototype.constructor === Son // true

小结

这是最近在重新学习JS相关知识时，所整理的有关构造函数的部分，觉得有所帮助就点个赞和收藏^_^。

electron调用dll笔记

2021-09-28T16:00:00.000Z

electron安装相关依赖

electron调用dll需要安装node-gyp,用于编译node-ffi-napi,ref-arrray-di, ref-struct-di, ref-napi等库。
node-gyp在window下运行需要python2.7环境和 Visual Studio Build Tools.(详情在这里)
在这里可以使用 windows-build-tools进行安装，命令如下(注意需要管理员模式)：
1
npm install --global --production windows-build-tools
为方便开发调用32位和64位dll,建议使用nvm管理node版本,可以在这里下载安装

关键库调用说明

ref-napi, ref-struct,ref-array,在下面引用的是TooTallNate原作者的仓库链接，因为说明文档更加具体和详细,但使用时建议使用node-ffi-napi仓库中的版本，因为它们能够在node 10.0 以上版本使用

node-ffi-napi

node-ffi-napi:用于使用js调用c++动态链接库(dll)，主要用法如下:

var ffi = require('ffi-napi');

// 声明要调用的函数
var libm = ffi.Library('libm', {
  //第一个参数为该函数的输出类型, 第二个参数为参数数组，定义该函数的传参类型
  'ceil': [ 'double', [ 'double' ] ]
});
libm.ceil(1.5); // 2

详细用法可以查看这里
其中需要注意的是，如果是调用相互动态链接的dll，需要调用window的keilDay32设置目录
如下所示:

const kernel32 = new ffi.Library("kernel32", {
            SetDllDirectoryA: ["bool", ["string"]]
})
let result = kernel32.SetDllDirectoryA(path)

ref-napi

ref-napi: 用于将node缓冲区的实例转换为指针，方便传参入dll函数进行调用,具体调用实例在这
重要类型调用如下:

// 在Buffer区创建了一个4个字节的int类型内存空间并将指向该空间的指针赋值给outNumber,这样就可以直接将outNumber作为传参给C++函数，C++函数可以通过该指针赋值到内存区，js使用deref()函数可以拿到实际的值
var outNumber = ref.alloc('int'); 
libmylibrary.manipulate_number(outNumber);
var actualNumber = outNumber.deref();

ref-struct

ref-struct提供一个C++的struct接口在node缓冲区的实现，具体实现方法如下:

// 定义一个Struct类型
// 引用node-ffi-napi中的版本
var StructType = require('ref-struct-di')(ref)
let structText =StructType({
  x: ref.types.int,
  y: ref.types.int,
  width: ref.types.int,
  height: ref.types.height
})
// 在C++函数中声明, 
someDllMethod: ['int', [ref.refType(structText)]],
// 如果是struct有传参默认值, 调用时如下:
let hasValue = new structText({
  x: 0,
  y: 0,
  width: 0,
  height: 0
})
someDllMethod(hasValue.ref())
// 如果要拿到回参的值，直接调用hasValue即可
console.log(hasValue.x)

ref-array

ref-array用于在node缓冲区实现一个C++的数组定义，用法如下:

// 引用node-ffi-napi中的版本
var ArrayType = require('ref-array-di')(ref)
// 定义一个int类型，长度为5的数组类型
let textArray = ArrayType(ref.types.int, 5)

其它特殊使用说明

如果C++需要传入一个类型为void的二级指针句柄，建议如下使用:

someDllMethods: ['long', [ref.refType(ref.refType(ref.types.void))]]

// 在使用时, 定义一个二级int型指针
// 这里如果使用type为void时，无法正确取值
// void indirection 为2
let void = ref.alloc(ref.refType(ref.types.int))
// 解析一次
void.deref()
// 解析二次
void.deref().deref()

c++ 内部使用GBK编码, 如果回参是一个有指定字节数的char数组,需要拿到这个数组的值，并使用iconv-lite将其解析。

// char数组在buffer区中的数据
let textBuffer = new Buffer.form([12,52,25,2,52])
var iconv = require("iconv-lite");
str = iconv.decode(textBuffer, "GBK");

参考文档

Electron打印方法笔记

2021-08-21T16:00:00.000Z

前言

主要是总结最近在工作所使用到的electron方法总结，总结的主要是静默打印的方法.

webview打印

webview主要是electron提供的在一个独立的 frame 和进程里显示外部 web 内容的标签，详细介绍可以看这里.需要注意的是在electron>=5的版本里webview标签是禁用的，需要在主进程BrowserWindow里设置webviewTag为true启用:
1
2
3
4
5
6
mainWindow = new BrowserWindow({
title: '桌面应用程序',
webPreferences:
webviewTag: true
}
});
打印主要使用到是webview的isLoading()和print()方法，webview打印主要适用于打印远程的网页内容.在webview标签里设置好要打印的远程网页url，直接获取到webview元素并调用print方法即可打印.
1

let webview = document.getElementById('webview')
webview.print({
    silent: true, // 是否静默打印
    deviceName: 'print' // 打印机名称
})

关于打印机名称的获取可以在主进程中获取并通过IPC传输到渲染进程

1
2
3

ipcMain.on('getPrintDeviceList', (event) => {
    event.return.value = mainwindow.webContents.getPrinters()
)

需要注意的是远程网页资源加载需要时间，这里最好使用webview.isLoading()确认页面资源加载完成后再调用打印方法，具体调用如下:

webview.addEventListener('dom-ready', checkCanPrint)

function checkCanPrint() {
    // 还在加载中，则setTimeout秒后再检查
    if (webview.isLoading) {
    setTimeOut(() => {checkCanPrint}, 1 * 1000)
   } else {
       webview.print() // 打印
   }
}

在主进程中调用webContents.print()打印

如果需要打印渲染进程里的本地网页内容,可以在主进程中调用webContents.print()，在要打印的渲染进程页面中触发主进程调用打印.

// main.js
ipcMain.on('print', (event, deviceName) => {
    mainWindow.webContent.print( {
        silent: true,
        deviceName: deviceName
    } )
})
// print.js
const {ipcRenderer} = require('electron')
ipcRender.send('print', deviceName)

使用webContents.print()打印时，与在浏览器使用window.onprint()一样，在css中可以使用媒体查询控制要打印的内容和样式
1
2
3
4
5
6
7
8
9
10
//print.css

@media print {
.print-dom {
display: block;
}
.not-print-dom {
display: none;
}
}
总结
使用webview和webContents.print()方法打印是目前在业务使用的两种方法，网上文章其实好多，但在打印远程网页时如何确保网页内容加载完成再打印是这篇文章形成的主要原因。如果有其它更好的方法也希望各位大佬留言.

使用preload远程页面调用electron接口

2020-10-14T16:00:00.000Z

主要原理

主要是通过electron中的preloa在本地中预先加载一个指定脚本js文件，这个文件可以使用node APIs调用electron中的相关接口如ipcRenderer等，所以在electron中使用远程网页的窗口中定义加载js文件，并开放webviewTag,就可以在预加载文件中通过定义window中的方法调用electron接口，然后在远程网页中直接调用预加载文件中定义的方法就可以实现与electron的相关通信。主要实现过程如下:

在BrowserWindow中定义如下：(注意preload的文件路径需要绝对路径)

win = new BrowserWindow({
    webPreferences: {
        webviewTag: true,
        perload: path.join(__dirname, './preload.js')
    }
})

在preload.js中定义相关事件，这里定义一个与electron主进程进行通信的方法

// preload.js
const { ipcRenderer } = require("electron")
window.senSomeToMain = function () {
    ipcRenderer.send('senSomeTomain')
}
// 监听electron主进程返回
ipcRenderer.on('returnSometh', (event, data) => {
    //该方法在远程网页中定义
    window.getReturn(data)
})

在远程页面中的使用如下:
1
2
3
4
5
6
7
8
// index.html

// 与electron主进程通信
window.sendSomeToMain()
// 定义返回信息的回调
window.getReturn = function (data) {
console.log(data)
}
主要用途
方便网页资源部署在服务器，使远程网页可以通过本地的electron访问相关的硬件资源，如打印机等。也方便使网页开发功能业务和electron资源调用业务分开,使部署和开发相对简单。

element源码样式学习

2020-04-19T16:00:00.000Z

element源码样式学习

目录结构

element的样式存放在element的packages/theme-chalk中,目录结构如下所示:

│  alert.scss //组件样式
│  aside.scss
│  autocomplete.scss
│  avatar.scss
│  backtop.scss
│  badge.scss
│  base.scss
│  breadcrumb-item.scss
│  breadcrumb.scss
│  button-group.scss
│  button.scss
|  // 省略部分组件样式
├─common // 组件共用样式
│      popup.scss //弹层类组件共用样式
│      transition.scss //主要定义了element组件中使用vue的 transition 组件时用到的动态效果样式
│      var.scss // 定义了element各组件UI的基本样式的变量,包括颜色,文本大小,边框大小,组件不同尺寸对应的不同样式
│      
├─date-picker // date组件使用样式
│      date-picker.scss
│      date-range-picker.scss
│      date-table.scss
│      month-table.scss
│      picker-panel.scss
│      picker.scss
│      time-picker.scss
│      time-range-picker.scss
│      time-spinner.scss
│      year-table.scss
│      
├─fonts // 字体文件
│      element-icons.ttf
│      element-icons.woff
│      
└─mixins // scss复用函数
       config.scss // 样式名的全局配置
       function.scss // 组件样式使用到的sccss函数
       mixins.scss // 共用的mixins函数
       utils.scss // 工具类函数样式, 如禁用用户选择
       _button.scss // 按钮基本样式

主要文件分析

config.scss

config.scss 文件定义了element样式的全局配置,如样式名前缀,,样式名分割符等

// 这四个样式名配置是element所有样式名定义的基础
// 如: el-button, el-select, is-disabled等样式名
$namespace: 'el';
$element-separator: '__';
$modifier-separator: '--';
$state-prefix: 'is-';

mixins.scss

mixins.scss 文件定义了element各组件样式使用的基本mixins,这里对最主要的mixinx做分析

@mixin b() 混入el

@mixin b($block) {
// 假如 $block为button
  $B: $namespace+'-'+$block !global;  $namespace在config.scss中定义为el,故$B为el-blutton
  .#{$B} {    // .#{} 为scss变量插值,编译后为.el-button
    @content;
  }
}
// @content`用在mixin里面的，当定义一个mixin后，并且设置了@content
// @include的时候可以传入相应的内容到mixin里面

@mixin e() 混入__

@mixin e($element) {
  /**假设$element为disabled **/
  $E: $element !global;
  $selector: &;  // 父选择器
  $currentSelector: ""; // 要生成的选择器
  /** 遍历$element //可能有多个
  /* $B 为 mixin b()混入中的变量名
  /* 这里使用$B是因为在element组件样式中e的混入必定是在b混入下的
  /* 如果是在el-button下使用e混入,则生成 .el-button__disabked
  **/
  @each $unit in $element {
    $currentSelector: #{$currentSelector + "." + $B + $element-separator + $unit + ","};
  }
  /** hitAllSpecialNestRule 判断$elector是否包含--, is-, 在function.scc 中定义
  /* 这里判断是否包含is--,--是因为使用了 @at-root
  /* @at-root指令可以使一个或多个规则被限定输出在文档的根层级上，而不是被嵌套在其父选择器下
  /* 包含有is--等前缀的样式名,在组件中一般是可移除的,所以在输出在文档的根层级上时要加上父选择器
  **/
  @if hitAllSpecialNestRule($selector) {
    @at-root {
      #{$selector} {
        #{$currentSelector} {
          @content;
        }
      }
    }
  } @else {
    @at-root {
      #{$currentSelector} {
        @content;
      }
    }
  }
}

@mixin m() 混入–

/** 
/* 该方法与混入e基本相同,不同的是没有判断hitAllSpecialNestRule
/* 因为混入 -- 一般的是组件的尺寸样式,如 el-radio--medium,el-radio--small等,父选择器一般为el-radio等,
/* 故不需要判断
**/
@mixin m($modifier) {
  $selector: &;
  $currentSelector: "";
  @each $unit in $modifier {
    $currentSelector: #{$currentSelector + & + $modifier-separator + $unit + ","};
  }

  @at-root {
    #{$currentSelector} {
      @content;
    }
  }
}

@mixin w() 混入 is

/** 假设$state为check
/* 则编译后为在文档的根层级(在组件中使用时,为组件根样式)为.el-radio.is-checked
**/
@mixin when($state) {
  @at-root {
    &.#{$state-prefix + $state} {
      @content;
    }
  }
}

functon.scss

function.scss 主要是定义了 hitAllSpecialNestRule 函数方法，主要用来对选择器是否含有’is-‘, ‘–’, ‘:’主要代码如下:

@import "config";

/* BEM support Func
 -------------------------- */
@function selectorToString($selector) {
  //字符化
  $selector: inspect($selector);
  /** str-slice 
  /* 从 $string 中截取子字符串，通过 $start-at 和 $end-at 
  /* 设置始末位置，未指定结束索引值则默认截取到字符串末尾。
  /* 这里主要是去除第一个字符和最后一个字符,避免如 --el, el：等的干扰
  **/
  $selector: str-slice($selector, 2, -2);
  @return $selector;
}

@function containsModifier($selector) {
  $selector: selectorToString($selector);
    /** str-index($string, $substring)
    /* 返回一个下标，标示 $substring 在 $string 中的起始位置。没有找到的话，则返回 null 值。
    /* $modifier-specarator --
  **/
  @if str-index($selector, $modifier-separator) {
    @return true;
  } @else {
    @return false;
  }
}

@function containWhenFlag($selector) {
  $selector: selectorToString($selector);
/** $state-prefix: 'is-'; **/
  @if str-index($selector, '.' + $state-prefix) {
    @return true
  } @else {
    @return false
  }
}

@function containPseudoClass($selector) {
  $selector: selectorToString($selector);

  @if str-index($selector, ':') {
    @return true
  } @else {
    @return false
  }
}
//** 对上述四种情况进行判断，有一种存在就返回true **/
@function hitAllSpecialNestRule($selector) {

  @return containsModifier($selector) or containWhenFlag($selector) or containPseudoClass($selector);
}

vue相关原理面试题整理

2019-08-03T16:00:00.000Z

vue响应式原理实现

主要通过Object.defineProperty实现，通过它对对象的属性进行getter和setter,从而实现访问和修改这个属性时，通过getter和setter实现依赖注入和派发更新。依赖注入和派发更新通过订阅-观察者模式实现，具体如下, 在访问属性时，通过getter给dep添加watcher类，setter时触发dep.notify()方法，使订阅了这个属性所实例化的dep的所有Watcher触发update方法

vue监测数组变化

vue为了监测数组的变化，重新实现了Array的原型方法，包括push,prop等方法,重写的方法会执行本身原有的逻辑，对能增加数组本身长度的方法获取到插入的值，成一个响应式对象，并且再调用 ob.dep.notify() 手动触发依赖通知

nextTick实现原理

在下次 DOM 更新循环结束之后执行延迟回调。nextTick主要使用了宏任务和微任务。根据执行环境分别尝试采用
PromiseMutationObserversetImmediate如果以上都不行则采用setTimeout
定义了一个异步方法，多次调用nextTick会将方法存入队列中，通过这个异步方法清空当前队列。

Vue的生命周期

主要有created, mounted, updated, destory等， created时Vue实例并没有挂载，无法访问到组件的data,method，mountd是组件开始挂载能访问到data,method等数据,当组件DOM更新时触发update，组件销毁时触发destory

computed和watcher

computed是计算属性，计算组件中data的值返回一个结果,当data的值改变时，计算属性的结果值也会改变
wather用来监听data数据的变化

组件中的data为什么是一个函数

一个组件被复用多次的话，也就会创建多个实例。本质上，这些实例用的都是同一个构造函数。如果data是对象的话，对象属于引用类型，会影响到所有的实例。所以为了保证组件不同的实例之间data不冲突，data必须是一个函数。

v-model的原理

v-model本质上是一个语法糖,当表单元素上使用时，实质上是分别定义了data数据和input事件

在组件上使用时同上,不过事件input通过子组件$emit触发

Vue事件绑定原理

Vue事件绑定分为原生事件和自定义事件，原生事件本质上还是通过addEvent和removeEvent实现, 自定义事件，Vue会维护一个事件总线，当组件绑定自定义事件时，通过$on push到事件总线，当通过$emit调用时，在事件总线中查找并触发事件

##　Vue模版编译原理
将Vue模板通过编译生成AST(一种用JavaScript对象的形式来描述整个模板),再对AST进行优化，主要是对数据不会改变的节点标记为静态节点，最后生成render函数

##　Vue2.x的diff算法
diff算法主要判断vnode和oldVnode生成新的Vnode节点，主要过程如下:
同级比较，再比较子节点
先判断一方有子节点一方没有子节点的情况(如果新的children没有子节点，将旧的子节点移除)
比较都有子节点的情况(核心diff)
递归比较子节点
Vue2的核心Diff算法采用了双端比较的算法，同时从新旧children的两端开始进行比较，借助key值找到可复用的节点，再进行相关操作。相比React的Diff算法，同样情况下可以减少移动节点次数，减少不必要的性能损耗，更加的优雅。

##　虚拟Dom以及key属性
在浏览器中对DOM操作是很昂贵的。频繁的操作DOM，会产生一定的性能问题，Virtual DOM本质就是用一个原生的JS对象去描述一个DOM节点。是对真实DOM的一层抽象。
「key的作用是尽可能的复用 DOM 元素。」
新旧 children 中的节点只有顺序是不同的时候，最佳的操作应该是通过移动元素的位置来达到更新的目的。
需要在新旧 children 的节点中保存映射关系，以便能够在旧 children 的节点中找到可复用的节点。key也就是children中节点的唯一标识。

组件通信

父子组件通过$parnet和$refs来访问数据，兄弟组件主要通过Vuex和实现一个 Event Bus

1
2
3

var Event=new Vue();
Event.$emit(事件名,数据);
Event.$on(事件名,data => {});

##　hash路由和history路由实现原理
hash模式的原理是 onhashchange 事件，可以在 window 对象上监听这个事件
history实际采用了HTML5中提供的API来实现，主要有history.pushState()和history.replaceState()。

vue数据驱动原理

2019-05-14T16:00:00.000Z

Vue的定义

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

function Vue (options) {
  //...
  this._init(options)
}

new Vue()-> 调用this._init(options)
this._init初始化各种配置，包括初始化生命周期，初始化data,props, computed, watcher等等-> 最后调用vm.$mout(vm.$options.el)挂载vm.
带 compiler 版本的 $mount 实现

Vue.prototype.$mount = function(//...){
  // 如this.$options.render不存在，调用compileToFunctions方法转换成render方法
        const { render, staticRenderFns } = compileToFunctions(template, {
        shouldDecodeNewlines,
        shouldDecodeNewlinesForHref,
        delimiters: options.delimiters,
        comments: options.comments
      }, this)
      options.render = render
      options.staticRenderFns = staticRenderFns
  // 调用原先原型上的 $mount 方法挂载。
  return mount.call(this, el, hydrating)
}

调用原先原型上的 $mount 方法定义如下:

// public mount method
Vue.prototype.$mount = function (
  el?: string | Element,
  hydrating?: boolean
): Component {
  el = el && inBrowser ? query(el) : undefined
  return mountComponent(this, el, hydrating)
}

调用mountComponent(this, el, hydrating)

// ....
// 实例化渲染Wathcher
  new Watcher(vm, updateComponent, noop, {
    before () {
      if (vm._isMounted) {
        callHook(vm, 'beforeUpdate')
      }
    }
  }, true /* isRenderWatcher */)
  if (vm.$vnode == null) {
    vm._isMounted = true
    callHook(vm, 'mounted')
  }
  // 完成整个渲染工作
  return vm

new Wathcer 在初始化时会执行回调函数updateComponent且 vm 实例中的监测的数据发生变化的时候执行回调函数

// 在watcher定义中, this.getter为传入的updateComponent
get () {
  // ...
  value = this.getter.call(vm, vm)
}

在整个过程中核心是vm._render和vm._update

1
2
3

updateComponent = () => {
  vm._update(vm._render(), hydrating)
}

vm._render()用来把实例渲染成一个虚拟 Node，也就是VNode->调用vnode = render.call(vm._renderProxy, vm.$createElement)
vm.$createElement定义如下：

1	vm.$createElement = (a, b, c, d) => createElement(vm, a, b, c, d, true)

css布局

2018-06-22T16:00:00.000Z

css布局（持续更新）

将浮动元素围住

为父元素添加 overflow:hidden 属性演示如下：
同时浮动父元素 为父元素添加float:left演示如下：

添加非浮动元素的清除元素代码如下

.clear:after{
    content:".";
    display:block;
    height:0;
    visibility:hidden;
    clear:both;
}

三栏一固定宽度布局

父元素wrapper 设定一固定宽度，水平外边距为auto
子元素nav和artice设置浮动，宽度相加为wrapper的宽度（再加以此类推）

header和footer 默认与布局同宽 footer要清除浮动
html代码如下：



header
 article
aside
 footer

css代码如下：

#wrapper{
  margin: 0 auto;
  width:960px;
  height:700px;}
header{
  background:#dcd9c0;
  height:30px;}
nav{
  width:150px;
  float:left;
  background:#dcd9c0;
  height:400px;}
  article{
  width:600px;
  float:left;
  background:#ffed53;
  height:400px;}
aside{
  width:210px;
  float:left;
  background:#3f7ccf;  
  height:400px;}
footer{
  clear:both;
  background:#000;
  height:40px;}

各栏边界分开的解决方法：
1. 为子元素里的内容加一个div,为div设置一个内边距
2. 为浮动栏设置 box-sizing:border-box 以及内边距和边框即可– IE7和IE8不支持

三栏–中栏流动布局

方法一

用一个div class为threecolarap 包围全部三栏并为其设置浮动
用一个div class为twocolarap包围左栏和中栏并为其设置浮动以及加上 margin-right:210px 把右栏拉到区块外边距腾出的位置上
中栏加上 margin-right:210px 在流动居中的栏右测腾出空间

方法二

为每一栏display属性设定为table-cell (IE7不支持)
补充
元素居中
为父元素应用 text-algin:center
为要居中的元素设定 display:inline-block

js算法3

2018-03-30T16:00:00.000Z

要求介绍

个人代码：

function encode(str,  n)
{  var arr =[];
  var j=0;
  var n = n.toString().split('').map(Number);
  for(var i =0;i
      arr.push((str[i].charCodeAt()-96));
      arr[i]=arr[i]+n[j];
      j++;
      if(j==n.length) j=0;    
  }
  
    return arr;
}

别人代码

function encode(str, n) {
  const key = String(n)
  return Array.from(str, (c, i) => c.charCodeAt(0) - 96 + Number(key[i % key.length]))
}

js算法1

2018-03-22T16:00:00.000Z

js相关算法

传入四个正整数参数，返回最小的两个，代码如下：

function sumTwoSmallestNumbers(numbers) {  
  var min=Math.min.apply(Math,numbers);
 var filterResult= numbers.filter((item)=>{
    return (item!=min)
  }
  )
  var smin=Math.min.apply(Math,filterResult);
  return min+smin;
  //Code here
};

最优解(别人代码系列)

function sumTwoSmallestNumbers(numbers){  
  numbers = numbers.sort(function(a, b){return a - b; });
  return numbers[0] + numbers[1];
};
//使用排序解决。。。。

给定一个正整数n写成abcd …（a，b，c，d
…是数字）和一个正整数p，我们想要找到一个正整数k，如果存在的话，比如数字的总和对于p的连续幂的n等于k * n。换一种说法：
例如：（a ^ p + b ^（p + 1）+ c ^（p + 2）+ d ^（p + 3）+ …）= n * k
如果是这种情况，我们将返回K，如果不返回-1。
注：N，P将始终作为严格正整数给出。
代码如下：

function digPow(n, p){
  // ...
  var s=n.toString();
  var sum =0;
  for(var i=0;i
  sum+=Math.pow(s[i],p);
  p++;
  } 
  if(sum%n==0) return sum/n;
  else return -1;
}

最优解(别人代码系列)

function digPow(n, p) {
  var x = String(n).split("").reduce((s, d, i) => s + Math.pow(d, p + i), 0)
  return x % n ? -1 : x / n
}
//reduce中s为上一次调用回调函数时的返回值，或者初始值
//d为当前正在处理的数组元素
//i为当前数组元素下标
//初始值为0

找到n下面所有倍数的总和m，例子：

sumMul(2, 9) ==> 2 + 4 + 6 + 8 = 20
sumMul(3, 13) ==> 3 + 6 + 9 + 12 = 30
sumMul(4, 123) ==> 4 + 8 + 12 + … = 1860

sumMul(4, -7) ==> “INVALID”
代码如下：

function sumMul(n,m){
//your idea here
var sum=0;
var double=1;
var val=n;
while(val
sum+=val;
double++;
val=n*double;
}
if(sum==0) return  "INVALID";
return sum;
}

别人代码

function sumMul(n,m){
  if (n >= m) return "INVALID";

var sum = 0;
  for (var i = n; i < m; i+=n) {
    sum += i;
  }
  return sum;
}

公差公式，示例如下：

arithmetic_sequence_elements(1, 2, 5) == “1, 3, 5, 7, 9”
代码如下：

function arithmeticSequenceElements(a,r,n) {
  //your code here
  var arr =[];
  var i=0;
  while(arr.length
  if(i==0){ arr[i]=a}
  else arr[i]=' '+a;
    a=a+r;
    i++;
      
  }
 arr=arr.toString();
  return arr;
}

别人代码系列:

function arithmeticSequenceElements(a,r,n) {
  var ret = [a]
  while (--n) ret.push(a+=r);
  return ret.join(', ')
}

去除！示例如下：

remove(“Hi!”) == “Hi!”
remove(“Hi!!!”) == “Hi!!!”
remove(“!Hi”) == “Hi”
remove(“!Hi!”) == “Hi!”
remove(“Hi! Hi!”) == “Hi Hi!”
remove(“Hi”) == “Hi”

代码如下：

function remove(s){
  //coding and coding....
 var a=/!+[^!$]/gm;
 return s.replace(a," ");
}
//自己的想法，然后有两个没过。

别人代码系列：

function remove(s){
  var a=/!+(?!!*$)/g;
  return s.replace(a, '');
}
总体思路是对，不匹配最后的！用零宽负向先行断言，要求接下来的字符不与!匹配

返回最大和最小，示例如下：

highAndLow(“1 2 3 4 5”); // return “5 1”
highAndLow(“1 2 -3 4 5”); // return “5 -3”
highAndLow(“1 9 3 4 -5”); // return “9 -5”

代码如下：

function highAndLow(numbers){
  // ...
  var arr =numbers.split(/[\ ]+/);
    var arr=arr.map(function(item){
      return parseInt(item);
    })
    var max=Math.max.apply(Math,arr);
    var min=Math.min.apply(Math,arr);
  console.log(max);
  return max.toString()+" "+min.toString();
  
}

别人代码：

function highAndLow(numbers){
  numbers = numbers.split(' ').map(Number);
  return Math.max.apply(0, numbers) + ' ' + Math.min.apply(0, numbers);
}

js算法2

2018-03-22T16:00:00.000Z

首字母大写

代码如下：

function capitalizeWord(word) {
  var r =word.charAt(0);
  var s=r.toUpperCase();
var arr=word.split('');

  arr[0]=s;
  var arrs=arr.toString().replace(/,/g , "");
  return arrs;
}

别人代码：

function capitalizeWord(word) {
  return word[0].toUpperCase() + word.slice(1);
  //删除第一个字母
}

计算体积并得出差值
代码如下：

function findDifference(a, b) {
  //loading...
  var s1=1,s2=1;
  for(var i=0;i
  s1=s1*a[i];
  }
  for(var i=0;i
    s2=s2*b[i];
  }
  if(s1>s2){
    return s1-s2;
  }
  if(s1
    return s2-s1;
  }
  if(s1==s2){
    return 0;
  }
}

别人代码如下：

1
2
3

function find_difference(a, b) {
  return Math.abs(a.reduce((previous, current) => previous * current) - b.reduce((previous, current) => previous * current));
}

返回数组中不重复的值
代码如下:

function stray(numbers){
  for (var i in numbers){
     if (numbers.indexOf(numbers[i]) === numbers.lastIndexOf(numbers[i])){return numbers[i]}
  }
}
//向前和向后搜索，如果索引相同说明只有一个，可以返回

转换Number类型
示例如下：
348597 => [7,9,5,8,4,3]
代码如下：

function digitize(n) {
  var s=n.toString();
  var arr=[];
  for(var i=0;i
    arr.push(s[i]);
  }
  return arr.map(Number).reverse();
}

别人代码系列

1
2
3

function digitize(n){
  return (n + '').split('').map(Number).reverse();
}

solution(‘world’); // returns ‘dlrow’

代码如下：

1
2
3

var arr =str.split('');
 arr=arr.sort().toString().replace(/,/g,'');
 return arr;

别人代码：

1
2
3

function solution(str){
  return str.split('').reverse().join('');  
}

简单的运算

代码如下：

function basicOp(operation, value1, value2) {
    switch (operation) {
        case '+':
            return value1 + value2;
        case '-':
            return value1 - value2;
        case '*':
            return value1 * value2;
        case '/':
            return value1 / value2;
        default:
            return 0;
    }
}

别人代码：

function basicOp(o, a, b) {
  return eval(a+o+b);
}
//eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。

面试2

2018-03-22T16:00:00.000Z

浏览器如何解析css

CSS选择器的解析是从右向左解析的。若从左向右的匹配，发现不符合规则，需要进行回溯，会损失很多性能。若从右向左匹配，先找到所有的最右节点，对于每一个节点，向上寻找其父节点直到找到根元素或满足条件的匹配规则，则结束这个分支的遍历。两种匹配规则的性能差别很大，是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点（叶子节点），而从左向右的匹配规则的性能都浪费在了失败的查找上面。
而在 CSS 解析完毕后，需要将解析的结果与 DOM Tree 的内容一起进行分析建立一棵 Render Tree，最终用来进行绘图。在建立 Render Tree 时（WebKit 中的「Attachment」过程），浏览器就要为每个 DOM Tree 中的元素根据 CSS 的解析结果（Style Rules）来确定生成怎样的 Render Tree。

数组和对象的原生方法
数组方法有

转换方法：toLocaleString(),toString(),valueOf()
栈方法：push(),pop()
队列方法 shift(),unshif()
重排序方法 reverse() ,sort()
操作方法 concat() slice() splice()
位置方法 indexOf() lastIndexOf()
迭代方法 ecery() filter() fotEach() map() some()
归并方法 reduce() reduceRight()

如果需要手动写动画，你认为最小时间间隔是多久，为什么？

多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms。

作用域问题(专开坑)
js数据类型并写出它们的内存图

js数据类型：Undefined Null Boolean Number String Object
JS中的基础数据类型，这些值都有固定的大小，往往都保存在栈内存中，由系统自动分配存储空间。我们可以直接操作保存在栈内存空间的值
jS的引用数据类型，比如数组Array，它们值的大小是不固定的。引用数据类型的值是保存在堆内存中的对象。

null和undefine的区别

答案

为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式

父元素的高度无法被撑开，影响与父元素同级的元素
与浮动元素同级的非浮动元素（内联元素）会跟随其后
若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。
方法：
父级div定义height
最后一个浮动元素后加空div标签并添加样式clear:both。
包含浮动元素的父标签添加样式overflow为hidden或auto。
父级div定义zoom

:after和::after有什么区别，有什么作用

作用使得html更加语义化。有些时候，为了某些特定的展现，不得不添加用于辅助布局的无意义html元素，这两个伪元素能实际起到这种辅助布局的作用，而又不增加无意义纯布局html元素，所以html就更简洁更纯粹了。
区别before/:after这种写法css2中就有，叫伪类；::befroe/::after这种写法是css3中的，叫伪元素，但两种写法的作用是一样的。后者无法兼容IE低版本，如果要求兼容IE低版本请使用前者。注：对于img和input元素两者都不起作用

面试3

2018-03-22T16:00:00.000Z

vue 生命周期

beforecreated：el 和 data 并未初始化
created:完成了 data 数据的初始化，el没有
beforeMount：完成了 el 和 data 初始化
mounted ：完成挂载
beforecreate : 举个栗子：可以在这加个loading事件
created ：在这结束loading，还做一些初始化，实现函数自执行
mounted ：在这发起后端请求，拿回数据，配合路由钩子做一些事情
beforeDestroy：你确认删除XX吗？
destroyed ：当前组件已被删除，清空相关内容

组件通信

父组件向子组件通信

使用props即可

子组件向父组件通信

使用自定义事件，子组件用$emit()来触发向父组件通信的事件

非父子组件通信

在vue.js2.x中使用一个空的vu实例来作中介，组件把自定义事件名称和数据发送到这个空实例，其它实例或组件通过监听空实例的自定义事件来刷新数据

网络状态

1XX 成功
2XX 重定向
3XX 客户机中出现的错误
400 请求无效

闭包应用场景

闭包通常用来创建内部变量，使得
这些变量不能被外部随意修改，同时又可以通过指定的函数接口来操作。

面试1

2018-03-21T16:00:00.000Z

清除浮动
方法1：:after方法

:after{
 content: ".";
 clean：both;
display:block;
height: 0px;
}

方法2：父元素设置overflow:hidden

.f{
    overflow:hidden;
    
}

方法3：添加空div标签clean:both

1
2
3

.clean-both{
    clean:both;
}

div垂直和水平居中
方法1 使用absolute+transform

.parent{
    position: relative;
}
.child{
    position:absolute;
    left:50%;
    top:50%;
    transform:tranplate(-50%,-50%);
}

方法2 inline-block+text-align

.parent{
    text-align:center;
    display:table-cell;
    vertical-align:middle;
}
.child{
    display:inline-block;
}

方法3 flex

.parent{
    display:flex;
    justify-content:center;
    align-items:center;
}

DOM操作
获取子元素并插入

1
3

代码如下：

var li=document.createElement("li");
var textNode=document.createTextNode("2");
li.appendChild(textNode);
var ul=document.getElementsByTagName("ul");
ul.insertBefore(li,ul.childNodes[1]);

数组去重
遍历，将数组的值添加到一个对象的属性名里，并给属性赋值，对象不能添加相同属性名，以这个为依据可以实现数组去重，然后用Object.keys(对象)返回这个对象可枚举属性组成的数组，这个数组就是去重后的数组。

 let a = ['1', '2', '3', 1,NaN,NaN,undefined,undefined,null,null, 'a', 'b', 'b'];
    const unique = arr => {
        var obj = {}
        arr.forEach(value => {
            obj[value] = 0;//这步新添加一个属性，并赋值，如果不赋值的话，属性会添加不上去
        })
        return Object.keys(obj);//`Object.keys(对象)`返回这个对象可枚举属性组成的数组，这个数组就是去重后的数组
    }
    console.log(unique(a));//["1", "2", "3", "NaN", "undefined", "null", "a", "b"]

作者：OBKoro1
链接：https://juejin.im/post/5aad40e4f265da237f1e12ed
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

es6

1
2
3

let unique= [...new Set(array)];
//es6 Set数据结构类似于数组，成员值是唯一的，有重复的值会自动去重。
//Set内部使用===来判断是否相等，类似'1'和1会两个都保存，NaN和NaN只会保存一个

提高页面加载速度

减少dom操作
部署前，图片压缩，代码压缩
优化js代码结构，减少冗余代码
减少http请求，合理设置 HTTP缓存
使用内容分发cdn加速
静态资源缓存
图片延迟加载

作用域问题

function F(){
    var arr=[],i;
    for(i=0;i<3;i++){
        arr[i]=function(){
            return i;
        };
    }
    return arr ;
}
结果都为3;闭包问题
方法为
function F(){
    function binder(x){
        return function(){
            return x;
        };
    }
    var arr =[],i;
    for(i=0;i<3;i++){
        arr[i]=binder(i);
    }
    return arr;
}

vue数据监控

使用watch监控
使用计算属性
过渡器

vue学习笔记(二)————组件

2018-02-09T16:00:00.000Z

前言

主要是有关vue组件的笔记，然后也不想为了定blog而写blog,所以应该会写一些真的自己想记下来的东西，也希望可以尽量精简的写

组件用法

需要注册才能使用组件，注册分为局部注册和全局注册，代码示例如下：

必须在实例注册，组件才可以使用

//全局注册
Vue.component("组件名",{

    //选项
    
});
//局部注册
var 组件名 ={
    //选项
}
html模板如下：
<组件名>

组件选项

template

temlplate后面是要渲染的内容，必须有一个元素包围它，代码如下：

注意v-show不能用在template中，可以使用v-if

Vue.component("组件名",{
template: '
';
    
});

data

data的用法与实方法相同，不同的是要将数据return出去，代码如下：

Vue.component("组件名",{
.....
data : function{
    return  {
        mws: "text"
    }
}
    
    
});

props

props主要是用来接收来自父组件的数据，可以是字符串数组和对象
注意数据是单向的，只能父组件传到子组件
代码如下：

html:



js：
Vue.component("mytext",{
    props:['message']
    
});

props的数据可以进行验证，代码如下：

props: {
    message : {
        type:Number， //类型
        default:""text //如果没有定义的默认值
        
    }
    }
}

wath

主要是用来监听props的值的改变，从而通知父组件或者更新props值
代码如下

watch:{
    message: function(val){
        //当message发生改变时触发的函数 
        //val 为更新后的message值
    }
}

组件通信

父组件向子组件通信

使用上面的props即可

子组件向父组件通信

使用自定义事件，子组件用$emit()来触发向父组件通信的事件代码如下：

html:

//其中send为子组件发送过来的参数，为自定义事件的名称
Vue.component("mytext",{
template:'

可以使用v-model来简化，不过个人感觉没有必要，所以不想写在这里做总结。。。。。。

非父子组件通信

在vue.js2.x中使用一个空的vu实例来作中介，组件把自定义事件名称和数据发送到这个空实例，其它实例或组件通过监听空实例的自定义事件来刷新数据
代码如下：

1
2
3

var bus =new Vue();
bus.$emit('clicks',mes);
bus.$on('clicks',function(){});

补充：
当子组件较多时，可以用ref属性为组件指定一个索引名称：代码如下:

html代码如下：
//调用指定的子组件的message
var msg=this.$refs.comA.message

slot

slot是内容分发，用在将父组件的dom结构挂载，它与props,events触发事件构成组件的3个APi来源.
slot的作用域是在父组件上
代码如下：


//挂载内容 

Vue.component("mytext",{
template:'
    
    
    
//没有内容时的默认内容
    //父组件的内容将挂载在slot里面
    
'
    
});

可以给slot指定一个name，使用分发指定内容代码如下：


//挂载内容,slot为具名slot

Vue.component("mytext",{
template:'
    
    
    
//没有内容时的默认内容
    //父组件的内容将挂载在slot里面
    //具名slot将分发在这里
    
'

也可以指定数据传递到父组件的挂载里，使用scope,代码如下：



    {{props.msg}} //显示子组件的msg
//挂载内容,slot为具名slot,props为临时变量

Vue.component("mytext",{
template:'
    
    
    
//没有内容时的默认内容
    //父组件的内容将挂载在slot里面
    //具名slot将分发在这里
    //msg为向父组件传递的数据
    
'

可以使用$slots访问分发的内容

1	var header =this.$slots.one;

结语

还有许多关于组件的高级用法，不过我不是大佬，等以后用到再写吧。写完收工睡觉

lzh

vue-router源码简要分析

前言

vue-router插件初始化

调用install文件

实例化vue-router对象

Vue组件挂载渲染时VueRouter初始化

router-view渲染机制

router-link跳转机制

总结

参考资料

PDF展示与合成Vue组件(lz-pdf-merage)

前言

体验

pdf展示

pdf合成

canvas元素合成

pdf合成叠加

DrawObj

pdf打印

vue3.2是怎么发布vue-release的

相关源码文件及依赖

主要流程

流程图

重要函数分析

总结

参考资料

vue3 工具函数源码学习

vue3工具函数目录结构

主要工具函数解析

vue-响应式原理

通过object.defineProperty设置getter和setter

依赖收集和派发更新

依赖收集

派发更新

computed实现

watch的实现

构造函数笔记

构造函数

构造函数的原型链

继承

小结

electron调用dll笔记

electron安装相关依赖

关键库调用说明

node-ffi-napi

ref-napi

ref-struct

ref-array

其它特殊使用说明

参考文档

Electron打印方法笔记

前言

webview打印

在主进程中调用webContents.print()打印

总结

使用preload远程页面调用electron接口

主要原理

主要用途

element源码样式学习

element源码样式学习

目录结构

主要文件分析

config.scss

mixins.scss

functon.scss

vue相关原理面试题整理

vue响应式原理实现

vue监测数组变化

nextTick实现原理

Vue的生命周期

computed和watcher

组件中的data为什么是一个函数

v-model的原理

Vue事件绑定原理

组件通信

vue数据驱动原理

css布局

css布局（持续更新）

将浮动元素围住