前端
关注
分享
扫一扫
前端
RowanIT3
这个作者很懒，什么都没留下…
展开
-
TypeScript基础及使用
【代码】TypeScript基础及使用。原创 2022-11-06 12:14:36 · 822 阅读 · 0 评论 -
vue2.x(watch&computed)
如何理解computed和watch？computed&watch源码分析date: 2021-04-06下面我根据一个简单的例子 来重头分析<span>{{getMessage}}</span><span>{{otherMessage}}</span>{ data:{ message:'我是初始化值', otherMessage:'我是另一个初始化值' }, computed:{ getMessage原创 2021-04-13 09:29:25 · 191 阅读 · 0 评论 -
vue-router(3.5.1)源码梳理
如何理解vue-router源码？vue-router 源码分析date: 2021-03-261. import Vue VueRouter 进来2. 使用Vue.use(VueRouter) 来进行router的install -> 使用mixin混入每个组件钩子“beforeCreate”&“destroyed”原创 2021-04-09 09:55:51 · 3258 阅读 · 0 评论 -
vue2.x(虚拟dom&vnode)
如何理解vue中的vnode虚拟dom?return _c( 'div', { attrs: { id: 'app' } }, [ _c('span', { on: { click: onClick } }, [_v('我是data数据' + _s(message))]), _v(' '), // 没整懂 为啥每个中间都夹杂个空VNode（在编译阶段时 遇到同级兄弟节点 会默认生成一个空本文节点） _l(dsArr, function (item原创 2021-04-07 09:21:34 · 340 阅读 · 0 评论 -
v-model原理
v-model原理？(2021/01/05)①是个一般作用于“表单元素”及“组件”上面指令，来创建双向数据绑定；②说穿了就是v-bind:xxx及v-on:xxx的快捷语法糖（等价于动态增加prop+dom绑定事件）；<p>{{inputValue}}</p><input v-model="inputValue"/>改版：<p>{{inputValue}}</p><input v-bind:value=”inputValue”原创 2021-03-26 09:41:25 · 171 阅读 · 0 评论 -
基于axios针对物理返回键主动取消当前页面http请求及loading
最近遇到一个需求：就是在页面请求很久的情况下页面一直在loading状态，此时用户点击物理返回键需要取消掉loading及当前还在请求的接口。axios提供取消功能由于整套http接口是基于axios来的，所以就去找了下官网的例子axios取消主要思路设置一个全局对象来存储当前页面的页面名称，当前请求路径，当前请求可取消函数，在路由变了那么意味着页面变了，来整体清除当前存储的页面http信息。axios请求拦截设置// cancelHttpRequest为全局对象// 调用原创 2020-05-25 17:13:14 · 349 阅读 · 1 评论 -
vue2.x(diff算法)
如何理解vue中的diff算法?// 1. 初始化 源码 8434行var platformModules = [attrs, klass, events, domProps, style, transition];// 源码 6680行var baseModules = [ref, directives];// 源码 8447行var modules = platformModules.concat(baseModules);var patch = createPatchFunction({原创 2021-04-08 09:29:15 · 281 阅读 · 0 评论 -
vuecli3 + vw布局
网上有很多关于vw布局的部署可以参考比如大漠老师的，这里我只是作个记录，方便查看。vuecli3起手根据提示安装babel, pwa, router, vuex, sass。vw貌似在之前的cli版本中，构建出来的文件自带.postcssrc.js文件里面vuecli自带了postcss-import；postcss-url；autoprefixer；三个插件；在vue...原创 2019-11-28 17:20:56 · 613 阅读 · 0 评论 -
基于vue的h5抽奖活动九宫格转盘及圆形转盘
最近项目中遇到了需要做个h5的抽奖活动需求：要求支持九宫格模式和圆形抽奖盘模式。这边基于vue和vantUI的loading组件造了这2个轮子。九宫格抽奖思路动态构造几次方的正方形抽键盘的4条边；requestAnimationFrame来控制动画执行过程。重点过程requestAnimationFrame初始化兼容性// 兼容性raf初始化window.requestAniFrame = (function() { return window.requestAnimat原创 2020-05-11 15:56:00 · 4127 阅读 · 3 评论 -
实测vuecli3下骨架屏实现的几种方式
总参考使用vue-skeleton-webpack-pluginvuecli3配置插件原理官方示例安装插件：npm i vue-skeleton-webpack-plugin -D在App.vue同级目录下创建Skeleton.vue 如下继续同级目录下创建entry-skeleton.js 如下(这里需要注意下 最好写成template模板格式，而且给上id，他是通过que...原创 2019-11-21 15:32:13 · 1005 阅读 · 0 评论 -
解决ios下滑动引起webview整体滚动
在作flutter内webview内嵌h5的时候，遇到了在ios下滑动页面会出现橡皮筋效果，而在android下不会出现该问题。这样的话在ios下滑动会意外的触发会感觉页面整体在上下弹动。方案1：在移动端h5中我们可以监听touchstart（触摸开始）,touchmove（触摸移动）,touchend（触摸结束）等触摸事件，来判断当前是否该滑动。方案2： 若是引入的第三方滚动组件，大多数第三方组件都是使用transform来实现滚动的，所以只需要设置css: touch-action:none;则不会原创 2020-05-13 10:39:48 · 5201 阅读 · 0 评论 -
vuex(v3.6.2)源码梳理
如何理解vuex源码？// vuex 源码分析// date：2021-04-011. Vue.use(Vuex)2. -> 调用install插件机制安装Vuex 内部调用applyMixin3. -> Vue2.x以上采用Vue.mixin混入到beforeCreate Vue1.x 重写_init方法并添加到options.init4. new Vuex.Store(options)5.原创 2021-04-12 09:49:55 · 609 阅读 · 0 评论 -
vue2.x(compile)
如何理解vue2.x中的编译?拿到html模板字符串 -> 进行一系列的正则截取字符串并根据当前属性来构造children类型 -> 每个标签同级变换时都会额外的构造一个空的文本节点 -> 生成以with包裹的函数处理匿名函数在19号那天我们分析了如何作响应式数据，继续下去如何编译?在平常的开始中我们一般在mouted生命钩子函数里面作业务逻辑处理，是因为在mouted钩子回调时当前页面下我们已完成模板的绑定页面dom已根据vue完全生成真实dom源码9039行// 1.1 最初始原创 2021-04-06 09:43:56 · 333 阅读 · 0 评论 -
vue2.x(scoped-style)
vue中如何做到局部style不污染全局样式？说说它的原理？① 在一般的开发过程中 我们使用scoped来标识当前组件的局部样式② scoped属性是HTML5中的新属性 属性值是一个布尔属性 若使用该属性 则样式仅仅应用到style元素的父元素及其子元素 但是目前就只有firefox支持这个特性 其他浏览器都不支持<div> <style type="text/css" scoped> h1{color:red} p{color:blu原创 2021-04-01 09:40:13 · 280 阅读 · 0 评论 -
vue2.x(data&watcher&dep)
如何理解vue2.x中的响应式数据？要讲响应式我们只有从data上入手 先本地起一个简易vue<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>原创 2021-04-02 09:41:58 · 327 阅读 · 0 评论 -
vue2.x(data&use)
vue中是什么时候我们操作this.xxx会映射到this._data.xxx身上？源码4998行 声明周期函数beforeCreate被调用 也证实了在这个周期里面我们拿不到options所有相关的东西源码5000行 initState(vm) 开始初始化options 源码4635行 按props->methods->data->computed->watch顺序进行每项的初始化init源码4699行 这里拿到data赋值给了vm._data，遍历每个data里面声.原创 2021-03-29 09:30:36 · 156 阅读 · 0 评论 -
vue2.x($nextTick)
this.$nextTick平时怎么使用的？说说它的原理？① vue的DOM更新是异步更新的（为什么设计成异步更新？因为比如我们在created钩子函数里面100次循环设置this.xxx=i，若不是异步那岂不是需要触发100次响应dom更新，这里也是优化方案之一），比如我们在执行了this.xxx=1，这个时候去拿dom上的xxx值结果还是原来的值而非刚刚设置的1，此时我们需要使用this.$nextTick在callback中拿就没问题了② 原理：源码1905行~源码2007行源码1984行 执原创 2021-03-30 17:22:17 · 152 阅读 · 0 评论 -
vue2.x(静态资源引入&本地&生产)
vue中如何图片等静态资源如何引入代码中？如何解决打包后部署js,css文件404？静态资源图片路径找不到？publicPath设置原理？① 静态资源如何引入代码中（分为src/assets & public）首先说说这两个文件夹区别：当放在public中时是不经过webpack打包编译 原样输出到dist里面 而src/assets中会经过webpack处理比如base64等等<template> <div id="app"> <strong>原创 2021-03-31 13:49:48 · 3814 阅读 · 0 评论 -
vue + 百度地图上呈现柱状图数据
关于如何使用百度地图API这里就不多复述了，这里是工作中遇到的问题，简单的记录下，来直接上需求：在百度地图中根据城市坐标呈现对应的柱状图信息。这里主要使用了百度提供的“覆盖物”接口来自定义图形效果图<template> <div class="test"> <div id="allmap" style="width: 50%; height: ...原创 2019-12-04 16:02:13 · 1882 阅读 · 0 评论 -
redux、react-redux、中间件基础知识记录
cra快速创建项目npx create-react-app 项目名称安装reduxnpm install redux -Sredux三大原则单一数据源：整个应用的 state 被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个 store 中。State 是只读的：唯一改变 state 的方法就是触发 action，action 是一个用于描述已发生事件的普通对象。使用纯函数来执行修改：Reducer 只是一些纯函数，它接收先前的 sta.原创 2020-07-08 18:02:11 · 190 阅读 · 0 评论 -
redux-saga基础理解
安装redux-saganpm install redux-saga -S引入redux-sagaindex.jsimport { createStore, applyMiddleware } from 'redux';import createSagaMiddleware from 'redux-saga'// 引入我们创建得sagaimport { helloSaga } from './saga'// 创建saga中间件实例const sagaMiddleware = cr.原创 2020-07-10 11:15:49 · 399 阅读 · 0 评论 -
webpack_02_进阶配置
这篇承接上一篇webpack_01_基础配置清理构建产物在前面，我们每打一次包，如果chunks变了那么dist目录下就会冗余很多文件，所以我们需要一个每次在我们构建的时候清理dist目录的插件npm i clean-webpack-plugin这里我们在代码中引入的时候有个小坑，直接const xxx= require(‘clean-webpack-plugin’)在打包的时候会报...原创 2019-06-16 22:17:09 · 192 阅读 · 0 评论 -
webpack_01_基础配置
官方文档安装//在指定文件夹中打开命令行mkdir webpackXnpm init -y//初始化package.json文件//安装webpack和webpack-clinpm i webpack webpack-cli -D//其中 i = install ; -D = --save-dev打包配置1在根目录下新建 webpack.config.js (名字自己取...原创 2019-06-13 00:48:36 · 243 阅读 · 0 评论 -
mongoDB_增删查改命令行操作
1.mongoDB与传统数据库概念区别：总的来说就是：表table 对应 集合collection行 row 对应 文档 document (一条数据)字段 column 对应 域 field2.mongoDB命令操作：①启动服务：mongod --dbpath 新建的放置数据库文件的路径 （可写为bat文件）②启动客户端链接： mongo③查看数据库：show dbs④创建...原创 2019-05-20 23:07:08 · 251 阅读 · 0 评论 -
Mongoose_基础操作mongoDB
Mongoose 是在 node.js 异步环境下对 mongodb 进行便捷操作的对象模型工具。Mongoose是 NodeJS 的驱动，不能作为其他语言的驱动。安装npm install mongoose --save连接数据库//引入mongoose const Mongoose = require('mongoose')//使用mongoose链接mongoDB数据库...原创 2019-06-02 19:51:48 · 666 阅读 · 0 评论 -
mongoDB_4.x安装及权限设置
上一篇使用的是mongoDB 3.x的服务 今天下载了最新的4.x安装这里最好选择自定义4.x的不用自己写个配置文件 已经写进系统服务里面了还是需要自己配将到bin目录路径配置在系统变量path里面键入mongo 启动链接设置权限第一步：创建超级管理员键入mongo链接数据库键入use admin 进入admin数据库键入：db.createUser({ u...原创 2019-05-28 23:16:11 · 500 阅读 · 0 评论 -
vue-elementUI-axios-vuex-vueRouter后台管理系统
记录一次为公司做的小项目登录界面忘记密码主页个人资料项目源码https://github.com/Cristop3/elmentUI-.git原创 2018-11-29 13:37:39 · 733 阅读 · 0 评论 -
初识Git2
撤销修改 （撤销修改中分几种情况：1.文件在工作区作修改撤销 2.文件add到缓存区后作修改撤销 不论在哪个阶段 执行命令后 都将回退到git commit 或 git add 或 工作区之前的状态）$ git checkout --file文件撤销修改2 （将缓存区的文件回退至工作区）$ git reset HEAD file文件 其中git reset有回退版本的意思 还有将缓存区的原创 2016-07-31 19:28:28 · 343 阅读 · 0 评论 -
初识Git1
本博客内容 参考廖雪峰老师的《使用github》http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/00137628548491051ccfaef0ccb470894c858999603fedf000 下载和安装git环境 https://git-for-windows.github.原创 2016-07-26 23:44:35 · 344 阅读 · 0 评论 -
重写nodejs开发指南_简易微博实例
这是学习nodeJS练习的小实例 使用了NodeJS + Express4.x + ejs + MongoDB 期间由于技术更新太快 网络上大多数资料过于久远 所以重写了这个小实例并记录下来 项目中肯定有很多地方写的不太合理 感觉自己也是半壶水 只能说勉强实现 欢迎雅正 共同学习 ths 项目地址：https://github.com/Cristop3/NodeJS/tree/b1/Nod原创 2016-12-14 21:56:25 · 1545 阅读 · 0 评论 -
jQuery基础2
插件机制 ① jQuery.fn.extend(obj) 扩展成jQuery对象的插件形式如 $("").方法 ② jQuery.extend(obj) 扩展成工具方法如 $.XXX() ③ obj一般为对象的字面量形式去声明方法 - 多库共存（防止“$”符号的冲突） ① 直接使用jQuery jQuery.noConflict(); jQuery("#div原创 2016-02-20 16:55:44 · 315 阅读 · 0 评论 -
jQuery基础1
只是把以前自学所记得读书笔记转过来而已 回忆下jQuery的基础知识 部分博客参考阮一峰老师的《jQuery设计思想》jQuery的设计思想 ① 选择网页元素 ② 强大的过滤器 ③ 链式操作 ④ 取值、赋值同体 ⑤ DOM操作 ⑥ 事件操作 ⑦ 工具方法 ⑧ 特殊效果核心函数① jQuery([selector,[context]])（selector:用原创 2016-02-20 15:18:25 · 336 阅读 · 0 评论 -
各种居中系列
方法①：margin:0 auto 实现水平居中（必须满足的条件是固定宽度元素）方法②：text-align:center实现水平居中(测试后在父元素中设置，块级或行内元素可实现，除图片<img>外。其中若父级为块级，子元素也为块级则设置子元素display:inline-block)方法③：line-height:自身高度 实现垂直居中方法④：table表格 <td>标签中默认垂直居中，若设原创 2016-02-18 10:34:42 · 481 阅读 · 0 评论 -
css中的浮动问题
此博客文章是在博客园上发现的，写的非常详细，所以转载过来了。 转于博客园杨元的博客《经验分享：CSS浮动(float,clear)通俗讲解》正文： 很早以前就接触过CSS，但对于浮动始终非常迷惑，可能是自身理解能力差，也可能是没能遇到一篇通俗的教程。 前些天小菜终于搞懂了浮动的基本原理，迫不及待的分享给大家。写在前面的话： 由于CSS内容比较多，小菜没有精力从头到尾讲一遍，只能有针转载 2016-02-17 12:09:50 · 666 阅读 · 0 评论 -
笔试之css优先级问题
此内容是在2015.11.2 在拓尔思笔试中所遇的选择基础题，当时是懵的…①：样式的优先级：内联样式 (标签行中的style="") > 内部样式(`<style></style>`中的内容) > 外部样式(由link标签引入的css样式)例外（若外部样式放在内部样式后面，则外部样式将会覆盖内部样式）②：选择器的优先权： 1.内联样式权值最高为1000 2.ID选择器权值为100原创 2016-02-17 22:25:52 · 503 阅读 · 0 评论 -
面试之“两列布局”/ "三列布局"
此问题是在拓尔思公司面试时HR所问的问题，当时也是懵的……①：两列定宽 (分别确定两列的宽度并且浮动它们)**css**: .left{width:200px;height:200px;border:1px solid blue;float:left} .right{width:300px;height:300px;border:1px solid red;float:left原创 2016-02-17 23:28:05 · 655 阅读 · 0 评论 -
清除浮动的几种方式
在上一篇中转载的博客文章相信已经把浮动的知识点讲的很清楚了，所以接下谈谈清除浮动的几种方式浮动的基本概念：浮动的元素可以向左、向右移动，直到它的外边缘碰到其包含块或者另一个浮动元素为止，由于浮动框不在文档的普通流当中，所以其他的普通流中的块框会认为浮动框不存在一样 浮动元素的包含块是其最近的块级祖先元素，不论元素以前本身是什么，浮动过后都会生成一个块级框清除浮动的几种方式：①：给浮动后的下原创 2016-02-17 21:38:08 · 682 阅读 · 0 评论 -
css的定位问题
css中的三种基本位置机制：①普通流 ②浮动 ③定位 ①普通流(文档流)：页面中元素所呈现的位置就是由编程人员在HTML文件中所规定的位置决定（将窗体自上而下分成一行一行的，并且在每行中按从左至右的挨次排放元素）。 ②浮动:放到下一篇中再来细谈。 ③定位：利用定位，可以准确地定义元素框相对于其正常位置应该出现在哪里，或者相对于父元素或另一个元素甚至浏览器窗口本身的位置。css中的定位是通原创 2016-02-17 11:42:08 · 590 阅读 · 0 评论 -
javascript_词法结构
字符集 JavaScript程序是用Unicode字符集编写的，而且是区分大小写的语言。也就是说，关键字、变量、函数名和所有的标识符都必须采取一致的大小写形式。但在HTML中并不区分大小写(尽管XHTML区分大小写)。注释 JavaScript支持两种格式的注释：“//”和 “/* */”直接量 12 // 数字 1.2 // 小数 “lij原创 2016-02-01 14:53:23 · 378 阅读 · 0 评论 -
JavaScript之BOM
BOM（browser object model）浏览器对象模型window对象（BOM核心对象是window）①所有在全局作用域下声明的变量，函数都属于window对象的属性和方法②全局变量不能通过delete操作符删除，而直接在window对象上定义的属性则可以删除③窗口位置获取 （分别用于表示窗口相对于屏幕左边/上边的位置）->A.IE/Safari/Opera/Chrome : screen原创 2016-02-19 21:43:07 · 391 阅读 · 0 评论