东哥IT笔记

东哥记录IT笔记的地方

Category: 前端开发

0

前端开发

1秒加载的网站，你需要做到这些

网站加载的速度一直都是一个很值得研究的性能问题，这里我们提供一些小技巧，我们曾使用这些技巧让一个网站的加载速度只要0.8s，lighthouse的性能得分到97分。 技巧1 不要使用大的DOM tree 假如你的DOM tree非常大，那么显然性能是不会太好的。 Memory性能 使用一个通用的query选择器比如document.querySelectorAll(‘li’)，这样能欧股使用memory来存储多个节点。 网络效率和加载性能 一个有很多节点的大的DOM tree（尤其包含很多开始并看不到的部分），必然会加大加载时间。 运行时的性能 当用户和网页交互的时候，浏览器需要不停计算节点的位置和style，那些复杂的style必然会导致rendering变慢。 技巧2 不要使用很多的网络加载 你的网页的总加载大小应该小于1600KB，为了达到这个效果，你可以做下面这些： 在需要的地方才发请求 minify和压缩网络加载的内容 把JPEG的压缩级别设置到85 技巧3 不用使用GIFs 假如你想使用动态的图，那么不要使用GIF，使用MPEG4/WebM格式吧。 假如你需要下面这些性能： 自动播放 不停循环 没有声音 其实HTML5中<video>是可以实现这样的效果的 技巧4 预加载关键的请求 比如你的页面加载了一个js文件，这个js文件又需要加载别的JS和CSS文件，整个页面其实需要等到所有这些资源加载完成才能显示。我们可以通过以下代码让浏览器早一点加载，你可以通过preload来实现： 技巧5 不要使用多页面的重定向 当浏览器请求了重定向的资源的时候，服务器会返回一个HTTP的response，这个时候，浏览器需要再使用一个HTTP到新的位置去请求资源，这样一来，因为网络的延迟必然会造成性能的下降。 技巧6...

0

前端开发

JavaScript提高书籍推荐

今天来给大家推荐几本JavaScript的提高书籍，希望大家能够从中学到想要的知识。 You don’t know JS 作为一名JS的开发者，这是一本必须要读的书籍。它很深入的解释了很多JS的知识。第二版本正在整理，不过第一版本仍然值得一读。强烈推荐。 Eloquent JavaScript 不管你刚开始学习JS还是想了解一些比如深入的知识，这边书都可以帮到你。和别的书不同，这本书包含了很多应用实例，你甚至可以把他们应用到你的项目中。在最新版本中，作者加入了很多JS的新的特性，同时也加入了一些和JS整洁代码相关的内容。 JavaScript: the good parts 这本书主要介绍了JS的“优雅”的部分。读了这本书，你大概就可以了解JS为什么和别的语言不太相同，你会了解很多JS的好的部分，当然你也同时会看到JS相对不那么好的部分。哈哈 JavaScript design patterns 其实很多语言都有讲desing pattern的书籍，而JS也不另外。读了这本书，应该对如何写可重复利用的JS会很有帮助。他包含了用JS实现的各种design pattern。相信读完了一定会受益匪浅。 High Performance Browser Networking Perfromance一直都是我们关注的重点。这本书介绍了web开发中的各种网络(WIFI, 3G/4G)，传输的协议（UDP,TCP以及TLS)，应用协议（HTTP/1.1, HTTP/2）以及浏览器中的API（XHR, WebSocket，WebRTC等等），了解这些，再开发一个快捷，可靠的网页就不是空中楼阁了。 Functional Programming in JavaScript 这边书主要讲解的是函数编程相关的技术，比如可扩展性，模块化，可重用性，可测试性等等。有了这本书，你会对如何在现实开发中使用函数编程有个大概的了解。 Composing...

2020年web开发（前后端）路线图 0

前端开发 / 后端开发

2020年web开发（前后端）路线图

