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

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

从八道面试题看JavaScript DOM事件机制 As we all know,事件机制其实很简单，无非冒泡和捕获这两点，笔者不再赘述，网上相关文章一大堆，下面让我们直接看面试题题目一到七，统一设置css .test2 { height: 50px; } 题目一 <div class="test1"> <div class="test2"></div> </div>…
Vue.js最佳实践（五招让你成为Vue.js大师）本文面向对象是有一定Vue.js编程经验的开发者。如果有人需要Vue.js入门系列的文章可以在评论区告诉我，有空就给你们写。对大部分人来说，掌握Vue.js基本的几个API后就已经能够正常地开发前端网站。但如果你想更…
秀几种 CSS 背景渐变图片 transtion 过渡效果技巧 background-image 不支持 CSS3 transition，当 CSS3 gradient 渐变作为背景图片存在的时候，直接设置 transition 是不会有过渡效果的，那该怎么办呢？
WebSocket系列之JavaScript字符串如何与二进制数据间进行互相转换概述上一篇博客我们说到了如何进行数字类型（如Short、Int、Long类型）如何在JavaScript中进行二进制转换，如果感兴趣的可以可以阅读本系列第二篇博客——WebSocket系列之JavaScript中数字数据如何转换为二进制数据。这次，我们来说下
js调试的那点事—-解决循环debugger 作为前端开发来说， js调试是一项必备的技能。无论是要查找bug，还是想了解别人代码的逻辑，js调试都是一种可以帮助你节省时间的方法。这是我平时使用的chrome的调试界面。选择它的原因，一是功能真的十分强大，第二个就是新特性支持的比较快（尤其是Google Chrome Canary 版，拥有新版 Chrome 的最新功能…
webpack4.0优化那些事儿 module: { rules: , include: path.resolve(__dirname, ‘src’), exclude: /node_modules/ } ] } ‘babel-loader?cacheDirectory’ You can a…
webpack4.0打包优化策略整理 webapck4 新特性介绍-参考资料当前依赖包的版本 1.优化loader配置 1.1 缩小文件匹配范围(include/exclude) 通过排除node_modules下的文件从而缩小了loader加载搜索范围高概率命中文件 module: { rules: [ { test: /.js$/, use: ‘babel-lo…
前端每周清单年度总结与盘点在过去的八个月中，我几乎只做了两件事，工作与整理前端每周清单。虽然每周的内容不多，读完不过五分钟；却需要数十倍的时间去翻译、整理、发布，更多上数倍的时间阅读、跟踪各大平台的资讯、文章等。不得不承认，当兴趣式阅读变成了任务式，会磨去些原有的乐趣；并且，在这个知识
前端进阶系列-目录之前我分享了文章《大厂前端面试考什么》,你们一定很想看答案吧？说实话，答案我是有，在准备面试的时候会时不时翻看，但内容比较多，比较凌乱，也不能指望我在一篇文章中写完。我打算写一系列文章来进行解答面试中碰到的问题。目前只有目录，赶时间的同学可以根据关键词自行搜
Nodejs 是如何高效的获取时间戳而不影响性能的？这个问题涉及到了 nodejs timer 模块的设计和原理、timer 模块的优化、timer 模块的发展历程。
前端拖拽组件优化为什么弃用Html5 drag Api 之前我也用的Drag Api写了一个draggable组件，使用起来总觉得体验有点不好。先来看有赞做的类似的拖拽UI组件，它引用的sortablejs库封装了Drag Api
【JavaScript常用DOM操作方法和函数】本文分享了一些JavaScript常用的代码，有DOM操作、CSS操作、对象（Object对象、Array对象、Number对象、String对象、Math对象、JSON对象和Console对象）操作，值得收藏。 #前端开发博客#
Javascript 中的克隆（拷贝）问题克隆（也就是拷贝）是javascript中很重要也很常见的问题。克隆就是将一个对象里的属性、方法等复制到另一个对象中，且互不影响（即克隆之后，对一个对象进行改动，不会影响到另一对象）。我们今天就来讨论一下原生js中克隆的问题。 action~ 现在有一个对象 var obj = { name: ‘隔壁老王’, age: 60, …
React 16.3.0 发布，构建用户界面的 JavaScript 库 React 16.3.0 已发布，React 是 Facebook 推出的一个为数据提供渲染为 HTML 视图，用来构建用户界面的开源 JavaScript 库。 React 视图通常采用包含以自定义 HTML 标记规定的其他组件的组件渲染。React 为程序员提供了一种子组件不能直接影响外层组件（"data flows down"）的模型，数据改变时对 HTML 文档的…
你应该知道的JS —— 对象当对象之间相加 obj1 + obj12 或相减 obj1 – obj2 或者 alert(obj) 会发生什么？。当某个对象出现在了需要原始类型才能进行操作的上下文时，JavaScript 会将对象转换成原始类型。在进行转换中的对象有有特殊的方法对于对象而言,不存在布尔转换,因为所有对象在上下文中布尔值都为 ture ,所以只有数字和字符串转…
别再对 Angular 表单的 ControlValueAccessor 感到迷惑原文链接： Never again be confused when implementing ControlValueAccessor in Angular forms 如果你正在做一个复杂项目，必然会需要自定义表单控件，这个控件主要需要实现 ControlValueAccessor 接口（译者注：该接口定义方法可参考 API 文档说明，也可参考 Angular 源码定义）。网上有大量文…
js字符串常见的一些方法自我学习记录（一直会更新:hibiscus:）字符串的十四个方法： charAt( index )、charCodeAt( index )、concat( str, str, … )、indexOf( item , index )、lastIndexOf( item , index )、substring( stratIndex , stopIndex )、str.substr( st…
ES6提示和技巧，使您的代码更清洁，更短，更易于阅读模板字面量(Template Literals) 模板字面量使得使用字符串比以前更容易。它们以反引号开始，可以使用${variable}插入变量。比较这两行代码： var fName = 'Peter', sName = 'Smith', ag
漫谈Vue组件库开发 2017年是Vue.js大爆发的一年，React迎来了一个强有力的竞争对手，王者地位受到挑战（撰写此文时github上Vue与React的star数量已逼近）。我们团队这一年有十多个大型项目采用了Vue技术栈，在开发效率、页面性能、可维护性等方面都有不错的收效
巧解 JS 原型链本文章带有强烈的个人风格主义，我以自己的方式理解原型链，还请各位路过的大佬们，多多指点，有啥不懂直接提出来，大家多多交流。构造函数：什么是构造函数？ var afunc = function (name) { // afunc就是构造函数！！！ this.name = name this.get = function() { return this.name; }; } var …
Vue.2.0开发后台系统，采坑系列组件篇（一）前言刚刚接手了一个公司内部的后台系统项目，刚开始的时候真的是一步一个坑，经过一周的加班，基本把常用的功能和组件都完成了，基本缓了一口气。技术栈： ivew + vue + vue-cli 废话不多说，下面总结一下封装组件的一些问题大致页面如下组件的封
JSBridge的原理关于 JSBridge，绝大多数同学最早遇到的是微信的 WeiXinJSBridge（现在被封装成 JSSDK），各种 Web 页面可以通过 Bridge 调用微信提供的一些原生功能，为用户提供相关的功能。其实，JSBridge 很早就出现在软件开发中，在一些桌面软件中很早就运用了这样的形式，多用在通知、产品详情、广告等模块中，然后这些模块中，使…
【20180331 前端开发日报】精美的 Node.js 框架；来自InfoQ的Web开发趋势报告；JS灵巧判断7种类型的方式；【Python3网络爬虫开发实战】6-Ajax数据爬取-4-分析Ajax爬取今日头条街拍美图；前端到底要不要算法？；前端入行的这三年 | 掘金技术征文…详情→
2017年前端工作小结，个人踩坑之旅，前端学习者的杂谈工作差1月就要满一年了，这一年中水平并没有直接性的提升，以至于初学前端时无法探究的诸多问题，依旧没有头绪，但工作就是的一次次跳坑和爬坑，它终究是带给了我一些… 关于工作，在一家创业公司（没人带-_-），日常开发vue，react，react-nativ
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，您可以直接访问原始字节…并且…
jsonp 的原理和采用 Promise API 的实现这篇文章通过实现一个生产环境中可用的，Promise API 封装的 jsonp 来讲解 jsonp 的原理。由于浏览器跨域限制的存在，通常情况下，我们不可以通过 AJAX 发起跨域请求。但考虑如下事实： img link script 标签是可以跨域的 script 标签里的代码在下载完成后就会被解析执行 script 标签请求的不一定是一…
vuex 源码：深入 vuex 之 module 前言 store 将应用的状态集中起来，但如果应用变得非常复杂时，即状态非常的多时，store 就有可能变得相当臃肿。module 能够帮 store 划分了模块，每个模块都拥有自己的 state、getter、mutation、action 和 module
Javascript中的魔鬼写作意图这篇文章用于总结一些javascript语言中常见的易混淆点。 call | apply | bind 在js中，最诡异莫测的莫过于this了，理解的不够深入或是应用场景略微复杂，使用时就会出现各种意想不到的错误。所以，在很多时候，我们需要手动指定上
使用js开发数据库前端很多时候还是需要保存一些数据的，这里的保存指的是长久的保存。以前的思想是把数据保存在cookie中，或者将key保存在cookie中，将其他数据保存在服务器上。这几个场景用处很多，也非常的成熟好用。但是我还…
WebSocket系列之字符串如何与二进制数据间进行互相转换概述上一篇博客我们说到了如何进行数字类型（如Short、Int、Long类型）如何在JavaScript中进行二进制转换，如果感兴趣的可以可以阅读本系列第二篇博客——WebSocket系列之JavaScript中数字数据如何转换为二进制数据。这次，我们来说下