20171223 前端开发日报

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

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

    2018 年你需要知道的 Vue.js 组件库
  27. 20171222 前端开发日报】如何用 CSS 网格快速做出网站原型;ES6 Promise 用法(我见过最简洁优秀的文章);大前端神器安利之 Puppeteer;JSON最强攻略;20171221 前端开发日报;WebSocket之JavaScript例子;javascript打怪升级–把业务逻...详情→ ​​​

    20171222 前端开发日报
  28. 前端开发需要学什么?web前端开发学习路线】web前端开发应该要学习什么知识,有什么前端学习路线,前端工程师技能,本文将带你从HTML到HTML5,从CSS到css3,从JavaScript到jQuery,如何快速学会前端开发这条路。 #前端开发博客# ​​​

    前端开发需要学什么?web前端开发学习路线

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

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

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