- 博客(29)
- 收藏
- 关注
RSS订阅原创 React 结合Immutable实现 案例
业务：点击按钮实现数量的增加创建react项目$ npx create-react-app react-immutable进入项目，安装插件$ yarn add redux immutable react-redux redux-immutable在src目录下新建components目录，在components目录下新建Button,Content两个组件import React...
2019-07-20 17:36:04
228
原创 Immutable
导入案例：const obj ={ name:'Shirley'}const newObj = objconsole.log('obj',obj)console.log('newObj',newObj)由于js的对象和数组都是引用类型。所以newObj的obj实际上是指向于同一块内存地址的, 所以结果是newState和state是相等的。尝试修改一下数据：con...
2019-07-19 21:56:27
189
原创 Lodash
lodash 介绍是一个一致性、模块化、高性能的 JavaScript 实用工具库。官网网址：https://www.lodashjs.com/常用数组方法:_.chunk 数组分组_.map 数组遍历_.clone 浅拷贝_.cloneDeep 深拷贝使用lodash之前先安装lodashnpm init -y 在项目目录下先安装package.json文件cnpm...
2019-07-19 21:13:44
522
原创 React Hooks
1. 什么是react hooks?React Hooks 它是react16.8版本有的React Hooks是可以让我们在函数式组件中定义 state , 和使用React中的一些特性2. React Hooks 有哪些中间件？useState : 让我们可以在函数式组件中定义状态 和 事件处理程序 useEffect : 让我们可以在函数式组件中使用类似生命周期钩子函数 ...
2019-07-19 20:32:20
146
原创 Redux 数据分片
分析一个项目：banenrhomemineloginregisterdetailshopcar会员普通用户数据解决： 希望的一个类型数据一个模块 ---- > reducer划分 combineReducers分析： 我们希望我们的store下面每一个文件夹就是一个 类型 的数据包解决： redux combineReducers每一个数据包...
2019-07-18 20:37:35
169
原创 Flux 的使用流程
要想使用FLux架构思维，需要通过一个工具进行使用， 这个工具就是flux安装 flux$ yarn add flux在src目录下 新建store目录，里面新建index.jsstore有两个功能存储数据当数据发生改变时，视图要进行更新 （ 当前组件中的state发生了改变，从新从store中获取数据，要想重新复制，那么要通过事件的发布，订阅 ） // sto...
2019-07-17 21:32:28
371
原创 React 组件通信
分类：父子组件通信 无论父组件传递是props还是state,子组件都是通过props接收import React, {Component,Fragment} from 'react'import Son from './Son'class Father extends Component{constructor(){super()this.s...
2019-07-12 21:53:40
116
原创 React 事件处理
事件处理绑定事件采用on+事件名的方式来绑定一个事件，注意，这里和原生的事件是有区别的，原生的事件全是小写onclick, React里的事件是驼峰onClick，React的事件并不是原生事件，而是合成事件。事件handler的写法 【 王牌 || 王者】1. 直接在render里写行内的箭头函数(不推荐)import React, {Component } from 'react'...
2019-07-12 19:37:58
110
原创 React 组件的数据挂载方式
组件的数据挂载方式React中数据分为两个部分属性状态经验： 频繁变化的就写成状态属性(props)props是正常从外部传入的，组件内部也可以通过一些方式来初始化的设置，属性不能被组件自己更改，但是你可以通过父组件主动重新渲染的方式来传入新的 props类组件属性挂载方法外部传入写法:// 定义一个father组件import React, { Component }...
2019-07-12 11:04:44
702
原创 关于React
React的起源和发展React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。React与传统MVC的关系轻量级的视图层库！A JavaScript library for building user interfac...
2019-07-12 10:55:51
99
原创 React 项目安装流程
create-react-app全局安装create-react-app$ npm install -g create-react-app如果不想全局安装，可以直接使用npx$ npx create-react-app your-app 也可以实现相同的效果创建一个项目$ create-react-app your-app 注意命名方式Creating a new Re...
2019-07-12 10:52:12
388
原创 Webpack安装与使用
Webpack的安装安装可以使用任何一个包管理器： npm yarn cnpmyarn > cnpm > npm举例： 我使用npm安装了一个叫做 node-sass 的包 ，但是出错了 ，这时，我们想卸载，发现卸载报错解决： 覆盖安装cnpm || yarn 进行覆盖安装cnpm 和 yarn 优先级没有那么绝对1.全局安装( 选择以下一种即可...
2019-06-30 23:41:24
156
原创 Webpack发展历程
一、市面上有哪些类似于Webpack的前端工程化工具1.grunt2.gulp ( 4.x )3.Browserify ( Webpack 前身 )4.Webpack 【 主流行 】5.rollup.js https://www.rollupjs.com/guide/zh6.parcel7.FIS https://fis.baidu.com/二、前端工程化工具的发展历程1.gru...
2019-06-30 23:39:18
546
转载 转：
ES5-数组的新方法forEachforEach方法对数组的每个元素执行一次提供的函数。功能等同于for循环.应用场景：为一些相同的元素，绑定事件处理器！var arr = ['张飞', '关羽', '赵云', '马超']//第一个参数：item，数组的每一项元素//第二个参数：index，数组的下标//第三个参数：array，正在遍历的数组//常用的参数就第一个和第二个，第三个参...
2019-06-28 20:45:56
134
原创 Vue快速构建项目环境工具---cli
什么是cli?cli是vue提供的一个用来快速构建项目环境的一个工具，底层使用的是webpackcli目前有哪些版本？cli2 cli3cli3对电脑的配置有一定要求cli如何使用？cli的安装npm/cnpm/yarn 都可以使用$ yarn add @vue/cli global 这个是cli3的版本如果我们还想使用cli2的脚手架，那么我们可以在安装一个包$...
2019-06-28 19:12:06
309
原创 Vue 组件通信
为什么要进行组件通信？组件可以说是一个具有独立功能的整体，但是当我们要将这些组件拼接在一起时，这些组件相互之间要建立联系，这个联系我们就称之为通信组件通信的方式有以下几种父子组件通信使用props来实现流程：在父组件的模板中将数据用单项数据绑定的形式，绑定在子组件身上在子组件的配置项中可以使用一个props配置项来接收这个数据，接收时，props的取值可以使一个数组...
2019-06-25 22:21:46
100
原创 Vue的功能（组件）component
Vue有两大特性指令 – 用来操作dom组件 – 组件是html css js 等的一个聚合体为什么要使用组件？组件化将一个具备完整功能的项目的一部分进行多处使用加快项目的进度可以进行项目的复用要想实现组件化，那么我们使用的这一部分就必须是完整的，我们把这个完整的整体就称之为组件插件： index.html img css js如果能将 html css j...
2019-06-25 11:04:54
253
原创 虚拟dom diff算法
引入需求：有一个变量 count 的初始值时 0，经过一系列运算，得到10001，然后将结果写入box中<div class="box"></div>var box = document.querySelector( '.box' )var count = 0 ;console.time( 'a' )for( var i = 0 ; i < 10001...
2019-06-25 10:50:05
153
原创 vue 框架级数据请求 axios(第三方库) fetch(原生) 侦听属性watch 混入mixins
框架级的数据请求axios ( 第三方库 — 别人封装好的库 ) （重点）注意：在使用axios之前要引用axios.js文件<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>案例：1.对json数据进行请求<div id="app"&g...
2019-06-22 17:28:34
690
原创 Vue 计算属性
Vue 计算属性业务： 将一个 字符串 反向 ？思路： str ->arr- arr反向 ->str普通写法：在vue中写一个方法在模板里调用，如下：<div id="app"><p>{{msg}}</p><p>{{msgReverse()}}</p></div>new Vue({el: '#a...
2019-06-22 17:10:00
183
原创 vue的认识
书写一个前端开发文档参考：http://showdoc.wkefu.com/showdoc/index.php?s=/22&page_id=1070vue初步认识<body><div id="app"><p> {{ msg }} </p></div></body><script>/*使...
2019-06-22 16:44:20
344
原创 前端通信 net 内置模块 和 ws-h5 第三方模块
前端通信基于后端的通信（ 后端完成 ）（ pc端用 ）Node.js中有一个net模块使用终端（ shell ）作为客户端思维流程/*主服务器：1.创建服务器2.连接客户端3.获取客户端发来的信息4.将客户端发来的信息展示到自己的终端上（广播）*/// 引入net模块const net = require('net');// 1.创建服务器co...
2019-06-22 16:34:25
415
1
原创 ejs模板 express创建api服务器（ 接口 ）
ejs模板语法<% ‘脚本’ 标签，用于流程控制，无输出。<%= 输出数据到模板（输出是转义 HTML 标签） （ 不会编译html标签）<%- 输出非转义的数据到模板( 会编译html标签 )什么是流程控制？条件判断 if循环控制forforEach …whiledo…while后端渲染后端通过一个模板（ 兼容html ） + 后端模板语法 ----...
2019-06-22 16:24:28
393
原创 mongodb的使用和操作
使用代码来操作数据库使用mongodb实现注册在终端安装express npm i express-generator -g通过express模块创建一个文件夹 npx express -e 文件夹名安装package.json的依赖包 npm i在app.js文件中创建一个路由中间件定义一个注册的模块，并在routes文件夹下新建一个register.js的文件const...
2019-06-22 16:18:24
195
原创 前端的异步流程 npm scripts npm脚本 express
前端的异步流程传统的原生异步回调函数事件使用异步流程工具（ 别人封装好的东西 ）es6 PromisePromise 是异步编程的一种解决方案，比传统的解决方案–回调函数和事件－－更合理和更强大。它由社区最早提出和实现，ES6将其写进了语言标准，统一了语法，原生提供了Promise所谓Promise ，简单说就是一个容器，里面保存着某个未来才回结束的事件(通常是一个异步操...
2019-06-21 22:25:36
255
原创 前端模块化
http爬虫 + http web服务器渲染数据发送前台 + 中文乱码服务器：可以运行在服务端一个网站（站点）种类：web服务器（ 静态服务器 ） ，可以运行在浏览器中的服务器api服务器 （ 后端接口 ） 后端语言暴露一个数据接口，用于前端数据请求（ ajax fetch ）Node.js中原生创建web服务器http模块createServer( callback ) 创建...
2019-06-21 21:03:53
149
原创 node.js的认识
JavaScript是一个什么语言轻量级 弱类型 脚本语言JavaScript的运行环境是什么?浏览器？ 浏览器内核中的JavaScript解析引擎JavaScript 可以干什么？特效？ DOM操作 交互 ajax jsonp 游戏？ DOM操作 Canvas 表单验证JavaScript 不可以做什么？操作文件和文件夹 操作OS 获取系统信息为什么js做不到 弱类型？ 安全 因为...
2019-06-21 20:45:04
117
原创 vue基础语法 及指令
Evernote Export vue mustache语法糖-- {{ }} 它是用来操作dom的，指令就是绑定在DOM的一个属性，并且这属性具有一定功能。以后我们不在像以前一样，先获取DOM，在操作了，我们现在可以直接使用指令来操作DOM这个指令需要模板语法的支持，所以我们采用jsx语法糖jsx: javascript + xmlJSX是一种J...
2019-06-20 19:18:13
435
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人