前端进阶之路
文章平均质量分 85
牧云流
这个作者很懒,什么都没留下…
展开
-
TypeScript起步
TypeScript 由微软开发的编程语言,是JavaScript的一个超集,是添加了类型系统的 JavaScript可以编译成纯 JavaScript,编译出来的 JavaScript 可以运行在任何浏览器上。在学习TypeScript之前,请保证先熟悉了JS基础、ES6和NPM的简单实用。一、全局安装typescriptnpm install -g typescript安装完成后就可以使用 tsc命令来执行 TypeScript 的代码// 查看版本号tsc -v通常使用 .ts 作原创 2022-09-26 13:16:01 · 536 阅读 · 0 评论 -
前端实现WebSocket即时通讯
要实现客户端与服务器端的通信,最常接触的是http(https)协议,http通信只能是客户端发起请求,服务器响应。服务器不能主动向客户端传递消息。HTTP 协议无法做到服务器主动向客户端推送信息,2008年诞生的WebSocket 协议可以实现客户端与服务器端的双向对话,即:服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息。WebSocket 协议的底层协议也是TCP协议WebSocket 协议的标识符为ws,加密后为wssWebSocket 协议没有同源限制,即WebSocke原创 2021-07-19 09:44:56 · 9002 阅读 · 1 评论 -
vue-router的addRoute方法实现权限控制
在项目实践中,往往需要用户登录后由后端返回用户的权限,来动态配置路由,vue-router提供了两个方法router.addRoutes(),router.addRoute()可以进行动态路由配置,这里需要注意的是vue-router的options属性并不是响应式的,在添加(修改)路由规则后,router.options.routes属性不会改变,目前,如果需要更新router.options.routes,则需要手动更改。原创 2021-04-28 14:22:19 · 18072 阅读 · 1 评论 -
在Vue 中使用 JSX 语法
在Vue 中使用 JSX 语法原创 2021-04-17 21:42:21 · 4987 阅读 · 0 评论 -
Vue组件(五)- 组件的继承mixins、extends、provide、inject
provide和inject是成对出现的,用于父组件向子孙组件传递数据原创 2021-02-08 09:13:51 · 1511 阅读 · 0 评论 -
Vue简介和知识体系
Vue是做什么的是用于构建用户界面的渐进式框架是一个轻量级的JavaScript MVVM库,是做到了数据双向绑定的框架。VUe.js的核心思想是数据驱动和组件化渐进式含义是:主张最少。每个框架都不可避免会有自己的一些特点,从而会对使用者有一定的要求,这些要求就是主张,主张有强有弱,它的强势程度会影响在业务开发中的使用方式。Vue的版本Vue已经有了三个版本,目前最常用的是Vue2Vue的安装在网页中用<script src="https://cdn.jsdelivr.net原创 2020-09-07 11:42:56 · 401 阅读 · 0 评论 -
前端简单理解MVC、MVP、MVVM框架
一切从前后端分离开始理解MVVM框架要先从前后端分离说起,传统前端先写一个静态页面,写好后,让后端去套模板,前端无法独立调试代码,这样做导致无论前端还是后端对页面的维护都非常困难,用户体验很差。前后端分离是指前端专注于客户端,复杂渲染页面和显示数据;后端专注做数据的操作;前后端通过接口交互,交互方式是前端发送异步请求后端给,后端接受请求返回数据,前端接受数据并使用数据。前后端分离后,前端才开始需要工程化才需要软件设计模式,这就有了MVC 和MVVM框架。MVC 框架MVC 即 Model-View原创 2020-09-04 10:01:39 · 825 阅读 · 0 评论 -
移动端页面布局经验谈
介绍移动端布局常用方法之前,推荐回顾一下这3篇博文。移动端布局-分辨率和视口网页的响应式布局与媒体查询一步步学习Flex弹性布局在做移动端布局时,html的header中加上这段代码<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">移动端布局时,首先要确认一下需求,即是否需要兼容PC端,即两端适配,这是移动端布局的比较麻烦的情况,这时候我通常用响应式布局和媒体查询来原创 2020-08-23 15:38:24 · 384 阅读 · 0 评论 -
浅谈前端工程化(二)Gulp和Webpack构建项目
前端构建前端构建其实是工程化、自动化思想在前端开发中的体现,将一系列流程用代码去实现,让代码自动化地执行这一系列复杂的流程。过去,前端一直在各种为战,不停的造轮子,前端只会一种语言js,js只能在浏览器运行,前端工程化无从谈起,在node出现之后,各种前端构建工具才如雨后春笋般层出不穷。前端构建可以实现如下内容:代码转换:将 TypeScript/es6 编译成JavaScript、将 SCSS 编译成 CSS等。文件优化:压缩JavaScript、CSS、HTML 代码,压缩合并图片等。代码原创 2020-08-12 13:57:43 · 411 阅读 · 0 评论 -
浅谈前端工程化(一)Nodejs和NPM
在前面所有的文章中,我们都是在围绕网页的三部分,结构(HTML)、表现(CSS)、行为(JS)分离的方式来介绍的,传统的前端,就是在html文件中引入css文件和js文件(包含jQuery之类的js库),来实现web应用的一部分,通常包括:页面的静态实现,即所谓的切图或者DIV+CSS页面实现使用js及其插件完成页面的动态效果表单提交、数据验证或使用ajax与后端交互数据这时候前端在WEB项目中,并不涉及太多的业务逻辑,通常代码最后要交给后端来实现与服务器的交互,前端的岗位在项目中通常是面目模糊原创 2020-08-10 11:47:24 · 1162 阅读 · 0 评论 -
JavaScript 调试助手 - console对象
相信对Console对象大家已经不会陌生了,我们常常调用它来调试js代码,在浏览器中按F12调出开发者工具,可以看到Console面板,在js中使用console对象,结果会输出到Console面板,也可以在此面板直接输入js代码,回车后代码就会执行。console对象是宿主对象,IE8及以下浏览器不支持console对象。输出信息log()info()warn()error()table()group()和groupEnd()groupCollapsed()和groupEnd()d原创 2020-09-09 20:31:11 · 540 阅读 · 0 评论 -
Vue cli4构建一个简单的CRM项目(一)
在windows系统搭建VUE环境(安装vue-cli4)中我们使用默认配置创建一个项目hello-world,这次我们首先用图形化界面来创建一个项目。在命令行中输入下面的命令打开一个浏览器窗口vue ui安装这个页面的引导我们来创建一个项目hello-word2,在预设中选择手动配置项目,在功能中做如下选择在配置中做如下选择点击创建项目然后等待即可。...原创 2020-03-12 11:26:21 · 687 阅读 · 0 评论 -
Vue中使用Vue-Router管理路由
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。使用 Vue通过组合`组件`来构成应用程序,把 vue-router 添加进来,是将组件映射到路由,告诉vue-router在哪里渲染它们。原创 2020-01-13 09:12:04 · 935 阅读 · 0 评论 -
Vue中使用Axios实现Ajax异步通信入门
AJAX是一种异步的客户端和服务端进行交换数据的方法,表现是不重新加载页面的情况下,后台与服务器进行了数据交互,再部分的更新页面。在ES6之前,主要使用浏览器提供的接口XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据。我们熟悉的jquery的ajax方法就是对XmlHttpRequest的一种封装,它通过回调函数来传递异步操作的消息。甚至有些人认为jquery的ajax就代...原创 2020-01-04 12:30:44 · 610 阅读 · 0 评论 -
Vue状态管理插件-Vuex入门
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex是在组件外部管理状态,是用来管理组件之间通信的一个插件。这里的状态就是指数据。原创 2019-12-24 16:50:29 · 646 阅读 · 0 评论 -
Javascript中的DOM(三) 事件与Event对象
Event 对象HTML 事件是发生在 HTML 元素上的行为,如网页完成加载,输入字段被修改,按钮被点击等等,事件可以被 JavaScript 侦测到。如用户点击一个按钮,我们给这个按钮上注册的click事件就会被触发,用一个函数“应对”事件,函数的形参就是Event对象。浏览器事件是DOM API的一部分,事件是javascript和HTML交互基础。Event 对象代表事件的状态,只在...原创 2019-12-17 17:32:08 · 438 阅读 · 0 评论 -
Vue组件(四)-组件之间的通信
一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例和可选的嵌套的、可复用的组件树组成。对于单页应用而言不存在没有关系的组件,至少所有的组件都有一个根组件原创 2019-12-20 14:22:54 · 171 阅读 · 0 评论 -
Vue组件(二)-生命周期函数
说到生命周期函数,就要来先谈谈生命周期,一个Vue实例从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程,我们称之为Vue的`生命周期`;更通俗的说实例从被创建出来、运行、最后被销毁所要经历的一系列过程,就是生命周期。原创 2019-12-12 15:11:56 · 251 阅读 · 0 评论 -
Vue组件(一)-常用选项methods、computed、filters、watch、props
我们先来总结一下前面已经认识的选项el:指定Vue实例的挂载点,根实例的特有属性data:Vue 实例的数据对象components:Vue实例配置局部注册组件template:组件模板render:渲染函数,创建虚拟DOM现在开始以组件为例介绍一下其他常用的选项(options对象的属性):computed:计算属性watch:侦听属性filters:过滤器methods:V...原创 2019-12-10 15:57:19 · 1345 阅读 · 0 评论 -
Vue模板语法
Vue模板关于Vue模板官方这样说:Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解析器解析。在底层的实现上,Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统,Vue 能够智能地计算出最少需要重新渲染多少组件,并把 DOM 操作次数减到...原创 2019-12-05 19:28:52 · 484 阅读 · 0 评论 -
Vue实例与组件入门
让Vue框架跑起来,首先需要安装,通常在做大型项目时会使用到Vue官方推荐命令行工具 Vue CLI , Vue CLI 的安装比较复杂,对于初学者来说先使用官方提供的cdn来引入vue.js,能够快速的入门和理解Vue。来记得《理解MVVM框架,简单实现双向数据绑定》中的代码吗?我们实现了一个简单的双向数据绑定,现在把代码改写成一下<div id="app"> <inp...原创 2019-12-06 17:11:03 · 434 阅读 · 0 评论 -
理解VUE实现MVVM架构的方式
MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化,让我们将视图 UI 和业务逻辑分开。什么是MVVMMVVM可以拆分成:Model -View -ViewModel 三部分Model 数据模型:可以在Model中定义数据修改和操作的业务逻辑View 视图:代表UI 组件,可以理解为DOMVie...原创 2019-12-06 08:49:28 · 560 阅读 · 0 评论 -
es6-module 模块化
在实际的开发项目中,存在着多种角色。前端就是其中一种,在大型项目中,前端也不可能只有一个,在这样的项目中,怎样协同工具,怎么解决js代码之间的依赖关系,代码怎样维护是个棘手的问题。ES6终于有了module来解决这个问题,那些实现JS模块化的框架终将成为前尘往事,AMD、CMD、CommonJs、ES6的对比。ES6模块化写法一个js文件就可以看成一个模块,如我们现在有两个模块module...原创 2019-11-20 15:55:44 · 180 阅读 · 0 评论 -
ES6-Generator函数和async函数
ES6中引入的一种新的函数类型,叫做generator生成器函数,它的特点是能够通过yield表达式中断函数的执行。在普通的函数通过return指定返回值,如果函数被调用,会一直不间断的执行到return终止,如果没有显示return语句,会默认添加到函数的末尾。生成器函数如何定义function* f() {}普通函数和生成器函数的区别:普通函数和生成器函数的构造函数分别是Func...原创 2019-11-14 17:22:29 · 392 阅读 · 0 评论 -
ES6-用Proxy和Reflect操作对象
ProxyProxy的意思是代理,ES6中提供了Proxy构造函数,Proxy的作用可以理解成在目标对象之前架设一层“拦截”,外界对该对象的操作,都必须先通过这层拦截,这种方式可以拦截外界对对象的操作进行过滤和改写,通过 Proxy是实现数据劫持的方法之一。这些操作可能是对目标对象属性的读、写,属性的定义等等,如果目标对象是函数,还可以拦截call,apply,new操作。要拦截的操作涉及到...原创 2019-11-14 13:19:13 · 220 阅读 · 0 评论 -
ES6-Promise对象获取异步操作的消息
const promise = new Promise(function(resolve, reject) { //实例化后状态:pending if (/* 异步操作成功 */){ resolve(value); // resolve方法调用,状态为:fulfilled } else { reject(error); // reject方法调用,状态...原创 2019-11-08 15:29:07 · 749 阅读 · 0 评论 -
ES6-终于有了Class
Javascript最开始被设计出来,是为了解决一些Web上的简单交互的,但随着网络的发展,要解决的问题越来越复杂,在JS编程中,代码总是显得怪里怪气,不过好在在ES6中,增加了Class语法,虽然它本质上属于语法糖,但是至少JS像是真正的面向对象语言了。原创 2019-10-25 10:59:14 · 172 阅读 · 0 评论 -
Vue组件(三)-内置组件component、transition、 transition-group、keep-alive、slot
Vue 的内置组件component组件动态绑定组件,根据数据不同更换不同的组件,component通过属性is的值可以渲染不同的组件。<component :is="currentTabComponent"></component>transition组件为组件的载入和切换提供动画效果transition-group组件作为多个元素/组件的过渡效果keep-alive组件能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。包裹动态组件时,会缓存不活动的组件原创 2021-03-19 10:08:10 · 1115 阅读 · 0 评论 -
2.17 CSS样式的书写顺序及原理
CSS推荐的书写顺序书写顺序:按照下述1 2 3 4 5的顺序进行书写定位属性:position display float left top right bottom overflow clear z-index自身属性:width height padding border margin background文字样式:font-family fo...原创 2019-02-28 10:05:09 · 265 阅读 · 0 评论 -
1.4 新手理解HTML、CSS、javascript之间的关系
对于一个网页,HTML定义网页的结构,CSS描述网页的样子,JavaScript设置一个很经典的例子是说HTML就像 一个人的骨骼、器官,而CSS就是人的皮肤,有了这两样也就构成了一个植物人了,加上javascript这个植物人就可以对外界刺激做出反应,可以思 考、运动、可以给自己整容化妆(改变CSS)等等,成为一个活生生的人;原创 2019-02-21 14:28:46 · 982 阅读 · 0 评论 -
2.4 HTML文档的标签分类
HTML文档中<>括起来的部分就是标签,这种书写方式就是超文本标记语言的书写方式。浏览器能够读取 HTML 文档,并以网页的形式显示出这些标签。通常标签是成对出现的,有开始有结束,本文将分类的讲解一些标签原创 2019-02-22 17:38:46 · 448 阅读 · 0 评论 -
2.5 HTML表单标签及用法详解
HTML表单用于搜集用户输入的信息,常见的应用如用户注册,登录,填写资料等,在网页中非常常见,表单是由form标签包裹的一组标签组成。表单之所以重要,是因为表单连接着用户、前端和后端,用户可以通过表单输入信息,前端要对用户输入的信息进行响应,如验证输入,验证通过后通过一定的方式提交给后端,后端接到数据要做进一步处理,如:第二次验证,返回处理结果等。原创 2019-02-23 08:40:36 · 488 阅读 · 0 评论 -
2.2 HTML语法与文档结构
HTML 不是一种编程语言,而是一种标记语言 (markup language)。HTML 使用标记标签来描述网页。HTML的语法是给文本加上表明文本含义的标签(Tag),使浏览器能够按照约定的方式解析。HTML 标签结合W3C的标准,对标签的语法做如下整理1、HTML 标签是由尖括号包围的关键词,如 2、HTML 标签的基础语法:&amp;amp;lt;标签名 属性名1=“属性值” 属性名2=“属性值...原创 2019-02-21 15:50:57 · 268 阅读 · 0 评论 -
1.2 初步了解浏览器
浏览器的主要功能是将用户选择的web资源呈现出来,它需要从服务器请求资源,并将其显示在浏览器窗口中,资源的格式通常是HTML,也包括PDF、image及其他格式。用户用URI来指定所请求资源的位置,关于URI的部分在之后的HTTP协议这部分再进行详细的研究。原创 2019-02-21 11:29:05 · 315 阅读 · 0 评论 -
2.3 HTML文档头部head的结构与meta标签
head元素是所有头部元素的容器。head容器中可以包含脚本,指示浏览器在何处可以找到样式表,提供元信息等等,这里面内容较多的是meta元素(元数据),元数据的讲解将放置在最后,但它不是不重要,而是很重要。原创 2019-02-21 17:32:10 · 1192 阅读 · 0 评论 -
web前端进阶教程目录
web前端的学习的入门并不难,但是在学习和应用的过程中,你会发现各种新知识和新技术层出不穷,似乎没有止境,本教程从体系化的角度去设计,希望从高处着眼,用生活化的角度去理解。原创 2019-02-21 11:05:23 · 2524 阅读 · 1 评论 -
1.1 WEB前端是什么,如何界定前端工程师的工作范围?
web2.0时代之后, 前端工程师是互联网时代软件产品研发中不可缺少的一种专业研发角色。从狭义上讲,前端工程师使用HTML、CSS、JavaScript等专业技能和工具将产品UI设计稿实现成网站产品,涵盖用户PC端、移动端网页,处理视觉和交互问题。 从广义上来讲,所有用户终端产品与视觉和交互有关的部分,都是前端工程师的专业领域。原创 2019-02-21 11:14:47 · 756 阅读 · 0 评论 -
1.3 在浏览器输入网址到看到页面经历了哪些过程?
当我们在浏览器地址栏输入网址,按下回车键,一直到看到页面,经历了哪些过程?1、域名解析(DNS解析)2、发起TCP连接请求(TCP的3次握手) 3、建立TCP连接后发起http请求 4、服务器响应http请求,浏览器得到html代码 5、解析html代码,并请求html代码中的资源(如js、css、图片等)6、断开TCP连接(四次挥手)7、浏览器对页面进行原创 2019-02-21 13:59:11 · 984 阅读 · 0 评论 -
2.6 严格的xhtml
XHTML可扩展超文本标记语言,表现方式与超文本标记语言(HTML)类似,不过语法上更加严格。XHTML 是 HTML 与 XML(扩展标记语言)的结合物;XHTML 与 HTML 4.01 几乎是相同的;XHTML1.1为XHTML最后的独立标准。原创 2019-02-25 15:25:16 · 302 阅读 · 0 评论 -
2.7 HTML5有什么新特性
HTML5是对HTML的第5次重大的修改,虽然HTML5 标准还在制定中,但不能阻碍其势不可挡的脚步,不用HTML5你就OUT了。首先要说的是不是所有的浏览器都支持HTML5,Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9支持部分 HTML5 特性。HTML5的W3C标准声明改为&amp;amp;lt;!doctype html...原创 2019-02-25 16:22:08 · 240 阅读 · 0 评论