blog
blog copied to clipboard
大前端技术为主,读书笔记、随笔、理财为辅,做个终身学习者。
![JavaScript 数据结构与算法之美](https://upload-images.jianshu.io/upload_images/12890819-9f08a1abed2d7caf.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) ## 1. 前言 > 算法为王。 > 想学好前端,先练好内功,内功不行,就算招式练的再花哨,终究成不了高手;只有内功深厚者,前端之路才会走得更远。 笔者写的 **JavaScript 数据结构与算法之美** 系列用的语言是 **JavaScript** ,旨在入门数据结构与算法和方便以后复习。 文中包含了 `十大经典排序算法` 的思想、代码实现、一些例子、复杂度分析、动画、还有算法可视化工具。 这应该是目前最全的 `JavaScript 十大经典排序算法` 的讲解了吧。 ## 2. 如何分析一个排序算法 复杂度分析是整个算法学习的精髓。 - 时间复杂度: 一个算法执行所耗费的时间。 -...
内容包括:HTML + CSS + JS + ES6 + Webpack + Vue + React + Node + HTTPS + 数据结构与算法 + Git。 因为内容太多,所以提交不了 issues,只能保存在 md 文件里面。 文章地址:[fe-interview](https://github.com/biaochenxuying/blog/blob/master/interview/fe-interview.md)
![](https://upload-images.jianshu.io/upload_images/12890819-c6ef743c696cd696.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 首屏作为直面用户的第一屏,其重要性不言而喻,如何加快加载的速度是非常重要的一课。 本文讲解的是:笔者对自己搭建的个人博客网站的速度优化的经历。 效果体验地址:[ http://biaochenxuying.cn](http://biaochenxuying.cn) # 1. 用户期待的速度体验 2018 年 8 月,百度搜索资源平台发布的《百度移动搜索落地页体验白皮书 4.0 》中提到:**页面的首屏内容应在 1.5 秒内加载完成**。 也许有人有疑惑:为什么是 1.5 秒内?哪些方式可加快加载速度?以下将为您解答这些疑问! 移动互联网时代,用户对于网页的打开速度要求越来越高。百度用户体验部研究表明,页面放弃率和页面的打开时间关系如下图所示: ![页面放弃率和页面的打开时间关系](https://upload-images.jianshu.io/upload_images/12890819-6fc8794f8694acfb.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 根据百度用户体验部的研究结果来看,普通用户期望且能够接受的页面加载时间在 3 秒以内。若页面的加载时间过慢,用户就会失去耐心而选择离开,这对用户和站长来说都是一大损失。 百度搜索资源平台有 “闪电算法” 的支持,为了能够保障用户体验,给予优秀站点更多面向用户的机会,“闪电算法”在 2017 年 10...
![webpack.png](https://upload-images.jianshu.io/upload_images/12890819-ec0e3fdc2db95e7c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) # 前言 vue-cli 都到 3.0.3 了,所以是时候玩转一下 vue-cli 3 的新特性了。 # 1. vue-cli 3.0.3 > 以下的安装都是在 macOS 的环境下进行的,当然在 windows 和 linus 下也同理。 #### 1.1 安装 >vue cli 的包名称由 vue-cli 改成了...
![复杂表格表头](https://upload-images.jianshu.io/upload_images/12890819-16b19df5086c909d.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) # 前言 最近做移动端的h5项目,要做一个可配置表头的复杂表格,网上找了很久也没什么好方法,结合网上的一些例子,在此做一了一个完整的vue版的例子。 # 效果 无图无真相,先上最终效果图再说 。 ![table.gif](https://upload-images.jianshu.io/upload_images/12890819-be79d4bf9ad6a107.gif?imageMogr2/auto-orient/strip) # 方法一:iscroll 插件版 ### 第一步:npm install 引入 iscroll ``` npm i iscroll --save ``` ### 第二步:封装 对插件再做一层封装,封装成 iscrollTable.js 方便调用,代码如下: ``` //...
# 1. 表头设计 原理: 和多叉树的原理类似,参考了它的展示形式。 ![多叉树.png](https://upload-images.jianshu.io/upload_images/12890819-f4bcf1a0b1e45112.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 表头说明: 如果没有孩子节点就只返回如下一个字段: - name :名字 如果有孩子节点,就把数据加在children里面,层层嵌套,返回字段如下: - name :名字 - children : 孩子节点 数据结构格式,参考如下代码: ``` headerData:[ { name: '地区', }, { name: '总数据', children:...
>程序员不止眼前的逻辑和代码,还有底层的框架与架构。 1. 前言 最近在做一个复杂表格设计数据格式设置,其中用到了多叉树的原理,所以要用到递归来实现数据格式化。 2. 递归的概念 在程序中函数直接或间接调用自己 **注意:**使用递归函数一定要注意,处理不当就会进入死循环。递归函数只有在特定的情况下使用 ,比如阶乘问题。 3. 例子 #### 1. 一个阶乘的例子: ``` function fact(num) { if (num
![[email protected]](https://upload-images.jianshu.io/upload_images/12890819-c4d1e64e36d6c6d8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) #前言 此文章是我最近在看的【WebKit 技术内幕】一书的一些理解和做的笔记。 而【WebKit 技术内幕】是基于 WebKit 的 Chromium 项目的讲解。 #第一章 浏览器和浏览器内核 WebKit 内核是苹果2005年先开发并提出开源的,后面 Google 也以此为基础,并独立开发出 Chromium 的,2008年 Google 为 WebKit 为内核创建了一个新项目 chormium ,后来 Google 的 chrom 占领了浏览器的大部分市场。 ![WebKit](https://upload-images.jianshu.io/upload_images/12890819-9f5fde9ee20076c7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 图...
![BiaoChenXuYing](https://upload-images.jianshu.io/upload_images/12890819-22d0cb2d40e09612.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) # 前言 本文讲解的是:做为前端开发人员,对服务器的了解还是小白的我,是如何一步步将 node+mongodb 项目部署在阿里云 centos 7.3 的服务器上,并进行性能优化,达到页面 1 秒内看到 loading ,3 秒内看到首屏内容的。 搭建的项目是采用了主流的前后端分离思想的,这里只讲 **服务器环境搭建与性能优化。** 效果请看 [http://biaochenxuying.cn/main.html](http://biaochenxuying.cn/main.html) # 1. 流程 - 开发好前端与后端程序。 - 购买服务器与域名 - 服务器上安装所需环境(本项目是 node 和 mongodb...
![vue](https://upload-images.jianshu.io/upload_images/12890819-7820bc20092c4c40.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) ## 1.前言 本文内容讲解的内容:**一张思维导图辅助你深入了解 Vue | Vue-Router | Vuex 源码架构**。 项目地址:[https://github.com/biaochenxuying/vue-family-mindmap](https://github.com/biaochenxuying/vue-family-mindmap) [文章的图文结合版](https://biaochenxuying.cn/articleDetail?article_id=5cd7896c74289f3d47ed13ea) [Vue-family.md](https://github.com/biaochenxuying/vue-family-mindmap/blob/master/Vue-family.md) [Vue-family.pdf](https://github.com/biaochenxuying/vue-family-mindmap/blob/master/Vue-family.pdf) ## 2. Vue 全家桶 先来张 Vue 全家桶 总图: ![](https://upload-images.jianshu.io/upload_images/12890819-f7a2788fbc61e68a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) ## 3. Vue 细分如下 ### 源码目录 ![](https://upload-images.jianshu.io/upload_images/12890819-41efc5a9eec040f8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)...