2020年最新的Web开发路线图已经出炉了，这个路线图主要分成四个部分：通用的技能，前端技能，后端技能以及Devops。通用技能就是所有人都需要知道的，而前后端技能则是根据你的选择来学习，当然假如你的目标是全栈工程师的话，那前后端技能都是需要学习的。 本文的路线图其实是由Kamranahmedse制作的，他发布在他的github上。 通用技能 不管你是想做前端还是后端，有一些通用技能是都需要学习的，如下图所示： Git 我想这个大家都很熟悉，git是一个很好的版本控制软件，也是所有程序员应当掌握的一个工具。 SSH 他主要用来进行远程登录。 HTTP/HTTPS HTTP/HTTPS是web开发的骨干部分，对所有web开发者来说，理解这一部分是必不可少的。 基本的终端使用 如何使用各种终端的命令，尤其是Linux系统中各种命令的使用，是所有程序员的基础。 数据结构和算法 这个没啥好说的，为了面试也得好好学学，哈哈 字符编码 对网页开发来说，尤其是一些全球性的网站，如何显示不同语言蛮重要的，了解一下这方面的知识对一个web开发者来说绝对不会浪费时间。 GitHub 最大的程序员交友网站，应该不需要多说什么。 前端路线图 下面是前端开发者路线图，主要关注于黄色高亮图。 Web开发基础 很明显要想成为一个web开发者，有很多基础的知识你需要了解，比如网络的基础，web的应用，HTTP等protocol。 HTML和CSS HTML和CSS是每一个前端开发者最先应该了解的部分。HTML主要是网页的结构和CSS主要是显示的格式。 JavaScript 上面的HTML和CSS提供了结构和风格，而JavaScript才是真正让他们可以进行交互的核心。 TypeScript TypeScript和JavaScript最大的差别可能就在于类型的安全，以及可以更简单地提供面向对象的思想。 Angular 众所周知，简单的HTML,CSS和JavaScript开发网页的时代已经过去了，现在更多的是基于一个框架来进行开发网页，而Angular就是其中最流行的框架之一。Angular是由Google支持（收购）开发的。 ReactJS 和Angular类似的另外一个很流行的web框架。它最大的特点是可以开发可重复利用的模块。同样和Angular类似，ReactJS背后的大佬是Facebook Vue.js Vue.js这两年的发展趋势很强劲，大有超过Angular和ReactJS的势头，学习它应该是不会错的。...

Github中的Javascript学习资源推荐 0

前端开发

Github中的Javascript学习资源推荐

Github上有很多关于Javascript的学习资源，这些资源有教程，有博客，有源码等等。下面就简单介绍一些我看过的Github上的项目： JavaScript Algorithms and Data Structures 这是一个用JavaScript实现算法和数据结构的项目，更重要的是他还支持中文，想学JavaScript的同学去看看吧。 JavaScript Questions 他列出很多和JavaScript相关的进阶问题，并且给出了答案。同样的，他也支持中文。 clean-code-javascript 我们应该都读过那本很流行的书《代码整洁之道》，这个项目就是把它所涉及的内容应用到JavaScript中。 What the f*ck JavaScript? 这个项目总结了很多好玩或者很奇怪的JavaScript相关的内容。 33-js-concepts 每个JavaScript开发者都需要知道的JavaScript内容 Awesome JavaScript Learning JavaScript学习相关的网址介绍。 Learn-JavaScript 这个项目集合了各种JavaScript的教程 Become-A-Full-Stack-Web-Developer 超过100个全栈开发相关的学习资源 30-seconds-of-code 30s的小代码片段，快速学习和参考。 假如你有更好的项目，可以提出来哦。 参考文章：https://dev.to/junlow/my-favourite-javascript-learning-resources-on-github-4okb

0

前端开发

React Native Camera的新手教程

