- 博客(32)
- 资源 (1)
- 问答 (1)
- 收藏
- 关注
原创 使用babel-plugin-import按需加载antd3组件,打包后文件还很大的问题。
最近项目中使用的UI组件库,由antd2升级到了antd3,webpack打包逻辑不变,并且用了babel-plugin-import使组件按需加载。但是打包后发现,打包后的文件还是很大,压缩之后超过1M,最后查找原因发现:plugins: [ ["import", { "libraryName": "antd", ...
2019-07-11 14:48:40 1370
原创 VSCode插件整理
一、安装插件前端统一开发工具:VSCode插件整理。首先,如果你不知道怎么安装编辑器插件,那么请记住这个图标:二、插件推荐1.(必备)Auto Close Tag:自动添加HTML/XML关闭标签https://code.visualstudio.com/updates/v1_16#_html-close-tags这个插件是必备的,提高开发效率的东西,无论用js框架,html作为前端...
2018-11-13 14:50:07 3140
原创 React服务端渲染(二)
4、如何做到前端路由和后端路由同步;说到前后端路由同步,有个问题就又抛出来了,什么是前后端路由同步?为什么要前后端路由同步? 让我们看看react-router中的hashhistory和browserHistory; hashHistory:http://noah.dabanma.com/#/indexbrowserHistory:http://noah.dabanm...
2018-02-28 11:09:09 795
原创 React服务端渲染(一)
一、服务端渲染的好处!有利于SEO;首屏渲染更快,移除了了加载js的时间;客户端和服务端公用一套代码(同构),更易于维护;二、react服务端渲染的思路1、服务端koa2框架搭建后端服务;babel支持解析es6语法;koa-router后端路由;承载react组件的字符模板;react组件在服务端注入数据后,转化成字符串吐给浏览器渲染;<...
2018-02-26 16:56:00 2741
原创 当多个<router />使用同一个组件的时候,切换页面地址,页面不刷新的问题
如标题所说的问题,更详细一点就是多个router使用同一个react页面组件的时候,当切换路由的时候,页面组件不重新构建,页面也不刷新。例如:router.jsimport Index from './routes/Index/index';import UserAccount from './routes/UserAccount/index';const Root = () =>( <R
2017-11-14 11:43:25 7184 1
原创 webpack打包后,JSON.stringify()报错!
webpack打包JSON.stringify()的过程中并没有报错,但是页面上时报错如下:但是,当我换成window.JSON.stringify就好了。后来找到解决办法是: 在webpack配置中加上target字段,值设置为'node'module.export = { entry:{}, output:{}, ... ... ... plug
2017-09-29 12:40:17 1326
原创 如何绕过chrome的弹窗拦截机制
在chrome的安全机制里面,非用户触发的window.open方法,是会被拦截的。例如事件触发的js是不会被拦截的:var btn = $('#btn');btn.click(function () { ... ... ... //不会被拦截 window.open('http://cssha.com')});再例如:var btn = $('#btn'
2017-09-25 14:53:30 4958
原创 ant-design-mobile框架踩坑(一)
一直在用ant.design桌面版,现在退出了移动版,必须研究一下,但是这不看不要紧,一看就遇到了好多坑,好多坑···1.根据官方文档,使用dva脚手架生成项目目录,这样简单一些,如果你喜欢自己创建文件夹的感觉,你也可以自己创建自己的目录结构。由于是试验可用性,我就用了dva生成了个目录结构;$ dva new mobileApp创建完成后,已经是npm install过了,所以不需要重新下载依赖。
2017-09-01 12:03:49 22825
原创 React去掉双击文字的选中状态
在传统的编写Dom中,我们想要去掉双击文字变成选中状态这样的效果,只需要在标签上加上一个onselectstart事件,让他return false就可以了,例如这样:<div onselectstart="return false;" > 再编辑</div>这样就可以实现了,但是存在兼容问题,在火狐浏览器中没有onselectstart事件,所以并不能得到解决; 那下面结合css是其禁
2017-08-02 17:50:29 2170
原创 数组的深clone
上一篇博文写了对象的深拷贝,这些天在工作中,正好遇到了出在同样身为”引用类型”,数组身上的问题。 先说下需求: 通过UE图看出需求,表格中的每一行是通过点击添加按钮,动态添加到表格中的;并且在每一行中会有很多需要填入配置项的输入框;技术:react问题:根据数据驱动原理,这个表格的生成依靠的是一个数组数据tableList,这个数组中的每一个元素是一个object,object中
2017-07-04 21:26:14 380
原创 对象的深clone
这个在很多公司的面试题中都会有,下面我们来实现下对象的深clone;function clone(obj) { if(typeof obj === 'object') { var resule = obj instanceof Array ? [] : {}; for (var i in obj) { var attr = obj[i]
2017-06-26 11:10:36 215
原创 原生ajax
很多js库会对ajax进行封装,我们直接调用即可,即使不理解其原理也能顺利完成接口调用功能,但是我们还是需要了解他的底层原理。话不多说,直接上代码:我们首先要确定浏览器的类型,是IE还是非IE浏览器var XHR = null;if(window.XMLHttpRequest) { XHR = new XMLHttpRequest()} else if (window.ActiveXO
2017-06-25 17:01:21 300
原创 for...in...循环搭配对象解构赋值的易错点
当我们使用for…in…循环一个对象,并在循环体中执行对象的解构赋值,有一点很容易出错。直接看下面例子:let formInit = { one: { value: 2 }, two: { value: 2 }};let data = { one: 1, two: 3};for(var key in formIn
2017-06-16 12:14:53 1448
原创 ES6数组的解构赋值和Set
js发展到ES6阶段,代码简介了很多,同时也提供了很多方法,下面说下数组的解构赋值和Set:1.数组解构赋值数组的解构赋值,这个很简单,直接看代码: 最简单的一个例子:var [a,b,c] = [1,2,3];console.log(a); // 1console.log(b); // 2console.log(c); // 3复杂一点:let [foo, [[bar],baz]] = [
2017-05-25 17:30:38 1144
原创 react-router实现按需加载
本文使用的 react-router 版本为 2.8.1React Router自己就有一套按需加载解决方案,将代码拆分成多个小包,在浏览过程中实现按需加载;如过你的项目搭配了webpack打包工具,那么需要在webpack.config.js的output内加上chunkFilenameoutput: { path: path.join(__dirname, '/../dist/asset
2017-05-09 12:36:29 1464
原创 React开发中使用require.ensure()按需加载ES6组件
首先介绍下动态加载函数:require.ensure([], (require)=>{ let A = require('./a.js').default;})如果想要动态加载出es6代码组件,直接require一个es6风格的组件是不行的,因为一般的语言编译工具(如babel),不支持直接require一个es6风格的组件。那么有种办法可以解决:在es6方式书写的组件底部增加一句:mod
2017-05-09 11:46:12 1816 1
原创 koa2设置ejs为模板引擎,但是最终文件是.html
工作中很多情况下我们需要使用ejs模板引擎的语法,但是希望我们的页面还是html文件: 在koa2中的配置秩序一句代码就可以解决;const Koa = require('koa');const app = new Koa();...const ejs = require('ejs');...app.use(views(__dirname + '/views', { map : {h
2017-05-02 16:26:34 7898
原创 Python基础进阶篇——面向对象编程基础
关键字class相信大家都很熟悉,在后端语言中,一个class代表一个类,对这个类进行调用就是实例; 打个比方: 人——>类, 张三——>实例 下面贴出代码和注释讲解本文内容:#-*- coding: utf-8 -*-# 实例的name属性的排序class Person(object): passp1 = Person()p1.name ='Bart'p2 = Person()
2017-04-26 18:05:56 462
原创 跨域
相信很多人在工作中遇到过很多跨域问题,下面来说一下跨域:1.什么是跨域? 简单来说就是,同一个IP,同一个网络协议,同一个端口,这三者都相同就是同一个域,否则就形成了跨域;对于web开发来说,由于浏览器的同源策略,我们是不能够跨域访问的,但是工作中很多情况下我们需要跨域,尤其是前后端分离的初期,很多后端接口还没有做CORS(跨域资源共享),这就需要前端同学去解决跨域问题; 2.跨域方法: 如果
2017-04-25 15:55:18 245
原创 Python模块和包
在Python中,同样具有模块和包来管理代码模块:每一个python文件就是一个模块,例如index.py这就是一个模块; 包:在文件系统中,一个文件夹就是一个包,在python中,一个文件夹中需要有__init__.py文件,每个文件夹中必须要有这个文件,这样python才可以把这个文件夹当成一个包来处理;1.导入python的内建模块mathimport mathprint math.sqr
2017-04-19 19:10:56 335
原创 Python基础进阶篇——函数式编程
上一篇博文贴出了博主学习Python的基础知识代码,这篇博文贴出博主学习Python中的函数式编程,简单说一下,函数式编程是一种编程思想,跟函数不一样。在这里将提到很多Python的内建函数,请看以下代码; Ps:强烈建议看过博主的《Python入门基础》后再看这篇文章下的代码,这样你会很容易看懂; 欢迎大家学习交流,有问题可以再评论中提出,因为博主也是新手菜鸟,我们可以共同学习,共同进步~#-
2017-04-18 13:26:05 804 2
原创 Python中的int(x,base)函数
Python中的int函数的第二个参数大家一般都不怎么用到,导致我们出现一个盲区,下面说说int()函数的第二个参数:print int('123') #123这里int函数默认了base参数值为10,也就是说把字符串’123’视为十进制数转换成十进制数;print int('12345',8) # 5349这里int函数有了第二个参数base=8;说明要int函数把字符串’12345’视为八进制数
2017-04-18 12:18:17 12675
原创 windows下安装Python
博主是在win7上安装的python环境,极其简单,主要分一下几部:1.登录python官网:https://www.python.org,点击Download下载python的版本; 2.下载写来的是.exe包,直接傻瓜安装就好。 3.这也最后一步,最重要的一步,配置环境变量,windows系统有个环境变量的概念,右键点击我的电脑-属性-高级系统设置-高级-环境变量-系统环境变量,在这里找到p
2017-04-17 10:52:21 426
原创 Python入门基础
这段期间自学了python,下面贴出自学过程中所敲的demo,供大家学习交流。以后会随着楼主的学习更新python的知识:#-*- coding: utf-8 -*-print 'Hello, world'print 10099print 255+1300print 'hello, python'print 'hello,','python'print u'中文\n日文\n韩文
2017-04-17 10:35:31 493
原创 ES7的async和await,目前最为简略的异步解决方案
随着js的发展,在解决回调地狱问题的方案上,解决方案逐渐更新,有promise、generator和现在的async都是比较常见的; 1.Promise 这个解决方案就是把异步用同步的方式写出来,一步一步的.then()方法,前一个.then()执行完之后,继续执行下一个.then();function timeout (time) { return new Promise((res,
2017-03-30 18:57:15 1825
原创 解决npm安装bootstrap 4 报错问题
在工作中遇到过这样的问题,win7,64位系统,通过npm安装bootstrap4报错;在网上查了查,并没有合适的解决办法,所以决定自己写一个; 1.首先在我的本地磁盘中新建了一个叫做bootstrap文件夹作为项目根目录; 2.在此文件夹中打开终端,输入npm init初始化npm; 3.输入npm install bootstrap@4.0.0-alpha.6 --save-dev然后你会
2017-03-30 11:44:39 6257
原创 webpack配置开发环境(html-webpack-plugin、css-loader、less-loader、babel-loader)
这篇文章简单的说一下前端构建工具——webpack; 在用过的前端构建工具Yeoman,grunt,gulp,webpack中,个人觉得从配置上、使用上,功能上讲,还是webpack略胜一筹; 下面就简单的说一下webpack的配置; 一言不合贴代码: 首先介绍webpack.config.js配置文件module.exports = { entry:'',//单一路径情况下是字符串
2017-03-27 18:22:08 1450
原创 webpack配置环境变量解决“不是内部命令”问题
当我安装了webpack,在命令行输入webpack -v结果发生报错,webpack不是内部命令,当时在往上找到了一个解决办法。也真正解决了问题;方法如下: 1、安装node; 2、如果你忘记了node的安装目录,没关系,在命令行输入path; 如果你设置过node的环境变量,这里一定会有显示;这样我们看的出我的node安装在了C:\Program Files\nodejs\目录下了;
2017-03-16 17:06:55 11906 2
原创 论React后台管理系统开发模式
lz在公司用react开发后台管理系统,大家都知道,后台管理系统,最主要的是数据的处理与后台的交互,实现支持App各种各样的功能。 既然说到数据处理,那么react的数据驱动和双向绑定就发挥了很大的作用;另外react的事件监听机制也是核心,通过触发事件触发函数中的方法,函数方法的罗列成为写后台管理系统的重点。 ——————————————————————————————————————————
2017-03-15 12:20:22 7531
原创 <input type='file' />选择图片不上传,在页面中显示的功能。
在工作中有这样的需求,在页面中通过选择图片,不通过上传服务器,并在页面中显示出来的功能;(虽说这样做很变态,选择完图片上传到服务器,通过返回的图片地址去渲染图片才是正道,但是有些时候需求就是这样,没有办法~)闲话到此,贴出代码:document.getElementById('selectImg').addEventListener('change',()=>{ const file
2017-03-10 16:05:50 1729 1
原创 React直接渲染从后台传过来的<html>标签
在工作中使用react,遇到需要渲染从后台获取到的标签语言,发现直接放在react中是不能解析标签语言的。解决办法如下:var content = '<strong>content</strong>';// 假设content是从接口获取到的数据react.render( <div dangerouslySetInnerHTML = {{ __html:content }}></div>,
2017-03-10 11:43:23 17803
原创 Promise实现图片动态加载
一个基于es6的promise实现图片动态加载。function loadImageAsync(url) { return new Promise((resolve, reject)=>{ var image = new Image(); image.onload = function () { resolve(image);
2017-03-10 11:18:56 2727
MT2D 正演程序完整版
2018-08-22
canvas的drawImage出现的问题
2017-03-10
TA创建的收藏夹 TA关注的收藏夹
TA关注的人