前端栈开发

正文1. 单例模式(SingleTon)定义也叫单例模式，核心思想是确保一个类只对应一个实例。虽然js是弱类型的语言，但是js也有构造函数和实例。所以这里可以理解为确保多次构造函数时，都返回同一个实例实现根据定义，我们需要实现一个构造函数，并且满足以下条件：function A(){ //需要实现的函数内容}var a1 = new A() var b1 = new A()a1 =...

js获取日期常用如下： var date = new Date();//中国标准时间 var year = date.getFullYear();//获取完整的年份(4位) var month = date.getMonth();//获取当前月份(0-11,0代表1月) var nowDate = date.getDate();//获取当前日(1-31) va...

1.安装Vue CLI, 当前最新版本：@3.0.0-rc.3。注意安装前先卸载Vue CLI 2npm install -g @vue/cli2.在Vue CLI 3中如果要使用vue init命令，还需安装vue/cli-initnpm install -g @vue/cli-init3.初始化项目vue init webpack my-vue-project安装完成以后增加目录如下：4.安装...

介绍框架介绍，使用webpac构建的react单页面应用，集成antd。使用webpack-dev-server启动本地服务，加入热更新便于开发调试。使用bundle-loader进行代码切割懒加载手动搭建，不使用cli，大量注释适合初学者对webpack的理解学习，对react项目的深入了解启动 git clone https://gitee.com/wjj0720/react-demo.gi...

通常当用户打开一个资源的url,如果浏览器支持这个格式的文件的情况下，浏览器会尝试去再页面里展示它而不是直接下载。例如一张图片(jpg, png, gif等)，几乎所有浏览器都会去将图片在浏览器里面展示。对于压缩格式的文件(zip, tar, gzip等)浏览器总是会直接去下载它们，另外一些格式的文件，根据浏览器的不同也会有差异的处理方法，例如Microsoft Word文件(doc, docx)...

浅谈前端中的错误捕获某一天用户反馈打开的页面白屏幕，怎么定位到产生错误的原因呢？日常某次发布怎么确定发布会没有引入bug呢？此时捕获到代码运行的bug并上报是多么的重要。既然捕获错误并上报是日常开发中不可缺少的一环，那怎么捕获到错误呢？万能的try...catchtry{ throw new Error()} catch(e) { // handle error}看上去错误捕获是多么的...

挺长的一篇文章，建议不太熟悉数据结构的同学慢慢阅读一下这篇文章，希望对你有所帮助~以下是译文正文：当开发程序时，我们（通常）需要在内存中存储数据。根据操作数据方式的不同，可能会选择不同的数据结构。有很多常用的数据结构，如：Array、Map、Set、List、Tree、Graph 等等。（然而）为程序选取合适的数据结构可能并不容易。因此，希望这篇文章能帮助你了解（不同数据结构的）表现，以求在工作中...

前端测试或许被好多人误解，也许大家更加倾向于编写面向后端的测试，逻辑性强，测试方便等聊到这导致了好多前端从来不写测试（测试全靠手点～～～）其实没必要达到测试驱动开发的程度，只要写完代码可以补测试，并且补出高效的测试，前端或许真的不需要手点大前端时代不谈环境不成方圆，本文从下面几个环境一一分析下如何敏捷测试node 环境vue 环境nuxt 服务端渲染环境react 环境next 服务端渲染环境an...

lazy-mock  lazy-mock 是基于koa2构建的，使用lowdb持久化数据到JSON文件。只需要简单的配置就可以实现和json-server差不多的功能，但是比json-server更加灵活，后期可配置性更强，完全可以模拟真实后端业务逻辑。  lazy-mock默认包含了jwt实现的登录与登出，实现了基于RBAC模型的通用权限控制逻辑。具体可查看vue-quasar-admin。Cl...

网络相关的知识是每个前端工程师都应该具备的。很多从事前端的朋友们都没系统学习过计算机网络和http相关内容。在没有建立一个整体的知识体系下，会有一种一站到底答题的感觉，每个知识点都大致知道问题的答案，但总不确定，更不知道具体是怎么回事。本文系统的梳理了与前端密切相关的网络知识。（这是我自己学习的总结，整理出的笔记，分享给大家）本文中的代码演示整理在《node.js的小美好》 ：还是老规则，在学之前...

网站性能监测与优化策略0.引言作为互联网项目，最重要的便是用户体验。在举国“互联网+”的热潮中，用户至上也已经被大多数企业所接收，特别是在如今移动端快速发展的时代，我们的网页不仅只是呈现在用户的PC浏览器里，更多的时候，用户是通过移动产品浏览我们的网页。加之有越来越多的开发者投入到Web APP和Hybrid APP的开发队伍中，性能，又再一次成为了被程序员们重点关注的话题。我曾经看到过这样一句话...

在前端切图工作里，本质来说就是“选择图层-获取信息、编辑图层-导出图层”的过程，本文主要介绍在这个过程里的一些技巧。1、面板这里的面板指的是在顶部主菜单“窗口”下可开启的窗口。最常用的几个窗口必属“属性”、“信息”、“图层”，屏幕够大的同学建议把它们都展开在界面右边。那为什么说这几个面板很常用呢？下面会慢慢介绍到。2、选择图层在移动工具(V)下这个操作非常常用：option+右键/command+...

篇幅可能有点长，我想先聊一聊阅读的方式，我希望你阅读的时候，能够把我当作你的竞争对手，你的梦想是超越我。你想超越我，就得了解我懂什么对吧，好，开始阅读~ ~ 哈哈哈 ~ ~ ~历时144000000毫秒出山的前端优化篇，若你问我有什么感悟？那我告诉你，看到毫秒啊，火箭啊，这些与优化相关的词，都有莫名的亲切感。本文主要从工作效率、速度性能、稳定性、响应式、兼容性、搜索SEO、信息无障碍等方面进行讲解...

1.前言在前端学习里面，很多人都是注重学习代码（html，css，js）。或者是一些框架，库（jquery，vue，react）,或者是各种工具（webpack，gulp）。在以往的文章里面，或者自己和别人交谈，都有建议过别人多练，不要闷头就写代码，多深入了解当中的原理，学习其中的思想。但是除了代码方面的知识之外，还有哪一些是作为一个前端，应该扩展学习的呢？下面简单罗列和整理了一下最近学习的资源。...

前言继HTML5新增了诸多新的标签之后，HTML5.2又引入了几个现代标签，其中就包括<dialog>标签。 下面跟大家一块学习一下这个标签。举个栗子下来看一个最简单的例子↓：以上就是dialog的原生态样式，未添加任何额外样式。这在Chrome和Firefox里表现是一致的，它们各自的默认样式是这样的，基本一致——Chrome： Firefox: 嫌丑？！如果给它加上瘦脸（去掉默认样...

Webpack 4 发布已经有一段时间了。Webpack 的版本号已经来到了 4.12.x。但因为 Webpack 官方还没有完成迁移指南，在文档层面上还有所欠缺，大部分人对升级 Webpack 还是一头雾水。不过 Webpack 的开发团队已经写了一些零散的文章，官网上也有了新版配置的文档。社区中一些开发者也已经成功试水，升级到了 Webpack 4，并且总结成了博客。所以我也终于去了解了 We...

记得前百度工程师张云龙说过，页面前端优化问题绝对不仅仅是为页面提速的问题，更是工程的问题，有兴趣的同学可以阅读《前端工程与性能优化》。里面有提到根据雅虎14条优化原则，《高性能网站建设指南》以及《高性能网站建设进阶指南》中提到的优化点梳理出来的优化方向：张云龙先生提及到的优化方向从提出到现在虽已相隔两年时间，前端技术也在飞速发展，但其提到的工程化思想仍是前端优化的一个大方向，亦有很大的指导意义。当...

通常做法对于代码党来说，很简单的加上一行代码就能够搞定：1view.layer.cornerRadius = 5对于 Storyboard 狂魔，一般情况下，很多人会先把视图拉一个 IBOutlet 然后再到 awakeFromeNib: 或者 viewDidLoad: 方法中去设置圆角，代码如下：123456@IBOutlet weak var customView: UIView! ove...

JavaScript依然是2018年最受欢迎、最流行的编程语言，所以它的生态系统也十分完善。JavaScript小小的标准库不足以应付各种开发需求。在Github上，有许多流行的JavaScript库。在这里，我整理了一个列表推荐给大家：1. Underscore & Lodash(dah)也许大多数童鞋都已经知道它们。Underscore提供了日常使用的基础函数。Lodash, 作为NP...

Promise 札记研究 Promise 的动机大体有以下几点：对其 api 的不熟悉以及对实现机制的好奇;很多库(比如 fetch)是基于 Promise 封装的，那么要了解这些库的前置条件得先熟悉 Promise;要了解其它更为高级的异步操作得先熟悉 Promise;基于这些目的，实践了一个符合 Promise/A+ 规范的 repromise本札记系列总共三篇文章，作为之前的文章 Node....

vue已是目前国内前端web端三分天下之一，同时也作为本人主要技术栈之一，在日常使用中知其然也好奇着所以然，并且最近的社区涌现了一大票vue源码阅读类的文章，在下借这个机会从大家的文章和讨论中汲取了一些营养，同时对一些阅读源码时的想法进行总结，出产一些文章，作为自己思考的总结，本人水平有限，欢迎留言讨论~目标Vue版本：2.5.17-beta.0vue源码注释：https://github.com...

前端进阶之困最近看了不少文章和帖子， 如文：前端的焦虑，你想过30岁以后的前端路怎么走吗？前端怎么一步步走向全栈呢？移动端入门Node.js怎么学习?前端的未来走向在哪里？工作2年多的前端，现在迷茫了，如何更进一步的提升自己身边和朋友圈也不少做前端开发的同事朋友问如何发展和提升这里我向大家给一些建议扎实基础首先思考下手上的工作是否做得足够好了，近几年前端技术发展迅猛各种框架层出不穷，刚学会jque...

引言三维计算机图形和二维计算机图形的不同之处在于计算机存储了几何数据的三维表示，其用于计算和绘制最终的二维图像。——《3D computer graphics》随着 WebGL 标准的快速推进，越来越多团队尝试在浏览器上推出可交互的 3D 作品。相较于二维场景，它更能为用户带来真实和沉浸的体验。然而 OpenGL 和 WebGL（基于 OpenGL ES） 都比较复杂，Three.js 则更适合初...

前言iPhoneX 取消了物理按键，改成底部小黑条，这一改动导致网页出现了比较尴尬的屏幕适配问题。对于网页而言，顶部（刘海部位）的适配问题浏览器已经做了处理，所以我们只需要关注底部与小黑条的适配问题即可（即常见的吸底导航、返回顶部等各种相对底部 fixed 定位的元素）。笔者通过查阅了一些官方文档，以及结合实际项目中的一些处理经验，整理了一套简单的适配方案分享给大家，希望对大家有所帮助，以下是处理...

在 Web 开发中，经常需要实现各种动画效果，例如：移动、变形、透明度变化等，今天我们主要来讨论各种移动的实现。直线移动通常可以直接由各个点的位置，以及到点的时间与整个动画持续时间的比值，写出类似下面的代码并可实现动画。12345678910.cray { animation: move 2s alternate infinite;}@keyframes move { 0% { transfo...

前言之前接手公司一个前端项目，开发了几个月后越来越难以忍受项目结构的混乱和打包体积的臃肿（脚手架和基本功能代码都是从公司的其他项目复制过来的），如果不立即进行重构，难以想象以后要怎么维护各个产品线。于是我自告奋勇承担了项目框架的优化任务，这里分享一下我在打包体积优化中所研究的成果，经过几轮的努力，成功的将我们这个 react+antd+immutable+rxjs的较大项目从打包后的9MB降低到了...

1.冒泡排序原理：冒泡排序的过程就是将数组中相邻的两个元素进行比较，如果前面的元素比后面的元素要大交换位置，否则位置不变；举个栗子：有数组 arr = [3,5,4,2,1];第一轮循环：3和5比较，3小于5两者位置不变，接下来5和4比较，5大于4，两者交换位置，接着5和2比较，5>2两者交换位置，继续5和1 比较 5>1两者交换位置，一轮后得到的数组是[3,4,2,1,5];把大的元...

jfinal-angular-icedog 详细介绍一个Jfinal+angular的框架实现，属于jfinal-dreampie的一个demo，在线访问：http://icedog.jd-app.com/ 欢迎收藏使用jfinal框架开源工具包jfinal-dreampie,http://search.maven.org/ 输入jfianl-draempie 搜索并提供akka异步执行...

angular-nice-bar 详细介绍一个轻量级的Angular scrollbar.Installbower install angular-nice-bar --saveUsage<link rel="stylesheet" href="bower_components/angular-nice-bar/dist/css/angular-nice-bar.cs...

Angular-UEditor 详细介绍Angualr 作为最近前端大热的一款框架，越来越多国人开始使用并且不断有成功的项目。UEditor作为百度前端团队的一款神器，在国内多个项目也在使用。所以小编抽了个时间把angular和UEditor整合起来作为一款angular的插件。angular-ueditorangular-ueditor 是一款整合了 angular 和 UEdito...

this的指向已经是一个老生常谈的问题，每逢面试都要去复习复习，近来巩固js的基础，决心彻底掌握这个知识点，一劳永逸。说明一下，为了不影响大家的思考过程，下面的代码都不会去注释答案，想知道答案，只需要去控制台执行一下。四类场景逐一击破首先，分析this的指向共有四种类型，在分析之前，我们首先带好两个锦囊：1.函数被调用时（即运行时）才会确定该函数内this的指向。因为在函数中this与argume...

1.数据驱动DOM是数据的一种自然映射。传统的前端数据交互是用Ajax从服务端获取数据，然后操作DOM来改变视图；或者前端交互要改变数据时，又要再来一次上述步骤，而手动操作DOM是一个繁琐的过程且易出错。Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它让开发者省去了操作DOM的过程，只需要改变数据。Vue会通过Dircetives指令，对...

前言虽然前端面试中很少会考到算法类的题目，但是你去比如像腾讯一样的大厂面试的时候就知道了，对基本算法的掌握对于从事计算机科学技术的我们来说，还是必不可少的，每天花上 10 分钟，轻松了解基本算法概念以及前端的实现方式。另外，掌握了一些基本的算法实现，对于我们日常开发来说，也是如虎添翼，能让我们的 js 业务逻辑更趋高效和流畅。特别说明今天这个算法稍微比较复杂，牵扯到的概念也比较多，需要先了解基础知...

分页类型首先我们要简单认识下，何谓流式分页。分页一般用于对信息列表进行分段。根据具体功能及交互方式的不同，大致可将分页分为两种类型：传统分页和流式分页。传统分页传统分页多用于 PC 页面，最常见于搜索结果页，如我们常用的搜索引擎 Google：还有百度：在京东的搜索结果页中，也可见传统分页的影子：而在移动端页面中，限制于点击区域的大小，因此较少使用传统分页。结合上述例子，我们可分析出，传统分页有如...

导语：随着移动设备的普及以及微信庞大的用户量，移动端的需求也随之爆发式增长，平时我们使用 Chrome 进行手机模拟页面开发，但模拟终究是模拟，不可避免的还是需要真机调试，下面就来讲讲几种调试方案，希望能对你有所帮助。系统自带调试功能iOS 系统运行环境要求Mac + Safari 浏览器iPhone（iOS 6 +） + Safari 浏览器调试步骤1、使用 Lightning 数据线将 iPh...

angular-auto-validate 详细介绍angular-auto-validate 是 AngularJS 的自动校验的模块，支持动态元素修改来消除多余的HTML，并且给用户校验错误的提示。 jonsamwell / angular-auto-validateWatch16 Star351 Fork89An automatic validation module...

angular-semantic-ui 详细介绍angular-semantic-ui 是 AngularJS 为 Semantic UI 设计的原生指令集。指令 accordion checkbox dimmer dropdown modal popup rating sidebar 构建获取 rep...

angular-async-loader 详细介绍支持异步加载 angular 1.x application 的模块和组件: Support use dynamic angular module:app.useModule(name)Support use origin methods to dynamic register angular components:app.c...

1.前言在前端学习里面，很多人都是注重学习代码（html，css，js）。或者是一些框架，库（jquery，vue，react）,或者是各种工具（webpack，gulp）。在以往的文章里面，或者自己和别人交谈，都有建议过别人多练，不要闷头就写代码，多深入了解当中的原理，学习其中的思想。但是除了代码方面的知识之外，还有哪一些是作为一个前端，应该扩展学习的呢？下面简单罗列和整理了一下最近学习的资源。...

宏观上，微信小程序是由一个个 Page 组成的。有时候我们会遇到一些业务存在耦合的 Page，一个 Page 里某个状态改变后，相关 Page 的状态需要进行更新。而在小程序里，每个 Page 都是一个模块，有着独立的作用域，因此 Page 间需要有一种通信策略。想象一个业务场景，用户首先进入订单列表页。然后点击其中一个订单，进入到订单详情页。当用户在订单详情页对订单进行操作，例如支付、确认收货等...