自从手机有了摄像头之后，我们可以很方便地把生活中的瞬间记录下来。我们可以通过照片和视频来回顾那些美好的瞬间。自然而然，和我们最爱的朋友和家人分享这些照片和视频就成为了一个必然的需求。 所以，在你写一个app的时候，很可能就希望他能支持拍照和拍视频的功能。假如你还不太清楚怎么来实现的，本文就是来简单介绍如何使用React Native实现相关的功能。 预先安装的包： expo-camera:这个包是用来拍照和视频的。 Expo-av: 这个包是用来导入视频并进行播放的。 可以使用下面的命令来安装相关的包： 或者 实现相机的功能 我们可以简单通过下面的代码来把camera组件假如你项目中的一个view里： 加入这个代码之后，应该就可以使用相机了。注意要在真实的设备上运行哦。 我们来看上面这段代码，其实实现很简单，主要分为以下几个部分： 首先来看看Camera组件的实现 <Camera …/> 我们把一个定义好的cameraRef传到了Camera组件的ref prop中。有了这个之后，就可以很方便地调用takePictureAsync(), recordAsync()。。等等。这些方法其实可以帮助我们调用相关的接口来拍照，录视频等等。 onCameraReady(): 这个回调是当相机准备好拍照和录视频时候的调用的。你应该注意，在我们拍照之前要先看看这个方法是不是调用了。 takePicture(): 通过调用takePictureAsync()，我们可以用这个方法来拍照。 recordVideo(): 和上面takePicture类似，通过capture组件中的onLongPress来触发，我们通过调用recordAsync来拍视频。 stopVideoRecording(): 这个方法在用户停止拍视频的时候触发。 switchCamera()：这个方法会切换前后的摄像头 cancelPreview():这个方法就是取消照片和视频的预览。 所有的render方法，比如renderCancelPreviewButton(), renderVideoPlayer()就是简单的在你的手机屏幕上render相关的额显示。 在我们render相关的组件的时候，需要有相关的权限，我们是通过组件中的reqeustPermissionsAsync的调用来获取的。这个方法是在useEffect方法中调用的，而这个方法只有在组件初始化的时候调用。 我们也实现了一个简单的条件rendering。这里，只有在preview的情况下，我们才render一个cancel的button去取消照片和视频的preview。我们在录制的时候，才render indicator。只有录制了视频并且有视频的资源的时候，才render...

如何成为一个更好的前端开发者 0

前端开发

如何成为一个更好的前端开发者

很多人来问我，如何成为一个更好的前端开发者，当我们已经有了一些前端的开发经验之后，如何进入下一个level呢？ 本文就像一个清单，而不是一个文章。我觉得我们就像朋友之间聊天一样，假如有什么你不是很清楚的，可以再搜搜看相关的内容。 好吧，让我们来看看具体的内容。 理解你的编程语言 其实这个部分是最常的，甚至可以拿出来单独写一篇文章。不过，我们还是放在这里，和别的建议一样。 我们使用编程语言的时候并不需要什么常识，只是某些人定义了一系列规则，然后我们使用这些规则来和机器通信，我们这里就是使用他来和浏览器通信。Javacript也同样，它有自己定义的规则和规范，我们只要像使用其他语言一样遵守就可以了。 下面是一些我的笔记： 类型 了解JS如何进行值类型化，并了解其如何提供访问和使用内存，以及代码的定义部分。 Scope和闭包 在函数中变量是如何和Scope外的变量交流以及和别的Scope的交互的。 变量提升 Javascript提供了一个非常独特的方式和顺序进行读取和执行代码的方案，你应该对这些有所了解。 JS中的面向对象编程（OOP） 这些年JS也正在提供一些方案来让开发者可以使用一些通用的编程范例。 Async JS 你要build是一个动态的，单页的实时应用，那么你最终是需要写代码来等待一些request的返回，同时又可以在等待时做别的事情。 首先了解Callback函数，然后Promises，玩玩async-await方案，然后了解Generator Functions，然后把这些融合到用XHR请求获取数据，然后等待数据并使用他们更新你的HTML内容并基于它做一些操作。 Array的高阶函数 还在用循环来访问array吗？为什么不试一试“map，find，filter，reduce”等等函数。这些函数都是很有作用的函数。 JS是怎样和浏览器交互的 使用全局的对象，比如window，document等等，JS如何访问HTML元素以及如何注册events以及handle相关的action 对象的解构和运算符 非常方便，尤其是你想访问数据解构或者状态中的一部分，或者不丢失不变性的前提下对其更改的时候 Git的版本控制 当你工作在一个比较大公司，哪怕是一个小的团队的时候，如何管理相关的代码，尤其是不同环境的代码，比如production，staging等等。 所以，你需要理解如何运行git的命令，比如git checkout，checkout -b, git merge等等。你可能需要理解cherry-pick一个功能，或者你需要git revert一些代码。大胆地去用这些命令吧，希望你能够细化它。...

