初遇你
文章平均质量分 94
记录了最初接触前端的所思所想
Lyrelion
加油!
展开
-
TypeScript 学习笔记(二)—— 参考慕课整理的笔记(比哔哩哔哩更精简)
一.安装 TypeScriptTypescript 官网地址:https://www.typescriptlang.org/zh/ 安装命令:npm install -g typescript 检查基本配置: 编译 ts 文件:tsc test.ts 二.原始数据类型 和 Any原始数据类型(primitive values):除了 Object 以外,所有类型都是不可变的(值本身无法被改变) Boolean、Number、String、Null、Undefined、BigIn..原创 2021-01-03 14:52:57 · 290 阅读 · 0 评论 -
TypeScript 学习笔记(一)—— 参考哔哩哔哩整理的笔记
TypeScript 学习笔记(一)—— 参考哔哩哔哩整理的笔记原创 2020-09-28 16:36:43 · 1121 阅读 · 2 评论 -
前端性能优化——加载优化、渲染优化
前端性能优化——加载优化、渲染优化原创 2020-06-27 13:31:41 · 1314 阅读 · 0 评论 -
前端工程化——webpack、vue脚手架、Element-UI
一.模块化相关规范 1.模块化概念介绍传统开发模式主要问题:命名冲突、文件依赖 模块化:把单独功能封装在一个模块中,模块间相互隔离,通过特定接口公开内部成员,也可以依赖别的模块 浏览器端模块化规范:AMD(require.js)、CMD(sea.js) 服务器端模块化规范:CommonJS:模块分为:单文件模块 / 包 模块成员导出:module.exports 和 exports 模块成员导入:require('模块标识符')AMD、CMD、CommonJS 并不是 浏览器服务器 .原创 2020-06-19 17:32:11 · 544 阅读 · 0 评论 -
Vue 基础面试
1.谈一下你对 Vue.js 的 MVVM 原理的理解传统 MVC:将 Model 和 View 实现代码分离Model(模型):业务模型 View(视图):用户界面 Controller(控制器):控制器原理:用户访问服务器端路由,路由调用控制器,控制器获取模型处理过的数据,将结果返回给前端视图渲染 MVVM:M-model,V-view,VM-view-model(桥梁作用) 传统模型需要 操作 DOM 元素,手动将数据渲染到页面上,MVVM不需要 操作 DOM元素 MVVM 将数据.原创 2020-06-27 14:09:43 · 231 阅读 · 0 评论 -
Vue2 项目 —— 前端监控项目 问题记录
【【【非相关人员速速撤离,你不会从这篇博客里学到任何东西!】】】写这篇博客时的境遇 特别一言难尽,终于不需要体会那份耻辱了,留下来做个纪念吧原创 2020-07-22 19:10:21 · 1815 阅读 · 0 评论 -
Vue2 项目 —— 模仿猫眼电影(vue2+手写组件) 问题记录
1. @touchstart、@tap、@click 的区别2. 用 $ref 获取 dom 子元素、将城市列表滚动到对应位置3. keep-alive 缓存组件 / activated()4. Vue.extend() 5.better-scroll插件,实现 移动端 顺滑的滚动效果6. axios 取消请求 CancelToken 用于输入框防抖节流7. vue.config.js8. $nextTick 某操作 需要使用 随数据改变而改变 DOM 时原创 2020-08-23 17:35:32 · 1678 阅读 · 0 评论 -
Vuex 介绍 / 实现 ToDoLists
一. Vuex 概述二. Vuex 安装及使用三. Vuex 核心部分1. State(存放组件公共数据)2. Mutation(触发同步任务,修改 State)3. Action(触发异步任务,不能修改 State)4. Getter(Vuex 中的 computed)四. 通过 Vuex 实现ToDoLists原创 2020-08-24 20:23:36 · 342 阅读 · 2 评论 -
Vue.js 基础入门(二)——前端路由
目录1.路由2. vue-router3.动态路由1.路由路由的本质:对应关系 路由分为:后端路由、前端路由 问题:后端渲染,存在性能问题 前端渲染(Ajax),提高性能,但是不支持浏览器的前进后退操作SPA(Single Page Application)单页面应用程序: 整个网站只有一个页面,内容变化通过 Ajax局部更新实现,支持 浏览器地址栏的前进和后退操作 SPA实现原理之一:基于URL地址的 hash hash 变化:浏览器记录访问历史的变化、hash变化..原创 2020-06-02 15:43:52 · 198 阅读 · 0 评论 -
Vue.js 基础入门(一)——模板语法、常用特性
一.Vue 基础Vue:用于构建用户界面的渐进式框架 vue核心库只关注视图层1.指令指令本质:自定义属性,以 v- 开头1.1 v-cloak 防止页面加载时出现闪烁问题 <style type="text/css"> /* 1、通过属性选择器 选择到 带有属性 v-cloak的标签 让他隐藏 */ [v-cloak]{ /* 元素隐藏 */ display: none; } </style><.原创 2020-05-31 21:24:12 · 431 阅读 · 0 评论 -
前后端交互(五)——Ajax(二)
一.同源政策1.同源政策介绍Ajax请求限制:Ajax 只能向自己的服务器发送请求 现在有一个A网站、有一个B网站,A网站中的 HTML文件 只能向 A网站服务器中发送 Ajax请求,B网站中的 HTML文件 只能向 B网站中发送 Ajax请求;A网站不能向B网站发送 Ajax请求,B同理 同源:如果两个页面拥有相同的 协议、域名和端口,那么这两个页面就属于同一个源 Example: 同源政策:为了保证用户信息的安全,防止恶意的网站窃取数据 最初的同源政策:A网站在客户端设置的 Cook.原创 2020-05-28 20:56:19 · 1197 阅读 · 0 评论 -
前后端交互(四)——Ajax(一)
一.Ajax编程基础1.Ajax 基本介绍传统网站存在的问题:网速慢,页面加载时间长,用户只能等待 表单提交后,如果一项内容不合格,需要重新填写所有表单内容 页面跳转,重新加载页面,造成资源浪费,增加用户等待时间Ajax:实现页面无刷新更新数据,提高用户浏览网站应用的体验 Ajax 应用场景:页面上拉加载更多数据 表单项离开焦点数据验证 搜索框提示文字下拉列表Ajax 运行环境:需要运行在网站环境中才能生效,比如:Node创建的 网站服务器 Ajax 运行原理:相当...原创 2020-05-27 11:03:54 · 1067 阅读 · 0 评论 -
前后端交互(二)——MongoDB + artTemplate + Express
一.MongoDB 数据库1.数据库概述及环境搭建 使用数据库原因:动态网站中的数据都是存储在数据库中的 数据库可以 持久存储 客户端通过表单收集的用户信息 数据库软件本身可以对数据进行高效管理MongoDB可视化软件:是使用 图形界面操作数据库 的一种方式 数据库软件可以包含多个数据仓库,每个数据仓库 中包含多个数据集合,每个 数据集合 中包含多条 文档 使用...原创 2020-04-14 09:40:31 · 761 阅读 · 0 评论 -
前后端交互(一)——Node + Gulp + HTTP
一.Node.js 基础1.Node 开发概述学习服务器端开发基础目的:网站业务逻辑前置,学习前端技术需要后端技术支撑(Ajax),和后端人员更好配合 服务器端开发要做的事情:实现网站的业务逻辑、数据的增删改查 Node:一个基于Chrome V8引擎的 JavaScript代码 运行环境 关于运行环境:浏览器(软件)能够运行 JavaScript代码,浏览器 就是 JavaS...原创 2020-04-10 18:03:52 · 518 阅读 · 0 评论 -
JavaScript 常见算法面试(一)
目录1.超过范围的两个大整数相加2.实现数组扁平化3.数组去重4.求数组中的最大值/最小值5.最大公约数、最小公倍数6.反串单向链表7.实现 indexOf() 方法8.判断回文字符串9.累加函数 reduce()10.reduce() 实现forEach、map、filter11.设计任务队列,分别在1、3、4秒后打印出“1”,“2”,“3”12.查找出现频率最高的字符13.爬楼梯(动态规划)1.超过范围的两个大整数相加主要思路:将...原创 2020-06-07 19:46:03 · 389 阅读 · 1 评论 -
ECMAScript面试(二)
1.事件循环,js执行机制,宏任务微任务(1) 事件循环和js执行机制javascript是单线程语言, js任务需要排队顺序执行, 任务分为2大类: 同步和异步. 同步和异步任务分别进入不同的执行“场所”,同步进入主线程,异步进入Event Table并注册函数。当指定的事情完成时,Event Table会将这个函数移入Event Queue。主线程内的任务执行完毕为空,回去了Event Queue读取对应的函数,进入主线程。(2) 宏任务和微任务宏任务: 整体代码script..原创 2020-08-21 17:38:57 · 198 阅读 · 0 评论 -
ECMAScript 面试(一)
1.JavaScript 中有几种数据类型基本数据类型 :String、Number、Boolean、Null、Undefined; 引用数据类型:Object; 不同类型的数据储存原理: 栈:原始数据类型(Undefined,Null,Boolean,Number、String) 堆:引用数据类型(对象、数组和函数) 栈(stack):简单数据段,占据空间小、大小固定,被频繁使用 堆(heap):对象,占据空间大、大小不固定,引用数据类型在栈中存储了指针,指向堆中该实体的起始地址 ...原创 2020-06-14 16:35:19 · 479 阅读 · 0 评论 -
JavaScript 网页编程(六)—— ES6重点概念 + 开发基本规范
1.前端开发步骤任务分配(开发经理) 确定设计图(UI),确定开发需求(项目相关人员) 项目开发登记(填表) 接口文档定义(静态页面除外) 页面开发 确定开发效果(UI) 提交代码,后续跟踪2.SVN 使用规范用自己的账户 不要签出整个目录 先更新(工作前)再提交(下班前),多提交,写好说明 不提交:不能编译的代码 / 自动生成的文件 慎用锁定3.文件命名规范无空格特殊字符 小写字母,中划线分割 入口文件用 index 命名 外部插件-modules,组件-com.原创 2020-09-02 15:26:33 · 285 阅读 · 0 评论 -
JavaScript 网页编程(五)——JavaScript 高级
一.JavaScript 面向对象1.面向对象编程介绍面向过程:按照分析好的 步骤 解决问题。 面向过程实例:打开冰箱门,大象装进去,关上冰箱门 面向对象:以 对象功能 来划分问题,而不是步骤。 面向对象实例:大象对象(进去),冰箱对象(打开、关闭),使用冰箱和大象的功能 面向对象的特性: 封装性 、继承性 、多态性 面向过程优缺点:性能高(单片机),不易维护复用扩展,是份蛋...原创 2020-04-08 13:37:29 · 770 阅读 · 0 评论 -
JavaScript 网页编程(四)——JQuery 快速开发
一.JQuery 简介1.JQuery 概述 JavaScript库:一个对 原生JS代码 进行封装 的 JS 文件,快速高效的使用封装好的功能 常见的 JavaScript库 :JQuery 、Prototype 、YUI 、Dojo 、Ext JS 、移动端的 zepto JQuery:封装了 JavaScript 常用的功能代码,优化 DOM 操作、事件处理、动画设计 和 A...原创 2020-04-03 15:37:40 · 1103 阅读 · 0 评论 -
JavaScript 网页编程(三)——Web API(BOM)
一.BOM 简介BOM(Browser Object Model):浏览器对象模型,提供与浏览器窗口进行交互的对象,核心对象是 window。 BOM 缺乏标准,JavaScript 语法标准化是 ECMA,DOM 标准化是 W3C,BOM 是 Netscape 浏览器标准的一部分。 BOM 包含 DOM。二.window 对象的常见事件1.页面(窗口)加载事件(2...原创 2020-03-29 21:58:28 · 868 阅读 · 0 评论 -
JavaScript 网页编程(二)——Web API(DOM)
一.Web API 介绍1.API 和 Web APIAPI:某些工具(函数)由编程语言提供,已封装好其内部实现,学会使用这些接口,无需关注其内部实现方法。 Web API:浏览器提供的接口,用于操作 浏览器功能(BOM) 和 页面元素(DOM),作出浏览器交互效果。二.DOM 介绍DOM:文档对象模型(Document Object Model):W3C 定义了一系列 ...原创 2020-03-26 21:21:25 · 645 阅读 · 1 评论 -
JavaScript 网页编程(一)——JavaScript 基础语法
一.计算机编程基础1.计算机语言分类机器语言,汇编语言,高级语言。 ①机器语言:计算机最终所执行的都是 01机器语言。 ②汇编语言:和机器语言实质相同,直接对硬件操作,但更好记。2.翻译器高级语言程序不能直接被计算机识别,必须经过转换,需要翻译器:将源代码转换为机器语言,也称二进制化。 3.编程语言和标记语言的区别编程语言是主动的,有很强的逻辑性。 标记语言不向计算机...原创 2020-03-22 22:49:43 · 2068 阅读 · 0 评论 -
H5C3面试(一)
1.CSS3新特性?HTML5新特性?语义化?CSS3新特性: 圆角、阴影、旋转、媒体查询、transform 新增伪类标签:p:nth-child(2) :enabled、:disabled 控制表单控件的禁用状态 :checked,单选框或复选框被选中 HTML5新特性: 音频视频、语义化更好的内容标签(header,nav,footer,aside,article,section) 画布(Canvas)、本地离线存储(localStorage、sessionStorage) 表单.原创 2020-08-25 11:56:19 · 508 阅读 · 0 评论 -
移动 Web 开发布局(二)——rem布局、响应式布局
一.rem布局二.响应式布局原创 2020-03-17 21:23:18 · 1365 阅读 · 0 评论 -
移动 Web 开发布局(一)——流式布局、flex布局
一.移动端基础1.移动端 web 开发现状移动端浏览器主要针对 webkit 内核做兼容。 碎片化严重,手机分辨率和大小不一。2.视口标签 <mate>2.1 定义浏览器显示页面内容的屏幕区域,包括:布局视口、视觉视口、理想视口。①布局视口 layout viewport:让PC网页大多都能在手机上呈现,只不过元素看上去很小,可以手动缩放网页。 ② 视觉...原创 2020-03-16 18:28:00 · 1043 阅读 · 1 评论 -
前端开发基础(四)——HTML5 / CSS3 进阶
目录一.HTML5(取代 HTML4 + XHTML)二.CSS3 选择器三.2D 转换四.动画(animation)五.3D 转换一.HTML5(取代 HTML4 + XHTML)1.广义上的 HTML5拥有强大的技术集,这些技术集是指:HTML5、CSS3、javascript 。2.新增语义化标签注意:①语义化标签:针对搜索引擎,可多次使用...原创 2020-03-12 23:03:16 · 407 阅读 · 0 评论 -
前端开发基础(三)——美特网电商项目实战
一、项目介绍、头部制作1. 美特网项目介绍项目名称:美特网。项目描述:美特网是一个电商网站,要完成首页、列表页、详情页、注册页面的制作。2.目录文件夹项目文件夹:meitewang样式类图片文件夹:img样式文件夹:css产品类图片文件夹:upload字体类文件夹:fonts脚本文件夹:js关于样式文件css:①让浏览器风格统一,常用初始化语句放在 b...原创 2020-03-09 14:58:40 · 1139 阅读 · 0 评论 -
前端开发基础(二)——CSS
一.CSS初识(层叠样式表)1.理想中的结果: 结构(html)与样式(css)相分离2.作用:用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式。3.引入CSS样式表<!-- 行内式(内联式):控制当前标签,没有实现样式和结构分离 --><标签名 style="属性1:属性值1; ...原创 2020-03-02 12:41:21 · 2451 阅读 · 0 评论 -
前端开发基础(一)——HTML
一.认识WEB1.1 浏览器内核举例苹果:Safari(WebKit) 谷歌:chrome-Blink(WebKit分支) 安卓手机大部分是 WebKit 内核。1.2 浏览器不同→内核不同,显示页面或者排版就有差异,所以要遵循WEB标准(W3C万维网联盟制定)。1.3 WEB标准构成:结构(Structure = HTML)、表现(Prese...原创 2020-02-28 20:26:58 · 629 阅读 · 0 评论