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

欲练JS，必先攻CSS——前端修行之路；CSS效果篇–纯CSS+HTML实现checkbox的思路与实例；WebVR开发——Web Audio实现3D音效；SpringBoot+Vue前后端分离，使用SpringSecurity完美处理权限问题(一)；基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)；聊聊 JavaScript 与浏览器的那些事：引擎与线程；js 简单的推箱子小游戏步骤解析–大家都玩过的；W3C官方推荐使用新发布的HTML5.2

《欲练JS，必先攻CSS——前端修行之路》今天我讲的主题是css，具体聊一下我大概的css学习历史，分享一些干货，希望这次分享对大家有所启发和帮助。（by 子慕大诗人）
CSS效果篇–纯CSS+HTML实现checkbox的思路与实例checkbox应该是一个比较常用的html功能了，不过浏览器自带的checkbox往往样式不怎么好看，而且不同浏览器效果也不一样。出于美化和统一视觉效果的需求，checkbox的自定义就被提出来了。这里对实现方法做个总结。 …
WebVR开发——Web Audio实现3D音效
SpringBoot+Vue前后端分离，使用SpringSecurity完美处理权限问题(一)当前后端分离时，权限问题的处理也和我们传统的处理方式有一点差异。笔者前几天刚好在负责一个项目的权限管理模块，现在权限管理模块已经做完了，我想通过5-6篇文章，来介绍一下项目中遇到的问题以及我的解决方案…
基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)在线地址:github.czero.cn/fancy 手机扫描二维码查看: 点击下载安卓apk安装包源码地址:https://github.com/czero1995/fancy-store 项目主架构使用的库 vue-cli (vue+webpack脚手架) vue-router(路由跳转) vuex(…
聊聊 JavaScript 与浏览器的那些事：引擎与线程如果你做过可视化开发，不知道你是否遇到过这样一个棘手的问题：因为需要向页面中添加大量的图表或点线元素而导致页面卡顿、性能下降。一般来说你可能考虑一个方案，从 SVG 换到了 canvas，这或多或少可以解决你面临的痛点，但是背后的原因你到底了解多少？隐藏在浏览器背后的秘密到底有多少，内核和引擎我们又该了…
js 简单的推箱子小游戏步骤解析–大家都玩过的前言推箱子小游戏大家肯定都玩过，之所以写这篇文章，是觉得这个小游戏足够简单好理解，大家看完文章之后，自己也能花上半天功夫敲出一个推箱子小游戏来，如果喜欢的话可以点波赞，或者关注一下，希望本文可以帮…
W3C官方推荐使用新发布的HTML5.2 W3C于2017年12月14日发布了 HTML规范5.2更新版本，并官方建议用户使用。此次更新增加了dialog标签等新功能、弃用了HTML插件系统等原有功能，并整合了其他W3C委员会的进展，如对支付请求API（Payment Request API）和演示API（Presentation API）的支持。新版本的规范在iframe标签上新增了一些重要属性用于支持…
5个经典的JavaScript面试基础问题 JavaScript程序员在IT领域中的需求量非常巨大。如果你非常精通JavaScript，你会有很多换工作、涨薪水的机会。但是在一家公司录用你之前，你必须顺利通过面试，证明你的技能。在本文中，我将向您展示5个关于JavaScript相关的问题，可以全面地测试面试者JavaScript技能和解决问题的能力。一起来看看这5个经典的JavaScript…
每个前端工程师都应该了解的HTML5.2 一般在W3C当中.对版本的发布会经过四个阶段分别是:工作草案（WD）、备选推荐标准（CR）、提案推荐标准（PR）和最终的W3C正式推荐标准（REC）.而当一个规范到达REC阶段时，就意味着它已经得到了W3C成员的正式认可，并推荐它由用户代理部署，前端工程师进行使用。现在,就在2017年12月14日W3C发布了HTML规范5.2更新版本…
前端完整教程，0 基础到中级水平，包括面试指导应读者要求，需要前端学习资料，今天给大家准备了一套完整的学习教程，内容只包括基础和中级，高级的不在本次分享。本公众号所分享的学习资料均来自网络和某宝购买，如有其他问题，请留言与我，以便做相应处理。前端待遇怎么样？上图来自拉勾网在北京的前端工程师招聘信息，从图中可以分析出这两点信息：…
从零收拾一个hybrid框架（一）– 从选择JS通信方案开始相信很多人都在项目里熟练使用各种Hybrid技术，无论是使用了知名得 WebViewJavascriptBridge 框架来做自己的Hybrid Web容器，又或是自己从头着手写了一个满足自己业务需求的bridge，从而构建起自己的Hybrid Web容器，也有的干脆直接使用了 cordova 这一大型Hybrid容器框架， cordova + ionic 来进行Hybrid的…
从搭建vue-脚手架到掌握webpack配置（一.基础配置）学习vue的过程肯定会接触到vue的单文件组件，进而接触到vue-cli(vue工程构建的脚手架工具)，但是vue-cli创建的工程对初学者很不友好， vue init webpack-simple project-name 创建的项目又太过简单和片面。本教程会分几篇文章逐步深入配置webpack，想要后续更新可以关注哦~ 接下来我们从初始化到写配置再到添加loa…
三个点如何改变JavaScript对象的rest和spread属性在JavaScript中合并多个对象是一个很常见的事情。但在JavaScript中，到目前为止并没有一种很方便的语法来进行合并。在ES5中，通过使用Lodash的 _.extend(target, ) （或者其他选项），在ES2015中引入了 Object.assign(target, ) 。幸运的是，对象的 spread 语法（ECMAScript第3阶段建议…
图表库源码剖析：Chart.js 最流行的 Canvas 图表库引言, 为什么想要研究 Chartjs 继之前我们研究了SVG.js 和 Frappe Charts 后, 我们对于 svg 的图表库已经有了初步的了解, 但是对于可视化世界的 canvas, 我们更应该投入精力去了解学习. 在看到 chartist.js 讲到自己的优势的时候, 提到一些图表库使用了错误的技术 canvas, 那我们就更有兴趣去了解,…
JavaScriptTalkNativeEasy (简化javaScript和iOS native的交互) 目前javaScrip和iOS native进行交互的时候，主要是有两种方式，第一种是通过Apple提供的API进行调用native 代码（UIWebView 使用JavaScriptCore框架、WKWebView使用WebKit框架），第二种就是通过URL重定向（通过URL向native端传送数据，native根据定义的规则进行解析。）。目前比较流行的开源框架是WebViewJavascriptBri…
webpack多入口文件页面打包配置大多数情况下，我们使用 webpack 来打包单页应用程序，这个时候只需要配置一个入口，一个模板文件，但也不尽是如此，有时候也会碰到多页面的项目，而且以我的经验来看，这种情况出现的频率还不低，例如项目比较大，无法进行全局的把握，或者项目需要多次的更新迭代等，都适合做成多页面程序，这就涉及到了 webpack 的多…
【前端跨域解决方案汇总】关于跨域的文章，之前分享过很多，来看看这篇前端跨域解决方案，由简及深介绍各种存在的跨域请求解决方案，包括 document.domain, location.hash, window.name, window.postMessage, JSONP, WebSocket, CORS #前端开发博客#
前端面试之js相关问题（一）最近我也是经历过面试别人和去面试的人了，总结几个常被提及的面试问题，做一下解答和备忘。 JavaScript 中 this 是如何工作的？先来看看这个题目： var x = 0; var foo = { x:1, bar:{ x:2, baz: function () { console.log(this.x) } } } var a = foo.bar.baz foo.bar.baz()…
使用 Angular2 和 Ionic3 开发 IOS 应用从 Angular1 到 Angular2 Angular2 作为著名前端 MVVM 架构 Angular1 的继承者，从一定程度上说，引领了新一代 Web 前端开发技术的革新。从最新版的 ember.js, react.js, vue.js 中，可以看到这几种技术相互借鉴，取长补短，最终向一种技术方向演进。组件化技术的崛起 Angular1 也有组件，叫另外一个名字：指令。…
光照渲染——用canvas模拟光照效果光照我们能看到物体，是因为光照射在物体上然后反射到我们的眼睛当中。其中的影响因素非常多：观察者的位置、光源的位置、光的颜色、物体表面的颜色、材质和粗糙程度等等。以后我们将会详细探究如何模拟物体的材…
【GitHub上12月份最热门的Java项目】又到了公布 GitHub 上热门项目的时候啦~在 12 月的 Java 排行中，又有加入哪些新面孔呢，一起来看看这些项目你使用过哪些呢？详见
【20180110 前端开发日报】CSS经典布局之Sticky footer布局；前端每周清单第 46 期: 2017 Node.js / GraphQL / Vue.js 盘点，前端性能优化与可用性保障；WebSocket 协议：5 分钟从入门到精通；图表库源码剖析 – Chart.js 最流行的 Canvas …详情→
WebVR教程——Web Audio开发3D音效在VR开发中，除了图形视觉渲染，音频处理是重要的一环，好的音频处理可以欺骗用户的听觉，达到身临其境的效果，本文主要介绍WebVR音频是如何开发的。 VR Audio VR音频的输出硬件主要是耳机，根据音频源与场景之间…
react+mobx：如何组织store之最佳实践上篇文章 create-react-app + webpack + antd + less + mobx 的demo入门配置简单介绍了一个笔者使用的最基本的react配置，简单引入了mobx。现在问题是如果store越来越多，会导致引用混乱，非常不便于开发。因此在阅读了几篇文章之后，我尝试给出一个相对较好的使用方法。参考文章；保有对子store的引用 …
前端系列——快速理解babel6配置过程繁琐的配置？你能快速读懂babel的官方文档吗？你能根据官方文档快速配置好babelrc吗？你能明白自己需要哪些插件吗？没有搞明白这3个问题，请往下看。快速理解babel 6 来看一张让人颤抖的babel插件图下图仅…
Vue项目组件化工程实践方案我们暂时给提取出来的脚手架取名叫vde-cli，通过vde-cli脚手架生成的组件库工程目录结构如下：核心功能组件库工程的packages文件夹就是用来存放组件库里面的各种组件了，这里不需要通过手动创建文件的方式创建组件，直接通过一条创建组件的命令完成。每个组件都有一个单独的组件文件夹，组件文件夹下…
Webpack系列——探索babel7结合webpack3 tree-shaking对打包后代码的影响目的本文将会介绍下面几个部分的内容： 1、babel7结合webpack3的用法 2、tree-shaking对于普通js函数的影响 3、tree-shaking对于react组件的影响相关技术这里我们将使用babel7，也是目前最新的版本，你会看到…
canvas进阶——贝塞尔公式推导与物体跟随复杂曲线的轨迹运动写在最前在之前的这篇文章中我们提到了对于贝塞尔公式的运用。本次分享一下如何推导贝塞尔公式以及附一个简单的即小球跟随曲线轨迹运动。欢迎关注我的博客，不定期更新中—— 效果预览 demo地址对于如何绘制连…
javascript 之作用域链-10