<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[web前端技巧开发]]></title><description><![CDATA[web前端技巧开发，分享有趣的web前端开发心得]]></description><link>https://blog.youkuaiyun.com/moondaim</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; moondaim]]></copyright><item><title><![CDATA[通往中高端Web前端：浏览器篇]]></title><link>https://blog.youkuaiyun.com/moondaim/article/details/89601275</link><guid>https://blog.youkuaiyun.com/moondaim/article/details/89601275</guid><author>moondaim</author><pubDate>Sat, 27 Apr 2019 14:24:45 +0800</pubDate><description><![CDATA[1. 跨标签页通讯

不同标签页间的通讯，本质原理就是去运用一些可以共享的中间介质，因此比较常用的有以下方法:


	通过父页面window.open()和子页面postMessage
	
	
	异步下，通过 window.open('about: blank') 和 tab.location.href = '*'
	
	
	设置同域下共享的localStorage与监听window.onsto...]]></description><category></category></item><item><title><![CDATA[Vue 项目骨架屏注入实践]]></title><link>https://blog.youkuaiyun.com/moondaim/article/details/89554220</link><guid>https://blog.youkuaiyun.com/moondaim/article/details/89554220</guid><author>moondaim</author><pubDate>Fri, 26 Apr 2019 15:23:18 +0800</pubDate><description><![CDATA[相比于早些年前后端代码紧密耦合、后端工程师还得写前端代码的时代，如今已发展到前后端分离，这种开发方式大大提升了前后端项目的可维护性与开发效率，让前后端工程师关注于自己的主业。然而在带来便利的同时，也带来了一些弊端，比如首屏渲染时间(FCP)因为首屏需要请求更多内容，比原来多了更多HTTP的往返时间(RTT)，这造成了白屏，如果白屏时间过长，用户体验会大打折扣，如果用户网速差，则FCP会更长。

由...]]></description><category></category></item><item><title><![CDATA[为什么我认为数据结构与算法对前端开发很重要？]]></title><link>https://blog.youkuaiyun.com/moondaim/article/details/89553796</link><guid>https://blog.youkuaiyun.com/moondaim/article/details/89553796</guid><author>moondaim</author><pubDate>Fri, 26 Apr 2019 15:08:24 +0800</pubDate><description><![CDATA[图中的示例使用的是Ant-Design的Cascader组件。

要实现这一功能，我需要类似这样的数据结构：


vardata=[{
"value":"浙江",
"children":[{
"value":"杭州",
"children":[{
"value":"西湖"
}]
}]
},{
"value":"四川",
...]]></description><category></category></item><item><title><![CDATA[Web全栈工程师年薪40W+，凭什么？]]></title><link>https://blog.youkuaiyun.com/moondaim/article/details/89496195</link><guid>https://blog.youkuaiyun.com/moondaim/article/details/89496195</guid><author>moondaim</author><pubDate>Wed, 24 Apr 2019 16:20:28 +0800</pubDate><description><![CDATA[腾讯、阿里、百度、今日头条等大厂目前在招聘Web全栈工程师，薪资已给到了40W+。为什么Web全栈工程师如此受重视？



因为Web全栈开发是大势所趋，在未来将会有更大的发展空间。随着5G网络的推进和[PWA][3]被支持，前端开发也将迎来最大的一波红利。在不久的将来，前端受益于灵活的部署和安装，在移动端开发中比例会逐渐加重。我甚至认为，前端会成为终端开发的最终解决方案（包括但不限于手机，电视...]]></description><category></category></item><item><title><![CDATA[CSS 宣布支持三角函数，下一步是什么？]]></title><link>https://blog.youkuaiyun.com/moondaim/article/details/89496035</link><guid>https://blog.youkuaiyun.com/moondaim/article/details/89496035</guid><author>moondaim</author><pubDate>Wed, 24 Apr 2019 16:13:07 +0800</pubDate><description><![CDATA[2 月底万维网联盟（W3C）CSS 工作组会议宣布了一项决议，批准在 CSS 标准中加入一批新函数，其中包括：


	正弦函数- sin()
	
	
	余弦函数 - cos()
	
	
	正切函数- tan()
	
	
	反余弦函数 - acos()
	
	
	反正弦函数 - asin()
	
	
	反正切函数 - atan()
	
	
	使用两个参数x 和 y 的反正切函数...]]></description><category></category></item><item><title><![CDATA[优化 JS 条件语句的 5 个技巧]]></title><link>https://blog.youkuaiyun.com/moondaim/article/details/89495723</link><guid>https://blog.youkuaiyun.com/moondaim/article/details/89495723</guid><author>moondaim</author><pubDate>Wed, 24 Apr 2019 16:06:45 +0800</pubDate><description><![CDATA[在使用 JavaScript 时，我们会处理很多条件语句，这里有 5 个技巧可以帮助您编写更好、更简洁的条件语句。



