以前端视角,漫谈「云端」-编程思维

作者:京东零售 郑炳懿 前言: 当今世界,云计算技术在快速发展,不断为我们带来新的应用场景和解决方案。作为一名前端开发者,了解云技术并掌握如何在前端中应用它们是必不可少的。本篇文章将介绍云计算技术的基本概念,并从前端角度探讨如何使用云技术提高应用的可扩展性、安全性、性能和用户体验。 一、云技术 1.1 什么是云技术 在开始之前,我们需要先了解一下什么是云计算。云计算是一种基于互联网的计算方式,它

es(ecmascript)标准下中的let、var和const-编程思维

ES标准下中的let,var和const let会报重复声明,var则比较随意,重不重复无所谓 // 使用 var 的时候重复声明变量是没问题的,只不过就是后面会把前面覆盖掉 var num = 100 var num = 200 // 使用 let 重复声明变量的时候就会报错了 let num = 100 let num = 200 // 这里就会报错了 // 使用 const 重复声

es6中的解构赋值(数组,对象,嵌套,默认值)-编程思维

解构赋值 通过解构赋值,可以快速从对象或者数组中取出属性或者数值。 解构赋值 可以通过定位到数组或者对象的某一个位置,将值直接赋给一个或多个变量。 const arr = ['dasha', 'ersha', 'gangdan'] let [a, b, c] = arr //a='dasha' b='ersha' c='gangdan' //假如需要交换ab的值 只需要 [a, b] = [

浅谈array --javascript内置对象-编程思维

Array --JavaScript内置对象 描述 可以用一个变量存储多种数据类型的Array对象,Array不是关联数组,不能使用字符串作为索引访问数组元素,需要使用非负整数的下标访问数组中的元素。 和对象的某些特征很相似,例如:属性访问器一半相似,衍生出的使用 .call() 或者 .apply() 将数组方法赋予对象。 较为常用的几个方法 有的是通过改变原数组,又或是返回一个新数组的形式。

vue2数据驱动渲染(render、update)-编程思维

