- 博客(48)
- 收藏
- 关注
RSS订阅转载 npm源切换
获取npm源npm config get registry切换npm源npm config set registry https://registry.npmjs.org/暂时使用npm源npm --registry http://ires.58corp.com/repository/58npm/ install cheui-reac...
2019-09-29 11:15:00
240
转载 移动端穿透问题
附上完整的解决方案参考链接（http://www.imooc.com/article/283472）在弹出层加一个父级元素遮罩层，阻止滚动事件，但是问题是遮罩层所有子元素（弹出层）也不能滚动。方法一：那么平级设置mask，绑定事件-》虽然滚动mask，页面没有穿透滚动问题，但是当弹出层滚动到头继续拉时页面会滚动方法二：弹出时body设置overflow:hidden，真机上面...
2019-09-12 14:22:00
148
转载 let作用域问题
在使用let定义变量时遇见这样一个错误 1 async addPageVersion(uuid, param) { 2 let result = await this.getVersions(uuid, {pageData: param.pageData}); 3 if(result&&result.length) ...
2019-09-11 10:51:00
922
转载 react服务端渲染（十一）引入样式&&一些优化
添加样式修饰 style-loader在服务段渲染找不到window对象 服务端webpack打包使用isomorphic-style-loaderrules: [{ test: /\.scss?$/, use: ['isomorphic-style-loader','css-loader','sass-loader']...
2019-08-20 17:28:00
274
转载 react服务端渲染（十）404&&301页面实现
服务端发送请求 fetch如何携带cookie？fetch(url,{ headers: { 'Cookie': req.get('Cookie') || '' }})改写我们的服务端store，在创建的时候传入服务端的req参数，再改写服务端的fetch方法接受req参数export const getServ...
2019-08-19 15:13:00
162
转载 react服务端渲染（八）路由改写
每一个用户使用不同的store请求发送axios/fetch，选择使用fetch进行异步请求的发送 在浏览器端可以直接使用fetch发送，无需安装。但是服务端会报error：fetch is not defined，因为fetch()是为浏览器设计的，然后在第三方模块中后端移植到node.js，所以需要安装node-fetch；import fetch from 'nod...
2019-08-07 18:09:00
119
转载 react服务端渲染（九）proxy代理&&多级路由&&数据的脱水和注水
项目地址：git@github.com:longlongdan/Reactssr.git服务端渲染之后，客户端会再次渲染，因为我们的客户端创建的store为空。解决办法：在服务端渲染的时候将获取到的数据赋值一个全局变量（注水），客户端创建的store以这个变量的值作为初始值（脱水）。const Store = createStore(Rducer,window.info...
2019-08-07 17:57:00
574
转载 react-router 使用
react-router&&react-router-dom的区别//写法一import {Switch, Route, Router} from 'react-router';import {BrowserRouter, Link} from 'react-router-dom';//写法二import {Swtich, Route, R...
2019-08-05 17:58:00
63
转载 react服务端渲染（七）redux添加
使用，添加一个redux-thunk中间件，支持异步action操作import { Provider } from 'react-redux';import { createStore, applyMiddleware } from 'redux';import thunk from 'redux-thunk';import Router from '../...
2019-08-01 17:06:00
112
转载 react服务端渲染（六）路由
react-router-dom和react-router的区别：前者基于react-router，提供更多的功能。除了react-router中提供的{ switch，Router， Route }之外，还有{ Link，BrowserRouter，HashRouter，StaticRouter }等，其中Router是一个通用的低阶接口，通常情况下我们的程序只会使用其中一个高阶R...
2019-07-31 15:47:00
212
转载 react服务端渲染（五）同构
在服务端渲染出来的react组件，绑定的click事件没有执行，所以可以在浏览器端再执行一遍绑定事件同构：同一套react代码在服务端和浏览器端执行两次我们客户端的代码也得是用webpack进行打包，以js的方式放在服务端返回的html模板使用express提供的静态文件方法为我们打包的js提供服务在客户端使用hydrate替代render方法进行渲染，添加...
2019-07-31 11:07:00
133
转载 react服务端渲染（四）实现服务端组件渲染与自动重启
用了webpack的stage-0进行打包所以可以支持使用es6 modules语法import React from "react"const Home = () => { return <div>Home1233333</div>}export default Home;借助react-dom提供的rende...
2019-07-30 17:33:00
172
转载 react服务端渲染（三）配置webpack编译打包jsx语法
const Path = require('path');const nodeExternals = require('webpack-node-externals'); //针对服务器端，对于require这样的代码进行与客户端不同的处理module.exports = { target: 'node', //针对服务器端，对于require这样的代码进行与客户端...
2019-07-30 16:06:00
364
转载 react服务端渲染（二）服务端react组件书写
react服务端渲染基本流程创建一个react的基本的组件import React from 'react';const Home = () => { return <div>Home</div>}export default Home;服务端需要下载安装react注意服务端不支持im...
2019-07-30 15:53:00
111
转载 webpack中的代码压缩&&混淆机制
压缩删除 Javascript 代码中所有注释、跳格符号、换行符号及无用的空格，缩短变量名称从而压缩 JS 文件大小。并且不同作用域的变量名是可以重复的，类似a,b,c可以反复出现。混淆经过编码将变量和函数原命名改为毫无意义的命名，以防止他人窥视和窃取 Javascript 源代码。让我们的代码尽可能的不可读，常见的做法有：分离变量，增加无意义的代码，打乱控制流。...
2019-07-30 11:13:00
3396
转载 webpack4的mode配置
webpack提供一些默认的配置 这个配置可以通过mode来制定可选production（默认）/ development / nonedevelopment配置// webpack.development.config.jsmodule.exports = {+ mode: 'development'- devtool: 'eval',- plugi...
2019-07-26 16:36:00
488
转载 webpack-dev-server的使用（未完待续）
webpack可以直接使用webpack-dev-server命令启动启动参数： --hot热更新。会去检测文件的变化自动打包刷新页面，使用webpack-dev-server服务器启动时，打包生成的文件在内存中，而使用webpack命令打包生成的bundle.js默认是在dist目录下，页面引用的时候路径不同。host:启动的ip，可以配置为写死的本机ip地址|127....
2019-07-24 16:29:00
128
转载 NODE_ENV&&cross-env的使用
使用webpack进行打包会有一个全局的变量process.env.NODE_ENV记录我们的打包环境process是node的一个全局变量代表node进程，process.env代表系统环境但是process.env里其实是不存在NODE_ENV，它是一个自定义的变量，在webpack里面用作判断生产环境（production）和开发环境（development）的依据...
2019-07-19 13:01:00
418
转载 局部安装的webpack怎么通过npm脚本执行
局部安装的webpack，通过package.json的script脚本可以执行webpack命令，但是直接执行webpack却显示webpack不存在：是因为npm run新建的这个 Shell，会将当前目录的node_modules/.bin子目录加入PATH变量，执行结束后，再将PATH变量恢复原样。参考阮一峰对npm脚本原理的解析http://www.ruanyifeng...
2019-07-19 11:20:00
226
转载 react
1.在html里使用js引入react2.这样写控制台会报错reactUncaught SyntaxError: Unexpected token < 因为无法识别我们的react代码，需要加上type类型text/babel3.页面并没有渲染上我们的123节点，因为这个type类型浏览器不会直接去执行，需要引入babel来解析执行...
2019-07-17 10:50:00
54
转载 .gitignore无法忽略部分文件/文件夹
主要是由于之前commit过某些文件和文件夹，导致无法忽略这些文件采用命令git rm --cached "文件路径"删除文件夹的时候，出现 not removing 'game/logs' recursively without -r，说明我们需要添加参数 -r 来递归删除文件夹里面的文件git rm -r --cached "文件路径"然后commit转载...
2019-07-04 19:45:00
2732
转载 MongoDB
mongoDB数据库的基础概念和简单使用下载mongoDB数据库https://www.mongodb.com/download-center#community将mongoDB的安装路径（到bin文件夹）配置全局环境变量运行mogodb服务，--dbpath参数指明用于存放数据库文件的目C:\mongodb\bin\mongod --dbpath c:\data\...
2019-06-26 11:00:00
98
转载 DNS预解析dns-prefetch提升页面载入速度优化前端性能
参考网址：https://www.cnblogs.com/goloving/p/9368965.html转载于:https://www.cnblogs.com/longlongdan/p/11076804.html
2019-06-24 14:22:00
176
转载 webpack入门
entry：对象，字符串,数组（数组会被打包成一个文件，正确的多入口多出口应该使用对象形式）output： path-目标输出的绝对路径，filename-输出文件的文件名：[name]，[hash]，[chunkhash]module.exports = { entry: './src/index.js', output: { f...
2019-06-20 19:55:00
82
转载 Velocity常用语法
变量: $开头,第一个字符必须为字母 $name => xiaoming分割: {},分割变量和字符串，${name}hello => xiaominghello声明: #set, #set ($num=0)导入脚本： #parse(文件路径) 公共的部分导入#parse("views/dspadvert/common/body_footer.vm")...
2019-06-20 11:47:00
225
转载 React Hooks
React推荐我们使用无状态的function式组件，但是在遇见需要使用state或者生命周期的时候不得不使用class式的组件，而React Hooks正是为了解决这个问题useState()这个函数接收的参数是我们的状态初始值（initial state），它返回了一个数组，这个数组的第 [0]项是当前的状态值，第 [1]项是可以改变状态值的方法函数import ...
2019-05-27 11:17:00
78
转载 react protals的使用
遇到的场景：我们要实现一个配置手机页面的网站，手机页面里的组件有一个可以吸底的button，也就是固定在手机页面的最底下，常见的肯定是给button添加fixed属性，但是在这个配置网站里给定fixed，会让button脱离我们虚拟手机模型。解决办法：给父元素添加transfrom:translate(0)样式，他会让所有子元素里面的所有fixed定位变成absolute开始我们...
2019-05-27 11:14:00
148
转载 useContext的使用
首先我们需要创建一个context来挂载我们useReducer创建的redux//context.js 创建contextimport { createContext } from 'react';export default createContext(null);在context上挂载我们useReducer创建出的redux，通过context...
2019-05-08 17:51:00
1240
转载 context的使用
context是一个上下文环境，使用Context提供的provider和consumer组件来实现跨层级的组件数据传递。简单使用//context.jsimport React from 'react'//创建context的实例const myContext = React.createContext()export default myConte...
2019-05-06 17:37:00
153
转载 redux使用（二）
react,redux,react-redux之间的区别联系一些小型项目，只使用 React 完全够用了，数据管理使用props、state即可。面对多层的数据传递，例如A->B->C->D->E,使用props传递显得太繁琐了，这时候可以有一个公共的区域存放这些数据，那就是Redux。为了将这个安全的区域结合到react中使用，我么通过createS...
2019-05-06 10:51:00
177
转载 redux使用（一）
Redux的基本使用&&API介绍ReducerRedux中负责响应action并修改数据的角色就是reducerreducer的本质实际上是一个函数，其函数签名为：reducer(previousState，action)=> newStatereducer(previousState，action)=> newStatereduce...
2019-04-28 16:31:00
109
转载 React class & function component 的区别
React classclass App extends React.Component { constructor(props) { super(props); this.state = { } } render() { return ( <div className="App"></...
2019-04-26 18:58:00
292
转载 combineReducers使用
随着应用变得复杂，需要对 reducer 函数 进行拆分，拆分后的每一块独立负责管理 state 的一部分。//原本一个实现加，减，重置的reducerfunction reducer(state = {count: 0}, action) { switch(action.type) { case 'Increment': ...
2019-04-26 18:17:00
168
转载 gnvm使用（未使用成功）
首先按照教程安装gnvm//已经安装了git的用户git clone git@github.com:Kenshin/gnvm-bin.git设置gnvm的环境变量不存在 Node.js 环境下载并解压缩gnvm.exe保存到任意文件夹，并将此文件夹加入到环境变量Path。安装node版本gnvm install 7.6.0切...
2019-04-26 13:00:00
1110
转载 React相关知识点
reactcss模块化内联样式的方案https://www.npmjs.com/package/reactcss'use strict';import React from 'react';import reactCSS from 'reactcss'; render() { const styles = reactCSS({ ...
2019-04-19 10:48:00
94
转载 eslint简单使用&&eslint与webpack结合使用
全局安装eslint$ npm install -g eslint直接初始化一个.eslintrc的文件$ eslint --init在生成的文件里可进行配置命令行使用eslint a.js进行代码的检查根据提示全局安装$ npm i eslint-plugin-react@latest -g执行之后可以看见报错//.e...
2019-03-28 15:53:00
350
转载 Babel的使用
Babel的使用全局安装$ npm install --global babel-cli此时执行发现并没有对代码进行编译按网上教程，本地安装$ npm i babel-cli babel-preset-es2015 --save-dev再在文件目录下创建.babelrc文件，配置如下{ "presets": [ "es2015" ],...
2019-03-28 14:49:00
144
转载 RN基础知识-布局
使用FlexBox布局主轴方向：flexDirection: row/row-reverse/cloumn/cloumn-reverse (react-native的话默认以列排列)是否换行：flexWrap: nowrap/wrap/wrap-reverse(默认不换行)wrap换行之后第一行在上面wrap-reverse换行之后第一行在下面顺着主轴的对齐...
2019-03-26 17:15:00
408
转载 RN项目初始化-环境配置
首先全局安装react-native下载java adk完成之后配置环境变量，下载夜神模拟器开启夜神模拟器，然后链接adbreact-native init 项目名称 初始化一个项目使用adb devices查看连接的设备 进入项目目录里面！！！再react-native start 开启js文件服务直接在项目里面r...
2019-03-26 11:12:00
525
转载 CSS3新增特性-transfrom
2d转换translate(x_offset,y_offset) ：相对于自身位置的一个偏移，单位可以设置px，%-相对自身的长宽 -> translateX(),translateY().child { transfrom: translate(50%, 50%);}rotate(20deg) 给一个顺时针旋转的度数，可为负...
2019-03-22 15:26:00
125
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人