- 博客(70)
- 资源 (1)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 CSS巧妙使用-动画
CSS巧妙使用-动画CSS动画的实现主要有两种，一种是使用CSS3的transition属性，另一种就是animation属性，这两个属性都可以用来实现一些动效，transition一般用来实现简单点的的够了，比较复杂的动效还是要依靠animation。最大区别就是transition不能定制化地设置动画的形态，animation可以比较灵活一些。
2021-09-16 19:56:59
392
1
原创 Webpack理论与实践2
上期说到webpack插件，那我们这次来看一下 如何手写一个自定义插件，在这之前首先要大概了解插件的工作原理，这里引用Segmentfault上面的一篇帖子，感觉讲的比较透彻。揭秘webpack插件的工作原理插件编写 插件的实现主要运用了webpack里面的一些钩子【生命周期】，最主要是的compiler对象和complication中包含的钩子，同时使用Tapable事件流机制，对webpack的钩子注册事件监听，然后在使用插件的时候，就会执行监听里面的回调。这里我们举一个对打包文件进行换行处
2021-05-17 19:52:22
200
原创 Webpack理论与实践1
Webpack理论与实践解决什么样的问题随着前端项目越来越复杂，普遍的一个做法是模块化项目管理，而早期的前端模块化有以下这么几种方式1. 文件划分 - 不同的模块就放到不同的文件 module1.js module2.js // module1.js function a() { console.log("module1"); } // module2.js var module2Data = "123";这种方式的缺点也比较明显：1） 变量没有进行私有
2021-04-23 20:41:41
660
3
原创 从浏览器地址栏输入回车后会发生什么？
前言在前端面试中，往往会有一个非常经典的面试题，从浏览器地址栏输入地址，并敲下回车后会发生什么？这是一个非常宽泛、考察知识广度和深度的题目。还记得最开始回答这个问题时，首先想到的是DNS解析-> 请求数据 -> HTML解析、CSS解析 -> 构造DOM树 -> 构造渲染树 -> 浏览器根据渲染树进行渲染，将页面展示到浏览器界面上。后来接触了winter老师的重学前...
2020-03-12 21:23:52
282
原创 Weex初学与实践
什么是Weex Weex是阿里2016年推出的一个跨平台 Web 应用框架Weex的优势Weex内置组件与模块Weex原理思考
2019-08-24 15:15:32
551
原创 Vue数据驱动原理+源码阅读
实际问题大家在利用Vue进行前端开发过程中，是否遇到过这样的问题：<template> </template>request(url).then(({ data }) =&
2019-01-29 15:06:48
797
1
原创 前端埋点方案调研
什么是埋点？通俗点讲，我理解的埋点就是在系统中植入的一些代码（当然不是恶意代码哈），这些代码可以检测到用户某个行为，可以拿到一些想要的数据，这就是所谓的埋点。在如今的信息时代，数据是一切业务以及企业的核心，对数据的采集、管理、分析是必不可少的一环，而埋点主要是对数据的采集，这决定了后期管理，以及数据分析的准确性，因此，埋点对于任何一个系统都是比较重要的。埋点方案从大方向上来说，埋点主要分为...
2018-11-24 20:54:47
3729
原创 结合JSplumb和VUE实现数据流图遇到的坑
最近在重构项目的过程中，需要实现数据流图，项目原先是使用angualr框架来实现的，用到了jsplumb这个插件，并封装了一些组件，所以在重构的过程中也是按照这个思路来进行重构。流图的代码结构按照思路，将流图封装成这几个组件，并一层层嵌套。<dataCanvas> <dataObject> <dataEndpoint> <dataConn
2018-10-22 21:29:52
7792
12
原创 VUE watch监听对象
今天在项目实现中遇到了关于在Vue中watch监听对象失败的问题，背景是这样的：我在VUE组件中的data里声明了一个空对象：obj: { }然后在某一个函数里面对obj添加某个对象：obj.name = 'liu'再在另一个函数里，对obj的name属性进行修改obj.name = 'yang'监听函数就是大家所熟知的下面这种写法：watch: { obj: { ha...
2018-09-25 20:48:39
1391
原创 Vue 生命周期以及子组件和父组件生命周期发生的先后顺序
从没有认真想过Vue组件的生命周期，以为所有的都是按那个顺序发生和执行的，直到今天在完成某一个业务时，才认真去思考组件的生命周期、子组件与父组件创建和挂载的时间点。VUE组件的生命周期子组件与父组件生命周期发生的先后顺序...
2018-09-17 21:39:58
7754
1
原创 Vue v-if和v-show 以及v-if中遇到的坑
最近在项目开发中，遇到一个难以描述的问题： 问题是这样的<FormItem label="类型" required> <RadioGroup v-model="formdata.radio1" @on-change="changetableType($event)"> <Radio v-for="(item, index) i.
2018-08-20 22:57:14
8811
2
原创 浅谈项目开发流程
初入职场，需要跟同伴组队参加历时一个月的Mini项目，目前已经接近项目的尾声，作为一个从没有如此完整的经历项目的校招生，这里总结了项目的开发流程，作为以后在做项目时的参考。确定选题确定需求这里我们做了大量的用户调研，包括纸质版和网页版的调研报告，同时还做了竞品分析，总结出来一些用户通点。交互和视觉设计这里是视觉设计师和交互设计师来做，包括了界面的展示，如何去交互，以及配色、页面...
2018-08-03 08:53:07
515
原创 利用Vue和Element UI搭建后台管理项目结构
环境安装安装Node.js和Vue-cli自动构建工具使用Vue脚手架工具Vue-cli创建项目结构Vue init webpack projectName选择安装Vue-router和Eslint语法校验工具 3. 这时候一个简单的Vue框架结构就搭好了；npm installnpm run dev此时就可以出现一个Demo页面了。ElementUI...
2018-07-28 15:20:29
1772
原创 Fetch封装方法
何为Fetch？Fetch是一个与AJax请求功能相似的一个请求接口，并且只有浏览器该方法。Fetch的出现一方面是为了缓解原生XMLHTTPRequest实现起来比较杂乱的问题。下面是一个例子：用XHR对象实现Ajax请求： var xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.responseT...
2018-07-19 21:29:18
5170
原创 NEJ框架学习--实现TODOList
NEJ框架的学习最先着手是从NEJ官网教程开始学起的。NEJ教程 这个教程里有很多小例子，比如火车快跑，主要是对火车节点添加点击事件，从而控制每个块的移动速度；还有日历控件的实现，aJax请求，文件上传，利用JST模板实现Tab切换，表单填写验证，动画实现等等。这个教程里不仅有源代码的详细过程，还有一些讲解，可以说非常详细。另外，可以通过查API文档和Classes文档进行更多了解。下面从初
2018-01-28 22:48:10
2428
9
原创 NodeJS之域名解析器实现
之前草草的了解了下Nodejs， 只是大体知道Nodejs类似于一个JavaScript解析器，可以跑JS代码，但是并没有真正去使用Nodejs，且对其理解并不深，所以打算整体学一学Nodejs。整个学习过程是沿着“Nodejs开发实战详解–黄丹华”这本书来看的，目前学习了Nodejs的模块，分为内建模块和文件模块。并且书中有一个DNS域名解析器的实现，自己动手也做了做，这里想做下整理和总结。
2017-12-04 17:05:49
5767
原创 网站性能优化
面试中经常会被问到这类问题，这里做一个总结，可能不会非常全面，希望大家可以一起交流。首先，想跟大家推荐一个浏览器插件YSlow，安装之后浏览器地址栏后面会有一个类似于表盘的图标，如下图： 如何使用呢？ 比如要测一下淘宝页面的网站性能，首先打开淘宝页面，然后点击YSlow的小图标，会弹出一个新的浏览器页面，点击Run Test 评估结果如下图所示： 这里不仅有整个的评级，也有各个方面的评级
2017-10-11 16:39:35
593
原创 唯品会前端面试
一面： 1. 自我介绍 2. 问了一些简历上的东西 3. 浏览器输入URL按回车之后，都发生了什么？ 4. 接着问返回的HTTP响应报文头部里面有什么？ 5. git的Diff算法怎么做的？ 6. TCP和UDP分别适合什么情况？ 7. JavaScript中内存回收机制？ 8. 如何判断两个变量是循环引用了？ 9. 了解百度的FIS框架吗？ 10. 做项目整个开发流程是怎样的？
2017-09-26 14:36:08
2270
1
原创 京东前端面经
京东下午三点，现场面： 1. 自我介绍 2. 对React的认识 3. PHP是什么时候用的？ 4. 为什么没有考虑用Node 5. 对ES6了解什么？ 6. let是做什么用的？ 7. 对闭包有了解吗？ 8. Promise有什么认识？ 9. 有没有了解过ES6的Generator？ 10. KOA有什么了解过？CO？ 11. 如果来到京东的前端团队，让你做一次分享（主题不限
2017-09-24 16:19:06
2159
原创 腾讯前端二面
面试官很随和态度也比较温和，看了看简历，因为上面有用到Weex做的项目，就问了问Weex的东西。Weex和RN这种有什么区别？如果手机上有一个应用，打开一个H5页面，有时候是很慢的，怎么去提高性能？平时除了前端语言还有用到什么语言？C++里面的多态了解吗？C语言里面的malloc和C++里面的new有什么不同？下来是数据结构的问题，手机里面有很多联系人嘛，如果要把这些联系人进行排序，并且
2017-09-23 09:55:09
1785
原创 去哪儿网前端面试
通知的下午五点二十去现场面，然后可能人比较多，等到六点多去面试。还是常规的自我介绍 1. 看我介绍还不错，说难度升高一些问，先是问一个二叉树？有神特点 2. 主要二叉树解决什么问题？ 3. 数据库索引了解吗？ 4. 平衡二叉树了解吗？ 5. 看我答得不是特别理想，说降点难度。jQuery源码整体架构是怎么样的？ 4. 讲一讲你熟悉的一部分jQuery源码(当时说的是延迟对象和回调对象)
2017-09-22 21:03:26
1761
原创 腾讯前端一面
听大家说，腾讯比较注重基础，今天面了一次，感觉确实很注重，不仅仅是在前端方面。首先让自我介绍。 1. 刚介绍完，让写一个堆排序。 2. 后面又让写快排。然后问那个索引值怎么取的？如果这个索引值正好是整个数组的最大值呢？如何去解决这种问题？ 3. 有一个div，里面一个a标签，如何把a标签放到与div一级的位置？ 4. http和https有什么区别？https有什么缺点？如何去解决？ 5.
2017-09-21 16:28:02
1586
2
原创 哔哩哔哩前端面试
一面： 1. 如何实现一个同花顺？写代码如何实现？（七张牌同一花色并且数字相连） 2. display有哪些属性值？ 3. 块级元素与内联元素的区别？ 4. 冒泡排序的复杂度是多少？快排呢？ 5. 如何实现快排？ 6. JS的基本数据类型 7. 获取DOM节点的几个方法？ 8. 如何给DOM节点上添加事件？ 9. 如何实现水平垂直居中？ 10. position的属性值有哪些？
2017-09-19 15:07:01
3924
1
原创 网易前端面试
这是我经历的最完整的一次面试，面试体验很好，面试官也挺不错，会引导你往哪个方向去思考。一面： 首先是比较帅气的一个小哥，先是让自我介绍，完了之后面试官说讲的太快了（哈哈） 然后问了下实习做的东西，主要用的什么？对React了解多少？讲讲虚拟DOM的概念，Diff算法有了解过吗？MVVM模式有了解吗？然后问如何去判断（跟踪）状态数据变化了，从而触发视图UI？ 因为简历里有写看过jQuery源码，
2017-09-18 17:43:38
1706
原创 头条一面
头条视频面感觉很高大上，用牛客网作为平台来进行视频面试的。约的下午两点，一点半进行签到，然后一点四十就开始了。还是每场面试开始时的自我介绍。 1. 问到实习过程中做的什么东西? 2. 提到React组件开发，然后让用React来实现一个轮播组件？主要考虑UI，props和state怎么去设置？ 3. 后面又提了新的需求，所以保证组件的通用性还是很重要的。 4. 用原型链如何去实现继承？ 5
2017-09-17 14:40:51
770
原创 百度一面
下午正在吃饭，然后一个深圳的电话，说是百度的面试官，看到我的简历，约八点开始面试。首先让自我介绍，并说最好介绍一下自己的优点是什么？TCP三次握手四次挥手了解吗？介绍下。HTTPS的连接是什么样的？有了解过吗？（只说了简单原理，没有看过具体是怎么回事？）HTTP的Cache是怎么结合浏览器的，具体能说下有哪些字段？计算机方面学过哪些课程？（说到了算法）然后问排序算法有哪些？（说到插入排序，
2017-09-16 21:12:27
778
原创 JavaScript设计模式-单例模式
在软件开发过程中，我们往往对于一些资源，只需要全局性的一个。比如说唯一的一个线程池，浏览器窗口中唯一的一个window对象等等。这时候，我们需要一类只能有一个实例，并提供一个访问它的全局访问点，这就是单例模式的概念。实现单例模式最简单的，就是设置一个标志，又这个标志来判断是否已经创建了该类。var singleton = function( name ){ this.name
2017-09-15 10:57:39
487
原创 搜狗前端一面+二面
搜狗笔试没过，听同学说最近有面试，所以去面试地点准备霸面，校招负责人通知交了简历，说后面合适的话会再通知。 第二天（今天）一早收到面试电话，说下午四点半面试，面试官还好心提醒不要迟到。下午去面，感觉人很多，主要总结了下面一些内容： 1. 问了一些怎么学习前端？ 2. 说了CSDN博客，然后面试官就登上CSDN博客来看，看了前面一些，后面想到一个考点；JSON的方法有哪些？以及JSON的格式怎么
2017-09-12 23:51:22
3302
原创 美团前端二面+三面+HR
等了一周，迎来了美团的二面，二面面试官是前一天通知的，约好第二天上午面，视频面。今天上午十一点多，等来了二面的电话，然后加了QQ，进行视频面。一开始还是自我介绍。然后在介绍中有说到学前端多久了，然后就问怎么学前端的？后面就开始问一些技术性问题： 1. 如何实现一个计数器；（闭包就可以） 2. 加入上面实现的计数器为f函数。a = f();b = f();a();b();问输出是多少？（这一
2017-09-12 14:50:22
9948
原创 JavaScript设计模式-发布订阅模式
何为设计模式？设计模式其实可以认为是大家约定俗成的一个东西，比如在篮球场上的一些术语，在篮球场上争分夺秒的时候，不可能教练一步一步指导你去怎么做，而是告诉你一个术语，你立马就能反应出来该怎么做。这就是设计模式的现实版例子。在JavaScript开发中，有很多设计模式，经常面试也会被问到一些，比如说发布/订阅者模式，单例模式，迭代器模式等等。今天就先拔一拔发布/订阅模式。发布/订阅模式与我们JavaS
2017-09-07 16:03:51
548
原创 美团前端一面
上周四一个小哥打来，问有没有时间，但是时间不合适，他说这周再联系，但是周一等了一天都没有消息，在牛客网上也有人说收到电话说时间不合适，后来就没有然后了，所以很怕自己也是这种情况，幸好当时打过来的是手机号码，所以今天上午就发了条短信，问小哥啥时候有时间能面？等了会就回我了，说定下午4点半可以不？ 就这样开始了美团一面。主要问了这么些问题：自我介绍做了哪些项目？项目中遇到的问题？技术栈上遇到什么问
2017-09-05 19:31:57
1658
原创 JS 模块化规范
在我们最初写代码的时候，引入JS文件用script标签来引入，并且在引入多个JS文件时，当前文件所依赖的JS文件必须放在前面。也就存在一个顺序的问题，而且这是由开发者去判断和把控的。而现在前端项目越来越复杂，难免会出现很多很多script标签引入JS，这无论对于开发和维护都有着一定的缺点。所以出现了模块化的概念。模块化的形式有很多中，比如把某个特定功能封装成一个函数，但是存在着一个问题，很有可能会出
2017-09-04 15:18:13
2627
原创 ES6语法的新特性
之前面试被问到ES6新特性，箭头函数，generator、Module等等，表示刚开始上手用ES6，目前还没有很深入，所以这次想对ES6一些常用的特性进行整理。let、const主要是实现块级作用域的。因为在原生JS中，没有块级作用域。只有在函数中，才构成一个作用域，但是利用函数是可以实现一个类似于块级作用域的。详见这里。不过，为了更方便的解决类似于下面这种问题：setTimeout(functio
2017-08-30 20:06:23
1897
原创 React 虚拟DOM的理解
React框架现在用的人非常多，React为何如此受欢迎？我想原因是引入了虚拟DOM的概念，从而使得性能有所提升吧。为什么引入虚拟DOM性能就有提升了？下面我想来说一说虚拟DOM的原理。什么是虚拟DOM？React中，先将真实的DOM抽象成一个JavaScript对象，也就是虚拟DOM。比如，我们可以构造一个虚拟DOM：var element = { element: 'ul', p
2017-08-30 13:54:18
5445
原创 React 组件间通信-props的用法
几乎每个流行的框架都会有组件的概念。组件可以看成是一个一个的页面，也可以看成实现某个特定功能的模块。像React、Vue框架，会经常用到组件的概念。看下面一个例子： 基本与上篇博客功能差不多。首先来看效果图： 点击数字框，数值翻倍并且底部的文字改变。这里我们采用组件的方式来做。 整个文件结构如下： 其中，app.js是入口模块。代码如下：import React, { Compone
2017-08-14 13:06:08
613
原创 React入门以及JSX语法理解
本周主要利用React以及JSX语法外加antd UI组件实现一个增加删除数据的页面，一开始上手这个东西挺难的，因为之前没有接触过React框架这些东西，一开始觉得有点无从下手。不过经过一周的努力和适应，差不多完成了整个需求，下来做一个总结。React框架React有一点与Vue是相似的，都是通过数据来渲染页面的，也就是说改变数据就可以改变页面的呈现。但不同的是，Vue直接改变数据，而 React则
2017-08-05 10:59:20
815
原创 jQuery源码阅读（十四）---aJax 模块与异步队列联系
关于ajax，jQuery做了封装，并且考虑了很多浏览器兼容问题，以及跨域问题。当然，这种异步操作离不开我们之前分析的延迟对象。所以这一次，主要是对ajax模块中对于延迟对象的应用进行分析。$.ajax函数先来分析$.ajax()函数。 在这里，我必须贴一张图来展示下ajax源码的整体框架。此图引用于高云（jQuery技术内幕第13章） 上图清楚得描述了整个ajax过程中的一系列流程，同时是按照
2017-07-28 17:59:34
1113
原创 jQuery源码阅读（十三）---jQuery异步队列模块
上一篇博客分析了Callbacks实现原理，而在jQuery中，Ready函数的实现，异步队列以及队列模块都用到了Callbacks对象。jQuery.ready函数在前面已经做了整理，所以这篇博客主要是分析Deffered（异步队列）和jQuery中异步队列的应用。异步队列延迟对象（异步队列）是在回调对象的基础上实现的。这个延迟对象维护了三个列表：成功(done)回调函数列表，失败(fail)回调
2017-07-26 11:06:37
973
原创 jQuery源码阅读（十二）---Callbacks回调对象
还记得jQuery源码阅读（一）的时候，整理了jQuery库的整体架构，主要分为三个模块： 入口模块、底层支持模块和功能模块，各个模块之间也是有关联的。 前面几篇博文分别分析了jQuery库的入口模块，最主要的是init方法的分析；还分析了jQuery底层支持模块中的工具方法，主要是通过jQuery.extend()方法来扩展jQuery静态方法的。底层支持模块中，出了工具方法之外，还有很多模块
2017-07-24 11:44:34
551
原创 jQuery源码阅读（十一）---each、map、grep、merge、makeArray、inArray解读
这两天都在看jQuery源码中的静态方法，上一篇博客介绍了类型检测这一类静态方法，这次主要对后面几个常用的方法进行分析。主要包括：each: function(){} map: function(){} grep: function()merge: function(){}makeArray: function(){}inArray: function(){}each、map
2017-07-20 17:42:47
500
函数参数-参数类型为二维数组
2016-10-14
TA创建的收藏夹 TA关注的收藏夹
TA关注的人