20190515 前端开发日报

Vue导出excel表格;vue项目前端知识点整理;7中方式来减少webpack bundle体积;vue实现歌手列表字母排序,下拉滚动条侧栏排序实时更新;从头手写一个Promise;javascript的变量声明;vue中的scoped坑点;webpack4.x学习笔记五,js支持ES6;css支持less、浏览器兼容

  1. vue导出excel表格 Vue按钮导出Excel文件。 1、安装三个依赖 npm install -S file-saver xlsx npm install -D script-loader 2、项目中新建一个文件夹:(vendor—名字任取) 里面放置两个文件Blob.js和 Export2Excel.js。 百度云: pan.baidu.com/s/1vJ7RnNMK… 提取码:y91k 3、调用方法 exportExcel() {    &e...
  2. vue项目前端知识点整理在导航守卫中可以在next({})中设置replace: true来重定向到改路由,跟router.replace()相同
  3. 7中方式来减少webpack bundle体积 该方式对于开发者模式是很有必要的。该模式会自动将 剔除 空格、新的行,还有没有用到的代码。并且该模式下会将一些公共库例如 React 的调试代码排除在外。 实现 在进行项目打包的时候,针对webpack使用 -p 的标签同时 --mode production 。 webpack -p --mode production 复制代码 上面的代码...
  4. vue实现歌手列表字母排序,下拉滚动条侧栏排序实时更新 今天写项目的时候遇到了歌手排序的问题,联想到了我们平时的手机通讯录侧栏字母排序,按照ABCDE这样的顺序对名字进行排序 我们先来看看效果 那就用vue来实现一遍 首先新建一个vue页面,取名为helloworld.vue 在页面里写入内容 <template> <div class="hello"> <div clas...
  5. 从头手写一个Promise 在javascript的世界中,所有代码都是单线程执行的。由于这个“缺陷”,导致JavaScript的所有网络操作,浏览器事件,都必须是异步执行。 最开始我们可以用回调函数来解决这个问题, function callBack(){ console.log('回调') } setTimeout(callBack, 1000) // 回调 复制代码 但是随着业务的不断深入,难免会像陷入回调...
  6. javascript的变量声明 在代码中,声明变量是基础,但是在javascript中,经历了从var到let,const的变化,到底有什么本质上的区别呢? 本文的原文在我的博客中: https://github.com/RachelRen/blog/issues/25 欢迎star var 声明的提升 var 不管在哪里声明的,都会被当成在当前作用域顶部声明的。 变量提升是在预编译...
  7. vue中的scoped坑点 今天在覆盖iview组件样式的时候发现一个问题,就是无法覆盖组件原有的样式,最后在github的 issue 中找到了答案: 不要使用 scoped 属性。于是我查找了下关于 scoped 的文章。 我们假设把这种组件叫做模块私有组件,其他的未加scoped的叫做模块一般组件。通过查看DOM结构发现:vue通过在DOM结构以及css样式上加唯一不...
  8. webpack4.x学习笔记五,js支持ES6;css支持less、浏览器兼容 执行命令 npm install --save-dev babel-loader @babel/core @babel/preset-env 复制代码 修改webpack.config.js webpack.config.js修改后的内容 const path = require('path'); var htmlWebpackPlugin = require('html-webpack-plugin'); const extractTextPlugin = require("extract-text-webpack-plugin...
  9. 基于Vue的简易MVVM实现 本文可以帮助你了解什么? 了解MV*架构设计模式的演变历史 了解观察者设计模式 了解Vue的运行机制 了解基于Vue的简易MVVM实现过程 MV*设计模式的演变历史 我们先来花点时间想想,如果你是一个前端三贱客(Vue、React或者Angular)的开发者,你是有多么频繁的听到“MVVM”这个词,但你真正明白它的含...
  10. 详解Vue生命周期【上】 生命周期是理解Vue的一个非常重要的环节,初学Vue时可能会出现数据渲染的失败的错误,因此打算写两篇博客详细介绍Vue的生命周期: 单个组件的Vue生命周期(本文) 多个组件的Vue生命周期 Vue生命周期 1.1 beforeCreate() 说明 在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件...
  11. 前端密码加密的几种方式整理使用方式:encryptBase64(value, rsa);value代表要加密的值,rsa是前面初始化好的rsa变量。
  12. 轻松理解JavaScript原型到原型链 说到原型和原型链可能对于每个js初学者都是一件非常头疼的事,因为它们之间的关系太绕了,网上的相关文章也是不计其数。本文将从另一个角度去理解什么是原型和原型链。 我们先认识一下什么是实例和构造函数吧。 构造函数创建对象 我们先使用构造函数创建一个对象: // 构造函数使用的是大驼峰式写法(首字母大写)...
  13. Flutter:适用于移动、Web、嵌入式和桌面平台的便携式界面框架 作者: Flutter 团队 I/O 期间我们迎来 Flutter 框架的一个重要里程碑,因为我们的开发重点从移动平台扩展到了更广泛的设备和机型。在 I/O 大会上,我们发布了 web 版 Flutter 的首个技术预览版,宣布 Flutter 将为包括 Google Home Hub 在内的 Google Smart Display 平台提供技术支持,并迈出利用 Ch...
  14. 深入理解vue组件 在 html 语法中, table 标签内就必须是 tr 标签, tr 标签下就必须是 td 标签, ul 标签下就必须是li标签 等等 标签间的嵌套规则 在运用组件的时候,会出现想在这个标签内使用组件,但这个标签内并不支持的情况,如下 <div id="app"> <table> <tbody> <tr&...
  15. Vue项目使用pdf.js 前段时间有个支持在线学习功能的项目,有需要在线预览pdf格式课件的功能,我就想在线预览pdf多简单,因为大部分浏览器都支持打开pdf文件,所以直接放个iframe然后src是pdf文件的地址不就行了吗,so easy!!(什么?兼容性?兼容性是什么东西?(づ ̄3 ̄)づ不是Chrome别跟我说话) 本来以为就这样了,可惜,天不遂人...
  16. 【面试篇】寒冬求职之你必须要懂的Web安全随着互联网的发展,各种Web应用变得越来越复杂,满足了用户的各种需求的同时,各种网络安全问题也接踵而至。作为前端工程师的我们也逃不开这个问题,今天一起看一看Web前端有哪些安全问题以及我们如何去检测和防...
  17. JavaScript之this全面解析已经常见实例 this 关键字在 Javascript 中非常常见,但是很多开发者很难说清它到底指向什么。大部分人会从字面意思上去理解 this,认为 this 指向函数自身,实际上 this 是在运行时进行绑定的,并不是在编写时绑定,它的上下文取决于函数调 用时的各种条件。this 的绑定和函数声明的位置没有任何关系,只取决于函数的调用方式。 总...
  18. 渐进式配置webpack4单页面和多页面(一) 使用包的版本 webpack ->4.3.0 babel-loader ->8.0.5 npm ->6.4.1 webpack-cli ->3.3.1 复制代码 每个章节对应一个demo 一、初始化项目 进入项目目录,运行 npm init来创建项目 npm init 复制代码 终端输入完成后会自动创建一个package.JSON的文件。 { "name": "demo1"...
  19. 13个帮你提高开发效率的现代CSS框架本文将向你介绍一系列顶级CSS框架。有些人可能听说过,也可能对有些人是全新的。但它们都提供了各种有用的先进功能,可以改善你的工作流程。开始吧!
  20. 基于 HTML5 WebGL 的挖掘机 3D 可视化应用在工业互联网以及物联网的影响下,人们对于机械的管理,机械的可视化,机械的操作可视化提出了更高的要求。如何在一个系统中完整的显示机械的运行情况,机械的运行轨迹,或者机械的机械动作显得尤为的重要,因为...
  21. IE9以下不支持HTML5的解决方案我们可以使用 Sjoerd Visscher 创建的 "HTML5 Enabling JavaScript", " shiv" 来解决该问题:
  22. 像数学公式一样彻底简单理解JavaScript函数调用与this 指针 一直以来,大家都对函数的调用有很多的疑惑,特别是this指针的指向。 其实理解了核心的原理之后,就很容易理解, 甚至就是套用数学公式一样! 核心原理 让我们看看原始的函数调用语句,也就是call方法 function test(param){ console.log(this + " loves " + param); } 复制代码 test.ca...
  23. Vue原理之虚拟DOM和render函数 相关vue原理之虚拟dom参考资料: 1.如何实现一个 Virtual DOM 算法 2.《Vue原理解析之Virtual Dom》 3. Vue官方《渲染函数文档》 4. Vue渲染函数源码解析 最近学习Vue过程中对虚拟Dom以及Render函数原理不是很理解,虽然官方有介绍,但还是没能深入理解,所以找了点资料来补补,这一切都是为了深入掌...
  24. react——js源码解析 为了让大家深刻理解 JSX 的含义。有必要简单介绍了一下 JSX 稍微底层的运作原理,这样大家可以更加深刻理解 JSX 到底是什么东西,为什么要有这种语法,它是经过怎么样的转化变成页面的元素的。 思考一个问题:如何用 JavaScript 对象来表现一个 DOM 元素的结构,举个例子: <div class='box' id='content'> ...
  25. 优雅地使用TypeScript开发React Native应用 从React Native 0.57 版本开始,我们终于可以直接使用 TypeScript 开发,不需要任何额外的配置。本文主要介绍如何使用 TypeScript 优雅地开发 React Native 应用。 初始化项目 初始化项目之前,请确保已经按照React Native 中文网 的搭建开发环境文档完成了环境搭建 $ react-native init AwesomeProject 复制代...
  26. 第三届VueConf来啦,尤雨溪将出席你还记得吗?2017年520,我们在北京举办了首届VueConf,2018年1124,我们在杭州举办了第二届VueConf。
  27. 前端培训-初级阶段-场景实战(2019-05-09)-聊天框-发送框前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提升技术水平,打牢基础知识的中心思想,我们开课啦(...
  28. CSS box-sizing与background-clip解决背景显示范围的问题过去在学习CSS的时候,首要任务就是要理解“box model”,因为box model是CSS里头很重要的模型概念,描述了padding、margin、border与content的空间定位,今天的项目竟然卡在一个简单的小问题,因此就用一篇文章做...
  29. 在javascript中判断类型 一个字符串始终是一个字符串,所以这一块是很容易。除非使用new(new String)调用,否则typeof将返回“object”。所以也要包含那些可以使用的字符串instanceof。 // Returns if a value is a string function isString (value) { return typeof value === 'string' || value instanceof String; } 复制代码 Numbe...
  30. 10秒钟构建你自己的”造轮子”工厂 2019年github/npm工程化协作开发栈最佳实践灵魂拷问:你有发布过npm包吗? 发起过多人协作的github开源项目吗? 据统计,70%的前端工程师从来没发布过npm包 对于初中级前端,维护开源项目是比较遥远的, 而前端工具的变化太快,高级前端也难以确定自己能写...
  31. 60+ 位技术大拿和领域专家的实践经验分享,NJSD 全球大会最新议程发布 60+位技术大拿和领域专家 人工智能应用实践、互联网技术与架构、软件研发工程能力三大领域视角 10大专题论坛 详细议程 (截至5月12日,最新以网站为准) 6月7日 / 第一天 一、大会开幕及Keynote演讲 二、“智能技术前沿”专题论坛 ...
  32. JavaScript | 异步处理 所谓"异步",简单说就是一个任务分成两段,先执行第一段,然后转而执行其他任务,等做好了准备,再回过头执行第二段,比如,有一个任务是读取文件进行处理,异步的执行过程就是下面这样。 这种不连续的执行,就叫做异步。相应地,连续的执行,就叫做同步。 2 高阶函数 函数作为一等公民,可...
  33. 从 React Native 到 Flutter,移动跨平台方案的真相2018 年 12 月,Google 发布了 Flutter 1.0 正式版,似乎再次点燃了人们对移动跨平台开发的热情。上一次出现类似的情况,是在 15 年年初,Facebook 发布 React Native 的时候。四年不到的时间里,有两家大公司相...
  34. What's New in JavaScript(文字版) 前几天 Google IO 上 V8 团队为我们分享了《What's New in JavaScript》主题,分享的语速很慢推荐大家可以都去听听就当锻炼下听力了。看完之后我整理了一个文字版帮助大家快速了解分享内容,嘉宾主要是分享了以下几点: JS 解析快了 2 倍 async 执行快了 11 倍 平均减少了 20% 的内存使用 ...
  35. jQuery源码解析之width() 一、在讲之前,先弄清 boxSizing 属性 (1)box-sizing 是默认值 "content-box" <body> <script src="jQuery.js"></script> <div id="pTwo" style="width: 55px; border:1px red solid;">这是divTwo</div> <script> $(&q...
  36. 深入理解 JS 作用域和作用域链》JavaScript 中有一个被称为作用域(Scope)的特性。虽然对于许多新手开发者来说,作用域的概念并不是很容易理解,本文我会尽我所能用最简单的方式来解释作用域和作用域链,希望大家有所收获! (by 浪里行舟)

    深入理解 JS 作用域和作用域链

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

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

原文:20190515 前端开发日报 ,未经许可,禁止转载。
来源:前端开发博客 (http://caibaojian.com/fe-daily-20190515.html)

发表评论

请登录后发表评论: