- 博客(19)
- 收藏
- 关注
RSS订阅原创 commonjs vs es6 module
commonjs 与 ES6 module 的简介commonjsexports.bar = 2module.exports = {foo: 3}exports.foo = 4require('./xxx')/*** 注意1. module.exports 初始值为 {} module.exports === exports* 2. exports 的改变影响不了 module.exports * 3. require 返回的是 module.export
2022-04-15 10:28:17
164
原创 React Hooks 与 Vue composition API
什么是 hooks 及 hooks 的作用hooks 是在函数组件中 "钩入" react state 和生命周期等特性的函数。使用 hooks 利于业务逻辑的重用，减小了代码体积。逻辑复用其他的解决方案存在不足：vue 中使用 minix 混入（在引入文件中进行方法和属性的合并，相同的属性名会覆盖，相同函数名会合并为一个数组，即存在命名冲突问题）react 中使用高阶组件，多层包裹嵌套组件，增加了复杂度和理解成本vue3 composition API，增加了新的组件选项 setu.
2022-03-26 18:49:24
897
原创 项目 build 后存在 ES6 兼容问题
解决方法：配置参考 | Vue CLI默认情况下 babel-loader 会忽略所有 node_modules 中的文件。你可以启用本选项，以避免构建后的代码中出现未转译的第三方依赖只转译部分特定的依赖的方式如下：transpileDependencies: [ 'node_modules\\/@ss\\/', 'node_modules\\/@gfe\\/', 'node_modules\\/@harbour\\/', 'node_modules\\/@
2022-03-15 15:34:31
1235
原创 flexbox 布局
flex-wrap 属性：控制其内部元素是否可以换行flex-wrap: nowrap; // flexbox 容器类型为 single-line 的 flex 容器flex-wrap: wrap/wrap-reverse; // 定义 flexbox 容器类型为 multi-line 的 flex 容器影响：1. align-items 和 align-self 两个属性在 single-line 和 multi-line 两种 flex 容器中都可以工作。然而，但只有在坐标轴还有剩余空
2022-03-15 10:36:32
239
原创 Webpack proxy 跨域实现原理
webpack 通过 proxy 解决跨域，是基于 webpack-dev-server，devServer 中是关于 proxy 代理的配置。const devServer = { proxy: { '/poi': { target: 'https://yapi.sankuai.com/mock/2072', changeOrigin: true, }, },}target: 表示代理到的目标地址pathRewrite：默认情况下 po
2022-03-10 10:21:28
3056
原创 异步回调Promise
问题六 promise使用：const promise = new Promise((resolve,reject) => { //...做一些异步操作 if(success) { resolve(value) } else { reject(value) } })promise.then 方法（当异步操作...
2019-12-12 17:34:57
622
原创 vue数据双向绑定
Vue2.0数据双向绑定的方法Vue主要特点三方面 响应式 模板 组件声明Vue3.0在这三方面都做了改进。响应式Vue2.X 的响应式是基于Object.defineProperty实现的代理兼容性：兼容主流浏览器和ie9以上的ie浏览器监听数据：能够监听数据对象的变化，但是监听不到对象属性的增删、数组元素和长度的变化同时会在vue初始化的时候把所有的[Observe...
2019-12-11 11:09:34
373
原创 Vue之this.$set Vue.set
列表渲染，对数组的操作（增删改查）有三种方式可以实现页面即时更新：1.利用数组的变异方法（pop,push,shift,unshift,sort,reverse,splice） 2.改变数组的引用地址 3.通过使用全局变量Vue.set（数组名，属性，属性值）对对象的操作，两种方式实现页面更新：1.改变对象的引用地址 2.通过使用Vue.set或者vue.$set方法。注意：通过数组下标更...
2019-12-11 09:41:01
410
转载 CDN 内容分发网络
1.CDN是什么？CDN是构建在网络上的内容分发网络，具备内容存储和分发两个关键要素。其基本原理是广泛采用各种缓存服务器，将这些缓存服务器分布到用户访问相对集中的地区或网络中，在用户访问网站时，利用全局负载技术将用户的访问指向距离最近的工作正常的缓存服务器上，由缓存服务器直接响应用户请求。2.CDN是如何发挥作用的？1. 当用户点击网站页面上的内容URL，经过本地DNS系统解析...
2019-12-09 10:35:31
214
原创 前端面试
1.手写call函数Function.prototype._call = function(context){ var context = context || window; context.fn = this; var args = [...arguments].slice(1); var result = context.fn(...args); ...
2019-12-05 15:50:39
220
原创 Vue移动端适配
讨论remrem是相对于HTML元素的font-size的。根元素font-size为屏幕的某个比例。全部使用rem的缺点，除法导致的小数缺省问题，视觉上有几像素的偏差。设计图 如果是750px，font-size设为100px，那么px:rem=100:1，rem = px/100。设备宽为7.5rem。在宽为非750px的设备中，JS对font-size做动态计算：font-size ...
2019-11-27 19:20:30
171
原创 Vue组件传值
1、Vue父向子组件传值propsProp是在组件上注册的一些自定义特性。当一个值传递给一个prop特性的时候，它就变成了那个组件实例的一个属性。动态传值Props流程：1 首先应知道自己创建的组件里面是什么标签之类的。应用到哪个地方？具体模板应该是什么样子的？例如简单的模板 <div>{{title}}</div>； 2 声明组件上的props； 3 实例...
2019-11-20 16:48:47
164
原创 Vue 中watch使用和computed的区别
对象属性的watch使用方法global: { deep: true, //引用类型变量存的是地址，地址不变，不会触发watch。深度监听，添加属性deep immediate: true, handler (val) { if (val && Object.keys(val).length > 0) { ...
2019-11-15 16:26:05
287
原创 Vue混入mixins
混入 (mixins) 是一种分发 Vue 组件中可复用功能的方式。理解：mixins就是定义一个对象包含公共的方法或者数据，计算属性等，然后混入到多个组件中使用,方便管理与统一修改。使用方法：创建一个要混入的对象 common.jsexport const common={ methods:{ sayHello:()=>{ consol...
2019-11-15 15:40:51
265
原创 Vue生命周期和beforeRouteEnter理解
1、beforeRouteEnter(to,from,next)beforeRouteEnter 函数内部 this 是undefined，这是因为在执行路由钩子函数beforRouteEnter时候，组件还没有被创建出来；先执行beforRouteEnter，再执行组件周期钩子函数beforeCreate。我们可以通过 next 获取组件的实例对象，如：next( (vm)=>{} )...
2019-11-15 15:13:53
35307
原创 Vue组件中is属性和ref属性的应用
1、is属性解决渲染中的一些小bug。举个栗子：<div id="root"> <table> <tbody> <tr><td>1</td></tr> <tr><td>2</td></tr> </tbody&...
2019-11-15 14:28:15
526
原创 vue v-loading指令
<template> .course-wrapper(v-loading='Object.keys(resource).length <= 0')</template>v-loading的作用：在请求到数据之前，显示加载中的效果，当请求到数据之后加载效果消失。（如果）v-loading写在template的顶层元素上，不会触发全局loading。...
2019-11-14 20:10:44
3662
原创 eagles 移动端设置字体自适应
var docEl = document.documentElement 返回文档的 documentElementdocument.documentElement.nodeName // HTMLvar clientWidth = document.documentElement.ClientWidth 获取浏览器窗口文档显示区域的宽度设置meta标签<meta na...
2019-11-14 19:29:34
169
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人