- 博客(32)
- 收藏
- 关注
RSS订阅原创 爬坑记录
1. vue循环中的input 每输入一次都会失去焦点需要再次点击才能获取焦点v-for里面的key设置的不是固定值，是会跟随文本框变化而变化的。因为key 变化了，所以才引发了dom的重新渲染。把key设置成其他不会随其他变量改变的值就可以了。...
2020-07-10 22:15:49
217
原创 前端面试 - 项目流程
目录1、项目流程2、项目角色3、完整项目流程4、项目沟通5、PM想在开发过程中增加需求，该怎么办？6、项目即将延期了，该怎么办？7、你将如何保证项目质量？1、项目流程（1）项目分多人、多角色参与（2）项目分多阶段（3）项目需要计划和执行2、项目角色（1）PM 产品经理（2）UE 视觉设计师（3）FE 前端开发（4）RD 后端开发（5）CRD 移动端开发（6）QA 测试人员3...
2020-03-18 11:57:04
4306
原创 前端面试题汇总 - webpack
目录1、基本配置2、高级配置3、webpack性能优化（1）优化打包效率（优化打包构建速度 - 开发体验和效率）（2）优化产出代码 - 产品性能4、构建流程概述5、babel1、前端代码为何要进行构建和打包？2、module、chunk、bundle 分别是什么意思？有何区别？3、loader 和 plugin 的区别？4、webpack 如何实现懒加载？5、webpack 常见性能优化6、bab...
2020-03-18 11:09:03
910
原创 前端面试题汇总 -前端框架
前端面试题汇总 -前端框架1. vue基本使用（1）computed和watch（2）class和style（3）条件渲染（4）循环（列表）渲染（5）事件（6）表单2. vue组件使用（1）props 和 $emit（2）组件间通讯 - 自定义事件（3）组件生命周期3. vue高级特性（1）自定义 v-model（2）$nextTick（3）slota. 基本使用b. 作用域插槽c. 具名插槽（4...
2020-03-16 12:37:27
1461
原创 JS设计原则
1. 何为设计？设计即按照哪一种思路或者标准来实现功能功能相同，可以有不同设计方案来实现伴随着需求增加，设计到作用才能体现出来《UNIX / LINUX 设计哲学》准则1:小即是美准则2:让每个程序只做好一件事准则3:快速建立原型准则4:舍弃高效率而取可移植性准则5:采用纯文本来存储数据准则6:充分利用软件的杠杆效应（软件复用）准则7:使用shell脚本来提高杠杆效应和...
2020-03-05 19:16:39
867
1
原创 三大框架中的CSS
1. Angular（1）Angular.js (1.x) - 没有样式集成能力（2）Angular（2+）提供了样式封装能力与组件深度集成（3）ShadowDOM逻辑上一个DOM结构上存在子集结构（4）Scoped CSS限定了范围的CSS无法影响外部元素外部样式一般不影响内部可以通过/deep/或>>>穿透（5）模拟Scoped CS...
2020-02-24 15:44:57
193
原创 CSS工程化
1. PostCSSPostCSS本身只有解析能力各种神奇的特性全靠插件目前至少有200多个插件2. PostCSS插件import 模块合并autoprefixer 自动加前缀cssnano 压缩代码const autoprefixer = require('autoprefixer');const cssnano = require('cssnano');const...
2020-02-21 18:39:47
209
原创 CSS预处理器
1. 什么是css预处理器基于css的另一种语言通过工具编译成css添加了很多css不具备的特性能提升css文件的组织2. 预处理器的能力嵌套 - 反映层级和约束变量和计算 - 减少重复代码Exteng和Mixin - 复用代码片段循环 - 适用于复杂有规律的样式import - css文件模块化3. css预处理器框架SASS - CompassLess - ...
2020-02-21 16:25:46
205
原创 前端面试题汇总 - HTML & CSS
1. doctype的意义是什么？让浏览器以标准模式渲染让浏览器知道元素的合法性2. HTML、XHTML、HTML5的关系？HTML属于SGMLXHTML属于XML，是HTML进行XML严格化的结果HTML5不属于SGML或XML，比XML宽松3. HTML5有什么变化？新的语义化元素表单增强新的API（离线、音视频、图形、实时通信、本地存储、设备能力）分类和嵌套...
2020-02-21 14:30:59
204
原创 hybrid
1. hybrid是什么，为何用hybrid？（1）hybrid文字解释hybrid即“混合”，即前端和客户端的混合开发需前端开发人员和客户端开发 人员配合完成某些环节也可能涉及到server端（2）存在价值，为何会用hybrid？可以快速迭代更新，无需app审核，（需审核因为客户端代码会有访问手机隐私的信息，比如地理位置，开启相机等），很关键！体验流畅（和Native的体验基...
2020-01-14 11:34:13
4363
原创 MVVM
如何理解MVVM？MVVM是由MVC创新而来。MVC（Model，View，Controller）M - Model 数据V - View 视图、界面C - Controller 控制器、逻辑处理MVVM（Model，View，ViewMOdel）M - Model 模型、数据V - View 视图、模板（视图和模型是分离的）VM - ViewModel 连接器，连接Mod...
2020-01-10 23:14:39
261
1
原创 virtual dom 虚拟DOM
vdom是vue和React的核心，先讲哪个都绕不开它vdom比较独立，使用也比较简单如果面试闻到vue和React和实现，免不了问vdomvdom是什么？为何会存在vdom？virtual dom，虚拟DOM用JS模拟DOM结构将DOM对比操作放在JS层来做，提高效率提高重绘性能为何会存在：DOM操作是“昂贵”的，js运行效率高尽量减少DOM操作，而不是“推倒重来”...
2020-01-10 22:17:27
150
原创 前端打包之Rollup.js
参考：rollup中文网rollup功能单一，webpack功能强大工具要尽量功能单一，可集成，可扩展npm initnpm i rollup rollup-plugin-node-resolve rollup-plugin-babel babel-plugin-external-helpers babel-preset-latest babel-core --save-dev配置...
2020-01-07 13:32:54
308
原创 前端面试题汇总
1. var和let、const的区别var是ES5语法，let、const是ES6语法；var有变量提升var和let是变量，可修改；const是常量，不可修改let、const有块级作用域，var没有2. typeof返回哪些类型？undefind、string、number、boolean、symbol、object、function⚠️typeof null === ‘ob...
2020-01-05 22:53:11
693
原创 前端性能优化（防抖、节流）
1. 性能优化原则多使用内存、缓存或其他方法减少CPU计算量，减少网络加载耗时（适用于所有编程的性能优化——空间换时间）2. 从何入手（1）让加载更快减少资源体积，压缩代码减少访问次数：合并代码，SSR服务器端渲染，缓存使用更快的网络：CDN（2）让渲染更快CSS放在head，JS放在body最下面尽早开始执行JS，用DOMContentLoaded触发懒加载（图...
2020-01-05 17:50:09
777
原创 页面加载和渲染过程
1. 加载资源的形式html代码媒体文件，如图片、视频等javascript、css2. 加载过程DNS解析，把域名解析成IP地址浏览器根据IP地址向服务器发起http请求服务器处理http请求，并返回给浏览器3. 渲染过程根据HTML代码生成DOM Tree根据CSS代码生成CSSOM将DOM Tree和CSSOM整合形成Render Tree浏览器根据Rend...
2020-01-05 12:52:07
946
原创 Linux命令总结
1. 登录服务器 ssh work@192.168.10.21 // work是用户名，回车后会要求输入密码2. 查看文件 ls、ls -a(查看包含隐藏文件的全部文件)3. 查看列表 ll、ll abc/4. 清除屏幕 clear5. 创建文件夹 mkdir abc // 创建名为abc的文件夹6. 删除文件夹 rm -rf abc7. 进入某个目录 cd ab...
2020-01-05 12:13:54
130
原创 webpack配置(开发环境、生产环境)
npm init -ycnpm install webpack webpack-cli -D新建webpack.config.js新建src文件夹，index.js文件在package.json中添加"build":"webpack"后，运行npm run build新建index.html文件cnpm install html-webpack-plugin -D //解析html...
2020-01-05 01:25:35
289
转载 cookie, localStorage, sessionStorage的区别
基本概念cookiecookie英文饼干，顾名思义，大小应该非常小，cookie非常小，它的大小限制在4kb左右，它的主要用于保存登陆信息，比如你登陆某个网站市场可以看到’记住密码’,这就是通过在cookie中存入一段辨别用户身份的数据来实现的。localStoragelocalStorage是HTML5标准中新加入的技术。sessionStoragesessionStorage与lo...
2020-01-04 19:11:14
311
原创 Ajax
1. 创建Ajaxlet xhr = null;if(window.XMLHttpRequest){ //大多数浏览器 xhr = new XMLHttpRequest();}else{ //古董级浏览器 xhr = new ActiveXObject("Microsoft.XMLHTTP");}if(xhr != null){ xhr.open('GE...
2020-01-04 18:10:57
188
原创 点击ul的li，弹出处于ul中的第几条
<ul id="container"> <li>只是第一条</li> <li>只是第二条</li> <li>只是第三条</li></ul>// 事件代理方式const ul = document.getElementById('container');const li ...
2020-01-04 14:15:45
549
原创 事件
事件冒泡流程基于DOM树形结构事件会顺着触发元素往上冒泡应用场景：代理手写通用事件绑定函数function bindEvent(elem, type, selector, fn){ if(fn == null){ fn = selector; selector = null; } elem.addEventListener(type, event => { c...
2020-01-04 13:28:17
103
原创 BOM操作
1. BOM名称Browser Object Model2. BOM名的核心对象windowBOM的核心对象是window，它表示浏览器的一个实例。在浏览器中，window对象有双重角色，它既是通过javascript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。 3. navigator对象const ua = navigator.userAgentc...
2020-01-04 13:12:39
125
原创 DOM操作
1. DOM名称？Document Object Model2. DOM是哪种数据结构？树（DOM树）3. property和attribute的区别property修改对象属性，不会体现到html结构中attribute修改html属性，会改变html结构两者都有可能引起DOM重新渲染4. DOM操作const div1 = document.getElementById(...
2020-01-04 12:04:20
151
原创 闭包的应用 - 隐藏数据
闭包隐藏数据，不被外界访问，只提供APIfunction createCache(){ const data = {} return { get: function(key){ return data[key]; }, set: function(key, value){ data[k...
2020-01-03 21:23:42
246
原创 手写bind函数
Function.prototype.bind1 = function() { // 将参数拆解为数组 let args = Array.prototype.slice.call(arguments); // 获取this，数组第一项 let t = args.shift(); // fn1.bind(...)中的fn1 let self = thi...
2020-01-03 21:14:15
126
原创 <a>标签，点击时弹出对应的序号相关
1. 创建10个a标签，点击时弹出对应的序号let a2;for(let i = 0; i < 10; i++){ a2 = document.createElement('a'); a2.text= i + '测试'; a2.addEventListener('click',function(e){ e.preventDefault(); ...
2020-01-03 20:46:43
225
原创 js输出结果题汇总
1. var a = 1; function Fn1(){ var a = 2; console.log(this.a + a); } function Fn2(){ var a = 10; Fn1(); } Fn2(); var Fn3 = function(){ ...
2020-01-03 19:24:33
1592
原创 手写简易jQuery，考虑插件和扩展性
html<body> <p>这是一段文字1</p> <p>这是一段文字2</p> <p>这是一段文字3</p> <p>这是一段文字4</p></body>js<script> class jQuery{ constructor...
2020-01-03 18:34:05
469
原创 手写深拷贝
<script> let obj1 = { age: 20, name: 'xxx', address: { city: 'beijing' }, arr: ['a', 'b', 'c'] } let obj2 = deepClone(obj1); ...
2020-01-03 17:44:27
234
原创 继承
ES6代码<script> // 父类 class People { constructor(name){ this.name = name; } eat(){ console.log(`${this.name} eat something.`); } ...
2020-01-03 17:05:01
182
原创 css两栏布局方案
css两栏布局方案float布局position布局flex布局table布局grid布局float布局<html> <head> <style> html *{ padding:0; margin: 0; } section{ ...
2020-01-03 16:27:36
210
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人