1、对多个条件使用 Array.includes



让我们看看下面的例子：




// condition
function test(fruit) {
  if (fruit == 'apple' || fruit == 'strawberry') {
    c...]]></description><category></category></item><item><title><![CDATA[Vue 前端面试题]]></title><link>https://blog.youkuaiyun.com/moondaim/article/details/89495523</link><guid>https://blog.youkuaiyun.com/moondaim/article/details/89495523</guid><author>moondaim</author><pubDate>Wed, 24 Apr 2019 15:58:53 +0800</pubDate><description><![CDATA[然后现在也是找了一些在 Vue 方面经常出现的面试题，留给自己查看消化，也分享给有需要的小伙伴。

如果文章中有出现纰漏、错误之处，还请看到的小伙伴留言指正，先行谢过。

以下 ↓

1. 说一下 Vue 的双向绑定数据的原理

vue 实现数据双向绑定主要是：采用数据劫持结合“发布者 - 订阅者”模式的方式，通过 Object.defineProperty() 来劫持各个属性的 setter、 ...]]></description><category></category></item><item><title><![CDATA[Web 实时推送技术的总结]]></title><link>https://blog.youkuaiyun.com/moondaim/article/details/89495300</link><guid>https://blog.youkuaiyun.com/moondaim/article/details/89495300</guid><author>moondaim</author><pubDate>Wed, 24 Apr 2019 15:56:31 +0800</pubDate><description><![CDATA[前言

随着 Web 的发展，用户对于 Web 的实时推送要求也越来越高 ，比如，工业运行监控、Web 在线通讯、即时报价系统、在线游戏等，都需要将后台发生的变化主动地、实时地传送到浏览器端，而不需要用户手动地刷新页面。本文对过去和现在流行的 Web 实时推送技术进行了比较与总结。

本文完整的源代码请猛戳Github博客(https://github.com/ljianshu/Blog)，纸上得...]]></description><category></category></item><item><title><![CDATA[前端ES6 简单特性学习记录]]></title><link>https://blog.youkuaiyun.com/moondaim/article/details/89479841</link><guid>https://blog.youkuaiyun.com/moondaim/article/details/89479841</guid><author>moondaim</author><pubDate>Tue, 23 Apr 2019 19:58:31 +0800</pubDate><description><![CDATA[变量定义的新方式：let/const

let 特性：


	不允许重复声明
	
	
	没有变量提升（预解析）
	
	
	块级作用域（一对{}包括的区域称为一个代码块，let声明的变量只在该代码块起作用）
	
例子1 ：简单的打印数据

使用 var:


这里还是要推荐下小编的web前端学习 群 : 569146385，不管你是小白还是大牛，小编我都欢迎，不定期分享干货，包括 小编自...]]></description><category></category></item><item><title><![CDATA[2019前端趋势：更一致，更简单]]></title><link>https://blog.youkuaiyun.com/moondaim/article/details/89479764</link><guid>https://blog.youkuaiyun.com/moondaim/article/details/89479764</guid><author>moondaim</author><pubDate>Tue, 23 Apr 2019 19:55:14 +0800</pubDate><description><![CDATA[像 React 和 Angular 这样的框架，继续在社区中享有大规模的支持，但是，新的候选者 Vue ，人气也很旺。Webpack 依旧是构建的首选工具，NPM 仍旧是系统选择包的工具。WebAssembly 以前所未有的速度向 Web 开放了众多新的和令人兴奋的案例。像 GraphQL 等技术，革新了书写和在 web 应用中使用 API 的方式。

