function deepGet(object, path, defaultValue) { return (!Array.isArray(path) ? path.replace(/\[/g, '.').replace(/\]/g, '').split('.') : path) .reduce((o, k) => (o || {})[k], object) || defaultValue; } var obj = { 'a': [{ 'b': { 'c': 3 } }] }; var resu

Loadsh 常用方法总结以及在vue中使用Loadsh Lodash 是一个一致性.模块化.高性能的 JavaScript 实用工具库.处理复杂数组,对比等可以直接采用该库,也方便快捷. 官方网站 https://www.lodashjs.com/ 一. 在vue中使用Loadsh中的节流函数 debounce和throttle .throttle是lodash中的节流函数,.debounce是lodash中的防抖函数. 具体作用可以直接看官方文档. 在vue中具体怎么用 import _ f

var _ = require('lodash'); 把几个对象合并为一个对象. _.assign({ 'a': 1 }, { 'b': 2 }, { 'c': 3 });// ➜ { 'a': 1, 'b': 2, 'c': 3 } 把数组的各个对象都乘以3 _.map([1, 2, 3], function(n) { return n * 3; });// ➜ [3, 6, 9] 把数组分成等分的数组 _.chunk(['a', 'b', 'c', 'd'], 2);// → [['a',

此篇文章会记录常用的lodash函数 防抖函数:_.debounce() 创建一个去缓冲函数,该函数将自上次调用函数以来经过设置的等待毫秒后调用func. 去缓冲函数带有一个取消方法来取消延迟的func调用,以及一个刷新方法来立即调用它们. 提供选项来指示是否应在等待超时的前边和/或后边调用func. 调用func时,将最后一个参数提供给解包函数.对去缓冲函数的后续调用返回上一次func调用的结果 用法:_.debounce(func, [wait=0], [options={}]) 示例: /

由Underscore与Lodash的差异引发的思考:http://ju.outofmemory.cn/entry/106512 JavaScript工具库之Lodash Underscore和Lodash商讨合并事宜:http://www.infoq.com/cn/news/2015/06/underscore-lodash-merging?utm_campaign=infoq_content&

开发工具 1.WebStorm,毫无疑问非他莫属,跨平台,强大的代码提示,支持Nodejs调试,此外还支持vi编辑模式,这点我很喜欢. 2.做些小型项目用Sublime Text. 3.Browserify:将你的nodejs模块应用到浏览器中 4.nvm:nodejs版本管理工具,你可能会用到多个nodejs版本(如v0.11.x支持generator的nodejs和stable的v0.10.x版本),用它可以方便切换 测试&自动化 1.mocha:一个简单.灵活有趣的 JavaScript

开发工具 1.WebStorm,毫无疑问非他莫属,跨平台,强大的代码提示,支持Nodejs调试,此外还支持vi编辑模式,这点我很喜欢.2.做些小型项目用Sublime Text.3.Browserify:将你的nodejs模块应用到浏览器中4.nvm:nodejs版本管理工具,你可能会用到多个nodejs版本(如v0.11.x支持generator的nodejs和stable的v0.10.x版本),用它可以方便切换 测试&自动化 1.mocha:一个简单.灵活有趣的 JavaScript 测试框

1. 认识深拷贝和浅拷贝 javascript中一般有按值传递和按引用传递两种复制,按值传递的是基本数据类型(Number,String,Boolean,Null,Undefined),一般存放于内存中的栈区,存取速度快,存放量小:按引用传递的是引用类型(Object,Array,Function,Symbol),一般存放与内存中的堆区,存取速度慢,存放量大,其引用指针存于栈区,并指向引用本身. 深拷贝和浅拷贝是相对于引用类型而言的: 浅拷贝: 指两个js 对象指向同一个内存地址,其中一个改变会

React 如何同步更新state 由于setState方法是异步的,而通常很多时候在一个生命周期里更新state后需要在另一个生命周期里使用这个state. 下面介绍几个方法 // 1 this.setState({}, () => { this.doSomething(); }); doSomething() { console.log(this.state); } // 2 使用setState // 其他 this.setState((prevState, props) => { re

一.axios Vue更新到2.0之后宣告不再对vue-resource更新,推荐使用axios,axios是一个用于客户端与服务器通信的组件,axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端javaScript工具.通俗来说可以实现客户端请求服务器端提供的服务获得数据. 源码与帮助:https://github.com/axios/axios 服务器端跨域支持请查看:http://www.cnblogs.com/best/p/6196202.html#_l

Code Splitting是webpack的一个重要特性,他允许你将代码打包生成多个bundle.对多页应用来说,它是必须的,因为必须要配置多个入口生成多个bundle:对于单页应用来说,如果只打包成一个bundle可能体积很大,导致无法利用浏览器并行下载的能力,且白屏时间长,也会导致下载很多可能用不到的代码,每次上线用户都得下载全部代码,Code Splitting能够将代码分割,实现按需加载或并行加载多个bundle,可利用并发下载能力,减少首次访问白屏时间,可以只上线必要的文件. 三种C