0

前端开发

什么是Web应用架构

就像设计一个产品，你的网页也需要一个很好的蓝图来进行设计，在UI/UX设计的时候，我们称之为原型，这里我们使用“Web应用架构”这个名词。 本文，我们就从开发者的角度来讨论一下这个话题并介绍相关的知识。 什么是Web应用架构 所谓web应用架构就是一个用来处理内外部各个组件的框架，他主要处理这些组件之间的连接和交互（中间层，用户接口以及数据库等等）。这样，web就可以被客户所使用。 它最初的功能就是让所有的组件都能够同时工作，然后为之后的扩展打下一个更好的基础。 很多开发者都会忽略这一步，而直接开发网页。然而，假如你希望你的网站可以很方便的扩展，并且可靠，安全，那么这一步显然是不可忽略的。 所有人包括开发者，客户设置最终的终端用户都应当参与进来，看看什么样的网站是真正需要的。 Web应用架构组件 Web应用架构有很多种组件，不过总得来说他可以分为两个大类，一个是用户接口组件，另外一个结构性组件。 用户接口组件就是用来创建web应用接口的。换句话说，这些组件和你的显示，设置是密切相关的。他们包含仪表板，统计数据，通知元素，布局，活动跟踪，配置设置等等方面。 另一方面，结构性组件则在构建一个web应用功能的部分起到了很大的作用。因为，他们是允许用户和网页交互的组件，简单的举三个例子： 1）web应用服务器：用Python，PHP，Java，.NET等等开发，他有相关的商业逻辑（或者规则，限制），这样网站就可以自动的运行了。 2）数据库服务器：它存储了网页所需要的数据，并且提供查询，修改等等功能。 3）浏览器：用户是通过它来和网站最终进行交互的。CSS,HTML和Javascript是三大用于开发这个的语言。 Web应用架构的类型 取决于各种各样的因素和目的，开发者最终会选择下面三种的一种来进行web应用的开发： 1）单页应用：他和一个桌面应用类似：“可以使用web server的数据来重写浏览器中的页面，而不需要重新加载整个页面。”这样的话，用户的体验会变得很好，因为不会产生任何的中断​。目前来看，这也是最流行的web应用架构。 2）微服务架构：这种架构会把整个网页分成多个小的部分，然后一个部分一个部分地进行开发。这种网页，用户可以很方面的推出他们的产品，因为每次都只有一个功能在运行。 3）无服务器框架：当选择这种的时候，不在需要管理结构。你所需要做的就是开发功能。 通用的创建Web应用架构的技术 Java Web应用架构 他可以很容易地把各种Java框架或者工具结合起来，不管他们有多复杂或者简单。有了这样的特性，所以一般会用在比较大的项目或者商业开发环境中。 基于云的架构 所有的数据和功能都存储在云上或者一个本地服务器上。这样一来，不同的系统相互之间都可以交互，哪怕他们之间没有直接连接。 RabbitMQ 这是一个可以存储Message Queue的地方，然后软件可以获取响应的Message。开发者在建立交易系统的时候可以使用他。 .NET Web服务器架构 可以在一台机器上处理跨平台的软件，Docker，微服务是它最重要的能力之一。除此之外，你设置不需要源码来存储数据。 PHP Web应用架构...

0

前端开发

使用Node.js开发可伸缩web app的七个优势

