0

链接是Web的核心元素

链接是HTML的基础元素,因为Web的设计初衷就是想把一组文档彼此链接起来组成信息分享网络。HTML的超文本(Hyper Text)部分定义了链接的类型即:超文本链接(hypertext links),也就是超链接(hyperlinks)。在HTML中,链接是内联元素,使用<a>标签。href(hypertext reference) 属性用来定义链接的目标地址(当点击时跳转或新打开的网页地址)。<p> 要搜索网页动画,请访问 <a href="//www.techbrood.com">Techbrood</a>. </p>要搜索...

阅读全文>>

0

你真的了解ES6函数特性么?

前言 函数是所有编程语言中重要的组成部分,在Es6出现之前 JavaScript的函数语法一直没有太大的变化,从而遗留了很多问题和隐晦的做法,导致实现一些功能需要编写很多代码。函数形参默认值 JavaScript函数有一个特别的地方,就是无论在函数形参里定义了多少参数,都可以传入任意数量的参数,但是有的情况下,我们的参数只是可填,这样的话我们还在函数体呢写一堆逻辑从而导致代码冗余,还好Es6版本出现了函数默认值。我们用Es5和Es6代码来比对一下Es5处理默认参数function person(name, age) { name = typeof(name) != "undefined...

阅读全文>>

0

Vue nextTick彻底理解

前言含义和使用nextTick的官方解释:在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。啥意思呢,即我们对Vue中data数据的修改会导致界面对应的响应变化,而通过nextTick方法,可以在传入nextTick的回调函数中获取到变化后的DOM,讲起来可能还是有点梦幻,下面我们直接使用nextTick体验一下效果。比如我们有如下代码:<template> <div> <button @click='update'>更新数据</button> <span id...

阅读全文>>

0

tiptap - 基于 vue 的优雅流畅的富文本编辑器

一款专为 vue.js 打造,设计优雅,体验流畅舒服的现代富文本编辑器。关于 TiptapTiptap 是一款专为 vue 打造的简洁明快的富文本编辑器,通过简单的设置能为用户提供多种优秀的文字编辑体验。Tiptap 官网基于 vue.js 的富文本编辑器Tiptap 最大的特点是预置的渲染,没有任何 CSS,用户可以更全面地控制段落标记和样式视觉设计以及交互动效简洁明快,能够提供非常流畅的码字体验支持获取 HTML 字符串,开发者可以将数据储存为原始 HTML 字符串支持获取 JSON 文档的 -serializable 格式开发上手体验富文本编辑器用途很广泛,无论是文章发布系统(cms)、...

阅读全文>>

0

用HTML5构建一个流程图绘制工具

在我们的开发工程中经常会使用到各种图,所谓的图就是由节点和节点之间的连接所形成的系统,数学上专门有一个分支叫图论(Graph Theroy)。利用图我们可以做很多工具,比如思维导图,流程图,状态机,组织架构图,等等。今天我要做的是用开源的HTML5工具来快速构造一个做图的工具。工具选择工预善其事,必先利其器。第一件事是选择一件合适的工具,开源时代,程序员还是很幸福的,选择很多。flowchart.js http://adrai.github.io/flowchart.js/ , 基于SVG创建Flow Chartgo.js http://www.gojs.net/latest/index.ht...

阅读全文>>

0

Js震撼人心的超酷人体模型类库Mannequin.js

简要介绍mannequin.js是一款可以通过JavaScript实现控制人体关节模型的超酷类库。mannequin.js基于经典的Three.js库,官网所展现的Demo效果令人惊奇到掉了下巴,真的是震撼!接下来说下细节。首先,它可以选择创建Male、Female、Child三种人体模型。其次,每种模型可以细分到头部、颈部、躯干、骨盆。上肢可以细分为手臂、肘部、腕部和手指,下肢可以细分为腿,膝盖和脚踝。模型还可以设置动态或者静态的姿势。通过这个类库让前端开发者开启上帝模式,随心掌控模型的一举一动。Github地址https://boytchev.github.io/mannequin.js/...

阅读全文>>

0

这4个问题可以检测出你JavaScript水平的高低

准备JavaScript面试时应了解的事项。JavaScript现在是一种非常流行的编程语言,基于该语言,派生了大量库和框架。 但是,无论高层生态系统如何发展,离不开原始的JavaScript。 在这里,我选择了4个JavaScript面试问题来测试程序员使用普通JavaScript的技能。1.实现Array.prototype.map如何手动实现Array.prototype.map方法?熟练使用数组的内置方法并不难。但是,如果您只是熟悉语法而又不了解原理,那么很难真正理解JavaScript。对于Array.prototype.map,它将创建一个新数组,其中将填充在调用数组中每个元素上调...

阅读全文>>

0

js 手动实现bind方法,超详细思路分析

在模拟bind之前,我们先了解bind的概念,这里引入MDN解释:bind() 方法创建一个新的函数,在 bind() 被调用时,这个新函数的 this 被指定为 bind() 的第一个参数,而其余参数将作为新函数的参数,供调用时使用。说的通俗一点,bind与apply/call一样都能改变函数this指向,但bind并不会立即执行函数,而是返回一个绑定了this的新函数,你需要再次调用此函数才能达到最终执行。我们来看一个简单的例子:var obj = { z: 1 }; var obj1 = { z: 2 }; function fn(x, y) { consol...

阅读全文>>

0

怎么在javascript中灵活运用 this

this 是什么Javascriptthis关键词指的是他所属的对象,它拥有不同的值,具体取决于使用的位置和调用方式。使用方式在方法中,它指向这个方法的拥有者在函数中,它是全局对象window严格模式下在函数中,它是undefined单独使用时,它是全局对象window在事件中,它指向触发事件的目标对象e.target不同执行模式下的差异化javascript 中的this不同于其他编程语言,在严格模式和非严格模式下, 它的值是不同的,下面举个例子。// 非严格模式 function foo() { return this } console.log(foo() === window....

阅读全文>>

0

Vuex 4 正式发布:打包现在与 Vue 3 一致

Vuex 是一个专门为 Vue.js 应用程序开发的状态管理模式。Vuex 采用集中式存储管理应用的所有组件组件的状态。换句话说,Vuex 就是帮开发者存储多个组件共享的数据,方便开发者对其读取的更改的工具。Vuex 4 正式版本现已正式发布。Vuex 4 的改进重点是兼容性。Vuex 4 支持 Vue 3,并提供了与 Vuex 3 完全相同的 API,因此用户可以在 Vue 3 中重用现有的 Vuex 代码。这个版本还包含一些重大更改,详情见后文。关于 Option 和 Composition API 的基本用法,请参见 example 目录。新版还是用 NPM 包发布,放在 next 标签...

阅读全文>>