这里还是要推荐下小编的web前端学习 群 :...]]></description><category></category></item><item><title><![CDATA[你不知道的js面试题]]></title><link>https://blog.youkuaiyun.com/moondaim/article/details/89479718</link><guid>https://blog.youkuaiyun.com/moondaim/article/details/89479718</guid><author>moondaim</author><pubDate>Tue, 23 Apr 2019 19:53:05 +0800</pubDate><description><![CDATA[1.编写一个方法，去掉数组的重复元素

var arr=["a","c","c","a","a","a","a","a","a","a"]

var arr2=[];

for(var i=0;i&lt;arr.length;i++){

if(arr2.indexOf(arr[i])&lt;0){

arr2.push(arr[i]);

}

}

console.log(arr2);

这里...]]></description><category></category></item><item><title><![CDATA[有关css的面试题全]]></title><link>https://blog.youkuaiyun.com/moondaim/article/details/89479697</link><guid>https://blog.youkuaiyun.com/moondaim/article/details/89479697</guid><author>moondaim</author><pubDate>Tue, 23 Apr 2019 19:51:44 +0800</pubDate><description><![CDATA[1.当float和margin同时使用，IE6的双边距BUG如何解决

出现双边距的条件是当浮动元素的浮动方向和margin的方向一致时才会出现。也就是说，并不是只有块状元素左浮动，且具有左外边距时才有这个BUG，当一个盒子右浮动的同时有一个向右的margin-right的时候，IE6也会把margin-right解析为原来的2倍。当有多个同行元素都浮动了，而且都有同方向的margin，则只...]]></description><category></category></item><item><title><![CDATA[html面试题大全]]></title><link>https://blog.youkuaiyun.com/moondaim/article/details/89479677</link><guid>https://blog.youkuaiyun.com/moondaim/article/details/89479677</guid><author>moondaim</author><pubDate>Tue, 23 Apr 2019 19:50:35 +0800</pubDate><description><![CDATA[1.XHTML和HTML有什么区别(v)

HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言
最主要的不同：

XHTML 元素必须被正确地嵌套。

XHTML 元素必须被关闭。

标签名必须用小写字母。

XHTML 文档必须拥有根元素。

2.前端页面有哪三层构成，分别是什么?作用是什么?

结构层Html 表示层 CSS 行为层 js

3.你做的页面在哪些流...]]></description><category></category></item><item><title><![CDATA[Javascript 开启浏览器全屏模式]]></title><link>https://blog.youkuaiyun.com/moondaim/article/details/89479642</link><guid>https://blog.youkuaiyun.com/moondaim/article/details/89479642</guid><author>moondaim</author><pubDate>Tue, 23 Apr 2019 19:48:07 +0800</pubDate><description><![CDATA[通常在某些情况下，我们需要让浏览器开启全屏模式，以便获得更好的视觉体验，先看下全屏模式简单的几个API。



浏览器默认绑定



非全屏模式下， document的F11按键绑定开启全屏模式
全屏模式下， document的esc和F11 按键绑定关闭全屏模式

屏幕全屏模式改变事件

当成功进入全屏模式后， document会收到一个fullscreenchange 事件。 当退出全屏状...]]></description><category></category></item><item><title><![CDATA[用 JavaScript 写一个区块链]]></title><link>https://blog.youkuaiyun.com/moondaim/article/details/89479607</link><guid>https://blog.youkuaiyun.com/moondaim/article/details/89479607</guid><author>moondaim</author><pubDate>Tue, 23 Apr 2019 19:46:16 +0800</pubDate><description><![CDATA[几乎每个人都听说过像比特币和以太币这样的加密货币，但是只有极少数人懂得隐藏在它们背后的技术。在这篇博客中，我将会用JavaScript来创建一个简单的区块链来演示它们的内部究竟是如何工作的。我将会称之为SavjeeCoin！全文分为三个部分：




	实现一个基本的区块链
	
	
	实现 POW
	
	
	交易与挖矿奖励
	




实现一个基本的区块链

区块链



