- 博客(25)
- 收藏
- 关注
RSS订阅转载 Redux
ReduxStore 数据的管理者和数据的存储者actionCreators 动作的创建者，发送动作给 reducersreact Components 组件（ 用来充当视图层 ）reducers 数据的修改者，返回一个新的 newstate 给storeReact 只是 DOM 的一个抽象层，并不是 Web 应用的完整解决方案。有两个方面，它没涉及。代码结构组件之间的通信...
2019-08-25 13:26:39
150
转载 Flux
Flux在2013年，Facebook让React亮相的同时推出了Flux框架，React的初衷实际上是用来替代jQuery的，Flux实际上就可以用来替代Backbone.js，Ember.js等一系列MVC架构的前端JS框架。其实Flux在React里的应用就类似于Vue中的Vuex的作用，但是在Vue中，Vue是完整的mvvm框架，而Vuex只是一个全局的插件。React只是一个MVC...
2019-08-25 13:05:11
505
原创 react的反向代理
配置在src文件夹中setupProxy.js文件内const proxy = require( 'http-proxy-middleware' )module.exports = function ( app ) { // app.use( proxy(标识符,options) ) // http://m.maoyan.com/ajax/movieOnInfoList?token=...
2019-08-20 20:09:58
1205
原创 1px线解决方案
import styled from 'styled-components'const border = ({ component = null, width = '1px', style = 'solid', color = '#ccc', radius = 0,}) => { return styled(component) ` ...
2019-08-19 22:15:51
147
原创 rem解决方案
rem解决方案淘宝解决方案： 使用淘宝封装库： flexible.js/* 通过js来动态添加rem */;(function(designWidth, maxWidth) { var doc = document, win = window, docEl = doc.documentElement, remStyle = document.createElement(...
2019-08-19 22:14:41
188
原创 Vue设置路径别名,设置跨域
/* webpack的配置文件 config webpadck配置 resolve webpack解析 alias 路径别名*/const path = require( 'path' )module.exports = { chainWebpack: function ( config ) { //chainWebpack 链式操作 ...
2019-08-09 09:58:35
229
原创 使用tab键切换自动补全选项
使用tab键切换自动补全选项vscode左下角设置打开键盘快捷方式打开keybindings.json，标签栏{}按钮在右侧括号[]中添加{ "key": "tab", "command": "-acceptSelectedSuggestion", "when": "suggestWidgetVisible && textInputFocus"},{ "ke...
2019-08-04 16:03:46
1040
原创 Vue的组件的生命周期【组件的钩子】
初始化beforeCreate () {} 组件即将创建created () {} 组件创建结束beforeMount () {} 组件即将挂载mounted () {} 组件挂载结束运行中beforeUpdate () {} 组件更新前updated () {} 组件更新结束销毁beforeDestroy () {} 销毁前destroyed () {} 销毁结束...
2019-07-31 19:00:47
137
原创 Vue的组件通信
文章目录一、父子组件通信二、子父组件通信三、非父子组件通信refbus事件总线四、多组件状态共享一、父子组件通信流程父组件中定义一个数据在父组件的模板中，用 v-bind 将父组件的数据绑定在子组件身上Son :aa = "money"></Son><!-- father 组件 --start --> <template id="f...
2019-07-31 18:38:39
201
原创 使用原生js来实现深入响应式原理
html代码<button> 点击 </button><div class="box">js代码var data = { name: ''}var box = document.querySelector('.box')var btn = document.querySelector('button')btn.onclick...
2019-07-29 20:41:22
929
转载 读懂diff
作者： 阮一峰日期： 2012年8月29日diff是Unix系统的一个很重要的工具程序。它用来比较两个文本文件的差异，是代码版本管理的基石之一。你在命令行下，输入：$ diff <变动前的文件> <变动后的文件>diff就会告诉你，这两个文件有何差异。它的显示结果不太好懂，下面我就来说明，如何读懂diff。一、diff的三种格式由于历史原因，diff...
2019-07-29 11:36:12
115
转载 深入Vue2.x的虚拟DOM diff原理
作者简介：汪玉林，高级工程师，增值产品部前端Leader，目前团队负责手Q游戏中心、手Q游戏运营、手Q阅读等项目，有丰富的Web前端架构经验。一、前言Vue的核心是双向绑定和虚拟DOM（下文我们简称为vdom），关于双向绑定可以参阅木琴的文章《剖析Vue原理&实现双向绑定MVVM》，vdom是树状结构，其节点为vnode，vnode和浏览器DOM中的Node一一对应，通过vnode的e...
2019-07-29 10:41:15
106
原创 vue开发todolist
todolist 开发流程框架： Vue.js组件库：SUI-mobileSUIpc： http://sui.taobao.org/sui/docs/gallery.html移动： http://m.sui.taobao.org/tips利用事件冒泡来实现mask的关闭tab选项卡效果切换–使用计算属性过滤值减少使用margin，多使用padding，因为移动端...
2019-07-28 16:52:22
183
原创 Vue computed 计算属性
将msg这个字符串 反向 输出html代码// 普通实现{{ msg.split('').reverse().join('') }}// 计算属性实现 逻辑和数据分离<p> {{ newMsg }} </p>js代码new Vue({ el: '#app', data: { msg: 'I Love eat 葡萄 ' ...
2019-07-26 09:11:07
185
原创 Vue的指令
指令–14个使用形式：绑定在dom的属性身上为了区别自定义属性，vue提供的指令都携带 v-数据展示v-html 非转义输出 ， 可以解析 xml类型数据v-text条件渲染对象是无序的，所以没有索引，但是vue中循环可以获取对象的索引v-ifv-else-ifv-else条件展示v-showv-if vs v-showv-if是真正的控...
2019-07-25 13:53:53
112
原创 express项目MVC改造
文章目录express项目MVC改造（以拉勾网职位为例）1. 建立项目`express -e mongoose_demo`，并安装项目依赖 `npm i`2. 建立路由文件 `routes/position.js`3. 项目目录建立controller文件夹，分离控制器模块（逻辑）4. 项目目录建立model文件夹，分离数据模块5. 项目目录建立db文件夹，分离数据库操作6. 使用Insomnia...
2019-07-23 00:23:01
332
原创 前端通信--H5提供的 webSocket 【 常用于 移动端 】
1. 建立通信服务器 （结构基本同上）引入ws模块const WebSocket = require( 'ws' )设置服务器域名接口const ws = new WebSocket( options ) options就是一个对象const ws = new WebSocket.Server({ port: 5000, host: 'localhost'})接收...
2019-07-18 21:56:34
1208
原创 localStorage、sessionStorage和cookie的区别
首先总的来说，三者都是用于持久化存储数据的手段，都存储在浏览器端，且同源（协议、端口和域名都相同）localStorage和sessionStorage都是web存储，都是5M左右大小，完全存储在客户端，他们都是因为本地存储数据而存在cookie也是存储在浏览器端的，大小不超过4k，作为http规范的一部分，它是通过浏览器的请求将数据传给服务器localStorage属于永久性存储，ses...
2019-07-18 08:38:07
89
原创 前端异步流程工具
为什么要进行异步操作？javascript是单线程，依次执行一个任务，要想让任务能够顺利进行，我们需要排队异步就是将任务放入异步队列，在主线程执行结束之后再去执行前端异步的操作方式传统方式回调函数事件前端异步流程工具 【 封装出来函数、库 】es6 PromisePromise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成...
2019-07-18 07:57:02
115
转载 Promise 的含义
#Promise 的含义Promise 是异步编程的一种解决方案，比传统的解决方案–回调函数和事件－－更合理和更强大。它由社区最早提出和实现，ES6将其写进了语言标准，统一了语法，原生提供了Promise所谓Promise ，简单说就是一个容器，里面保存着某个未来才回结束的事件(通常是一个异步操作）的结果。从语法上说，Promise是一个对象，从它可以获取异步操作的消息。Prom...
2019-07-17 21:47:57
335
原创 闭包
什么是闭包能够访问另一个函数作用域的变量的函数闭包内存泄漏产生原因循环引用导致了内存泄漏外部函数调用引起的内存泄漏，垃圾回收机制失效如何解决打破循环引用添加另一个闭包避免闭包自身使用完删除变量（用对象的形式声明变量，用delete删除）闭包的使用场景前端模块化，是特殊的闭包闭包封装函数-轮播-swiper（划动轮播）new Promise ...
2019-07-17 19:12:25
106
原创 Node.js爬虫爬取苏宁首页数据
Node.js爬虫爬取苏宁首页数据并建立web服务器展示//爬虫，苏宁主页，猜你喜欢const http = require('http');const request = require('request');const cheerio = require('cheerio');const port = 90;// const port = 5500;const host ...
2019-07-17 09:33:12
301
原创 JSON和XML区别，三种本地存储区别
文章目录本地存储-JSON一、JSON以及xml介绍JSON简介JSON语法JSON使用XML简介什么时候使用XMLJSON和XML区别二、会话级本地存储cookiesessionStorage三、永久性本地存储localStorage(永久本地存储)sessionStorage和localStorage的区别使用本地存储实现注册登录本地存储-JSON一、JSON以及xml介绍JSON简介...
2019-07-16 16:52:36
679
原创 Typora简单入门
[toc]可以根据标题生成目录标题一共六级 #的数量代表级数 或者 ctrl+1-6无序列表：输入-之后输入空格列表下一级可以连续按enter退到上一级有序列表：输入数字+"."之后输入空格代码块：ctrl+alt+f单行代码 `代码内容`放在反引号里多行代码 ```代码内容```放在三个反引号里选中相同格式的文字：ctrl+e也可以选中一行选中单词：ctrl+d...
2019-07-15 21:14:09
140
原创 nvm安装-node-nrm-gulp一条龙
文章目录一、安装nvm1. nvm安装前需要卸载原来的Node.js2. 下载nvm并安装-安装路径不要有中文，有中文可以安装，但是无法使用，需要卸载重新装3. 更改nvm文件夹内settings.txt4. nvm version 查看nvm版本，确实是否安装成功二、安装node1. nvm install 版本号2. nvm list 查看已安装Nodejs版本3. nvm use 版本号 切...
2019-07-15 19:24:28
281
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人