上一篇文章我们介绍了 Vue2模版编译原理,这一章我们的目标是弄清楚模版 template和响应式数据是如何渲染成最终的DOM。数据更新驱动视图变化这部分后期会单独讲解 我们先看一下模版和响应式数据是如何渲染成最终DOM 的流程 Vue初始化 new Vue发生了什么 Vue入口构造函数 function Vue(options) { this._init(options) // opti

聊聊前端性能指标那些事儿-编程思维

作者:京东科技 郝梁 前言:作为 C 端前端研发,除了攻克业务难点以外,也要有更深层的自我目标,那就是性能优化。这事儿说大不大,说小也不小,但难度绝对不一般,所涉及的范围优化点深入工程每个细胞。做好前端性能优化绝非简单之事!文章主要内容介绍前端性能考核指标及优化方案。 一、前端性能指标有哪些? 根据 chrome Lighthouse 最新规则,前端性能指标考量主要有 FCP(First Con

three.js 进阶之旅:全景漫游-初阶移动相机版-编程思维

声明:本文涉及图文和模型素材仅用于个人学习、研究和欣赏,请勿二次修改、非法传播、转载、出版、商用、及进行其他获利行为。 摘要 3D 全景技术可以实现日常生活中的很多功能需求,比如地图的街景全景模式、数字展厅、在线看房、社交媒体的全景图预览、短视频直播平台的全景直播等。Three.js 实现全景功能也是十分方便的,当然了目前已经有很多相关内容的文章,我之前就写过一篇《Three.js 实现3D全

css鼠标样式(cursor)总结(转载)-编程思维

CSS鼠标样式(cursor)总结   属性值 示意图 描述 auto   默认值,由浏览器根据当前上下文确定要显示的光标样式 default 默认光标,不考虑上下文,通常是一个箭头 none   不显示光标 initial   将此属性设置为其默认值 inherit   从父元素基础 cursor 属性的值 context-menu 表示上下文菜单可用 h

vue2模版编译(ast、optimize 、render)-编程思维

在Vue $mount过程中,我们需要把模版编译成render函数,整体实现可以分为三部分: parse:解析模版 template生成 AST语法树 optimize: 优化 AST语法树,标记静态节点 codegen: 把优化后的 AST语法树转换生成render方法代码字符串,利用模板引擎生成可执行的 render函数( render执行后返回的结果就是虚拟DOM,即以 VNode节点作

chatgpt 何许人也-编程思维

有时候会想,如果chatGPT是人,它会是一个怎样的人呢?下面是我的推测过程。 首先,她应该是女人 会推测而不会计算 你问它: 3457 * 43216 = ,它回答 149261912 (这是错的。正确结果是 149397712)。 之所以结果的 2 是对的,仅仅因为它读了太多的文字资料以后,隐约感觉到 7 结尾的文字,乘号,6 结尾的文字,和 2 结尾的文字比较「押韵」从语感上比较像一首诗

javascript学习笔记-编程思维

JavaScript学习笔记             操作属性     获取标签 querySelector(‘CSS选择器’)返回一个元素对象,可以直接操作;找不到返回null; querySelectorAll(‘CSS选择器’)返回一个伪数组,需要遍历得到对象再操作; 注意:参数必须加引号(字符串),参数必须是CSS选择器; 伪数组:没有pop、push等方法,但是

html学习笔记-编程思维

HTML学习笔记               HTML5新增表单属性 属性 值 说明 required required 必填项,不能为空 placeholder 提示文本 提示信息,有默认值value时,placeholder不显示; autofocus autofocus 自动获取焦点,页面加载完自动获得焦点; auto

eval有时候也可以用,而且有奇效-编程思维

eval,一个我曾经避之不及的函数,最近我对它产生了一点新的感触:eval有时候也可以用,有奇效。 一般在使用js进行开发时,是不建议使用eval这类函数的。在JavaScript中,eval可以计算传入的字符串,将其当作js代码来执行。因为它可执行js代码的特性,有可能被第三方利用,传入恶意js代码执行,因此这个函数存在安全风险。再加上eval执行的速度低于普通的js程序,因此在日常开发中,它

vue2响应式原理-编程思维

Vue.js 基本上遵循 MVVM(Model–View–ViewModel)架构模式,数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时,视图会进行更新。 本文讲解一下 Vue 响应式系统的底层细节。 检测变化注意事项 Vue 2.0中,是基于 Object.defineProperty 实现的响应式系统 (这个方法是 ES5 中一个无法 shim 的特性,这也就是 Vue

在京东如何做好前端系统的可观测性-编程思维

作者:京东科技 王亚森 前言 本文旨在从0到1的讲述一下我们团队在做系统可观测性过程中所沉淀下来的一整套解决方案,收效甚巨,不敢苟藏,当公之于众,共建吾辈光明之未来。 先讲一下我们从中得到的好处: 1,当我所负责系统宕机时我能第一时间得到通知 2,当我写的业务逻辑进入else或者catch时它会通知我 3,当我新做了一个产品功能上线后,我可以监控用户的访问情况 4,我不会再担心早上没到公司就收到

flex布局原理【转载】-编程思维

引言 CSS3中的 Flexible Box,或者叫flexbox,是用于排列元素的一种布局模式。 顾名思义,弹性布局中的元素是有伸展和收缩自身的能力的。 相比于原来的布局方式,如float、position,根据盒子模型,就可以计算出元素的展示尺寸(长宽非百分比),除非溢出,否则不依赖于父容器的大小。 而弹性布局中元素的大小是高度依赖父容器的大小的。因为,它所具有的“伸缩性”,目标就是为了撑满

vite项目生产环境去掉console信息【转载】-编程思维

环境变量引入 通常去掉console为生产环境,即需要引入环境变量。具体请看这篇文章: vite项目初始化之~环境变量 注意 与webpacak相比,vite已经将这个功能内置到了,所以我们只需要配置vite.config.js文件即可,起作用的文件包括drop_console去掉console信息drop_debugger为去掉debugger信息 修改vite.config.js文件 im

cros跨域问题的解决-编程思维

转载: 作者:小丞同学链接:https://www.zhihu.com/question/452543297/answer/2247177767来源:知乎 在前后端交互的过程中,经常会遇到跨域的问题,在我们使用 React 、Vue 这些脚手架来搭建项目时,我们可以很方便的通过配置代理来解决跨域的问题,但是在我们初学前端时,这个问题真的是非常棘手的。 首先跨域是由于浏览器的同源策略引起的,它

【js基础】es6模块系统-编程思维

export export 导出方式有两种,命名导出和默认导出。 命名导出还是默认导出都是都导出模块中内容的一种方式,可以混合使用。 个人理解:默认导出其实是导出了default别名变量。 一个模块只能有一个默认导出 不同的导出方式也对应了不同的导入方式 // 命名行内导出 export const baz = 'baz'; export const foo = 'foo', bar = '