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

JavaScript 数组遍历方法的对比；两行 CSS 代码实现图片任意颜色赋色技术；JS原生交互；从 webpack 到全面拥抱 Parcel #2 让 Parcel 支持 vue；如何在不同的项目中共用前端资源,告别复制粘贴；优质前端频道汇聚；如果你遇到了 webpack-dev-server 在 UC 浏览器里跑不起来的问题；小tips: 0学习成本实现HTML元素粘滞融合效果

JavaScript 数组遍历方法的对比 JavaScript 发展至今已经发展出多种数组的循环遍历的方法,不同的遍历方法运行起来那个比较快,不同循环方法使用在那些场景,下面将进行比较: 各种数组遍历的方法 for 语句代码: var arr = for(var i = 0, len = arr.length; i < len; i++){ console.log(arr ) } 这是标准for循环的写法也…
两行 CSS 代码实现图片任意颜色赋色技术很久之前在张鑫旭大大的博客看到过一篇 PNG格式小图标的CSS任意颜色赋色技术，当时惊为天人，感慨还可以这样玩，私底下也曾多次想过有没有其他方法可以实现，又或者不仅仅局限于 PNG 图片。    mix-blend
JS原生交互可以通过本地文件、url等方式。 NSString *htmlPath = pathForResource:@"index" ofType:@"html"]; NSURLRequest *request = ]; ; Native调用JavaScript Native调用…
从 webpack 到全面拥抱 Parcel #2 让 Parcel 支持 vue 原文发表于：www.rails365.net 相关链接（网友提供）： parcel-plugin-vue parcel-demo 默认情况下 Parcel 是支持 React 和 Preact，可以通过查看下面这个页面得知。 https://parceljs.org/recipes.html 要让 Parcel 支持 vue，需要简单处理一下。（下面的方法是我尝试的，如果有更好的，…
如何在不同的项目中共用前端资源,告别复制粘贴前言随着公司前端项目的增多, 大家会发现各个项目中很多资源都是是大同小异的，这就引发了一个话题，如何跨项目共用前端资源, 这里的资源泛指前端涉及到的所有静态资源, 常见的有 HTML/CSS/JS/图片等等. 所谓共用前端资源, 就是将公共的前端资源提取出来
优质前端频道汇聚在悠久历史长河中，用以承载对一个人崇敬的词汇有很多；但被尊以“某某下走狗”这般殊荣的，却寥寥无几；据我所知的，知名者有这么两位：一是：明代书画大家徐渭—— 据悉齐白石有一方印章，刻有“青藤门下走狗”，以表达对他(字文长，别号青藤)的崇敬之情；而另一位即是王小波，开始的出处已无从考证，不过这已经衍生为王小波…
如果你遇到了 webpack-dev-server 在 UC 浏览器里跑不起来的问题 What kind of change does this PR introduce? bugfix Did you add or update the examples/? No Summary There were prior issues regardi
小tips: 0学习成本实现HTML元素粘滞融合效果小tips: 0学习成本实现HTML元素粘滞融合效果这篇文章发布于 2017年12月21日，星期四，01:23，归类于 SVG相关。阅读 914 次, 今日 561 次
Web调试工具Charles使用心得目录一、安装与使用二、抓手机的请求包 http请求抓包 https请求抓包 iPhone手机抓https包安卓（小米）手机抓https包三、用本地文件替换线上文件替换测试环境的文件替换生产环境的文件（跨域）四、其他筛选指定
白话Angular词汇在打包项目的时候提前编译好应用，打包好之后可以直接启动，而不是把编译器打包在应用中用的时候再编译。生产环境使用。即时 (just-in-time, JiT) 编译浏览器中启动并编译所有的组件和模块，动态运行应用程序。开发过程中使用。指令 (directive) 告诉Angular怎么创建或改变HTML 元素。分为三类： …
JS Native：覆盖阿里几乎所有产品的全新开发模式，到底有何高明之处（一）现在概念上的APP诞生在Apple推出iOS，Google推出Android之时，从这时候开始，便有了App开发工程师这个职位，比如iOS工程师、Android工程师等等。最开始的App开发只有原生开发这个概念，但自从H5广泛流行后，一种效率更高的开发模式Hybrid应运而生，它就是“Hybrid模式”，时至今日，Hybrid模式也不是那么的“先进”…
canvas入门里，你没注意到的那些知识前言本文写在七月底，进来不加班就整理了一下，一些非常基础的知识，对于canvas刚入门的人来说，值得阅读一下。来个气势如虹的开头与看各种文章相比，我更喜欢数学里的逻辑；与学习各种日新月异的框架相比，我…
用vue开发一个所谓的数独1.前言最近的后台管理系统页面，功能暂时没有新的需求，就在想首页放什么东西，最近我想到的就是放个所谓的数独，为什么是所谓的数独，因为规则不同于标准的数独，只要求每一行每一列数字不一样就可以了！这个实…
一步一步分析vue之$mount(1) 如果你的option里面没有 render 函数，那么，通过 compileToFunctions 将HTML模板编译成可以生成VNode的Render函数。 new 一个 Watcher 实例，触发 updateComponent 方法。生成vnode，经过patch，把vnode更新到dom上。由于篇幅有限，这里先说前两步，第三步下篇说。好，下面具体的说。首先，我们来到 $moun…
Mobx React 最佳实践在这一篇文章里，将展示一些使用了mobx的React的最佳实践方式，并按照一条一条的规则来展示。在你遇到问题的时候，可以依照着这些规则来解决。这篇文章要求你对于mobx的stores有基本的理解，如果没有的话请先阅读官方文档。 stores 代表着UI状态永远记住，你的stores代表着你的UI状态，这就意味着，当你将你…
这个CSS问题屏幕前的你是否熟悉，然后懵逼，最后放弃本文作者：IMWeb·结一原文出处：IMWeb社区未经同意，禁止转载当决定写这篇博文时候，突然一道闪电从脑海劈过，于是临时决定将这个熟悉然后到懵逼最后到放弃的问题分为两部分。闲话少说，直接上题：要求如下：三个橙色圆的大小为60px，固定不变所有间隙相等，也
Javascript中JSON数据分组优化实践现有一堆数据，我需要按时间进行分组，以便前端视图呈现 [ {"date":"2017-12-22","start_time":"10:00:00","end_time":"10:00:00","status":"Performance Time"}, {"date":"2017-12-22","start_time&q…
什么是Node.js 有关Node.js的技术报道越来越多,Node.js的写法也是五花八门,有写成 NodeJS的,有写成Nodejs的,到底哪一种写法最标准呢,我们不妨遵循官方的说法。在Node.js的官方网站上, 一直将其项目称之为”Node“或者”Node.js“ , 没有发现其他的说法,”Node“用的最多,考虑到Node这个单词的意思和用途太广泛,容易让开发人员…
回归本源：JavaScript 之中的值和引用阅读花费时间：2分钟这是一个非常简短的值和引用的解释。首先，对于每一个JavaScript开发者来说，值(value)和引用(reference)的定义，一般是从一些bug被引出的，而且在面试中也经常会被问到。这篇文章中也将简单的涵盖这些基本概念。别先急着往下滑，你知道下面这些代码会有什么结果吗？ console.log([10…
坚定地使用 CSS Custom Properties 好久没译文，最近看到这篇 Getting Hardboiled with CSS Custom Properties。觉得不错，翻译出来给大家。现在 CSS 新特性层出不穷，比如 Flex，CSS Grid 等等，我们是不是也可以按照这个思路使用，而不是借助预处理工具呢？自定义属性（Custom Properties）是一个很有魅力的 CSS 新特性，现代浏览器…
Webpack实战-为单页应用生成HTMLWebpack实战-为单页应用生成 HTML 引入问题在简单的项目里因为只输出了一个 bundle.js 文件，所以手写了一个 index.html 文件去引入这个 bundle.js，才能让应用在浏览器中运行起来。在实际项目中远比这复杂，一…
手把手带你走进下一代的ES6模块打包工具—Rollup本文一共七个例子，由浅入深带你熟悉Rollup。首先把 rollup-demos 这个示例仓库下载到本地 {代码…} 准备就绪，正文开始简介以下内容基于Webpack和Rollup这两个打包工具来展开。工具的使用是分场景的，Rollup…
Angular 开发学习 00 – 序现在开始一个新的系列——《Angular 开发学习》。这个系列与之前的 Qt 完全不同，从 C++ 切换到 Web。其实豆子的工作一直是在 Web 方面，所以一直会说，Qt 只是业余爱好。而现在终于会把工作的部分拿上来写一些文章。对于之前关心 Qt 的读者，可能跨度有些大，不过按照我的计划，Qt 的系列还是会继续写下去——毕竟对于一个…
easywebpack 3.5.0 新特性一览: dll工程化和多进程编译
深入理解 CSS：字体度量、line-height 和 vertical-align 本文为饥人谷讲师方方原创文章，首发于前端学习指南。这是一篇译文，对 inline 和 inline-block 的元素剖析非常给力。原文：Deep dive CSS: font metrics, line-height and vertical-alig
React源码解析(四):事件系统笔者将编写"React源码解析"系列文章三到四篇，阐述React内部的机制。欢迎大家关注我的掘金账号，以便能及时看到最新的文章更新推送。在前面三篇文章中，我们阐述了react组件的构成与生命周期，setState的机制。这次我们来谈谈React的事件处理。
#前端技术#【2018 年你需要知道的 Vue.js 组件库】详见： 2018 年来临之际，继最热的 React 组件库和 Angular 组件库之后，分享 11 个流行、实用的 Vue.js 组件库打造你的下一个 UI 界面应用。
【20171222 前端开发日报】如何用 CSS 网格快速做出网站原型；ES6 Promise 用法（我见过最简洁优秀的文章）；大前端神器安利之 Puppeteer；Json最强攻略；20171221 前端开发日报；WebSocket之JavaScript例子；javascript打怪升级–把业务逻…详情→
【前端开发需要学什么？web前端开发学习路线】web前端开发应该要学习什么知识，有什么前端学习路线，前端工程师技能，本文将带你从HTML到HTML5，从CSS到CSS3，从JavaScript到jQuery，如何快速学会前端开发这条路。 #前端开发博客#