对于函数式编程来说,map/reduce/filter这几个算子非常重要,其中有的语言不是reduce而是fold,但功能基本一样,不过reduce的迭代一般只有一个方向,fold可能会分两个方向,这是题外话。
本来想的是昨天晚上写这篇文章的,后来昨天在写一个Cordova上的iOS插件的时候各种不顺。对接的第三方SDK不给力,于是六点多回到家的时候,我就就开始娱乐了,哈哈哈~~ 其实这篇文章应该算是一篇拾遗。 从map组件说起 在今天公布的开发文档里,我们知道使用一个地图组件的时候是这样子的: <map longitude="23.099994" latitude="113.324520" markers="{{markers}}" covers="{{covers}}" style="width: 375
前两天为了优化公司的代码打包项目,恶补了很多 webpack4 的知识。要是放在几年前让我学习 webpack 我肯定是拒绝的,之前看过 webpack 的旧文档,比我们内部项目的文档还要简陋。
上一篇我们研究了 Immutable.js 持久化数据结构的基本实现原理,对其核心数据结构Vector Trie进行了介绍,并着重探究了其中的位分区机制。采用位分区的根本原因是为了优化速度,而对于空间的优化, Immutable.js 是怎么做的呢?接下来先探讨下这点。
p5.js 为开发者提供了很多有用的方法,这些方法实现起来可能不难,但却非常实用,能大大减少我们的开发时间。
我们从事 Web 开发工作中,异常监控系统已经是我们朝夕相处的好助手,但是这些异常处理工具通常都是建立在 Web 生态,或者是假定运行在浏览器环境下的,但是当我们需要给一套跨端系统搭建一套类似的异常监控系统,并且期望该系统兼容 Web 生态,现有的工具很可能就不满足我们的需求了,因此我们需要考虑一套完整的异常监控系统整个链路将会涉及到哪些工具链,以及如何修改这些工具链来适配我们的跨端系统。
Immutable.js 由 Facebook 花费 3 年时间打造,为前端开发提供了很多便利。我们知道 Immutable.js 采用了持久化数据结构,保证每一个对象都是不可变的,任何添加、修改、删除等操作都会生成一个新的对象,且通过结构共享等方式大幅提高性能。
看到网上的萤火虫效果后,也想在前端通过ArcGIS JS API来实现一下,所以感兴趣的话就跟我一起来看看吧。
手机和数码相机拍的照片里除了我们能看到的RGB像元数据,还包含了拍摄时间、图像分辨率、感光值、GPS坐标等属性,记录在Exif(Exchangeable image file format)模块里。
Build. Build主要会做以下动作: 编译项目文件并输出到某个目录 Build targets决定了输出的结果 bundling 打包 生产环境的build还会进行uglify和tree-shaking(把没用的代码去掉) ng build. 可以先看帮助: ng build --help 针对开发环境, 就是用命令 ng build. 默认情况下, 它的输出目录在.angular-cli.json文件里ourDir属性配置的, 默认是/dist目录. build之后会看见dist里面有这些文件: i
ArcGIS API for JavaScript 4.18中新增加了一种基于ES Modules的新开发方式@arcgis/core,这篇文章就来介绍一下如何使用这种方式来进行开发。
用过 webpack 的都知道,webpack 的 sourcemap 配置是比较麻烦的,比如这两个配置的区别:
本文主要介绍下如何使用ArcGIS JS API对后台接口返回的数据进行渲染,文章中的后台返回数据使用单独的配置文件来处理,详情请看文章内容。
Webpack是一个静态资源打包工具,可以把JS及其所依赖的css和图片(都认为是一个模块)打包为一个.js文件,让客户端浏览器只引入最终的js文件,从而实现减少HTTP请求的目的,优化访问速度。
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。 Webpack的工作方式是:把你的项目当做一个整体,通过一个给定的主文件(如:index.js),Webpack将从这个文件开始找到你的项目的所有依赖文件,使用loaders处理它们,最后打包为一个浏览器可识别的JavaScript文件。
01 首先说说sourceMap 说起sourceMap大家肯定都不陌生,随着前端工程化的演进,我们打包出来的代码都是混淆压缩过的,当源代码经过转换后,调试就成了一个问题。在浏览器中调试时,如何判断原始代码的位置? 为了解决这个问题,google 提出了sourceMap 的想法,并在chorme上最先支持sourceMap的使用。sourceMap 由于包含许多信息,前期也经过多版的编码算法优化,最后在2011年探索出了Source Map Revision 3.0 ,这个版本也就是我们现在一直在使用的s
说起sourceMap大家肯定都不陌生,随着前端工程化的演进,我们打包出来的代码都是混淆压缩过的,当源代码经过转换后,调试就成了一个问题。在浏览器中调试时,如何判断原始代码的位置?
最近学了一些Electron.js开发桌面应用的知识,然后作为一名专业的GISer,脑海里马上想到的是,它能不能和我们的ArcGIS JS API整合呢,意思就是,用我们的ArcGIS JS API去开发桌面应用,试了下,好像可以。
使用这个博客模板的朋友们时不时会提出一些问题,我将它们以及对应的解决方案逐渐整理归纳,汇总到这一篇帖子里。
大家好,我是海怪。了解过微前端的同学应该对 single-spa 这个框架都不陌生,但是我翻看了中文整个社区,发现太少文章是讲 single-spa Demo 实践的。
Echarts官方文档已经暂停了地图数据的下载,但是百度Echarts给我们留了下载的官方接口:https://echarts.apache.org/examples/vendors/echarts/map/
来源:子慕大诗人 http://www.cnblogs.com/1wen/p/7942608.html 导火索 有一天一个测试同事的一个移动端页面白屏了,看样子是页面哪里报错了。 我自己打开页面并没有报错,最后发现报错只存在于他的手机,移动端项目又是在微信环境下,调试起来会比较麻烦,最后用他手机调试才发现问题: 是他账户下面有个对话的消息数据有问题导致页面报错了。 一般遇到这种情况只有用他的手机或者账户调试能很快查到问题,如果是外部的用户怎么办,我没法拿他的手机去测试。 📷 其实这个问题很常见,但是这次我觉
东东是一名前端工程师,主要用 React 技术栈,用了多年之后想深入一下,所以最近开始看 React 源码。
实现Webpack的打包最基本的就是配置好入口、出口,npm install webpack后在根目录创建webpack.config.js,代码如下:
大家好,在《动手练一练,使用 React 和 Next.js 做一个简单的博客网站(上)》一篇文章里,我们一起了解了什么是 Next.js,并手工创建了一个简单的 Next.js 项目,学会了如何基于模板创建简单的页面,本篇文章,我们继续完善这个案例。
2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数:数组中的当前项item,当前项的索引index,原始数组input。
对于一份同逻辑的代码,当我们手写了一个个的文件,它们无论是 ESM 还是 commonJS 或是 AMD,他们都是 module; 当我们写的 module 源文件传到 webpack 进行打包时,webpack 会根据文件引用关系生成 chunk 文件,webpack 会对这个 chunk 文件进行一些操作; webpack 处理好 chunk 文件后,最后会输出 bundle 文件,这个 bundle 文件包含了经过加载和编译的最终源文件,所以它可以直接在浏览器中运行。 一般来说一个 chunk 对应一个 bundle,比如上图中的 utils.js -> chunks 1 -> utils.bundle.js;但也有例外,比如说上图中,我就用 MiniCssExtractPlugin 从 chunks 0 中抽离出了 index.bundle.css 文件。
《XDM,JS如何函数式编程?看这就够了!(二)》,讲了重要的两个概念:偏函数、柯里化
上次我写了一篇简单介绍函数式思维的文章,我们组的同学看了之后表示很感兴趣,希望我有空多写写这方面的内容,然后表示他能想到用数组的 map,但是想不到 reduce。我想这可能也是个普遍现象,因为在对 FP(函数式编程)接触不多的同学来讲,脑海中对 map 的印象,可能基本等同于循环,而对 reduce 就相对陌生。但其实呢,reduce 是个比 map、flatMap 啥的更通用的函数,你可以用 reduce 轻易地实现其他函数。
1 1. 什么是JSX语法 2 2. jsx语法示例与渲染的VNode节点 3 3. jsx的渲染流程 4 4. jsx中的js和html的写法不同 5 a. js:{ js语法 } 6 i. 花括号里边一定要返回字符串才能渲染 7 ii. {{ 双花括号表示js语法里的对象格式 }} 8 iii. 花括号里可以写表达式、三元、有返回值且返回字符串的函数调用 9 iv. 花括号里直接放对象报错 10 v. 数组可以直接被渲染到页面中。 11 b. html:<html语法> 12 i. class等关键字不能用做html的属性(如class、for等不行,需要替换成别的) 13 1) class -> className 14 2) for -> htmlFor 15 c. a标签写了以后,必须写href属性 16 d. 组件根节点只能是一个标签,不能有并列标签。否则报错! 17 三种方法实现空白标签包裹:(就像小程序的block标签、又像vue的template标签) 18 i. <React.Fragment>空白标签1</React.Fragment> 19 ii. import { Fragment } from 'react';<Fragment>空白标签1</Fragment> 20 iii. <>空白标签2</> 21 e. 列表渲染 - 迭代的方法(没有for):利用数组进行渲染 22 f. key值唯一的绑定 23 g. 条件切换的使用(没有if else、简直反人类) 24 h. 动态样式的绑定 - style的值需要是一个js语法,包裹在对象里边。 25 i. v-html类似用法:dangerouslySetInnerHTML={ {__html: variableName} }【innerHTML容易造成xss攻击,避免使用】 26 j. jsx中的注释 27 i. 多行注释:{ /** js注释 **/ } 28 ii. 单行注释: 29 { 30 // 单行注释,花括号如果提上来就被注释了。所以换行 31 }
一般来说,项目的 TS 编译器配置全部存储在项目根目录下的 tsconfig.json 文件中
有一个项目需求,要求在前端项目中导出Excel表格,经过查找代码,Vue.js确实可以实现,具体实现步骤为:
最近需要在Angualr2建的项目里做一个pdf显示的功能,在网上找了个插件,不过由于是第一次使用额外插件,在用的时候遇到了一些坑,这里权且记一下使用的步骤,方便以后的参考。
来到这家公司之后,一直在使用webpack,也写了不少笔记,但是都比较零散,现在决定整理一下webpack相关的知识点,由浅入深,方便自己后续查漏补缺,后续会一直更新。
图中的mapchart就是一个自定义组件,自定义组件为了规范通常放在conponents里。
本文主要聊聊为什么要在 Webpack 中使用 Source Map?以及 Webpack 提供了哪些 Source Map 的使用方式,我们应该在开发环境和生产环境如何使用 Source map
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle
webpack的原生支持上述2、3点内容,再结合官方提供的开放工具DevServer也可以很方便的做到第一点。DevServer会启动一个HTTP服务器用于服务网页请求,同时会帮助启动webpack,并接收webpack发出的文件变更信号,通过websocket协议自动刷新网页做到实时预览。
React基础 React组件 React-Router——Reac路由的学习 React高阶组件及CRA的定制 React中使用Antd组件
前言:最近在 No.js 里实现了一个简单的模块加载器,本文简单介绍一下加载器的实现。
JS中的Map和VBA里的字典Dictionary基本上一样的,主要的功能就是保存一对Key-Value的数据,保证Key不重复。
上一篇Vite入门从手写一个乞丐版的Vite开始(上)我们已经成功的将页面渲染出来了,这一篇我们来简单的实现一下热更新的功能。
领取专属 10元无门槛券
手把手带您无忧上云