昨天趁有点时间看了前不久很火的构建工具Parcel,这里说下初步使用的感受,尤其是将其放到实际项目中和Webpack进行比较. 一.前言 首先说下笔者目前的技术栈.最近的前端项目主要以管理后台为主,技术栈都是React.js + Redux + React-Router + Antd + Create-react-app这套,版本均为较新的版本.Webpack构建工具体系由Create-react-app脚手架初始化,因默认打包功能不太丰富,笔者eject出打包相关的配置文件,在原基础上添加了额

使用NPM安装的时候会经常出现包冲突(比如多个主模块的子模块版本不一致等),导致在开发过程中会遇到各种或大或小的问题.所有在这会介绍以下内容: NPM 主要安装方式 NPM 包信息查询 NPM 安装机制(主要) 安装&查询命令 NPM 各种安装方式 npm install packageName[@next | @versionNumber] 在 node_modules 中没有指定模块时安装,(不检查~/.npm目录) npm install packageName --f | -- forc

基础优化 所谓的基础优化是任何 web 项目都要做的,并且是问题的根源.HTML,CSS,JS 是第一步要优化的点 分别对应到 .vue 文件内的,<template>,<style>,<script>,下面逐个谈下 vue 项目里都有哪些值得优化的点 template 语义化标签,避免乱嵌套,合理命名属性等等标准推荐的东西就不谈了. 模板部分帮助我们展示结构化数据,vue 通过数据驱动视图,主要注意一下几点 v-show,v-if 用哪个?在我来看要分两个维度去思考问

官方文档说进行代码分离有三种方法: 入口起点:使用entry配置手动分离. 防止重复:使用CommonsChunkPlugin插件去重合分离chunk 注:在webpack4中,CommonsChunkPlugin已经被废弃,改用optimization.splitChunks 动态分离 但是在个人理解:2是对1的缺陷补充,所以其实就只有两种分离方法: 入口起点手动静态分离 动态分离 静态分离: index.js import _ from 'lodash'; function componen

webpack基于nodejs环境运行,首先确认已经安装了node.js. 基础构建流程 新建一个文件夹,这个就是你项目的根目录. 在命令行中使用npm init命令初始化npm,会得到一个 ==package.json== 的文件. 在命令行中安装webpack和webpack-cli: npm install webpack //本地安装webpack,全局需要加 -g 命令,但建议本地安装 npm install webpack-cli //本地安装webpack-cli, webpack

前面的话 前面介绍了webpack的基本配置,本文将详细介绍webpack中关于代码优化的配置 打包公共代码 CommonsChunkPlugin 插件,是一个可选的用于建立一个独立文件(又称作 chunk)的功能,这个文件包括多个入口 chunk 的公共模块.通过将公共模块拆出来,最终合成的文件能够在最开始的时候加载一次,便存到缓存中供后续使用.这会带来速度上的提升,因为浏览器会迅速将公共的代码从缓存中取出来,而不是每次访问一个新页面时,再去加载一个更大的文件 new webpack.opti

这篇文章的作者是 David Corbacho,伦敦的一名前端开发工程师.之前我们有一篇关于”节流”和”去抖”的文章:The Difference Between Throttling and Debouncing(译文:节流(Throttling)和去抖(Debouncing)的区别),但是David的这篇文章通过一些可交互的Demo来给我们做了一个更详细的解释. “节流”和”去抖”都是用来限制一些需要一直执行的函数的技术,它们虽然很相似,但它们是不一样的. 当我们需要做一些DOM事件绑定时

前言 作为搬砖在第一线的底层工人,业务场景从来是没有做不到只有想不到的复杂. 不过他强任他强,if-else全搞定,搬就完了.但是随着业务迭代或者项目交接,自己在看自己或者别人的if代码的时候,心情就不再表述了,各自深有体会.所以我们一起看看if还能怎么写 最基本if-else 假设有这么个场景,不同情况下打印不同值. 因为涉及到的条件太多,就不提三目运算之类优化了. if (a == 1) { console.log('a1') } else if (a == 2) { console.log

Shell脚本介绍 1.Shell脚本,就是利用Shell的命令解释的功能,对一个纯文本的文件进行解析,然后执行这些功能,也可以说Shell脚本就是一系列命令的集合. 2.Shell可以直接使用在win/Unix/Linux上面,并且可以调用大量系统内部的功能来解释执行程序,如果熟练掌握Shell脚本,可以让我们操作计算机变得更加轻松,也会节省很多时间. 3.Shell是一种脚本语言,那么,就必须有解释器来执行这些脚本,常见的脚本解释器有: (1).bash:是Linux标准默认的shell.b

import lodash from 'lodash' <input v-on:onclick ="doStuff">methods: { doStuff:loadsh.debounce(function () { // ... }, 500)} 每天学习一点点 编程PDF电子书免费下载: http://www.shitanlife.com/code