细则1-CSDN博客

原创 this到底指向哪？一文搞懂this指向

前言js中的this指向灵活，使用场景多样，概念虽然基础，但却非常重要，非常多隐蔽的bug都来源于它，搞懂this的指向是非常有必要的，如果可以熟练驾驭this，那么代码自然会更为简洁优雅this指向谁?关于this指向谁，有一个最通俗的说法谁调用它，this就指向谁这样说没什么大的问题，但是并不是特别全面，但是总的来说，他的方向是对的，this的指向是在调用时被确定的，this会指向上下文里调用它的对象，这是最基本的用法const person = { name:'xz', sayName

2021-07-13 16:09:54 1252

原创前端跨端方案介绍

前言目前主流的客户端主要分为3种Native app即原生app，安卓和IOS使用不同语言开发，这种方式性能最好，用户体验最佳，并且可以完整的使用所有native端的功能，但是他的上手成本相对会高一些，安卓与IOS使用不同的语言，不同端之间互不相通，开发成本相较于web会更高，并且发布更新无法做到像web一样随时发版，需要通过app市场的审核，发版周期大约在一周左右，更新较慢Web app即web站点，使用H5开发，通过浏览器访问，多端展示一致，但是web app功能受限，无法使用native端

2021-06-23 14:39:30 1077

原创基于vue简易多行文本组件的实现

最近碰到一个业务需求，描述文字超过3行的话，要在最后显示展开按钮，点击展开后显示所有文本，咋一看挺简单的，但是分析了一下其实还是有挺多东西需要考虑到的效果大概这样收起展开最开始想偷个懒，用css来做，使用-webkit-line-clamp属性来实现。-webkit-line-clamp用来限制在一个块元素显示的文本的行数，结合text-overflow可以非常简单的用css实现收起的效果overflow : hidden;text-overflow: ellipsis;display:

2021-02-04 17:20:25 1067

原创 vue自定义组件中的v-model解析

在vue项目的开发中，我们肯定用到了很多第三方的组件，我们使用这些组件的input时，通常是直接使用v-model进行双向的数据绑定，但是如果是我们自己来实现一个input组件的话，想达到通过v-model直接双向绑定的效果，就要进行一些适配了官方的文档上有提到过这样的一句话可以看到组件上的v-model实际上是vue提供给我们的语法糖，而其本质实质上是这样的  <my-input v-model='name'></my-input

2020-11-23 13:01:05 562 1

原创 webpack打包流程解析以及手撸简易webpack

webpack打包的流程实际上是根据文件间的依赖关系对其进行静态分析，然后将这些模块按指定规则生成静态资源，webpack会将这些关系整理成一个依赖关系图(dependency graph)，整理完成后再根据整个依赖关系图来生成文件，所以我们可以大致的将整个打包流程分为4步根据入口文件，分析依赖逐级分析，确定用到的所有模块将这些模块以及他们之间的关系生成一个依赖关系图依据这个依赖关系图生成文件为了完成这几个步骤，我们需要一个帮助我们分析单个模块的module analyzer的函数一个帮

2020-11-18 11:36:42 444 1

原创 webpack从入门及实战（四）webpack实战配置以及性能优化

单页路由在devServer中的配置一般来说，使用了主流前端框架的项目，如vue和react，生成的项目都是单页应用，使用前端路由来切换页面的展示import React, { Component } from "react";import { BrowserRouter, Route } from "react-router-dom";function Home(props) { return <div>Home</div>;}function Demo(prop

2020-11-13 10:35:17 620

原创 webpack从入门及实战（三）webpack高级概念

Tree Shakingtree shaking是一个术语，翻译过来是摇树的意思。可以将它理解为整个app是一棵树。上面有实际用到的源码和 library，是树上活的绿叶。也有一些无用的代码，是树上的枯叶。为了让这棵树更茁壮的成长，你必须摇动这棵树，让枯叶落下。首先改一下sayHi.js// sayHi.jsexport function sayHi(){ console.log('hi')}export function sayHello(){ console.log('hello')

2020-11-03 11:46:10 226 1

原创 webpack从入门及实战（二）webpack核心概念

Loaders说到webpack，自然离不开他的一大堆loaders，没有loaders的webpack只能打包js文件，得益于众多的loaders，我们可以打包各种类型的文件。loaders实际上可以理解为一种打包方案，webpack本身碰到除了js文件之外的其他类型文件时，就不知道该如何打包了，然后打包就会失败，而loaders则是对应某种文件类型的文件一种单独的打包方案，通过config配置了loaders之后，webpack就可以打包该类型的文件了打包图片图片可以使用file-loader来

2020-10-22 18:32:36 184

原创 webpack从入门及实战（一）初探webpack

何为webpackwebpack is a module bundlerwebpack是一个模块打包器，可以将项目使用到的所有有依赖关系的文件打包成一系列的静态资源。在web业务日益复杂化和多元化的今天，前端工程化已经是一个大的趋势。而模块化以及组件化则是前端工程化中最为重要的2个部分，而webpack所提供的功能，已经使他成为了前端工程化基础设施的一部分，Vue和React的官方脚手架Vue-Cli以及creat-react-app全部是通过webpack来完成的。相较其他的工具，webpack

2020-10-19 17:36:48 222 2

原创 React官方脚手架 create-react-app的多入口配置

在生成react项目时候，使用Facebook官方脚手架create-react-app是一个不错的选择，但是默认只能生成一个SPA，入口是index.html。虽然页面的切换可以用前端路由来实现，但某些情况下，仍要将页面切分为多个页面，或者在同一个工程开发多个SPA，这个时候就需要将项目改为多入口react官方对这个问题的回答是：Sorry, but Create React App doesn’t support this use case.You can eject and then confi

2020-10-14 11:06:32 1619

原创基于vue的开源个人主页

最近抽空用vue做了一个个人主页，除了首页的信息展示外还做了一个简单的留言系统，目前已经打包部署完成，链接：www.xxizz.com以下是部分截图，感兴趣的朋友可以去我的网站看看效果，能留个言的话最好了目前是初版，后续考虑添加的功能有1.基于移动端的适配，目前版本移动端的适配暂时没有做2.留言部分添加用户系统，目前版本的留言没有用户系统，后续考虑添加一套完整的登录，注册，上传头像，修改信息等一系列功能…这段时间可能没有太多时间来改了，公司有项目要忙不过如果你有建议，欢迎提出来给我，既然坑已经

2020-09-27 10:43:21 3984 5

原创微信小程序使用echarts

这周做的项目需要在小程序上画一个折线图和一个柱状图，之前用的插件有些旧了，尺寸只能使用px，在小程序上可以说是非常致命了，找了一下发现echarts居然有小程序版本，当场决定换个轮子github地址：ecomfe/echarts-for-weixin这是一个小程序的组件，帮我们兼容了小程序的canvas，使得我们可以方便的在小程序上使用echarts，echarts自然不用多说，涵盖了各种类型的图表，高度的可自定化，可以说是数据可视化的标配解决方案了下载首先下载该项目，文件路径如下其中ec-c

2020-08-24 12:21:56 1675

原创简易的双向数据绑定实现（Object.defineProperty()和Proxy对象）

vue3.0马上要来了，双向数据绑定的方式也由Object.defineProperty()变成了Proxy对象，特地去了解了一下，整理了这2者之间的一些区别Object.defineProperty()Object.defineProperty()是通过给对象的某个属性添加getter和setter来监听数据的变化，而我们在setter中对dom进行操作，就达成了简单的双向数据绑定效果了<!DOCTYPE html><html lang="en"> <head&g

2020-08-12 12:26:39 177

原创微信小程序自定义组件解析

何为组件化很久之前，古代人的文件都是一笔一划写的，后面懒得写字了，发明了活字印刷现在，前端们懒得写重复的代码了，于是出现了组件化开发某种程度上说，这两者有类似之处，把很多地方都会用到的相同的东西，单独抽出来做成一个独立的东西，哪里需要用到，就拿来用一下组件化有很多好处减少代码耦合页面结构更加清晰直观易于维护…引入并使用一个组件，无论如何会比你去之前的文件里复制粘贴要优雅的多不是么如何组件化组件化其实是一种思路，把一个很多地方都会用到的东西，抽取成组件通常会按照组件的规则，将原本的代码

2020-07-31 17:37:50 207

原创 Vue 3.0 初体验

Vue3.0 beta也出来一段时间了，最近一直在看react，对于vue3.0倒是没怎么关注，想着等正式版出来再说，不过最近事情不多，还是抽出了一点时间，试了一下新版的Vue3.0，不得不说，改动还是有的，对于初上手的人可能没有之前友好尤大官方的直播也有一些介绍但是毕竟还是beta版，配套的支持还不多，生产环境暂时还是不要使用为好安装使用vue-cli创建项目，我用的是4.4.6版本，不是最新版的建议更新一下vue create vue-next-test这是我个人创建项目启用的一些配置，

2020-07-14 11:33:24 3524 2

原创 vue和react上传文件方法

最近的项目碰到了上传文件的需求，是用react做的，之前用vue做过类似的，react的试了一下差不太多上传文件的整体流程是一样的，基本可分为1.获取文件上传input的dom2.新建FormData，将文件以后端约定的字段append至新建的FormData中3.发送请求将该FormData发送至后端整体流程就是这样，不过vue和react获取dom的方法有一点区别，这里分别作了整理Vuevue获取dom元素使用的是ref和this.$refs<template> <i

2020-07-08 17:30:24 379 1

转载 js依据ip获取用户当前所在城市

项目有个获取用户所在城市的需求，本来在看百度地图的api，偶然发现了一个搜狐的api，可以依据ip非常便捷的查询用户所在的城市http://pv.sohu.com/cityjson?ie=utf-8直接打开即可看到效果在项目中使用，也是非常的简单便捷<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script><script type="text/javascript"> console.lo

2020-07-01 17:50:07 657

原创 React快速上手（四）表单数据绑定以及生命周期

上一篇介绍了react的列表渲染与条件渲染，这一篇会谈一谈react的表单数据绑定以及它的生命周期与列表渲染和条件渲染类似，react实质上也没有提供表单数据绑定的指令，也就意味着它也需要通过自己的封装来完成对应效果。react虽然没有提供对数据绑定的封装，却提出了一个叫做受控组件的概念。所谓受控组件，便是经过双向数据绑定将输入值和state里的值进行绑定的组件，通常来说，使用react开发，都会将表单元素封装成受控组件便于管理，但是让人有一点不能理解的就是你tm都提出这个概念了，就不能帮我们封装

2020-06-29 10:16:58 497

原创 React快速上手（三）列表渲染和条件渲染

上一篇介绍了react的state和绑定事件，这一篇会谈一谈react的列表渲染以及条件渲染。react实质上并没有提供相关列表渲染和条件渲染的封装，也就意味着不能像vue中使用一个指令来完成在react里达到这些效果，需要使用一些数组的方法列表渲染在react里实现列表渲染，需要用到数组的map方法map()map方法用于分别处理数组中的成员，返回新的数组let nameList = ['tom','jack','bob']// 第一个参数是数组的成员值，第二个参数是成员的索引值let

2020-06-22 12:52:06 259

原创 React快速上手（二）state和事件绑定

上一篇介绍了react基础的jsx语法和组件相关的内容，但更新整个页面只能重新调用ReactDOM.render方法，这一篇会谈一谈react中的另一个核心概念：state，以及如何绑定事件state通过class方式声明的组件，可以在一开始的constructor中声明一个state，state有点类似于vue中的data，用于存放一些初始数据，然后我们通过更新state中的值，则可以对应的更新dom树class App extends React.Component { // 声明state则

2020-06-08 16:17:11 383

weixin_47232046的博客