2018年04月_hdchangchang

原创 webpack之引入css

前言：本文演示了如何打包css文件；涉及到的loader: css-loader、style-loader;css-loader的任务：把css文件作为模块打包style-loader的任务：把打包好的css文件动态的插入到html文件的<style>标签内正文：如何利用webpack把样式打包进我们的项目文件？在webpack的世界里，一起文件都是模块。默认webpack只会打包js...

2018-04-27 20:53:51 12153

前言：本文演示了处理react代码需要安装配置的babel-loader。正文：loader是webpack用来预处理模块的；在每一个模块被处理之前，会预先使用loader处理模块的内容；现在我们来安装babel-loader来处理一段react代码。首先，安装react和react-dom$ npm i -S react react-dom接着，改写我们的app.js如果现在执行 npm run...

2018-04-27 19:46:05 368

原创 webpack之html-webpack-plugin简单配置

前言：本文简单配置了webpack的一个插件：html-webpack-plugin;演示了html-webpack-plugin帮我们做的工作。正文：plugin是webpack一个比较重要的概念。当前webpack.config.js配置：const path = require('path'); module.exports={ entry :{ p...

2018-04-27 17:46:46 3734

原创 webpack之打包初体验

前言：这篇文章创建了一个最简单的webpack项目；对webpack.config.js进行了最简单的配置；尝试着进行了一次最简单的webpack打包。正文：首先构建项目目录：$ mkdir webpack-pro1$ cd webpack-pro1$ npm init$ npm i -D webpack webpack-cli$ touch webpack.config.js...

2018-04-27 17:09:50 346

转载 Promise使用详解

2015年6月， ES2015（即 ECMAScript 6、ES6）正式发布。其中 Promise 被列为正式规范，成为 ES6 中最重要的特性之一。1，then()方法简单来讲，then 方法就是把原来的回调写法分离出来，在异步操作执行完后，用链式调用的方式执行回调函数。而 Promise 的优势就在于这个链式调用。我们可以在 then 方法中继续写 Promise 对象并返回，然后继续调用...

2018-04-25 21:23:22 488

原创数组去重

1、用es6中Setvar arr=[5,5,5,8,9,8,7,4,1,3]var newArr = [...new Set(arr)]; //[5, 8, 9, 7, 4, 1, 3]var arr=[5,5,5,8,9,8,7,4,1,3]var newArr = Array.from(new Set(arr)); //[5, 8, 9, 7, 4, 1, 3]2、利用 inde...

2018-04-25 18:34:44 137

原创数组/对象拷贝

数组拷贝1、concatlet newArr = [].concat(oldArr)2、扩展运算符let newArr = [...oldArr]3、slicelet newArr = oldArr.slice(0)4、JSON.parse和JSON.stringifyvar newArr = JSON.parse(JSON.stringify(oldArr))注：上面前三种拷贝方法中concat...

2018-04-25 13:46:18 344

原创 vue非父子之间通信 - 利用空Vue做事件总线

比较简单的非父子组件之间的通信可以采用下述模式，复杂的大型单页面程序使用VueX。Vue官方提供解释比较简单：下面来动手实现一下：场景：实现点击某个列表项，header-nav中显示出点击的是第几个列表项。实现代码：...

2018-04-01 13:20:56 403

coding...