最近这些年，Node.js已经成为创建可伸缩web应用的首选技术。基于他所提供的各种好处，有很多开发者都会使用它。2020年Stack Overflow的调查，51.9%的开发者认为node.js是最受欢迎的web开发框架。 从目前的趋势来看，基于下面的这些优势，Node.js在2020仍然会成为开发者的首选。 Node.js为实时应用提供了很好的性能 用Node.js支持多任务，这使得其上开发的应用有很多的好处。和其它平台不同，他单线程，事件驱动的架构可以有效地处理多个并发请求，而不会阻塞RAM。他的事件循环，非阻塞的IO操作可以让代码有序执行，这会显著地影响应用的整体性能。 Node.js如此强大在于他是基于Google Chrome V8引擎创建的，并且是用C++写的。他可以很有效地把Javacript代码解析成高效和快速的机器码。更重要的是，Google投入了很多精力在它的引擎上来优化性能，安全性，以及提供对JavaScript各种特性的支持。这些都直接影响了V8的性能，当然最终也会影响Node.js的性能。 为了让这个优势能够持续，Google引入了一个V8的基准测试，以便Node.js能够更快地执行，更好的编译，有更好的安全补丁以及扩展能力。 Node.js为现代应用提供了很好的扩展性 有越来越多的千万级客户使用Node.js，比如Netflix，Walmart，Uber，Paypal等等，都已经证明了Node.js是一个很好地具有扩展性的方案。 目前的尖端技术，像集群模块（cluster）都提供了很多功能。它很方便地提供了多个CPU的负载平衡，可以通过小的模块很方便地实现我们想要的输出，而不需要耗尽RAM的进程。另外Node.js使用了可伸缩的非阻塞的事件循环机制，并且使得服务器可以无缝地处理各种请求。 从开发者的角度来说，Node.js允许你使用微服务，从而可以把应用分成很多小的部分。这样，你就可以让不同的团队来处理不同的任务，可以实现快速的开发，并且维护起来也很方便。Node.js和微服务可以让应用按照需求进行伸缩，从而使用最少的资源实现更高的性能。 Node.js有活跃的社区支持 有上百万的开发者活跃在社区，所以不管是多么复杂的问题，我们应该都可以解决。 众所周知的NPM是世界上最大的包管理。他提供了数不尽的工具和库，你可以在你的项目中使用他们。你还可以在github上发现很多你想要的各种资源。 目前IBM也在大力支持它，他们计划继续在赞助和在重要活动上推广这个项目。另外他们还计划继续推动Node.js和JsFoundations的合并，这必然会产生一个更好的JavaScript生态系统。 这些活跃的社区是很多巨头在背后的，比如Amazon，Google，Facebook以及Netflix等等。他们已经贡献了很多开源的解决方案，有了他们的支持，再加上我们这么多的开发者，这项技术的不断成长必然是可以预见的。 Node.js非常易于学习和便于使用 毫无疑问，Javascript是最流行和广泛使用编程语言。对web开发者来说，Node.js很容易上手和学习。用他来写代码非常简单。 2016的一项调查显示，Javascript是前端开发者们最喜欢的编程语言。哪怕是一个新手，学习和使用Node.js也不需要花费太多的时间。 StackOverflow的一个最近调查显示，49.9%的专业开发者，选举Node.js作为最常使用的技术。 Node.js提供了各种扩展性满足用户的需求 企业永远会不停发展。假如你的用户已经到了瓶颈或者想要看看别的领域，Node.js都可以很方便地进行扩展并满足用户不断发展的需求。Node.js可以使用内置的API来开发HTTP和DNS服务器以及JSON的使用，这些都是的客户端和服务器的交互变得尤其简单。 Node.js可以使用快速的cache来降低加载时间 Node.js使用他的caching模块，可以降低任务工作量和代码的再执行。每次你的应用的第一个模块得到一个请求后，他都会cache在app内的内存中。有了这些，你的应用可以在毫秒时间内得到想要的数据，而不需要等很长时间。 Node.js可以自由地创建跨平台应用 有了Node.js之后，你就可以使用Electron和NW.js来创建跨平台的实时web应用。你再也不用花费时间来为不同的桌面版本写各种不同的代码了 — Windows，Linux和MacOS。 以后，你的开发团队开发各种不同桌面应用，而不需要理解Objective-C，C#或者别的语言。另外，开发者们可以通过Google Chrome Developer Tools来build，debug和写代码。...

