20180401 前端开发日报

从八道面试题看JavaScript DOM事件机制;Vue.js最佳实践(五招让你成为Vue.js大师);秀几种 CSS 背景渐变图片 transtion 过渡效果技巧;WebSocket系列之JavaScript字符串如何与二进制数据间进行互相转换;js调试的那点事—-解决循环debugger;webpack4.0优化那些事儿;webpack4.0打包优化策略整理;前端每周清单年度总结与盘点

  1. 从八道面试题看JavaScript DOM事件机制 As we all know,事件机制其实很简单,无非 冒泡 和 捕获 这两点,笔者不再赘述,网上相关文章一大堆,下面让我们直接看面试题 题目一到七,统一设置css .test2 { height: 50px; } 题目一 <div class="test1"> <div class="test2"></div> </div>...
  2. Vue.js最佳实践(五招让你成为Vue.js大师)本文面向对象是有一定Vue.js编程经验的开发者。如果有人需要Vue.js入门系列的文章可以在评论区告诉我,有空就给你们写。 对大部分人来说,掌握Vue.js基本的几个API后就已经能够正常地开发前端网站。但如果你想更...
  3. 秀几种 CSS 背景渐变图片 transtion 过渡效果技巧 background-image 不支持 css3 transition,当 CSS3 gradient 渐变作为背景图片存在的时候,直接设置 transition 是不会有过渡效果的,那该怎么办呢?
  4. WebSocket系列之JavaScript字符串如何与二进制数据间进行互相转换 概述 上一篇博客我们说到了如何进行数字类型(如Short、Int、Long类型)如何在JavaScript中进行二进制转换,如果感兴趣的可以可以阅读本系列第二篇博客——WebSocket系列之JavaScript中数字数据如何转换为二进制数据。这次,我们来说下
  5. js调试的那点事----解决循环debugger 作为前端开发来说, js调试 是一项必备的技能。无论是要查找bug,还是想了解别人代码的逻辑,js调试都是一种可以帮助你节省时间的方法。 这是我平时使用的chrome的调试界面。选择它的原因,一是功能真的十分强大,第二个就是新特性支持的比较快(尤其是Google Chrome Canary 版,拥有新版 Chrome 的最新功能...
  6. webpack4.0优化那些事儿 module: { rules: , include: path.resolve(__dirname, 'src'), exclude: /node_modules/ } ] } 'babel-loader?cacheDirectory' You can a...
  7. webpack4.0打包优化策略整理 webapck4 新特性介绍-参考资料 当前依赖包的版本 1.优化loader配置 1.1 缩小文件匹配范围(include/exclude) 通过排除node_modules下的文件 从而缩小了loader加载搜索范围 高概率命中文件 module: { rules: [ { test: /.js$/, use: 'babel-lo...
  8. 前端每周清单年度总结与盘点 在过去的八个月中,我几乎只做了两件事,工作与整理前端每周清单。虽然每周的内容不多,读完不过五分钟;却需要数十倍的时间去翻译、整理、发布,更多上数倍的时间阅读、跟踪各大平台的资讯、文章等。不得不承认,当兴趣式阅读变成了任务式,会磨去些原有的乐趣;并且,在这个知识
  9. 前端进阶系列-目录 之前我分享了文章《大厂前端面试考什么》,你们一定很想看答案吧?说实话,答案我是有,在准备面试的时候会时不时翻看,但内容比较多,比较凌乱,也不能指望我在一篇文章中写完。 我打算写一系列文章来进行解答面试中碰到的问题。目前只有目录,赶时间的同学可以根据关键词自行搜
  10. Nodejs 是如何高效的获取时间戳而不影响性能的? 这个问题涉及到了 nodejs timer 模块的设计和原理、timer 模块的优化、timer 模块的发展历程。
  11. 前端拖拽组件优化 为什么弃用Html5 drag Api 之前我也用的Drag Api写了一个draggable组件,使用起来总觉得体验有点不好。 先来看有赞做的类似的拖拽UI组件,它引用的sortablejs库封装了Drag Api
  12. JavaScript常用DOM操作方法和函数】本文分享了一些JavaScript常用的代码,有DOM操作、CSS操作、对象(Object对象、Array对象、Number对象、String对象、Math对象、JSON对象和Console对象)操作,值得收藏。 #前端开发博客# ​​​

    JavaScript常用DOM操作方法和函数
  13. Javascript 中的克隆(拷贝)问题 克隆(也就是拷贝)是javascript中很重要也很常见的问题。克隆就是将一个对象里的属性、方法等复制到另一个对象中,且互不影响(即克隆之后,对一个对象进行改动,不会影响到另一对象)。我们今天就来讨论一下原生js中克隆的问题。 action~ 现在有一个对象 var obj = { name: '隔壁老王', age: 60, ...
  14. React 16.3.0 发布,构建用户界面的 JavaScript 库 React 16.3.0 已发布,React 是 Facebook 推出的一个为数据提供渲染为 HTML 视图,用来构建用户界面的开源 JavaScript 库。 React 视图通常采用包含以自定义 HTML 标记规定的其他组件的组件渲染。React 为程序员提供了一种子组件不能直接影响外层组件("data flows down")的模型,数据改变时对 HTML 文档的...
  15. 你应该知道的JS —— 对象 当对象之间相加 obj1 + obj12 或相减 obj1 - obj2 或者 alert(obj) 会发生什么?。 当某个对象出现在了需要原始类型才能进行操作的上下文时,JavaScript 会将对象转换成原始类型。在进行转换中的对象有有特殊的方法 对于对象而言,不存在布尔转换,因为所有对象在上下文中布尔值都为 ture ,所以只有数字和字符串转...
  16. 别再对 Angular 表单的 ControlValueAccessor 感到迷惑 原文链接: Never again be confused when implementing ControlValueAccessor in Angular forms 如果你正在做一个复杂项目,必然会需要自定义表单控件,这个控件主要需要实现 ControlValueAccessor 接口(译者注:该接口定义方法可参考 API 文档说明 ,也可参考 Angular 源码定义 )。网上有大量文...
  17. js字符串常见的一些方法 自我学习记录(一直会更新:hibiscus:) 字符串的十四个方法 : charAt( index )、charCodeAt( index )、concat( str, str, ... )、indexOf( item , index )、lastIndexOf( item , index )、substring( stratIndex , stopIndex )、str.substr( st...
  18. ES6提示和技巧,使您的代码更清洁,更短,更易于阅读 模板字面量(Template Literals) 模板字面量使得使用字符串比以前更容易。它们以反引号开始,可以使用${variable}插入变量。比较这两行代码: var fName = 'Peter', sName = 'Smith', ag
  19. 漫谈Vue组件库开发 2017年是Vue.js大爆发的一年,React迎来了一个强有力的竞争对手,王者地位受到挑战(撰写此文时github上Vue与React的star数量已逼近)。我们团队这一年有十多个大型项目采用了Vue技术栈,在开发效率、页面性能、可维护性等方面都有不错的收效
  20. 巧解 JS 原型链 本文章带有强烈的个人风格主义,我以自己的方式理解原型链,还请各位路过的大佬们,多多指点,有啥不懂直接提出来,大家多多交流。 构造函数: 什么是构造函数? var afunc = function (name) { // afunc就是构造函数!!! this.name = name this.get = function() { return this.name; }; } var ...
  21. Vue.2.0开发后台系统,采坑系列组件篇(一) 前言 刚刚接手了一个公司内部的后台系统项目,刚开始的时候真的是一步一个坑,经过一周的加班,基本把常用的功能和组件都完成了,基本缓了一口气。 技术栈: ivew + vue + vue-cli 废话不多说,下面总结一下封装组件的一些问题 大致页面如下 组件的封
  22. JSBridge的原理 关于 JSBridge,绝大多数同学最早遇到的是微信的 WeiXinJSBridge(现在被封装成 JSSDK),各种 web 页面可以通过 Bridge 调用微信提供的一些原生功能,为用户提供相关的功能。其实,JSBridge 很早就出现在软件开发中,在一些桌面软件中很早就运用了这样的形式,多用在通知、产品详情、广告等模块中,然后这些模块中,使...
  23. 20180331 前端开发日报】精美的 Node.js 框架;来自InfoQ的Web开发趋势报告;JS灵巧判断7种类型的方式;【Python3网络爬虫开发实战】6-ajax数据爬取-4-分析Ajax爬取今日头条街拍美图;前端到底要不要算法?;前端入行的这三年 | 掘金技术征文...详情→ ​​​

    20180331 前端开发日报
  24. 2017年前端工作小结,个人踩坑之旅,前端学习者的杂谈 工作差1月就要满一年了,这一年中水平并没有直接性的提升,以至于初学前端时无法探究的诸多问题,依旧没有头绪,但工作就是的一次次跳坑和爬坑,它终究是带给了我一些... 关于工作,在一家创业公司(没人带-_-),日常开发vue,react,react-nativ
  25. WebAssembly中的内存(为什么它比你想象的更安全) 这是此系列的第二篇文章: Creating a WebAssembly module instance with JavaScript Memory in WebAssembly (and why it’s safer than you think) WebAssembly table imports… what are they? WebAssembly中的内存与JavaScript中的内存稍有不同。使用WebAssembly,您可以直接访问原始字节...并且...
  26. jsonp 的原理和采用 Promise API 的实现 这篇文章通过实现一个生产环境中可用的,Promise API 封装的 jsonp 来讲解 jsonp 的原理。 由于浏览器跨域限制的存在,通常情况下,我们不可以通过 AJAX 发起跨域请求。但考虑如下事实: img link script 标签是可以跨域的 script 标签里的代码在下载完成后就会被解析执行 script 标签请求的不一定是一...
  27. vuex 源码:深入 vuex 之 module 前言 store 将应用的状态集中起来,但如果应用变得非常复杂时,即状态非常的多时,store 就有可能变得相当臃肿。module 能够帮 store 划分了模块,每个模块都拥有自己的 state、getter、mutation、action 和 module
  28. Javascript中的魔鬼 写作意图 这篇文章用于总结一些javascript语言中常见的易混淆点。 call | apply | bind 在js中,最诡异莫测的莫过于this了,理解的不够深入或是应用场景略微复杂,使用时就会出现各种意想不到的错误。所以,在很多时候,我们需要手动指定上
  29. 使用js开发数据库前端很多时候还是需要保存一些数据的,这里的保存指的是长久的保存。以前的思想是把数据保存在cookie中,或者将key保存在cookie中,将其他数据保存在服务器上。 这几个场景用处很多,也非常的成熟好用。但是我还...
  30. WebSocket系列之字符串如何与二进制数据间进行互相转换 概述 上一篇博客我们说到了如何进行数字类型(如Short、Int、Long类型)如何在JavaScript中进行二进制转换,如果感兴趣的可以可以阅读本系列第二篇博客——WebSocket系列之JavaScript中数字数据如何转换为二进制数据。这次,我们来说下

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

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

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