<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[jackTesla的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/jackTesla</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; jackTesla]]></copyright><item><title><![CDATA[使用webpack打包的项目优化方案]]></title><link>https://blog.youkuaiyun.com/jackTesla/article/details/88311130</link><guid>https://blog.youkuaiyun.com/jackTesla/article/details/88311130</guid><author>jackTesla</author><pubDate>Thu, 07 Mar 2019 16:19:36 +0800</pubDate><description><![CDATA[一、根据可视化工具查看项目打包

webpack-bundle-analyzer可视化工具

Webpack进行打包，到底打了多少包，每个包有多大？webpack-bundle-analyzer这款插件可以帮助我们清晰展示。针对多余的包文件过大，剔除首次影响加载的效率问题进行剔除修改。





模块功能：

* 意识到你的文件打包压缩后中真正的内容

* 找出哪些模块组成最大的大小

* 找...]]></description><category></category></item><item><title><![CDATA[针对于前端的JAMstack开发架构介绍]]></title><link>https://blog.youkuaiyun.com/jackTesla/article/details/88310880</link><guid>https://blog.youkuaiyun.com/jackTesla/article/details/88310880</guid><author>jackTesla</author><pubDate>Thu, 07 Mar 2019 15:53:11 +0800</pubDate><description><![CDATA[基于客户端JavaScript，可重用API和预先构建Markup的现代Web开发架构


当我们谈论“堆栈”时，我们不再谈论操作系统，特定Web服务器，后端编程语言或数据库。



JAMstack与特定技术无关。这是一种构建网站和应用程序的新方法，可提供更好的性能，更高的安全性，更低的扩展成本以及更好的开发人员体验。



什么是JAMstack？

* J(JavaScript):请求...]]></description><category></category></item><item><title><![CDATA[使用基于Vue.js驱动的Vuepress搭建静态博客]]></title><link>https://blog.youkuaiyun.com/jackTesla/article/details/88309219</link><guid>https://blog.youkuaiyun.com/jackTesla/article/details/88309219</guid><author>jackTesla</author><pubDate>Thu, 07 Mar 2019 15:46:41 +0800</pubDate><description><![CDATA[[github仓库地址](https://github.com/18518300669/JackTeslaBlog)

[博客demo地址](https://18518300669.github.io/JackTeslaBlog/)

介绍

VuePress 由两部分组成：一个以 Vue 驱动的主题系统的简约静态网站生成工具，和一个为编写技术文档而优化的默认主题。它是为了支持 Vue 子项目的文...]]></description><category></category></item><item><title><![CDATA[一个好玩的东西，纯JS代码实现增强现实（AR.js）]]></title><link>https://blog.youkuaiyun.com/jackTesla/article/details/88120583</link><guid>https://blog.youkuaiyun.com/jackTesla/article/details/88120583</guid><author>jackTesla</author><pubDate>Thu, 07 Mar 2019 15:14:57 +0800</pubDate><description><![CDATA[增强现实技术（Augmented Reality，简称 AR），是一种实时地计算摄影机影像的位置及角度并加上相应图像、视频、3D模型的技术，这种技术的目标是在屏幕上把虚拟世界套在现实世界并进行互动。这种技术1990年提出。随着随身电子产品CPU运算能力的提升，预期增强现实的用途将会越来越广。



---



先体验

首先在手机浏览器里打开这个demo应用[http://jacktesla...]]></description><category></category></item><item><title><![CDATA[3种chrome谷歌浏览器表单自动填充时默认的黄色背景样式修改-autofill]]></title><link>https://blog.youkuaiyun.com/jackTesla/article/details/88119836</link><guid>https://blog.youkuaiyun.com/jackTesla/article/details/88119836</guid><author>jackTesla</author><pubDate>Mon, 04 Mar 2019 15:41:03 +0800</pubDate><description><![CDATA[Chrome会在客户登陆过某网站之后, 会自动记住密码

当你下次再次进入该网站的时候, 可以自由的选择登陆的账号, Chrome会为你自动填充密码. 而你无需再输入密码

这本身是一个很好的功能, 但是对于开发者而言, 却有一个很让人难受的问题.

当你选择账号密码之后, 你的输入框会变成黄色… x黄色 (感觉特别难看的黄色).



样式分析：

之所以出现这样的样式, 是因为Chrome会...]]></description><category></category></item><item><title><![CDATA[js当中CommonJS 和es6的模块化引入方案以及比较]]></title><link>https://blog.youkuaiyun.com/jackTesla/article/details/80796936</link><guid>https://blog.youkuaiyun.com/jackTesla/article/details/80796936</guid><author>jackTesla</author><pubDate>Mon, 25 Jun 2018 09:41:55 +0800</pubDate><description><![CDATA[在es6之前，对于模块化方案主要是CommonJS和AMD两种。咱们这次说一下ES6和CommonJS的区别。