六个Javascript新手需要注意的事情 0

前端开发

六个Javascript新手需要注意的事情

我们写这篇文章当然不是说Javascript不好，只是说它有些特性和我们通常理解的面向对象的语言有些差别。而这些差别很有可能和你所想的有很大的差别。但并不是说他们就不好，从另外一个方面来讲，假如你习惯了，也许这也是Javascript独特的魅力。 1. 三个等号 假如你学过别的编程语言，比如Java之类的，你肯定知道一个等号表示赋值，两个等号表示比较。但是在Javascript中，你会发现这里不仅有两个等号，还有三个等号===。我们应该使用哪个呢？他们之间有什么差别的呢？其实两个等号，简单说就是只比较他们的值，而不管他的类型，比如： 这里会返回true，因为他们的值是相等的，哪怕他们是不同的类型。 再看下面这个例子： 在三个等号的情况下，上面一个例子会发现’2’和2的类型不同，所以就会直接返回false。也就是说三个等号需要是同样的类型，然后才进行值的比较。 通常来说，会推荐使用三个等号来进行比较。 2. 很多创建对象的方法 在Java或者C#中，你会有一个类，然后基于类创建对象。而在Javascript中，则更加灵活，你可以使用一下方法来创建对象： 使用类：Javascript中也有class，你可以定义相应的方法，域，getter， setter的调用等等。下面就是一个例子： 对象字面量（Object Literal): 你可以不定义类就创建对象，你只要使用{}就可以了，如下所示： 使用 Object create：你可以使用object.create()来创建对象，他是基于现有对象的prototype来创建的。参见下面的例子： 3. 块语句，看起来好像没有作用域 一些块语句，比如if, for, while等等，并不会创建一个本地的局部域。这也就意味着你在他们里面创建的变量，在他们外面是可以访问的。比如： 这里，console.log(i)会打印10，是不是很惊喜，为什么这个i在for循环之外还能访问呢？假如你去问Javascript的创始人Brendan Eich，他回答你，这就是个feature，哈哈。 假如你想让Javascript这个特性和别的你熟悉的语言类似的话，那么你可以使用let或者const，像下面这样： 这样之后，你会得到i没有定义的错误。为什么会这样，因为let允许你定义只在某一个块中存在的变量。所以，这就是使用let而不是var的一个典型场景。 4. 上下文中，this的值是什么 你可能听说过一个玩笑，就是根本没有知道this是什么，假如一个空文件，那么this是一个全局的语境。比如下面这个代码： 上面代码中，我们把name赋给global变量，这个this的值就从global的语境中得来。 我们再来看下面这个代码： 在这里，this就是这个object本身了，这里我们知道name是什么，比如例子中就是chris。...

0

前端开发

关于Web开发的十个流行的Github项目 — 2020年七月

1. Lazysizes Lazysizes是一个非常快捷（无垃圾），对SEO非常友好且可以自动初始化的一个延迟加载器。它支持图片（包括响应的图像图片/密码集），iframe，脚本、小工具等等。 GitHub网址: https://github.com/aFarkas/lazysizes 2. Slate Slate可以帮助你创建漂亮的，智能的可响应的API文档。 Github网址： https://github.com/slatedocs/slate 3. Simplefolio 开发者的最小作品集模板。 Github网址：https://github.com/cobidev/simplefolio 4. Skeleton Skeleton是一个简单的响应式的样本，可以启动任何响应式的项目。 Github网址： https://github.com/dhg/Skeleton 5. Dev Icon Devicon的目标是收集到所有能够展示开发语言和工具的图标。每一个icon都有多个版本：font/svg， original/plain/line， 有颜色的/无颜色的，有字标和无字标的。 目前Devicon已经有了78个图标和200+个版本，而且还在增长中。 Github网址： https://github.com/konpa/devicon 6. minireset.css 他是一个小的CSS重置，包含了下面这些内容，包含重置字体大小，重置块Margin，重置表格等等。 Github网址： https://github.com/jgthms/minireset.css 7....