20190515 前端开发日报-前端开发博客

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

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