Lo-Dash | 易学教程

实用webpack插件之ProvidePlugin

阅读更多关于实用webpack插件之ProvidePlugin

现代化前端的全局引入是一个很有趣的东西。先来看下以下几个场景：在webpack中，我们可以在resolve的alias中定义一个层级较高的目录为一个自定义变量。例如 resolve: { alias: { '@': path.join(__dirname, '..', 'src') }} 。在webpack中，我们也可以通过DefinePlugin将配置文件按照环境变量进行区分，高效的完成配置文件的按环境引入，无论是开发构建还是生产构建，都十分有用。在vue中，我们可以将一个常用的方法或者库定义在Vue.ptototye上，可以通过直写属性，也可以通过vue中的plugin install上去。例如 Vue.prototype.$_ = lodash ，在应用了vue的应用上下文中，可以通过this.$_获得对lodash的引用。在vue中，还有mixins，inject以及vuex等等这些全局绑定或者叫混入、注入方式的全局引入的实现。来思考一个问题：如果我们再Vue.prototype上绑定了太多，太大的第三方库，会不会导致root vue过大？答案是肯定的。有没有办法解决这个问题？你可能会说，我不用this.xxx。用到的vue单文件组件直接import或者require就好了。如果数以百计，数以千计甚至是数以万计的.vue文件中用到了呢？一直引入吗？

computed属性和watcher

阅读更多关于 computed属性和watcher

