20190920 前端开发日报

一道JS经典面试题——var变量提升;Vue自定义防抖指令;探索如何使用 JSON.stringify() 去序列化一个 Error;如何安全的运行第三方 JavaScript 代码(上)?;从0搭建自己的webpack开发环境(三);学习至今的css,我掌握了什么?;基于 Vue 的商品主图放大镜方案;JavaScript重要概念之this指向

  1. 一道JS经典面试题——var变量提升 问题 今天看到一道有意思的面试题,考察的还真是JS的基本功,题目如下: var name = “world”; (function(){ if(type name === “undefined”) { var name = “Jack”; console.log(“Hello ” + name); } else { console.log(“Hello ” + name); } }()); 根据if条件可以得出可能的答案: Hello wor…
  2. Vue自定义防抖指令 最近项目中经常出现由于用户多次点击导致的问题,防抖/节流使用的很多,因此,想通过vue自定义指令的方式来实现。后面有需要使用防抖的地方只要使用改指令即可。 原代码 <button @click="sayHello">提交</button> 复制代码 sayHello() { console.log(‘Hello!’) } 复制代码 我想达到的…
  3. 探索如何使用 JSON.stringify() 去序列化一个 Error最近在做 Node 服务端需求的时候,遇到了几次服务端报错的问题。打 log 发现均是一些 Error,但是它们都没法很好地透传给前端浏览器,出现问题只能查看服务端机器的日志,调试起来非常不方便。思考了一下,服务端…
  4. 如何安全的运行第三方 JavaScript 代码(上)? 在本文中,我们将为读者详细介绍如何在自己的软件中安全地运行第三方 JavaScript 代码。 最近,我们团队完成了 Figma 插件 API 的开发工作,这样第三方开发人员就可以直接在基于浏览器的设计工具中运行代码。这为第三方开发人员带来便利的同时,也给我们带来许多严峻挑战,比如,如何确保插件中运行的代码不会带…
  5. 从0搭建自己的webpack开发环境(三) 1.1 将 es6 代码编译成 es5 代码 代码的转化工作要交给 babel 来处理 npm install @babel/core @babel/preset-env babel-loader –save-dev 复制代码 @babel/core 是babel中的核心模块, @babel/preset-env 的作用是es6转化es5插件的插件集合,而 babel-loader 是 webpack 和 loader 的桥梁。 const sum = …
  6. 学习至今的css,我掌握了什么?常见写法: translateX(<length-percentage>) //沿x方向移动一定的距离
  7. 基于 Vue 的商品主图放大镜方案 在做电商类应用时,难免会遇到商品主图实现放大镜效果的场景,现有的基于 Vue 的第三方包不多并且无法直接复用,今天,我来分享一种高稳定性的基于 Vue 的图片放大镜方法。 实现原理 放大镜的原理用一句话概括,就是根据小图上的鼠标位置去定位大图。 图1 原理图(以2倍放大为例) 相信原理图已经画…
  8. JavaScript重要概念之this指向 解析器在调用函数时,每次都会像函数内传递进一个隐含的参数this,this指向一个对象,这个对象称为函数的上下文对象。 根据函数调用方式的不同,this会指向不同的对象。 何时确定 何时 执行上下文生命周期中的创建阶段(生成变量对象,建立作用域链,确定this指向) this的指向是在函数被调用的时候确定的 …
  9. 【2019/09/18】前端面试 1)设计理念上的区别:Vue使用的是可变数据,而React更强调数据的不可变。所以应该说没有好坏之分,Vue更加简单,而React构建大型应用的时候更加棒 2)数据流的不同: Vue2.x 已经不鼓励组件对自己的 props 进行任何修改了。 所以现在我们只有 组件 <–> DOM 之间的双向绑定这一种。 React 从…
  10. 前端工程化:构建、部署、灰度 优秀的技术方案很多,大部分时候我们感觉只是在现有技术方案里面做排列组合、求笛卡尔积、选择最优解,做出一个最适合当前项目的方案。未来,人类应该编写最核心的业务代码、设置规则,由云端和AI来根据当前项目情况自动选择和调整到最优的架构和方案。 前言 前端项目的工程化,不只对开发层面的组件化、模…
  11. 如何架构一个中后台项目的前端部分(webpack 配置篇) (点击上方公众号,可快速关注) 文/劳卜 阅读本文需要 3.1 分钟这是劳卜的第 32 篇 原创文章 前言 上篇文章:如何架构一个中后台项目的前端部分(技术选型篇) 当我们的前端项目完成了技术选型阶段后,接下来所要做的便是项目的构建和配置。 虽然说用脚手架能够帮…
  12. 总结之CSS篇页面渲染时,dom元素所采用的 布局模型,可以通过 box-sizing 进行设置,根据计算高度的区域可分为:
  13. 基于Vue的轮播组件Vue-Awesome-Swiper Swiper是一个开源、免费、强大的触摸滑动插件。Vue-Awesome-Swiper是一个基于 Swiper4 和Vue 的轮播组件,Vue-Awesome-Swiper也支持服务端渲染和单页应用。下面雷雪松给大家介绍一下Vue的轮播组件Vue-Awesome-Swiper。 1、Vue-Awesome-Swiper安装 npm install vue-awesome-swiper 2、Vue-Awesome-Swiper…
  14. 使用 Node.js 在深度学习中做图片预处理最近在做一个和对象识别相关的项目,由于团队内技术栈偏向 JavaScript,在已经用 Python 和 Tensorflow 搭建好了对象识别服务器后,为了不再增加团队成员维护成本,所以尽可能将训练和识别之外的任务交给 Node.js…
  15. spring升级后Ajax请求出错(406 Not Acceptable) 由于业务需要,今天公司的 JDK 升级到 1.8 ,容器要求 Spring 也需要同时升级到 4.0+ ,解决完依赖的问题之后,代码启动成功,页面展示正常,但是遇到 Ajax 请求的地方就炸了,错误码 406 ,导致请求失败,内容无法正常返回, Debug 发现业务代码处理逻辑执行正常,怀疑在 Spring 对结果的渲染出错, F12 分析请求可以发现…
  16. goa – 基于中间件的轻量级golang web框架Goa是一个基于中间件的golang web框架,其整体思想来源于koajs,并且结合了golang的特性。Goa致力于成为 web 应用和 API 开发领域中的一个更轻量、更高效的框架。Goa 并没有捆绑任何中间件,而是提供了一套优雅的…
  17. MongoDB(三):执行 JS、界面工具 一、执行Js脚本 1.开启mongod服务 2.连接mongodb客户端,./mongo –host 192.168.80.128 –port 27017 3.创建数据库:use testdb1 4.创建表:db.createCollection(“testTable1″) 5.执行JS脚本插入数据:for(var i=0;i<100;i++) db.testTable1.insert({name:”Joe”,age:2…
  18. 前端 Web Workers 到底是什么 以前我们总说,JS是单线程没有多线程,当JS在页面中运行长耗时同步任务的时候就会导致页面假死影响用户体验,从而需要设置把任务放在任务队列中;执行任务队列中的任务也并非多线程进行的,然而现在HTML5提供了我们前端开发这样的能力 – Web Workers API,我们一起来看一看 Web Worker 是什么,怎么去使用它,在实际生产…
  19. 个推数据可视化之人群热力图、消息下发图前端开发实践随着互联网在各行各业的影响不断深入,数据规模越来越大,各企业也越来越重视数据的价值。作为一家专业的数据智能公司,个推从消息推送服务起家,经过多年的持续耕耘,积累沉淀了海量数据,在数据可视化领域也开…
  20. electron-vue项目笔记1——初始化项目 # 安装 vue-cli 和 脚手架样板代码 npm install -g vue-cli vue init simulatedgreg/electron-vue my-project # 安装依赖并运行你的程序 cd my-project yarn # 或者 npm install yarn run dev # 或者 npm run dev 复制代码 启动项目 npm run dev 复制代码 遇到的问题 1 – Webpack ReferenceError: process is n…
  21. vue组件间通讯方式 props 和 $emit 父组件向子组件传递数据是通过 prop 传递的,子组件传递数据给父组件是通过 $emit 触发事件来做到的 .sync 和 v-model 的使用(父子组件数据同步) $parent , $children 多层级传递数据,智能组件封装 $attrs (属性的集合)和 $listeners (方法的集合)。Vue 2.4 开始提供了 $attrs 和 $l…
  22. Gulp 学习小结 const gulp = require(‘gulp’); gulp.task(‘default’, function() { gulp.src(‘js/*.js’) .pipe(uglify()) .pipe(gulp.dest(‘dist’)); }); 复制代码 **注意:**默认的,task 将以最大的并发数执行,gulp 会一次性运行所有的 task 并且不做任何等待。如果你想要创建一个序列化的 task 队列,并以特…
  23. node express中使用HTML模板 一般我们在做node web项目的时候,想使用我们平时常用的html模板,express默认使用jade模板,本身是没有HTML的,那么如何实现呢? ejs模板配置 使用 var app = express(); app.set(‘views’, path.join(__dirname, ‘views’)); //设置视图引擎 app.set(‘view engine’, ‘ejs’); 复制代码 html模板配置 安装ejs npm in…
  24. 一文吃透 React SSR 服务端渲染和同构原理前段时间一直在研究react ssr技术,然后写了一个完整的ssr开发骨架。今天写文,主要是把我的研究成果的精华内容整理落地,另外通过再次梳理希望发现更多优化的地方,也希望可以让更多的人少踩一些坑,让跟多的人…
  25. JS基础–JS语法 JS对 大小写是敏感的 ,object和Object是不一样的 JS中大部分的 空格、回车是没有意义 的,而且连续的空格、回车会被默认成1个空格。 但JS中有一个地方不能加回车,就是函数的 return 后面,return后面只能在return的同一行写返回的内容,因为return后面的内容并不执行。 JS中的 (逗号,) 与 (分号;):…
  26. Git 版本控制的核心概念例如就在前几天,我大约只用了 20 分钟就解决了一个已经投入生产环境的重大问题(完全是我的错)。如果没有 Git,这可能需要几天的时间来修复。
  27. 小tips: 元素focus页面不滚动不定位的JS处理 byzhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8972 本文欢迎分享与聚合,全文转载就不必了,尊重版权,圈子就这么大,若急用可以联系授权。 一、问题的由来 有时候我们希望元素被focus的时候页面不发生滚动,例如我们点击一个按钮打开一个弹框,此时点击弹框中的关闭按钮隐藏弹框后,希望键…
  28. 面向对象之三个基本特征(JavaScript) 了解过面向对象的同学应该都知道,面向对象三个基本特征是:封装、继承、多态,但是对于这三个词具体可能不太了解。对于前端来讲接触最多的可能就是 封装 与 继承 ,对于多态来说可能就不是那么了解了。 封装 在说封装之先了解一下封装到底是什么? 什么是封装 封装 :将对象运行所需的资源封装在程序对象中——…

关注github前端日报 订阅精彩文章

前端日报栏目数据来自码农头条,每日分享互联网上热门的前端开发、移动开发、设计、资源和资讯等,为开发者提供动力,如果觉得内容对你有用,记得分享给你的小伙伴。进入码农头条查看更多


关注我

我的微信公众号:前端开发博客,在后台回复以下关键字可以获取资源。

  • 回复「小抄」,领取Vue、JavaScript 和 WebComponent 小抄 PDF
  • 回复「Vue脑图」获取 Vue 相关脑图
  • 回复「思维图」获取 JavaScript 相关思维图
  • 回复「简历」获取简历制作建议
  • 回复「简历模板」获取精选的简历模板
  • 回复「加群」进入500人前端精英群
  • 回复「电子书」下载我整理的大量前端资源,含面试、Vue实战项目、CSS和JavaScript电子书等。
  • 回复「知识点」下载高清JavaScript知识点图谱

每日分享有用的前端开发知识,加我微信:caibaojian89 交流