区块链是由一个个...]]></description><category></category></item><item><title><![CDATA[一个三年工作经验的Web工程师的经验之谈]]></title><link>https://blog.youkuaiyun.com/moondaim/article/details/89479508</link><guid>https://blog.youkuaiyun.com/moondaim/article/details/89479508</guid><author>moondaim</author><pubDate>Tue, 23 Apr 2019 19:40:33 +0800</pubDate><description><![CDATA[时间过得很快，我做软件工程师已经三年整了。我没有做过一个项目，一直在做框架相关的工作，有时维护Web框架代码，有时写移动Hybrid的前端UI框架，也有时做开发工具或自动编译平台等。

我想分享下这段时间在工作上的个人经验，分为几点：

做框架的态度

我工作中做得最多就是框架，框架的本质是提高重用性。对于做框架，除了本身能力很重要外，很关键的是做框架的态度。

1. 不要因为困难的而不去做

（...]]></description><category></category></item><item><title><![CDATA[Web开发的26项基本概念和技术]]></title><link>https://blog.youkuaiyun.com/moondaim/article/details/89459173</link><guid>https://blog.youkuaiyun.com/moondaim/article/details/89459173</guid><author>moondaim</author><pubDate>Mon, 22 Apr 2019 19:40:22 +0800</pubDate><description><![CDATA[　Web开发是比较费神的，需要掌握很多很多的东西，特别是从事前端开发的朋友，需要通十行才行。今天，本文向初学者介绍一些Web开发中的基本概念和用到的技术，从A到Z总共26项，每项对应一个概念或者技术。

A — AJAX
　　AJAX 全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是一种创建交互式网页应用的网页开发技术。根据Ajax提...]]></description><category></category></item><item><title><![CDATA[避免常见的6种HTML5错误用法]]></title><link>https://blog.youkuaiyun.com/moondaim/article/details/89459154</link><guid>https://blog.youkuaiyun.com/moondaim/article/details/89459154</guid><author>moondaim</author><pubDate>Mon, 22 Apr 2019 19:39:23 +0800</pubDate><description><![CDATA[一、不要使用section作为div的替代品

人们在标签使用中最常见到的错误之一就是随意将HTML5的&lt;section&gt;等价于&lt;div&gt;——具体地说，就是直接用作替代品(用于样式)。在XHTML或者HTML4中，我们常看到这样的代码：


&lt;!-- HTML 4-style code --&gt;
&lt;div id="wrapper"&gt;
	&lt;div ...]]></description><category></category></item><item><title><![CDATA[了解 Web 标准规范和组织]]></title><link>https://blog.youkuaiyun.com/moondaim/article/details/89439087</link><guid>https://blog.youkuaiyun.com/moondaim/article/details/89439087</guid><author>moondaim</author><pubDate>Sun, 21 Apr 2019 20:48:19 +0800</pubDate><description><![CDATA[　Web 标准是由各大标准组织制定，由浏览器和其他 Web 底层框架或工具来实现，再提供给开发者能以最小成本开发适用于多平台的 Web 应用，这些标准是我们能访问无数网站的前提。

　学习标准的必要
　　最近在 MDN 上学习Web Components，学习中有些疑惑在 MDN 上没有提及，最后通过查阅Custom elements标准规范才解决了我的疑惑，让我感慨原来标准规范这么有用。
...]]></description><category></category></item><item><title><![CDATA[web前端需要学什么知识?自学要多久？]]></title><link>https://blog.youkuaiyun.com/moondaim/article/details/89423069</link><guid>https://blog.youkuaiyun.com/moondaim/article/details/89423069</guid><author>moondaim</author><pubDate>Sat, 20 Apr 2019 20:38:17 +0800</pubDate><description><![CDATA[想学web前端需要学什么知识?htmlcss，css3，javascript，jQuery，easyUI，html5……首先学这些基本的吧!学习顺序就是HTML DIV_CSS javascript ，如果你没有学过其它编程语言，javascript自学就比较难了。HTML ,DIV_CSS都是死记标签的，自学多练就行。



对于初学者来说，不清楚web前端的学习路线，确实是一个很头疼的问题。那...]]></description><category></category></item></channel></rss>