它们有两个重大差异：

CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。
	CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。
第一个差异：

CommonJS 模块输出的是值的拷贝，也就是说，一旦输出一个...]]></description><category></category></item><item><title><![CDATA[js当中对代码拆分时require.ensure()和import()的使用介绍及对比]]></title><link>https://blog.youkuaiyun.com/jackTesla/article/details/80796775</link><guid>https://blog.youkuaiyun.com/jackTesla/article/details/80796775</guid><author>jackTesla</author><pubDate>Mon, 25 Jun 2018 08:49:58 +0800</pubDate><description><![CDATA[require.ensure()

  在webpack 2的官网上写了这么一句话：

       require.ensure()is specific to webpack and superseded byimport().

  所以，在webpack 2里面应该是不建议使用require.ensure()这个方法的。但是目前该方法仍然有效，所以可以简单介绍一下...]]></description><category></category></item><item><title><![CDATA[react-router的3种按需加载介绍]]></title><link>https://blog.youkuaiyun.com/jackTesla/article/details/80792110</link><guid>https://blog.youkuaiyun.com/jackTesla/article/details/80792110</guid><author>jackTesla</author><pubDate>Sun, 24 Jun 2018 16:39:27 +0800</pubDate><description><![CDATA[react-router的按需加载(推荐第三种)



第一种：



利用react-loadable这个高级组件，要做到实现按需加载这一点，我们将使用的WebPack，babel-plugin-syntax-dynamic-import和react-loadable。

webpack内置了对动态导入的支持;但是，如果使用Babel（将JSX编译为JavaScript），那么将需要使用b...]]></description><category></category></item><item><title><![CDATA[关于react项目当中propTypes应该在生产环境中去掉的做法]]></title><link>https://blog.youkuaiyun.com/jackTesla/article/details/80791854</link><guid>https://blog.youkuaiyun.com/jackTesla/article/details/80791854</guid><author>jackTesla</author><pubDate>Sun, 24 Jun 2018 16:16:51 +0800</pubDate><description><![CDATA[我们都知道，在react项目当中state和prop是常用的属性，state是组件内部的状态，而prop是外部传递给组件的数据。对于对props的属性校验，一般会引入propTypes。

  首先我先大致说一下propTypes检查。在react中既然props是组件的对外接口，那么就应该以某种方式让组件声明自己的接口规范。react通过propTypes来支持这个功能，来约束这个组...]]></description><category></category></item><item><title><![CDATA[初学者可以用的js小技巧]]></title><link>https://blog.youkuaiyun.com/jackTesla/article/details/79175283</link><guid>https://blog.youkuaiyun.com/jackTesla/article/details/79175283</guid><author>jackTesla</author><pubDate>Fri, 26 Jan 2018 17:57:03 +0800</pubDate><description><![CDATA[1. 取整同时转成数值型


var a = '10.567890' | 0 ; 
console.log(&quot;a=&quot; + a + &quot;, &quot;);   // a=10 
var b = '10.567890' ^ 0 ; 
console.loge(&quot;b=&quot; + b + &quot;, &quot;);   //b=10 
var c = -2.23456789 | 0 ; 
console.log(&quot;c=&quot; + ...]]></description><category></category></item><item><title><![CDATA[两行 CSS 代码实现图片任意颜色赋色技术]]></title><link>https://blog.youkuaiyun.com/jackTesla/article/details/79175188</link><guid>https://blog.youkuaiyun.com/jackTesla/article/details/79175188</guid><author>jackTesla</author><pubDate>Fri, 26 Jan 2018 17:51:29 +0800</pubDate><description><![CDATA[mix-blend-mode 与 background-blend-mode



mix-blend-mode — 不可思议的混合模式 mix-blend-mode，与本文的主角 background-blend-mode 一样，都是实现混合模式的。



混合模式最常见于 photoshop 中，是 PS 中十分强大的功能之一。当然，瞎用乱用混合模式谁都会，利用混合模式将多个图层混合得到一...]]></description><category></category></item></channel></rss>