testnnnnnnn-CSDN博客

转载 Redux

Redux Store 数据的管理者和数据的存储者 actionCreators 动作的创建者，发送动作给 reducers react Components 组件（用来充当视图层） reducers 数据的修改者，返回一个新的 newstate 给store React 只是 DOM 的一个抽象层，并不是 Web 应用的完整解决方案。有两个方面，它没涉及。代码结构组件之间的通信...

2019-08-25 13:26:39 243

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 594

原创 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 1272

原创 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 213

原创 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 249

原创 Vue设置路径别名,设置跨域

/* webpack的配置文件 config webpadck配置 resolve webpack解析 alias 路径别名 */ const path = require( 'path' ) module.exports = { chainWebpack: function ( config ) { //chainWebpack 链式操作 ...

2019-08-09 09:58:35 318

原创使用tab键切换自动补全选项

使用tab键切换自动补全选项 vscode左下角设置打开键盘快捷方式打开keybindings.json，标签栏{}按钮在右侧括号[]中添加 { "key": "tab", "command": "-acceptSelectedSuggestion", "when": "suggestWidgetVisible && textInputFocus" }, { "ke...

2019-08-04 16:03:46 1211

原创 Vue的组件的生命周期【组件的钩子】

初始化 beforeCreate () {} 组件即将创建 created () {} 组件创建结束 beforeMount () {} 组件即将挂载 mounted () {} 组件挂载结束运行中 beforeUpdate () {} 组件更新前 updated () {} 组件更新结束销毁 beforeDestroy () {} 销毁前 destroyed () {} 销毁结束 ...

2019-07-31 19:00:47 205

原创 Vue的组件通信

文章目录一、父子组件通信二、子父组件通信三、非父子组件通信refbus事件总线四、多组件状态共享一、父子组件通信流程父组件中定义一个数据在父组件的模板中，用 v-bind 将父组件的数据绑定在子组件身上 Son :aa = "money"></Son>  <template id="f...

2019-07-31 18:38:39 258

原创使用原生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 1036

转载读懂diff

作者：阮一峰日期： 2012年8月29日 diff是Unix系统的一个很重要的工具程序。它用来比较两个文本文件的差异，是代码版本管理的基石之一。你在命令行下，输入： $ diff <变动前的文件> <变动后的文件> diff就会告诉你，这两个文件有何差异。它的显示结果不太好懂，下面我就来说明，如何读懂diff。一、diff的三种格式由于历史原因，diff...

2019-07-29 11:36:12 162

转载深入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 157

原创 vue开发todolist

todolist 开发流程框架： Vue.js 组件库：SUI-mobile SUI pc： http://sui.taobao.org/sui/docs/gallery.html 移动： http://m.sui.taobao.org/ tips 利用事件冒泡来实现mask的关闭 tab选项卡效果切换–使用计算属性过滤值减少使用margin，多使用padding，因为移动端...

2019-07-28 16:52:22 244

原创 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 252

原创 Vue的指令

指令–14个使用形式：绑定在dom的属性身上为了区别自定义属性，vue提供的指令都携带 v- 数据展示 v-html 非转义输出，可以解析 xml类型数据 v-text 条件渲染对象是无序的，所以没有索引，但是vue中循环可以获取对象的索引 v-if v-else-if v-else 条件展示 v-show v-if vs v-show v-if是真正的控...

2019-07-25 13:53:53 162

原创 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 431

原创前端通信--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 1333

原创 localStorage、sessionStorage和cookie的区别

首先总的来说，三者都是用于持久化存储数据的手段，都存储在浏览器端，且同源（协议、端口和域名都相同） localStorage和sessionStorage都是web存储，都是5M左右大小，完全存储在客户端，他们都是因为本地存储数据而存在 cookie也是存储在浏览器端的，大小不超过4k，作为http规范的一部分，它是通过浏览器的请求将数据传给服务器 localStorage属于永久性存储，ses...

2019-07-18 08:38:07 144

原创前端异步流程工具

为什么要进行异步操作？ javascript是单线程，依次执行一个任务，要想让任务能够顺利进行，我们需要排队异步就是将任务放入异步队列，在主线程执行结束之后再去执行前端异步的操作方式传统方式回调函数事件前端异步流程工具【封装出来函数、库】 es6 Promise Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成...

2019-07-18 07:57:02 161

转载 Promise 的含义

#Promise 的含义 Promise 是异步编程的一种解决方案，比传统的解决方案–回调函数和事件－－更合理和更强大。它由社区最早提出和实现，ES6将其写进了语言标准，统一了语法，原生提供了Promise 所谓Promise ，简单说就是一个容器，里面保存着某个未来才回结束的事件(通常是一个异步操作）的结果。从语法上说，Promise是一个对象，从它可以获取异步操作的消息。 Prom...

2019-07-17 21:47:57 399

原创闭包

什么是闭包能够访问另一个函数作用域的变量的函数闭包内存泄漏产生原因循环引用导致了内存泄漏外部函数调用引起的内存泄漏，垃圾回收机制失效如何解决打破循环引用添加另一个闭包避免闭包自身使用完删除变量（用对象的形式声明变量，用delete删除）闭包的使用场景前端模块化，是特殊的闭包闭包封装函数-轮播-swiper（划动轮播） new Promise ...

2019-07-17 19:12:25 167

原创 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 372

原创 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 825

原创 Typora简单入门

[toc]可以根据标题生成目录标题一共六级 #的数量代表级数或者 ctrl+1-6 无序列表：输入-之后输入空格列表下一级可以连续按enter退到上一级有序列表：输入数字+"."之后输入空格代码块：ctrl+alt+f 单行代码 `代码内容`放在反引号里多行代码 ```代码内容```放在三个反引号里选中相同格式的文字：ctrl+e也可以选中一行选中单词：ctrl+d ...

2019-07-15 21:14:09 210

原创 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 376

weixin_41927760的博客