computed属性在模板中使用表达式是非常方便直接的，然而这只适用于简单的操作。在模板中放入太多的逻辑，会使模板过度膨胀和难以维护。例如： <div id="example"> {{ message.split('').reverse().join('') }} </div> 在这个地方，模板不再简洁和如声明式直观。你必须仔细观察一段时间才能意识到，这里是想要显示变量 message 的翻转字符串。当你想要在模板中多次引用此处的翻转字符串时，就会更加难以处理。这就是为什么对于所有复杂逻辑，你都应该使用 computed 属性 (computed property)。基础实例　　 <body> <div id="example"> <p>初始message是："{{message}}"</p> <p>计算后的翻转message是："{{reversedMessage}}"</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script> var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { // 一个computed属性的getter函数 reversedMessage: function ()

VueJs(7)---计算属性和侦听器

阅读更多关于 VueJs(7)---计算属性和侦听器

计算属性和侦听器一、概述计算属性模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如： < div id ="example" > {{ message.split('').reverse().join('') }} </ div > 在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量 message 的翻转字符串。当你想要在模板中多次引用此处的翻转字符串时，就会更加难以处理。所以，对于任何复杂逻辑，你都应当使用计算属性。基础例子 < div id ="example" > < p > Original message: "{{ message }}" </ p > < p > Computed reversed message: "{{ reversedMessage }}" </ p > </ div > var vm = new Vue({ el: '#example' , data: { message: 'Hello' }, computed: { // 计算属性的 getter reversedMessage: function () { // `this` 指向 vm 实例 return this .message.split('').reverse()

Javascript实现对象深拷贝

阅读更多关于 Javascript实现对象深拷贝

1.Object.assign const target = { a: 1, b: 2 }; const source = { b: 4, c: 5 }; const returnedTarget = Object.assign(target, source); console.log(target); // expected output: Object { a: 1, b: 4, c: 5 } console.log(returnedTarget); // expected output: Object { a: 1, b: 4, c: 5 } 2. jQuery.extend 或 lodash $.extend( true, object1, object2 ); // 深拷贝 $.extend( object1, object2 ); // 浅拷贝 var objects = [{ 'a': 1 }, { 'b': 2 }]; var deep = _.cloneDeep(objects); 3.自定义方法clone function checkType(target) { return Object.prototype.toString.call(target).slice(8,-1) } //递归遍历对象/数组元素。实现深拷贝 function clone(target

Lodash源码解析-------chunk函数

阅读更多关于 Lodash源码解析-------chunk函数

【今日推荐】：为什么一到面试就懵逼！>>> 基本思想没有看过chunk函数的内部实现，根据官方文档给出的功能自己编写实现。 chunk函数接受两个参数，第一参数为array类型，第二个参数为number类型，其作用的是：将数组（array）拆分成多个 size 长度的区块，并将这些区块组成一个新数组。如果array 无法被分割成全部等长的区块，那么最后剩余的元素将组成一个区块。例子如下： _ . chunk ( [ 'a' , 'b' , 'c' , 'd' ] , 2 ) ; // => [['a', 'b'], ['c', 'd']] _ . chunk ( [ 'a' , 'b' , 'c' , 'd' ] , 3 ) ; // => [['a', 'b', 'c'], ['d']] 这里我没有遍历整个数组，这样是没有必要的，利用Aarry类型的slice函数进行优化：首先要判断传入函数的参数类型，如果不是array或者第二参数不是number要抛出异常记录每个分割的临时数组的长度，用数组的整个长度余上要分割的数量看这个余数是否为0，如果不为0，做除法后要加1，这是因为我们前面要尽可能添加多的元素这里有个坑的点，我们最后part的值要娶一个整数，然后除法运算符默认返回IEEE754浮点数，例如：5/3返回的是1.666666667这种

关于 JavaScript 的精度丢失与近似舍入

阅读更多关于关于 JavaScript 的精度丢失与近似舍入

一、背景最近做 dashborad 图表时，涉及计算小数且四舍五入精确到 N 位。后发现 js 算出来的结果跟我预想的不一样，看来这里面并不简单…… 二、JS 与精度 1、精度处理首先明确两点： 1、小数才会涉及精度的概念 2、小数的（存储和）运算涉及 JS 的精度处理在现实中，我们运算小数，不会出现任何问题。但是 JS （编程语言）里，却不是这样。 2、精度丢失例如，在 JS 里执行： 0.1 + 0.2 0.30000000000000004 0.3 - 0.1 0.19999999999999998 0.1 * 0.1 0.010000000000000002 0.3 / 0.1 2.9999999999999996 可以看出，JS 运算小数的结果，并不是我们预想的那样。这就是精度丢失的问题。（1）问：精度丢失会引发什么问题？答： 1、让判断等于（ === ）的逻辑出错。比如让 0.1 + 0.2 === 0.3 为 false 2、让本来可以预想到的结果精度变的特别大，小数点后位数特别长。比如若要前端显示，会特别难看。（2）问：为什么会出现精度丢失？答：这跟浮点数在计算机内部（用二进制存储）的表示方法有关。 JS 采用 IEEE 754 标准的 64 位双精度浮点数表示法，这个标准是20世纪80年代以来最广泛使用的浮点数运算标准

【开发者成长】Vue.js 中有哪些性能陷阱

阅读更多关于【开发者成长】Vue.js 中有哪些性能陷阱

云栖号资讯：【点击查看更多行业资讯】在这里您可以找到不同行业的第一手的上云资讯，还在等什么，快来！我内心深处对游戏的热爱，让我一直渴望能自己制作一些电子游戏。几个月前我开始将这种梦想变为现实，并第一次参加了全球游戏大赛（Global Game Jam）。我和我的团队使用 Vue.js 构建了一个名为“ ZeroDaysLeft ”的游戏，其形式是 Web 端的单页面应用程序。这款游戏的主题是环境保护，我们考虑到商业活动对地球环境的影响，希望就这个话题做一些有益的探讨。使用 Vue.js 制作的游戏并不多。我的团队迟到了一天，然后用猜拳的方式选择了我们要用的框架；我们飞快地写完了代码，并在周末结束时做出了游戏的可运行版本。在本地测试时一切都很顺利。自然，我们为自己第一次写出来的游戏作品感到自豪，并希望与世界分享它。可是问题出现了——当我们构建好应用并开始查询域时，内存占用爆表了。它几乎没法正常运行，不管换什么机器都会卡住不动，即使在强大的基于 Intel i7 处理器的系统上程序也会崩溃。游戏大赛的时间限制把我们拉回了现实，我们决定搁置生产性能问题，这样起码我们能做出一款能在自己的设备上运行的完整游戏。就像大部分的“已完成”项目一样，第二天我们就把它抛在脑后了。但我自己没法释怀。它一直困扰着我。问题是出在 Vue.js 上吗？是 Netlify 吗？还是因为我们的取巧代码

现代前端库开发指南系列（二）：使用 webpack 构建一个库

阅读更多关于现代前端库开发指南系列（二）：使用 webpack 构建一个库

前言在前文中，我说过本系列文章的受众是在现代前端体系下能够熟练编写业务代码的同学，因此本文在介绍 webpack 配置时，仅提及构建一个库所特有的配置，其余配置请参考 webpack 官方文档。输出产物构建一个库与构建一个一般应用最大的不同点在于构建完成后输出的产物。一般应用构建完成后会输出：一个 html 文件一个 js 入口 chunk 、若干子 chunk 若干 css 文件若干其它资源，如图片、字体文件等虽然输出的资源非常多，但实际上所有的依赖、加载关系都已经从 html 文件开始一层一层定下来了，换句话说，这个 html 文件实际上就是整个应用的入口。一个库构建完成后会输出：一个 CommonJS 格式的 js 文件一个未压缩的 UMD 格式的 js 文件一个已压缩的 UMD 格式的 js 文件可能包括若干的 css 文件可能包括若干的其它资源文件库的入口分别是上面罗列的 js 文件；你可能会奇怪，一个库怎么会有3个入口文件呢？莫急，且听我一一道来。 CommonJS CommonJS 是 Node.js 推行的一种模块化规范，主要语法包括 module.exports 、 require() 等；而我们在使用 webpack 引入 npm 包时，实际上是处于 Node.js 环境，由此可知，这个 CommonJS 格式的入口 js 文件

按键对JavaScript对象进行排序

阅读更多关于按键对JavaScript对象进行排序

我需要按键对JavaScript对象进行排序。因此，以下内容： { 'b' : 'asdsad', 'c' : 'masdas', 'a' : 'dsfdsfsdf' } 会成为： { 'a' : 'dsfdsfsdf', 'b' : 'asdsad', 'c' : 'masdas' } #1楼这对我有用 /** * Return an Object sorted by it's Key */ var sortObjectByKey = function(obj){ var keys = []; var sorted_obj = {}; for(var key in obj){ if(obj.hasOwnProperty(key)){ keys.push(key); } } // sort keys keys.sort(); // create new array based on Sorted Keys jQuery.each(keys, function(i, key){ sorted_obj[key] = obj[key]; }); return sorted_obj; }; #2楼使用lodash可以正常工作： some_map = { 'b' : 'asdsad', 'c' : 'masdas', 'a' : 'dsfdsfsdf' } // perform a

Javascript中是否存在RegExp.escape函数？

阅读更多关于 Javascript中是否存在RegExp.escape函数？

我只想从任何可能的字符串中创建一个正则表达式。 var usersString = "Hello?!*`~World()[]"; var expression = new RegExp(RegExp.escape(usersString)) var matches = "Hello".match(expression); 有内置的方法吗？如果没有，人们会使用什么？ Ruby具有 RegExp.escape 。我觉得我不需要自己写东西，那里肯定有一些标准。谢谢！ #1楼在jQueryUI的自动完成小部件（1.9.1版）中，他们使用略有不同的正则表达式（第6753行），这是将正则表达式与@bobince方法结合使用。 RegExp.escape = function( value ) { return value.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, "\\$&"); } #2楼这是一个较短的版本。 RegExp.escape = function(s) { return s.replace(/[$-\/?[-^{|}]/g, '\\$&'); } 这包括非元字符 % ， & ， ' ，和 , 但JavaScript的正则表达式规范允许这样做。 #3楼 Mozilla开发人员网络正则表达式指南提供了以下转义功能： function

订阅 Lo-Dash