Web前端
且听真言
努力工作,玩命生活。
展开
-
块级元素和行内元素的区别
布局的基本元素:块级元素和行内元素。块级元素有:div、p、form、ul、ol、li等。常见的行内元素有span、strong、em等。区别:1.块级元素会独占一行,默认情况下,其宽度自动填满其父元素的宽度。2.行内元素不会独占一行,相邻的行内元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化。3.块级元素可以设置width、height...原创 2019-03-08 09:44:20 · 1562 阅读 · 0 评论 -
javascript 箭头函数和对象字面量
由于this值在箭头函数创建时确定的,所以会导致一些看似奇怪的行为。看下面代码,因为只有一个按钮,因此可以假设不需要构造函数。直接使用对象字面量。 <button id="testClick">Click Me!</button> <script> if (this === window) { //全局代码中的this指向全局w...原创 2019-01-26 09:52:52 · 765 阅读 · 0 评论 -
javascript 生成器和promise总结
生成器和promise总结1.生成器是一种不会在同事输出所有值序列的函数,而是基于每次的请求生成值。2.不同于标准函数,生成器可以挂起和恢复它们的执行状态。当生成器生成一个值后,它将会在不阻塞主线程的基础上挂起执行,随后静静地等待下次请求。3.生成器通过在function 后面加一个星号(*)来定义。在生成器函数体内,我们可以使用新的关键字yield来生成一个值并挂起生成器的执行。如果...原创 2019-01-15 21:24:54 · 628 阅读 · 0 评论 -
JavaScript 使用函数上下文的问题
处理JavaScript函数上下文时可能遇到一些问题。在回调函数中(例如事件处理器),函数上下文与预期不符,但可以使用call或apply方法绕过。在本节中,我们看看另外两个选择:箭头函数和bind方法,在一些情况下可以更优雅地实现相同的效果。使用箭头函数绕过函数上下文箭头函数相比于传统的函数声明和函数表达式,可以更加优雅地创建函数。箭头函数作为回调函数还有一个更优秀的特性:箭头函数没有单...原创 2019-01-25 18:41:31 · 293 阅读 · 0 评论 -
javascript深入研究promise
promise对象作用域作为异步任务结果的占位符。它代表了一个暂时没有获得的值,但是未来有可能获得的值。基于这一点原因,在一个promise对象的整个生命周期中,它会经历多种状态。一个promise对象从等待(pending)状态开始,此时我们对承诺的值一无所知。因此一个等待状态的promise对象也称为未实现(unresolved)的promise。在程序执行的过程中,如果promise的res...原创 2019-01-09 17:48:12 · 214 阅读 · 0 评论 -
javascript 面向未来的async函数
可以看到我们仍然需要书写一些样板代码,所以我们此时需要一个async函数能够管理所有promise函数的调用,还要管理所有向生成器发送的请求。虽然我们可以在代码中只书写一次这个过程,然后每次需要的时候对其进行复用,但如果我们完全不用关心这个问题就更好了。负责JavaScript的人们也注意到了将生成器和promise相结合的强大效果,因而他们也希望直接借助语言层面来支持这个特性,从而使我们开发更加...原创 2019-01-15 09:21:28 · 173 阅读 · 0 评论 -
javascript把生成器和promise相结合
结合生成器(以及生成器暂停和恢复执行的能力)和promise,来实现更加优雅的异步代码。try{ const ninjas = syncGetJSON('data/ninja.json'); const missions = syncGetJSON(ninjas[0].missionsUrl); const missionDetails = syncGetJSON(mission...原创 2019-01-14 19:15:02 · 768 阅读 · 0 评论 -
微信小程序 javascript将字符串中所有 ‘\\n‘ 转换成 '\n'
javascript将字符串中所有\\n转换成\nsignDateStr.content.replace(/\\n/g, "\n");在数据库中的\n取出时会变成\\n,所以在微信小程序的text组件中使用'\n',首先需要将'\\n'转换成'\n';使用方法如下:content.replace(/\\n/g, "\n");...原创 2019-01-19 15:37:45 · 4372 阅读 · 0 评论 -
javascript 使用apply和call方法调用
目前不同类型函数调用指尖的主要区别在于:最终作为函数上下文(可以使用this参数隐式引用到)传递给执行函数的对象不同。对于方法而言,即为方法所在的对象;对于顶级函数而言是window或者undefined(取决于是否处于严格模式下);对于构造函数而言是一个新创建的实例对象。但是,如果想改变函数上下文怎么办?如果想要显示指定它怎么办?如果......好吧,我们为什么会提出这样的问题?为了解释...原创 2019-01-24 15:38:01 · 583 阅读 · 0 评论 -
javascript截取字符串和保留两位小数应用到小程序中
filter.wxs文件中编写:var filters = { toFix: function(value) { return value.toFixed(2) }, interceptString: function(value) { var index = value.indexOf("\n"); return value.substring(0,...原创 2019-01-19 13:25:25 · 786 阅读 · 0 评论 -
javascript 使用promise
使用JavaScript编写代码会大量的依赖异步计算,计算那些我们现在不需要但将来某个时候可能需要的值。ES6引入一个新概念,用于更简单的异步任务:promise。promise对象是对我们现在尚未得到的但将来会得到值的占位符,它是对我们最终能够得知异步计算结果的一种保证。如果我们兑现了我们的承诺,那结果会得到一个值。如果发生了问题,结果则是一个错误。使用promise的一个最佳的例子是从服务...原创 2019-01-08 19:11:04 · 2816 阅读 · 0 评论 -
javascript 理解函数调用-this参数:函数上下文
this参数:函数上下文当调用函数时,除了显示提供的函数外,this参数也会默认地传递给函数。this参数是面向对象JavaScript编程的一个重要组成部分,代表函数调用相关联的对象。因此,通常称之为函数上下文。函数上下文是来自面向对象语言(如java)的一个概念。在这些语言中,this通常指向定义在前面方法的类的实例。但是要小心!正如接下来要提到的,在JavaScript中,将一个...原创 2019-01-18 19:34:31 · 874 阅读 · 0 评论 -
javascript 理解函数调用-操作arguments参数
console.log('---------------------使用arguments参数对所有函数执行操作------------------------');//完全没有任何显式定义参数的函数//迭代所有传入参数,然后通过索引标记获取每个元素的值function sum() { var sum = 0; for (var i = 0; i < arguments.le...原创 2019-01-17 19:20:39 · 475 阅读 · 0 评论 -
javascript与生成器交互
使用yield表达式从生成器中返回多个值,但生成器远比这更加强大!我们还能向生成器发送值,从而实现双向通信!使用生成器我们能够生成中间结果,在生成器以外我们也能够使用该结果进行任何操作,然后,一旦准备好了,就能够把整个新计算得到的数据再完完整整返回给生成器。作为生成器函数发送值向生成器发送值的最简单方法如其他函数一样,调用函数并传入实参。 console.log('-------...原创 2019-01-02 19:18:22 · 311 阅读 · 0 评论 -
javascript对迭代器进行迭代
通过调用生成器得到的迭代器,暴露出一个next方法能让我们向迭代器请求一个新值。next方法返回一个携带着生成值的对象,而该对象中包含的另一个属性done也向我们指示了生成器是否还会追加生成值。//通过调用生成器得到的迭代器,暴露出一个next方法能让我们向迭代器请求一个新值。next方法返回一个携带着生成值的对象,而该对象中包含的另一个属性done也向我们指示了生成器是否还会追加生成值。...原创 2019-01-01 09:49:25 · 1051 阅读 · 0 评论 -
JavaScript使用bind方法
函数还可访问bind方法创建新函数。无论使用哪种方法调用,bind方法创建的新函数与原始函数的函数体相同,新函数被绑定到指定的对象上。<button id="testClick">Click Me!</button><script> console.log('---------------在事件处理中绑定指定的上下文-----------------...原创 2019-01-26 14:10:54 · 2019 阅读 · 0 评论 -
javascript 函数总结
小节:1.当调用函数时,除了传入在函数定义中显示声明的参数之外,同时还传入两个隐式参数:arguments与this。-arguments参数是传入函数的所有参数的结合。具有length属性,表示传入的参数的个数,通过arguments参数还可以获取那些与函数形参不匹配的参数。在非严格模式下,arguments对象是函数参数的别名,修改arguments对象会修改函数实参,可以通过严格...原创 2019-01-27 10:55:36 · 240 阅读 · 1 评论 -
理解函数调用-arguments参数
1.函数中两个隐含的参数:arguments和this2.调用函数的不同方式3.处理函数上下文的问题隐式的函数参数this和arguments。两者会被静默地传递给参数,并且可以像函数体内显示声明的参数一样被正常访问。参数this表示被调用函数的上下文对象,而argument参数表示函数调用过程中传递的所有参数。这两个参数在JavaScript代码中至关重要。参数this是Ja...原创 2019-01-16 19:47:27 · 3903 阅读 · 0 评论 -
chrome扩展cookie使用
要使用cookies API, 你必须在你的清单中声明"cookies"权限,以及任何你希望cookie可以访问的主机权限。例如:{ "name": "My extension", ... "permissions": [ "cookies" ], ...}setCookies: function(url, nam...原创 2019-03-10 10:21:49 · 13797 阅读 · 1 评论 -
css中relative、absolute和float
position:relative和position:absolute都可以改变元素在文档流中的位置,设置position:relative或position:absolute都可以让元素激活left、top、right、bottom和z-index属性(默认情况下,这些属性未激活,设置也无效)网页虽然看起来是平面的二维结构,但其实是有z轴的,z轴的大小由z-index控制,默认情况下,...原创 2019-03-09 18:34:22 · 1205 阅读 · 6 评论 -
使用Chrome浏览器打包生成插件
chrome extension,文件扩展名为crx,俗称chrome扩展,chrome插件。crx文件本质就是ZIP文件,只是谷歌在ZIP文件头,插入了自定义的私有字段,如,插件描述,插件ID,密钥等。用户可以手动修改crx文件的扩展名,修改为zip,然后使用普通的解压工具,就能解压。开发者提交自己的插件时,提交的是文件就是压缩包zip文件。而谷歌后台,则根据压缩包,自动生成crx文件。注意:c...原创 2019-02-14 14:27:33 · 3437 阅读 · 0 评论 -
Chrome扩展之书签
Chrome为开发者提供了添加、分类(书签文件夹)和排序等方法来操作书签,同时也提供了读取书签的方法。 要在扩展中操作书签,需要在Manifest中声明bookmarks权限: "permissions": ["bookmarks"]在具体讲解操作书签的方法前,先让我们来了解一下书签对象的数据结构。书签对象有8个属性,分别是id、parentId、index、url、t...原创 2019-02-17 16:41:57 · 2107 阅读 · 1 评论 -
React UI组件和容器组件
UI组件负责页面的渲染,容器组件负责页面的逻辑。拆分TodoList中页面渲染部分的代码:import React, { Component } from 'react';import { Input, Button, List} from 'antd';class TodoListUI extends Component{ render() { ret...原创 2019-02-17 12:02:02 · 2158 阅读 · 0 评论 -
JavaScript 自记忆函数
如同前面所提到的,记忆化(memoization)是一种构建函数的处理过程,能够记住上次计算结果。在这个果壳里,当函数计算得到结果时就将该结果按照参数存储起来。采用这种方式时,如果另一个调用也使用相同的参数,我们则可以直接返回上次存储的结果而不是再计算一遍。像这样避免既重复又复杂的计算可以显著地提高性能。对于动画中的计算、搜索不经常变化的数据或任何耗时的数学计算来说,记忆化这种方式是十分有用的。...原创 2019-01-31 10:55:32 · 322 阅读 · 0 评论 -
javascript 函数的定义
JavaScript函数通常由函数字面量(function literal)来创建函数值,就像数字字面量创建一个数字值一样。要记住这一点,作为第一类对象,函数是可以用在编程语言中的值。 JavaScript提供了几种定义函数的方式,可以分为4类:1.函数定义(function declarations)和函数表达式(function expressions)——最常用,在定义函数上却有...原创 2019-01-31 09:39:44 · 290 阅读 · 0 评论 -
Redux设计和使用的三项原则
1.store必须是唯一的。import { createStore } from 'redux';import reducer from './reducer';//创建公共存储工具,如果window下有这个变量,则执行这个变量对应的方法。const store = createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ &...原创 2019-02-16 15:23:02 · 687 阅读 · 1 评论 -
javascript函数声明和函数表达式
JavaScript中定义函数最常用的方式是函数声明和函数表达式。这两种技术非常相似,有时甚至难以区分,但在后续章节中可以看到,它们之间还是存在着微妙的区别。JavaScript定义函数最基本方式是函数声明,如下图:正如你所见,每个函数声明以强制性的function开头,其后紧接着强制性的函数名,以及括号和括号内一列以逗号分隔的可选参数名。函数体是一列可以为空的表达式,这些表达式必须包含在花括...原创 2019-01-30 13:59:31 · 1294 阅读 · 0 评论 -
javascript 箭头函数
注意 箭头函数是JavaScript标准中的ES6新增项。由于JavaScript中会使用大量函数,增加简化创建函数方式的语法十分有意义,也能让我们开发者生活更愉快。在很多方式中,箭头函数是函数表达式的简化版。var values = [0, 3, 2, 5, 7, 4, 8 , 1];values.sort(function (value1, value2) { return v...原创 2019-01-30 10:27:03 · 305 阅读 · 0 评论 -
javascript 函数的实参和形参
在讨论函数时,经常使用的术语实参(argument)和形参(parameter)几乎可以互换,就好像它们是差不多是同一种事物。1.形参是我们定义函数时所列举的变量。2.实参是我们调用函数时所传递给函数的值。/参数列表中的ninja是形参function skulk(ninja) { //performAction传入的两个参数是ninja和'skulking'是函数实参 r...原创 2019-01-29 19:40:06 · 1750 阅读 · 0 评论 -
JavaScript剩余参数和默认参数
剩余参数注意:剩余参数已被加入ES6标准。下一个例子中,我们会构建一个函数,它会将第一个参数与剩余参数中最大的数相乘。这个例子可能并不是特别适用于我们的应用,然而,这个例子可能为函数中参数处理提供了一种技术。console.log('----------------------使用剩余参数--------------------------');//剩余参数以...做前缀fun...原创 2019-01-29 12:14:20 · 677 阅读 · 1 评论 -
javascript 函数小节
1.把JavaScript看作函数式语言你就能书写复杂的代码。2.作为第一类对象,函数和JavaScript中其他对象一样。类似于其他对象类型,函数具有以下功能:2.1通过字面量创建。2.2赋值给变量或属性。2.3作为函数参数传递。2.4作为函数的结果返回。2.5赋值给属性和方法。 3.回调函数是被代码随后“回来调用”的函数,它是一种很常用的函数,特别是在事件...原创 2019-01-28 18:25:56 · 165 阅读 · 0 评论 -
javascript 理解函数的调用——构造函数
函数作为构造函数调用并没有什么特别之处。构造函数的声明和其他函数类似,通过使用函数声明和函数表达式很容易得构造新的对象。唯一的例外是箭头函数。若通过构造函数方式调用,需要在函数调用之前使用关键字new。例如,通过构造函数的方式重新调用上一节中提到的函数whatsMyContext:function whatsMyContext() {return this;}如果我们想要通过构...原创 2019-01-22 19:21:38 · 552 阅读 · 0 评论 -
Redux状态管理
Redux通过一系列约定的规范将修改应用状态的步骤标准化。 当需要修改应用状态时,必须发送一个action,action描述应用状态如何修改。action只是一个普通的JavaScript对象。type代表action的类型,注意action的结构并不是确定的,但必须包含type字段。Redux通过reducer解析action。reducer是一个普通的JavaScript函数,接收...原创 2019-01-10 19:10:46 · 832 阅读 · 0 评论 -
深入理解Promise2
客户端最通用的异步任务就是从服务器获取数据。使用内置XMLHttpRequest对象来完成底层的实现。console.log('----------------------创建一个真实promise案例-----------------------');console.log('-----------------创建getJSON promise----------------');fu...原创 2019-01-10 19:07:30 · 421 阅读 · 0 评论 -
javascript 实现继承
实现继承1.ES6之前的版本重中实现继承是一件痛苦个事。如下面代码:function Person() {}Person.prototype.dance = function(){};function NinjaTest() {}NinjaTest.prototype = new Person();Object.defineProperty(NinjaTest.prototype...原创 2018-12-13 19:29:31 · 150 阅读 · 0 评论 -
javascript构造函数实现对象类型
虽然知道JavaScript如何使用原型查找引用属性,这一点很重要,但也需要知道对象实例是通过哪个函数构造创建的。我们可以通过构造函数的原型中的constructor属性访问对象的构造器。例如,下图展示了当使用Ninja构造器初始化一个对象实例时,应用程序的状态。每个函数的原型对象都具有一个constructor属性,该属性指向函数本身。通过使用constructor属性,我们可以访问...原创 2018-12-03 19:09:52 · 471 阅读 · 0 评论 -
JavaScript配置对象属性
在JavaScript中,对象是通过属性描述(property descriptor)进行描述的,我们可以配置以下关键字。1.configurable——如果设置为true,则可以修改或者删除属性。如果设置为false,则不允许修改。2.enumerable——如果设置为true,则可在for-in循环对象属性使出现。3.value——指定属性的值,默认为undefined。4.w...原创 2018-12-08 14:56:27 · 1315 阅读 · 0 评论 -
JavaScript重写constructor属性的问题
console.log("-----------------------使用原型实现继承---------------------------");function Person() {}Person.prototype.dance = function () {};function NinjaTestInherit() {}//通过将NinjaTest的原型赋值给Person实例...原创 2018-12-08 13:59:26 · 843 阅读 · 0 评论 -
JavaScript之实现继承一
console.log("----------------------------------------实现继承----------------------------------------");//继承(Inheritance)是一种在新对象上复用现有对象的属性的形式。这有助于避免重复代码和重复数据。在JavaScript中,继承原理和其他的面向对象语言略有不同。console.log...原创 2018-12-08 10:03:36 · 243 阅读 · 0 评论 -
javascript之复用内置构造函数
有时,我们可能想要创建一个对象,该对象包含一组数据。如果仅仅是集合,我们可以使用数组。但是有时,需要存储 更多状态,可能就需要存储更多集合相关的元数据。一种方式是创建这类对象的新版本,添加元数据属性和方法,我们可以在对象上添加属性和方法,包括数组。然而这种方法效率低,且单调乏味。我们如何使用简单对象,并加上我们需要的方法。处理集合的方法在Array对象上,如何引入到我们的自定义的对象上呢?...原创 2018-11-28 19:56:53 · 536 阅读 · 0 评论