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

手牵手教你写 Vue 插件；前端性能优化JavaScript篇；Web开发的前5种编程语言；javascript – 谷歌圆环图表,包含未知数量的变量；Vue项目部署遇到的问题及解决方案；ember.js – ember(-cli)app可以触发window.onerror吗？；javascript – 浏览器刷新不做垃圾收集；JavaScript深入浅出异步编程二、promise原理

手牵手教你写 Vue 插件上一篇文章，我们介绍了如何构建一个 react 插件，今天我们说说如何构建 vue 插件准备工作由于与上一篇 react 插件文章使用的是相同的结构，代码测试、持续集成及发布 npm 包也都是一个套路，这里就不再敖述。下面主要说下不同的地方，let’s start :blush: 开发依赖包 { "devDependencie…
前端性能优化JavaScript篇关于前端性能优化的讨论一直都很多，包罗的知识也很多，可以说性能优化只有更好，没有最好。前面我写了一篇关于css优化的总结文章，今天再从javascript方面聊一聊。
Web开发的前5种编程语言 1. Python image Python是一种用于通用编程的高级编程语言，由Guido van Rossum创建并于1991年首次发布，Python作为一种编程语言，设计强调代码可读性的哲学，特别是使用重要的空白。此外，它提供的结构可以实现小规模和大规模的清晰编程。 Python是一种开源的易翻译的语言，强调高度可…
javascript – 谷歌圆环图表,包含未知数量的变量所以我正在尝试构建一个谷歌甜甜圈图,其中坐标的数量是可变的. 这是问题陈述,我必须制作一个图表,显示每个管理员有多少联系人被添加到数据库中. 示例数据： – 管理员1： – admin1@test.com 联系人数量： – 4 管理员2： – admin2@test.com 联系人数量： – 5 可以…
Vue项目部署遇到的问题及解决方案hash：也就是地址栏里的 # 符号。比如 http://www.example/#/hello，hash 的值为 #/hello。特点：hash 虽然出现 URL 中，但不会被包含在 HTTP 请求中，对后端不会产生什么影响，改变 URL 不会重载页面。
ember.js – ember(-cli)app可以触发window.onerror吗？ EmberJS可以很好地控制在其边界内发生的错误.您的Ember代码导致的错误应该全部汇入Ember特定的处理程序. 但是,浏览器JavaScript是一个复杂的野兽.在Ember之外发生的任何JavaScript错误都不会在内部捕获,只能由全局window.onerror公开.其中一些例子可能包括： >无限回调到本机函数,如setTimeout和addEventListe…
javascript – 浏览器刷新不做垃圾收集我在所有测试的浏览器上找到了这个 – 在Apple上的Window sand Safari上的IE,Firefox,Chrome和Safari. 据称,浏览器刷新,后退按钮或前向链接应该转储浏览器节点和javascript变量和对象等.这似乎不是WebGL的情况.我在开发一个需要大约100MB到200MB内存的复杂WebGL应用程序时首先注意到它.在开发过程中,我必须进行大量…
JavaScript深入浅出异步编程二、promise原理其实 Promise 本身并不具备异步的能力，而之所以这里需要单独开一篇说明其原理，是因为 Promise 在异步编程的过程中是一个不可或缺的一环。原因下面细说。在说promise之前，有必要先说下JS中的回调方式。比如下面： function doSomethingAfterTime(time, something) { setTimeout(fun, time)…
JavaScript深入浅出异步编程一、setTimeout和setInterval 最近开发了一个适用于iOS上的混合开发库，支持 JavaScript 的开发，开发完以后对于 JavaScript 中的一些特性有了更加深入的了解。也就有了这篇文章，后续还会陆续写一些其他的关于 JavaScript 的文章。异步编程一般跟多线程有关，而我们都知道 JavaScript 是单线程执行的，那何来异步 …
javascript – 如何实现视差滚动？这是链接供参考 http://readwrite.com/2013/02/07/robert-scoble-favorite-apps-facebook-gmail-youtube 如果我们滚动中心部分,在这个站点中心和右侧部分都滚动一次… 我完成了与此代码相同： – 这是HTML代码： – <div id="left" class="linked"> <img height="60…
html5 – 用于span标记的Twitter Bootstrap工具提示(不适用于标记) 我的问题是基于问题 Bootstrap tooltips not working 所以,解决方案是使用： jQuery的： $(" ").tooltip(); HTML： <a href="#" rel="tooltip" title="A nice tooltip">test</a> 这很完美. 我的问题是…
JavaScript数字前补0小技巧经常处理财务数据的朋友可能会遇到这样一个需求：给定一个数值，转换成固定的长度的字符串，不足的地方前面补零，比如 123 => 000123 。通常我们会尝试这样的做法： let num = 123; // 把数值转换成字符串 let numStr = num.toString(); let strLen = 5; // 计算差几个空缺的0 let spaceLen = strLen – numStr…
Nginx配置HTTP2.0Http2.0已经发布很久了，其优点前篇文章已经介绍过了HTTP2-0原理解析，今天我们来配置Nginx使其支持Http2.0
前端检测修复 iOS 拍照旋转问题苹果手机竖向拍照会为照片添加左旋90度的拍照方向，导致在网页中展示异常。前端解决这个问题需要提取图片的exif信息，并检测照片的拍照方向orientation，再通过canvas绘制图片并纠正旋转方向，最后输出图片的base64。 WEB前端环境可能在两种情况下遇到IOS拍照旋转问题，一是网页中通过input:type=file控件捕获照片…
【十大经典排序算法动画与解析，看我就够了！（配代码完全版）】全文=> 排序算法是《数据结构与算法》中最基本的算法之一。排序算法可以分为内部排序和外部排序。内部排序是数据记录在内存中进行排序。而外部排序是因排序的数据很大，一次不能容纳全部的排序记录，在排序过程中需要访问外存。常见的内部排序算法有：插入排序、希尔排序、选择排序、冒泡排序、归并排序、…
《探究 CSS 混合模式滤镜导致 CSS 3D 失效问题》今天在写一个小的 CSS Demo，一个关于 3d 球的旋转动画。如果利用mix-blend-mode混合模式，是否能让效果更上一层楼或者碰撞出一些其他火花？（by chokcoco ）
javascript – 在chrome内容脚本中未触发window onload事件我在Chrome扩展程序中使用内容脚本.内容脚本在“document_start”处注入. window.onload = function() {console.log("window onload event fired.");} 我在内容脚本中运行上面的代码,但是当我加载页面时,不会触发onload事件. 有什么不对的吗？请查看此代码 if (window.attachEven…
进军高级前端开发工程师必备的知识图谱全文（含脑图）为个人总结的关于高级前端开发工程师必备的技术能力，欢迎补充。全文结构如下：前沿：写在正文前的一些话。脑图：基于知识图谱的脑图，看知识图谱晕的可以欣赏脑图。知识图谱：脑图无法下手的，参…
【20190111 前端开发日报】CSS 三角实现；vue 源码学习(二) 实例初始化和挂载过程；NodeJs 系列：聊一聊 BOM；黄金搭档 — JS 装饰器（Decorator）与Node.js路由；Angular7入门总结篇；js表格…详情→
javascript – 模糊事件未触发 – 无法找到处理隐藏模糊文本字段的变通方法 TL; DR如何让这个 self-explanatory JSFiddle 工作？从 the W3C 开始： The blur event occurs when an element loses focus either via the pointing device or by tabbing navigation. This event is valid for the following elements: LABEL, INPUT, SELECT, TEXTAREA, and BUTTON. HTML的基本思路…
前端模块化之AMD与CMD原理(附源码) 可能现在初入前端的同学们，都直接就上手webpack了，而在几年前，没有现在这些丰富的工具，还是jquery打天下的时候，不借助node或程序却让不同js文件之间互相引用、模块化开发，确实是一件痛苦的事情。。。接下来会介绍两个有名的工具AMD（require.js）和CMD（sea.js），虽然已基本不用了，但是前端们还是需要知道以…
谈一谈javascript异步我们知道JavaScript的单线程的，这与它的用途有关。作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定JavaScript同时有两个…
用JavaScript实现栈与队列翻译：疯狂的技术宅原文： code.tutsplus.com/articles/da… 说明：本专栏文章首发于公众号：jingchengyideng 。栈和队列是web开发中最常用的两种数据结构。绝大多数用户，甚至包括web开发人员，都不知道这个惊人的事实。如果你是一个程序员，那么请听我讲两个启发性的例子:使用堆栈来组织数据，来实…
使用 React + Rxjs 实现一个虚拟滚动组件在我们的业务场景中遇到这么一个问题，有一个商户下拉框选择列表，我们简单的使用 antd 的 select 组件，发现每次点击下拉框，从点击到弹出会存在很严重的卡顿，在本地测试时，数据库只存在370条左右数据，这个量…
angularjs单向数据绑定,可以做角度吗？我有一个关于 angularjs 单向数据绑定的简单问题. 假设在同一页面中,我们有两个输入框A和B, 它们如何工作如下：输入A将改变输入B,但输入B不会改变输入A, 我知道angular有bindonce,但我想要的是单向数据绑定谢谢你的回答…..我试过,但所有的解决方案都失败了……… 我们可以添加类似指令…
javascript – Angular：委托模式.在ngFor中优化处理程序的方法例如：我需要输出一个列表.每个项目都有一个(click)处理程序,其中item对象就像参数一样. <ul> <li *ngFor="let item of myList"> <button (click)="clickHandler(item)"></button> </li> </ul> 此列表将经常动态更新：我将在…
javascript – jQuery live hover 我似乎无法将以下内容转换为实时悬停 $("li.favorite_item").hover( function () { $(this).append($(" <a href=’#’ class=’button’>x</a>")); }, function () { $(this).find("a:last").remove(); } ); 我试过了： $("li…
javascript – 检查iOS应用程序上的互联网连接,Cordova Phonegap 3.3.0无效我已经尝试过关于Cordova docs的 this 指南,但它似乎不起作用. 这是我的代码：我添加了<plugin name =“NetworkStatus”value =“CDVConnection”/>到config.xml. 这个脚本到我的index.html： <script type="text/javascript"> document.addEventListener("de…
javascript – 类型电子邮件不支持selectionrange 当我在文本框的焦点上时,我正试图将光标设置到开头的位置.这就是我所拥有的： $("ID").focus(function () { var input = this; setTimeout(function() { input.setSelectionRange(0, 0); }, 0); }); 但是每次我尝试加载脚本时都会收到此错误： Uncaught InvalidStateError: F…
【2018年12月份GitHub上最热门的Java开源项目】又到了公布 GitHub 上热门项目的时候啦~在 12 月的排行中，现在，一起来看看这些项目你使用过哪些呢？详见