![](https://img-blog.csdnimg.cn/20190918140145169.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
前端
前端相关的技术、问题、以及科普
Emily Qin
授人以鱼不如授人以渔
展开
-
HTML编码规范
文章目录原则文档规范引入CSS、JS优化层级,减少标签的数量启用 IE Edge 模式属性规范属性书写顺序布尔类型的属性元素标签规范图片标签表单原则尽量使用语义化标签,少用div标签不要大写,即便是doctype 标签用两个空格来代替制表符(tab) – 这是唯一能保证在所有环境下获得一致展现的方法。嵌套元素应当缩进一次(即两个空格)。对于属性的定义,永远全部使用双引号,绝不要使用单...原创 2020-03-16 15:59:07 · 337 阅读 · 0 评论 -
Vue源码系列21------响应式原理-----检测变化的注意事项
如何处理一些特殊情况【响应式数据对于对象新增删除属性以及数组的下标访问修改和添加数据等的变化观测不到。】:我们就可以知道如何把它们也变成响应式的对象【通过Vue.set以及数组的API可以解决这些问题,本质上它们内部手动去做了依赖更新的派发。】。其实对于对象属性的删除也会用同样的问题,Vue 同样提供了Vue.del的全局 API,它的实现和Vue.set大相径庭,甚至还要更简单一些。...原创 2019-05-22 11:47:06 · 178 阅读 · 0 评论 -
Vue源码系列20------响应式原理----nextTick
nextTick是 Vue 的一个核心实现,在介绍 Vue 的 nextTick 之前,首先需要了解一下JS 的运行机制。其次需要了解到数据的变化到 DOM 的重新渲染是一个异步过程,发生在下一个 tick。这就是我们平时在开发的过程中,比如从服务端接口去获取数据的时候,数据做了修改,如果我们的某些方法去依赖了数据修改后的 DOM 变化,我们就必须在nextTick后执行。比如下面的伪代码...原创 2019-05-22 11:39:24 · 184 阅读 · 0 评论 -
Vue源码系列19------响应式原理----派发更新
依赖收集的目的就是为了当我们修改数据的时候,可以对相关的依赖派发更新。Vue 数据修改派发更新的过程,实际上就是当数据发生变化的时候,触发 setter 逻辑,把在依赖过程中订阅的的所有观察者,也就是watcher,都触发它们的update过程,这个过程会把所有要执行update的watcher推入到队列中,又利用队列做了进一步优化,在nextTick后执行所有watcher的ru...原创 2019-05-22 11:27:25 · 336 阅读 · 0 评论 -
Vue源码系列18------响应式原理-----依赖收集
响应式对象 getter 相关的逻辑就是做依赖收集。收集依赖的目的是为了当这些响应式数据发送变化,触发它们的 setter 的时候,能知道应该通知哪些订阅者去做相应的逻辑处理,我们把这个过程叫派发更新,其实Watcher和Dep就是一个非常经典的观察者设计模式的实现。依赖收集时订阅数据变化的watcher的收集。先来回顾一下 getter 部分的逻辑:export functio...原创 2019-05-22 10:55:22 · 287 阅读 · 0 评论 -
Vue源码系列17------响应式原理---响应式对象
Vue.js 实现响应式的核心是利用了 ES5 的Object.defineProperty,给数据添加了 getter 和 setter,目的就是为了在我们访问数据以及写数据的时候能自动执行一些逻辑:getter 做的事情是依赖收集,setter 做的事情是派发更新,这也是为什么 Vue.js 不能兼容 IE8 及以下浏览器的原因。Vue会把props、data等变成响应式对象,在创建过程中...原创 2019-05-22 10:16:31 · 321 阅读 · 0 评论 -
Vue源码系列16------响应式原理-----原理
至此分析了Vue 怎么实现数据渲染和组件化的,主要是初始化的过程,把原始的数据最终映射到 DOM 中,但并没有涉及到数据变化到 DOM 变化的部分。而 Vue 的数据驱动除了数据渲染 DOM 之外,还有一个很重要的体现就是数据的变更会触发 DOM 的变化。都知道前端开发最重要的 2 个工作,一个是把数据渲染到页面,另一个是处理用户交互。先来看一个示例:<div id="app" @...原创 2019-05-22 09:54:19 · 114 阅读 · 0 评论 -
Vue源码系列15------组件化----异步组件
在日常的开发中,为了提升性能,多使用异步组件。即将一些非首屏的组件设计成异步组件,按需加载。Vue有3 种异步组件的实现方式,实现了 loading、resolve、reject、timeout 4 种状态。异步组件实现的本质是 2 次渲染,除了 0 delay 的高级异步组件第一次直接渲染成 loading 组件外,其它都是第一次渲染生成一个注释节点,当异步获取组件成功后,再通过forceRe...原创 2019-05-22 09:48:05 · 382 阅读 · 0 评论 -
Vue源码系列15------组件化-----组件注册
在 Vue.js 中,除了它内置的组件如keep-alive、component、transition、transition-group等,其它用户自定义组件在使用前必须注册。在开发过程中可能会遇到如下报错信息:'Unknown custom element: <xxx> - did you register the component correctly? For rec...原创 2019-05-22 09:21:49 · 210 阅读 · 0 评论 -
Vue源码系列14------组件化-----生命周期
每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如需要设置数据监听、编译模板、挂载实例到 DOM、在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,给予用户机会在一些特定的场景下添加他们自己的代码Vue官方给出的关于生命周期的图示链接如下:https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%9...原创 2019-05-21 18:01:55 · 1162 阅读 · 1 评论 -
Vue源码系列11------Vue组件化----createComponent 【创造组件】
Vue.js 的一个核心思想是组件化。所谓组件化,就是把页面拆分成多个组件 (component),每个组件依赖的 CSS、JavaScript、模板、图片等资源放在一起开发和维护。组件的资源是独立的,组件在系统内部可复用,组件和组件之间可以嵌套。下面来看看createComponent的实现,了解到它在渲染一个组件的时候的 3 个关键逻辑:构造子类构造函数,安装组件钩子函数和实例化vn...原创 2019-05-16 16:04:37 · 2211 阅读 · 0 评论 -
Vue源码系列4------Vue文件的入口-----Vue的初始化
这片文章主要分析,在 web 应用下, Runtime + Compiler 构建出来的 Vue.js。入口文件在Vue源码中,入口文件为src/platforms/web/entry-runtime-with-compiler.js。入口文件通过export导出的是一个Vue对象,通过import导入相关依赖组件。首先这个Vue对象来自于;而runtime/index中的Vue对...原创 2019-05-13 11:12:48 · 352 阅读 · 0 评论 -
Vue源码系列5------数据驱动-----从初始化到挂载
Vue的核心思想之一就是数据驱动。所谓数据驱动,是指视图是由数据驱动生成的,我们对视图的修改,不会直接操作 DOM,而是通过修改数据。所有的修改是基于数据的,不会操作DOM,非常利于维护和更新。下面先从new Vue看起:我们都知道,new关键字在 Javascript 语言中代表实例化是一个对象,而Vue实际上是一个类,类在 Javascript 中是用 Function 来实现的...原创 2019-05-14 15:30:16 · 137 阅读 · 0 评论 -
CSS基础-----绝对定位、相对定位、固定定位
这介绍完预备知识之后,下面就来具体说说相对定位、绝对定位和固定定位是怎么回事绝对定位(absolute)元素绝对定位时,会从文档流中完全删除。然后相对于其包含块定位,其边界根据偏移属性(top、left)等放置。定位元素不会流入其他元素。通常情况下,将一个元素位置为relative的作为其绝对定位元素的包含块绝对定位元素的放置和大小是比较重要的两个因素;z-index值: &l...原创 2019-08-11 16:55:00 · 193 阅读 · 0 评论 -
CSS基础-----定位的辅助元素
之前介绍过了定位的元素,以及通过偏移属性去实现这个定位,这篇文章主要介绍辅助定位实现的其他元素,包括宽度和高度、内容溢出或剪裁、以及元素的可见性宽度和高度当确定了元素定位到哪里之后,有时候需要声明高度和宽度。高度属性(height)和宽度属性(width)是非常常见的两个属性。当不确定宽度高度又不想超出时,此时可设置最小最大宽度(高度)解决,但需注意的是此时的属性不可为负 最小...原创 2019-08-11 16:32:31 · 137 阅读 · 0 评论 -
CSS基础-----定位(position)
定位是CSS布局中非常重要的一环,利用定位,可以准确地定义元素框相对于其正常位置应该出现在哪里,或者相对于父元素或者相对于浏览器窗口本身Position 值:static | relative | absolute | fixed | inherit 初始值:static 应用于:所有元素 继承性:无 计算值:根...原创 2019-08-11 16:00:40 · 129 阅读 · 0 评论 -
CSS基础-----浮动(Float)
定位的基本思想很简单,就是它允许你定义的元素框相对于其正常的位置应该出现在哪里,或者相对于父元素甚至是浏览器本身的位置floatfloat 通常使用在布局中的一角,在CSS中,允许浮动任何元素,通过使用float属性实现: 值:left | right | none | inherit 初始值:none 应用:所有元素 继承性:无...原创 2019-08-11 15:04:51 · 317 阅读 · 0 评论 -
Vue源码二次解析【理论】5------Vue初始化全过程-------VDOM
VNode【虚拟DOM】是Vue中一个很重要的方面;在Vue中,VNode是对真实DOM的一种抽象【VNode 用来映射到真实 DOM 的渲染】。每个 VNode 都有children,children每个元素也是一个 VNode,这样就形成了一个 VNode Tree,它很好的描述了我们的 DOM Tree。VNode由createElement函数创建,创建一个DOM过程:...原创 2019-05-31 14:55:14 · 230 阅读 · 0 评论 -
Vue源码二次解析【理论】4------Vue初始化全过程-----render
Vue的渲染过程主要依赖的是render函数,核心js文件为render.js文件。render函数的第一个参数是createElement,在这里render函数中的createElement方法就是vm.$createElement方法。vm.$createElement方法定义是在执行initRender方法的时候,vm._render最终是通过执行createE...原创 2019-05-31 11:47:13 · 199 阅读 · 0 评论 -
Vue源码二次解析【理论】3------Vue初始化全过程-----挂载过程
Vue 中是通过$mount实例方法去挂载vm的。整个过程是先缓存原型上的$mount方法,然后重新定义该方法。首先,它对el做了限制,Vue 不能挂载在body、html这样的根节点上。接下来的是判断有没有定义render方法。如果没有定义render方法,则会把el或者template字符串转换成render方法。整个大的过程如下:接下来拆分...原创 2019-05-31 11:41:59 · 211 阅读 · 0 评论 -
Vue源码二次解析【理论】2------Vue初始化全过程
这次分析以在 web 应用下, Runtime + Compiler 构建出来的 Vue.js为例。Vue的本质上就是一个用 Function 实现的 Class,然后它的原型 prototype 以及它本身都扩展了一系列的方法和属性。Vue 的初始化逻辑非常清楚,实质上就是是往Vue的原型上去挂载一些方法,或者给Vue这个对象本身扩展全局的静态方法。把这些方法拆分到不同的功能模块中,把不...原创 2019-05-31 10:57:11 · 247 阅读 · 0 评论 -
Vue源码二次解析【理论】1------Vue构建过程
在前一个系列中,结合源码,我已经分析的很详细了。这一个系列主要是想通过理论,从函数的角度来了解每个过程的形成。在本篇以及接下来的篇章中所有的分析只是基于Web这个层面。Vue的源码构建过程主要依赖build.js这个文件,而运行这个文件的相关配置主要存放在config.js文件中,这次着重就这两个文件做一个简单的分析。先来看一个整体的流过程:在build.js中构建的主要依赖于buil...原创 2019-05-31 09:50:01 · 269 阅读 · 0 评论 -
Vue源码系列23---响应式原理-----计算属性和侦听属性
Vue 的组件对象支持了计算属性computed和侦听属性watch2 个选项。计算属性本质上是computed watcher,而侦听属性本质上是user watcher。就应用场景而言,计算属性适合用在模板渲染中,某个值是依赖了其它的响应式对象甚至是计算属性计算而来;而侦听属性适用于观测某个值的变化去完成一段复杂的业务逻辑。watcher有4 个options,通常会在创建...原创 2019-05-24 09:34:15 · 370 阅读 · 0 评论 -
Vue源码系列13------合并配置----组件调用
组件场景由于组件的构造函数是通过Vue.extend继承自Vue的,先回顾一下这个过程,代码定义在src/core/global-api/extend.js中/** * Class inheritance */Vue.extend = function (extendOptions: Object): Function { // ... Sub.options ...原创 2019-05-21 17:27:51 · 668 阅读 · 0 评论 -
Vue源码系列12-------合并配置----外部调用
new Vue初始化的过程通常有 2 种场景,一种是外部我们的代码主动调用new Vue(options)的方式实例化一个 Vue 对象;另一种是组件过程中内部通过new Vue(options)实例化子组件。但是无论哪种场景,都会执行实例的_init(options)方法,它首先会执行一个merge options的逻辑,相关的代码在src/core/instance/init...原创 2019-05-21 17:27:55 · 249 阅读 · 0 评论 -
Vue源码系列22----响应式原理----组件更新
当数据发生变化的时候,会触发渲染watcher的回调函数,进而执行组件的更新过程。updateComponent = () => { vm._update(vm._render(), hydrating)}new Watcher(vm, updateComponent, noop, { before () { if (vm._isMounted) { ...原创 2019-05-24 13:17:07 · 465 阅读 · 0 评论 -
基于Webstorm与node.js(一)
WebStorm是jetbrain公司旗下一款JavaScript开发工具.目前已被广大前端开发者所喜欢,作为一名前端开发者,前后端分离是在项目中常常会遇到的事,node作为一个承前启后的工具自然深的欢心,经过一上午的研究,终于摸清楚了WebStorm与node.js的兼容配置. 首先,需要一个WebStorm编辑器,推荐最好是直接从官网下载,从而省去所谓的下载冗余或者病毒的风险,...原创 2018-10-08 18:28:40 · 4492 阅读 · 0 评论 -
Vue从浅显程度理解(五)-----Vue项目结构
通常来说一个完整的Vue项目,都具有以下的目录结构,通常来说文档结构具备通用性Vue全局配置原创 2018-09-10 23:04:42 · 199 阅读 · 0 评论 -
Vue从浅显程度理解(二)
v-bind:属性名="表达式",最终表达式运算结束的结果赋值给该属性名 -简化的写法:`属性名=表达式`如v-blind:class=xxx,class:根据可变的表达式的结果来给class赋值。 class的结果分类 -一个样式:返回字符串(三元表达式和key和样式的清单对象) -多个样式:返回对象(样式key,t...原创 2018-09-07 00:09:45 · 307 阅读 · 0 评论 -
Vue从浅显程度理解(四)-----Webpack专题
本质: webpack是一个现代 JavaScript 应用程序的静态模块打包器(static module bundler)。在 webpack 处理应用程序时,它会在内部创建一个依赖图(dependency graph),用于映射到项目需要的每个模块,然后将所有这些依赖生成到一个或多个包(bundle)。四个核心概念: 入口(entry):指示 webpack 应该使用哪个模块,来...原创 2018-09-09 23:08:26 · 165 阅读 · 0 评论 -
WEB API(二)-----具体操作DOM
根据id属性的值获取元素,返回来的是一个元素对象: document.getElementById('id属性的值') 2.根据标签名字获取元素,返回来的是一个伪数组,里面保存了多个DOM对象: document.getElementsByTagName('标签名字') 3.根据name属性的值获取元素, 返回来的是一个伪数组,里面保存了多...原创 2018-09-09 21:29:25 · 108 阅读 · 0 评论 -
web api(一)
文档:把一个html文件看成是一个文档,因为万物皆对象,所以把这个文档看成一个对象,所以文档中所有的标签都可以看成是一个对象,HTML文档主要用于展示信息,展示数据的XML文件也可以看成是一个文档,XML文档侧重于存储数据元素(element):页面中所有的标签都是元素,元素可以看成对象节点(node):页面中所有的内容都是节点:标签,属性,文本root:根 页面就是文档-...原创 2018-09-09 21:18:41 · 560 阅读 · 0 评论 -
Vue从浅显程度理解(三)-----Vue生命周期
Vue的生命周期图示,以下来自官网图片。Vue的实例从创建到销毁完整的过程,原创 2018-09-09 20:52:51 · 218 阅读 · 0 评论 -
JqGrid常用的参数列表
jqGrid常用参数: 名称 类型 描述 默认值 可修改 url string 获取数据的地址 datatype string ...原创 2018-09-03 21:32:10 · 145 阅读 · 0 评论 -
Vue从浅显程度理解(一)
Vue是现在Web前端中比较流行的三大框架之一,Vue.js是一套构建用户界面的渐进式框架。Vue只关注视图层,采用自底向上增量开发的设计。通过Vue可以达到通过使用尽可能简单的API实现相应的数据绑定和组合的视图组件。Vue默认支持ES6的模块导入导出,在设计Vue项目时应该考虑代码的目录结构,webpack:是一个现代JS应用程序的静态模块打包器(module bundler),可高配置....原创 2018-09-06 01:02:57 · 358 阅读 · 0 评论 -
前端学习之node.js(一)
在前端编程之中,常见的Web的服务端:1 Java 2 PHP 3 Python 4 Ruby 5.net 6 node.js.其中node.js采用js编程。node.js相当于服务器后端(back-end),node就是一个工具,打开服务端的黑盒子,使js脱离浏览器环境运行。node是一个运行环境,运行平台。node.js中的js没有BOM((Browser Object Mo...原创 2018-09-05 00:00:35 · 1642 阅读 · 0 评论 -
基于WebStorm(二)-----webstorm项目中pug转化为html
总所周知,在开发过程中html界面最烦的就是'<>'与'<></>',有时候稍微不小心少打了个'>'项目就开始罢工,开始不跑;为了提高效率也为了减少不必要的错误影响开发心情,所以jade应运而生,jade在github上开源(https://github.com/pugjs/pug)受到了一众web开发者的喜爱,后来因为版权问题,j...原创 2018-10-08 18:53:08 · 2785 阅读 · 0 评论 -
CSS权威指南学习之路(一)--------CSS和文档
忙过了昏天黑地的加班生活,总算有机会把前两个月买的CSS权威指南拿出来学习了。接下来这个系列将是对自己学习的记录同时也是做一个分享,希望有用之人少走点弯路。CSS(Cascading Style Sheets)全称是层叠样式表,主要用于对HTML语言进行渲染。CSS是W3C在1995年发布的一种正在进行的计划,她有着丰富的样式,易于使用,兼容多个界面,层叠规则从后往前覆盖,同时使文件更精简的特...原创 2018-10-24 21:35:47 · 206 阅读 · 0 评论 -
Vue源码系列10------VueDOM的首次渲染---update
Vue 的_update是实例的一个私有方法,它被调用的时机有 2 个,一个是首次渲染,一个是数据更新的时候;这篇文章中涉及的是 首次渲染的时候发生的变化。_update方法的作用是把 VNode 渲染成真实的 DOM,它的定义在src/core/instance/lifecycle.js中:Vue.prototype._update = function (vnode: VNode...原创 2019-05-15 16:46:58 · 664 阅读 · 0 评论 -
Vue源码系列9------创建 VNode-----createElement
createElement创建 VNode 的过程,每个 VNode 有children,children每个元素也是一个 VNode,这样就形成了一个 VNode Tree,它很好的描述了我们的 DOM Tree。createElement 这个方法定义在src/core/vdom/create-elemenet.js中:// wrapper function for pr...原创 2019-05-15 15:10:45 · 1920 阅读 · 1 评论