精华内容
下载资源
问答
  • call、apply bind 之间的区别比较大,前者在改变 this 指向的同时,也会把目标函数给执行掉;后者则只负责改造 this,不作任何执行操作。 call apply 之间的区别,则体现在对入参的要求上。前者只需要将目标...

    解析:这里我给大家画了一张思维导图:
    在这里插入图片描述

    结合这张图来说明,会清楚得多:

    call、apply 和 bind,都是用来改变函数的 this 指向的。

    call、apply 和 bind 之间的区别比较大,前者在改变 this 指向的同时,也会把目标函数给执行掉;后者则只负责改造 this,不作任何执行操作。

    call 和 apply 之间的区别,则体现在对入参的要求上。前者只需要将目标函数的入参逐个传入即可,后者则希望入参以数组形式被传入。

    进阶编码题:模拟实现一个 call/apply/bind 方法

    在实现 call 方法之前,我们先来看一个 call 的调用示范:

    var me = {
      name: 'xiuyan'
    }
    
    function showName() {
      console.log(this.name)
    }
    
    showName.call(me) // xiuyan
    

    结合 call 表现出的特性,我们首先至少能想到以下两点:

    • call 是可以被所有的函数继承的,所以 call 方法应该被定义在 Function.prototype 上

    • call 方法做了两件事:

    1. 改变 this 的指向,将 this 绑到第一个入参指定的的对象上去;
    2. 根据输入的参数,执行函数。

    结合这两点,我们一步一步来实现 call 方法。首先,改变 this 的指向

    showName 在 call 方法调用后,表现得就像是 me 这个对象的一个方法一样。

    所以我们最直接的一个联想是,如果能把 showName 直接塞进 me 对象里就好了,像这样:

    var me = {
      name: 'xiuyan',
      showName: function() {
        console.log(this.name)
      }
    }
    
    me.showName()
    

    但是这样做有一个问题,因为在 call 方法里,me 是一个入参:

    showName.call(me) // xiuyan
    

    用户在传入 me 这个对象的时候, 想做的仅仅是让 call 把 showName 里的 this 给改掉,而不想给 me 对象新增一个 showName 方法。所以说我们在执行完 me.showName 之后,还要记得把它给删掉。遵循这个思路,我们来模拟一下 call 方法(注意看注释):

    Function.prototype.myCall = function(context) {
        // step1: 把函数挂到目标对象上(这里的 this 就是我们要改造的的那个函数)
        context.func = this
        // step2: 执行函数
        context.func()
        // step3: 删除 step1 中挂到目标对象上的函数,把目标对象”完璧归赵”
        delete context.func
    }
    

    有兴趣的同学,可以测试一下我们的 myCall:

    showName.myCall(me) // xiuyan
    

    在我们这个例子里,myCall 的执行结果结果与 call 无差,撒花~~

    到这里,我们已经实现了 “改变 this 的指向” 这个功能点。现在我们的 myCall 还需要具备读取函数入参的能力,类比于 call 的这种调用形式:

    var me = {
      name: 'Chris'
    }
    
    function showFullName(surName) {
      console.log(`${this.name} ${surName}`)
    }
    
    showFullName.call(me, 'Lee') // Chris Lee
    

    读取函数入参,具体来说其实是读取 call 方法的第二个到最后一个入参。要做到这一点,我们可以借助数组的扩展符

    // '...'这个扩展运算符可以帮助我们把一系列的入参变为数组
    function readArr(...args) {
        console.log(args)
    }
    
    readArr(1,2,3) // [1,2,3]
    

    我们把这个逻辑用到我们的 myCall 方法里:

    Function.prototype.myCall = function(context, ...args) {
        ...
        console.log('入参是', args)
    }
    

    就能通过 args 这个数组拿到我们想要的入参了。把 args 数组代表的目标入参重新展开,传入目标方法里,就大功告成了:

    Function.prototype.myCall = function(context, ...args) {
        // step1: 把函数挂到目标对象上(这里的 this 就是我们要改造的的那个函数)
        context.func = this
        // step2: 执行函数,利用扩展运算符将数组展开
        context.func(...args)
        // step3: 删除 step1 中挂到目标对象上的函数,把目标对象”完璧归赵”
        delete context.func
    }
    

    现在我们来测试一下功能完备的 myCall 方法:

    Function.prototype.myCall = function(context, ...args) {
        // step1: 把函数挂到目标对象上(这里的 this 就是我们要改造的的那个函数)
        context.func = this
        // step2: 执行函数,利用扩展运算符将数组展开
        context.func(...args)
        // step3: 删除 step1 中挂到目标对象上的函数,把目标对象”完璧归赵”
        delete context.func
    }
    
    var me = {
      name: 'Chris'
    }
    
    function showFullName(surName) {
      console.log(`${this.name} ${surName}`)
    }
    
    showFullName.myCall(me, 'Lee') // Chris Lee
    

    结果与 call 方法无差!

    以上,我们就成功模拟了一个 call 方法出来。

    基于这个最基本的 call 思路,大家还可以为这个方法作能力扩充:

    比如如果我们第一个参数传了 null 怎么办?是不是可以默认给它指到 window 去?函数如果是有返回值的话怎么办?是不是新开一个 result 变量存储一下这个值,最后 return 出来就可以了?等等等等 —— 这些都是小事儿。当面试官问你 “如何模拟 call 方法的实现的时候”,他最想听的其实就楼上这两个核心功能点的实现思路,其它的,都是锦上添花~

    基于对 call 方法的理解,写出一个 apply 方法(更改读取参数的形式) 和 bind 方法(延迟目标函数执行的时机)不是什么难事,只需要大家在上面这段代码的基础上作改造即可。(前提是你对 apply 方法和 bind 方法的特性和用法要心知肚明~)。

    Function.prototype.myCall = function (context, ...args) {
        context.func = this;
        context.func(...args);
        delete context.func;
    }
    Function.prototype.myApply = function (context, arr) {
        context.func = this;
        context.func(...arr);
        delete context.func;
    }
    Function.prototype.myBind = function (context, ...args) {
        let self = this;
        return function () {
            self.call(context, ...args)
        }
    }
    
    Function.prototype.myApply(context, arr){
        var context = context | window
        context.func = this
        var result
        if (!arr) {
            result = context.func()
        } else {
            context.func(arr)
        }
        delete context.func
        return result
    }
    
    展开全文
  • resetting normalizing 之间有什么区别?】 【修真院web 小课堂】如何做默认样式重置?resetting normalizing 之间有什么区别? 大家好,我是IT修真院上海分院第10期学员郭巍,一枚正直纯洁善良web程序员...

    这里是修真院前端小课堂,每篇分享文从

    八个方面深度解析前端知识/技能,本篇分享的是:

    【如何做默认样式重置?resetting 和 normalizing 之间有什么区别?】

    【修真院web 小课堂】如何做默认样式重置?resetting 和 normalizing 之间有什么区别?

    大家好,我是IT修真院上海分院第10期的学员郭巍,一枚正直纯洁善良的web程序员,今天给大家分享一下,修真院官网web(职业)任务13,深度思考中的知识点——如何做默认样式重置?resetting 和 normalizing 之间有什么区别?

    (1)背景介绍:

    因为在各种浏览器(chrome,safari,firefox,ie等主流浏览器)中,每个浏览器都有一套css样式默认数值,而且并不是所有的浏览器都使用一样的属性值.

    但当开始一个项目的时候,我们都是希望由自己来定义css的所有样式,所以有了css 重置,以让网页的样式在各浏览器中表现一致.

    (2)知识剖析:

    以p标距离,当我们没有重置p元素的默认样式时,p元素时默认带有上下margin各16px的。

    当我们想要在未定义p元素的外边距时,p元素外边距默认未0。就需要在css中重置p元素的上下外边距为0。

    (3)常见问题:

    比如ul标签的序列符号始终悬浮在li标签之外,当li标签内的文字居中时,无法跟随着文字。

    (4)解决方案:

    因为ul的list-style默认样式是和li标签成分离状的,把list-style设置为inside,就可以改变为在li标签内。

    (5)编码实战:

    ul {

    padding: 0;

    list-style: inside;

    text-align: center;

    }

    当我们需要ul里面的li标签的文字居中时,需要序列符跟随文字时。

    (6)拓展思考:

    当我们不对css默认样式进行重置时,一些元素会被浏览器赋予默认的属性和值,当我们不需要默认的属性和值时,就需要进行重置。

    (7)参考文献:

    css样式重置 https://blog.csdn.net/u014516981/article/details/52141451

    (8)更多讨论:

    Q1:为什么需要重置样式?

    A1:因为在各种浏览器(chrome,safari,firefox,ie等主流浏览器)中,每个浏览器都有一套css样式默认数值,而且并不是所有的浏览器都使用一样的属性值.

    Q2:哪些元素需要重置?
    A2:常见需要重置的元素有body、p、ul等,还时根据每个项目的不同,来定义不同的重置方案。

    Q3:重置和不重置的区别?

    A3:当我们不进行重置时,浏览器会赋予一些标签默认的属性和值,当这些属性和值不是我们所需要的时候就需要重置成我们需要的效果

    (9)鸣谢:

    感谢王衡师兄,此教程是在他们之前技术分享的基础上完善而成。

    (10)结束语:

    今天的分享就到这里啦,欢迎大家点赞、转发、留言、拍砖~

    展开全文
  • RESETTING NORMALIZING 之间有什么区别? 】 1.背景介绍 默认样式重置出现原因: 目前为止,市面上五大主流浏览器为IE、Chrome、Firefox、SafariOpera。 当我们没有给html元素设置样式时,这5个浏览器会...

    这里是修真院前端小课堂,每篇分享文从

    【如何做默认样式重置?RESETTING 和 NORMALIZING 之间有什么区别? 】

    1.背景介绍

    默认样式重置出现的原因:

    目前为止,市面上的五大主流浏览器为IE、Chrome、Firefox、Safari和Opera。 当我们没有给html元素设置样式时,这5个浏览器会根据自己的默认样式对html元素进行布局,但是由于每个浏览器的默认布局样式不同, 会导致元素的展示方式出现差异,从而使同一页面在不同浏览器中的展示出现差异。使用CSS样式重置这一方式,就可以使网页展示效果保持 一致。

    webkit浏览器默认样式

    火狐浏览器默认样式

    IE浏览器不同版本默认样式对比表

    最早的一份CSS reset来自Tantek 的undohtml.css, 很简单的代码,Tantek 根据自己的需要,对浏览器的默认样式进行了一些重置。 其余一些有名的CSS reset如业界领袖Eric Meyer的reset; 或是Tripoli Reset。

    2.知识剖析

    什么是CSS RESET?

    我们可以把它叫做CSS重设,也有人叫做CSS复位、默认CSS、CSS重置等。 CSS重设就是由于各种浏览器解释CSS样式的初始值有所不同,导致设计师 在没有定义某个CSS属性时,不同的浏览器会按照自己的默认值来为没有定 义的样式赋值,所以我们要先定义好一些CSS样式,去“覆盖”浏览器的CSS默认属性, 来让所有浏览器都按照同样的规则解释CSS,这样就能避免发生这种问题。

    CSS Reset的作用:

    CSS Reset让各个浏览器的CSS样式有一个统一的基准,而实现这一基准最主要的方式就是“清零”

    举例:

    • { outline: 0; padding: 0; margin: 0; border: 0; }其中 * 就是常说的通配符,意思是“所有的”。使用 * 代表所有的标签或元素,就叫做通配符选择器。

    由于 * 会匹配所有的元素,所以当浏览器解析到 * 时,会将页面内的所有标签都进行如上的样式重置, 这样会影响网页渲染的时间,所以使用 * 时一定要慎重,尽量不要在样式重置时应用 * 。

    CSS Reset的一些方法(推荐第2、4、5篇)

    目前比较全的CSS重设(reset)方法总结

    HTML5 css reset

    CSS工具:重置CSS

    几个CSS重置默认样式reset.css代码

    css重置样式表

    什么是NORMALIZE?

    Normalize.css 只是一个很小的CSS文件,但它在默认的HTML元素样式上 提供了跨浏览器的高度一致性。相比于传统的CSS reset,Normalize.css 是一种现代的、为HTML5准备的优质替代方案。Normalize.css现在已经被 用于Twitter Bootstrap、HTML5 Boilerplate、GOV.UK、Rdio、CSS Tricks 以及许许多多其他框架、工具和网站上。

    源码见:normalize、GitHub源码

    normalize创造的目的:

    保护有用的浏览器默认样式而不是完全去掉它们

    一般化的样式:为大部分HTML元素提供

    修复浏览器自身的bug并保证各浏览器的一致性

    优化CSS可用性:用一些小技巧

    解释代码:用注释和详细的文档来

    RESET和NORMALIZE的区别

    1. Normalize.css 保护了有价值的默认值

    Reset通过为几乎所有的元素施加默认样式,强行使得元素有相同的视觉效果。 相比之下,Normalize.css保持了许多默认的浏览器样式。这就意味着你不用再 为所有公共的排版元素重新设置样式。当一个元素在不同的浏览器中有不同的默认值时, Normalize.css会力求让这些样式保持一致并尽可能与现代标准相符合。

    1. Normalize.css 修复了浏览器的bug

    它修复了常见的桌面端和移动端浏览器的bug。 这往往超出了Reset所能做到的范畴。关于这一点, Normalize.css修复的问题包含了HTML5元素的显示设置、 预格式化文字的font-size问题、在IE9中SVG的溢出、许多 出现在各浏览器和操作系统中的与表单相关的bug。

    1. Normalize.css 不会让你的调试工具变的杂乱

    使用Reset最让人困扰的地方莫过于在浏览器调试工具中大段大段的继承链, 如下图所示。在Normalize.css中就不会有这样的问题,因为在我们的准则中 对多选择器的使用时非常谨慎的,我们仅会有目的地对目标元素设置样式。

    1. Normalize.css 是模块化的

    这个项目已经被拆分为多个相关却又独立的部分, 这使得你能够很容易也很清楚地知道哪些元素被设置了特定的值。 因此这能让你自己选择性地移除掉某些永远不会用到部分(比如表单的一般化)。

    1. Normalize.css 拥有详细的文档

    Normalize.css的代码基于详细而全面的跨浏览器研究与测试。 这个文件中拥有详细的代码说明并在Github Wiki中有进一步的说明。 这意味着你可以找到每一行代码具体完成了什么工作、为什么要写这句代码、 浏览器之间的差异,并且你可以更容易地进行自己的测试。

    总得来说,CSS Reset 是革命党,CSS Reset 里最激进那一派提倡不管你有用没用, 通通给我脱了衣服,于是 *{margin:0;} 等等运动,把人家全拍了。看似是众生平等了, 实则是浪费了资源又占不到便宜,有求于人家的时候还得给加回去,实在需要人家的默认 样式了怎么办?自己看着办吧。

    Normalize.css 是改良派。他们提倡,各个元素都有其存在的道理, 简单粗暴地一视同仁是不好的。谁都有谁的作用,给他们制定个规范,确保他们 在任何浏览器里都干好自己的活儿就好了。

    来源于‘知乎用户’[侵删]

    3.常见问题

    Question:

    reset和normalize如何选用?还是直接不用?

    4.解决方案

    这需要以自身的需求为基点出发去选择,是个公说公有理婆说婆有理的事, 故而在此只给出一些建议:

    1.如果要使用reset。则尽量不要去直接拷贝CSS reset的代码, 自己网站上没用到的不用重置,且无意义的重置不要 (比如div本不需要{margin:0;padding:0}), 尽量保证用到的重置是高效简洁的;

    2.如果要使用normalize,可以将normalize.css作为自己项目的基础CSS, 自定义样式值来满足自己的需求。(例如去掉a标签自带的下划线和p标签的自带的margin)

    3.如果选择不用,可以根据自己需要的再去设置改变,或者写一段适合自己的修改默认样式的代码。

    5.编码实战

    Demo1:各个元素在不同浏览器中的表现形式

    Demo2:用常见reset代码

    Demo3:用normalize.css

    6.扩展思考

    到底该不该用 CSS reset?

    参考知乎讨论

    7.参考文献

    参考一:张鑫旭-《CSS reset的重新审视 – 避免样式重置》

    参考二:来,让我们谈一谈 Normalize.css

    参考三:Normalize.css 与传统的 CSS Reset 有哪些区别?

    8.更多讨论

    讨论:应该如何做到最优的样式重置呢?

    鸣谢

    感谢大家观看

    BY : 彭勇、胡嘉杰、万维娜、吴昊 杨梦桐|杨刚\

    课后问答:

    1.苹果系统用rest还是normalize好?

    答:因为苹果的safri浏览器比较特殊,即使用了normalize,他跟其他浏览器的样式差别也会很大,所以建议清空。

    2.那么我们平常开发建议用哪种?

    答: 一般情况下,少即是好,代码量大的话,标准化〉普通〉清空,

    3.标准化和清空有什么区别

    答:其实两者的出发点都是一样,只不过清空更像是一个打包的通配符,他几乎清除了所有浏览器默认样式,而标准化却是改良派,只对他觉得应该改变的进行更改,

    展开全文
  • Vue 中怎么自定义指令, Vue 中怎么自定义过滤器, NextTick 是做什么的,Vue 如何去除url中,computed 事件 methods 有什么区别 全局注册 局部注册 Vue 中怎么自定义过滤器 可以用全局方法 Vue.filter() 注册...

    Vue 中怎么自定义指令, Vue 中怎么自定义过滤器, NextTick 是做什么的,Vue 如何去除url中的,computed 和事件 methods 有什么区别

    全局注册

    img

    局部注册

    img

    Vue 中怎么自定义过滤器

    可以用全局方法 Vue.filter() 注册一个自定义过滤器,它接收两个参数:过滤器 ID 和过滤器函数。过滤器函数以值为参数,返回转换后的值

    img

    过滤器也同样接受全局注册和局部注册

    NextTick 是做什么的

    $nextTick` 是在下次 `DOM` 更新循环结束之后执行延迟回调,在修改数据之后使用 `$nextTick`,则可以在回调中获取更新后的 `DOM
    

    具体可参考官方文档 深入响应式原理

    Vue 如何去除url中的

    vue-router 默认使用 hash 模式,所以在路由加载的时候,项目中的 url 会自带 #。如果不想使用 #, 可以使用 vue-router 的另一种模式 history

    new Router({
    mode: ‘history’,
    routes: [ ]
    })

    需要注意的是,当我们启用 history 模式的时候,由于我们的项目是一个单页面应用,所以在路由跳转的时候,就会出现访问不到静态资源而出现 404 的情况,这时候就需要服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面

    计算属性computed 和事件 methods 有什么区别

    我们可以将同一函数定义为一个 method 或者一个计算属性。对于最终的结果,两种方式是相同的

    不同点:

    computed: 计算属性是基于它们的依赖进行缓存的,只有在它的相关依赖发生改变时才会重新求值对于 method ,只要发生重新渲染,method 调用总会执行该函数

    vue如何获取dom?

    img

    展开全文
  • Web前端后端的区别什么如何区分?从前端后端两者工作内容负责项目是完全不同。后端:入门难深入更难,枯燥乏味,看业务逻辑代码;前端:入门简单先易后难,能看到自己出来的展示界面,有成就感。 Web...
  • 1.背景介绍 1.1 css reset css reset功能就是把网页标签样式使用 css 重置。html 标签是有它默认样式,...内核不同浏览器,它对于网页标签解析是不同。比如,a标签添加链接后,在chrome里点击时候显...
  • 测评网小编原创投资者跟线下配资公司合作时候必须要签署相关配资合同协议,签署配资合同协议是为了更好保护...所以签署合同是很有必要,能够明确双方权利责任。但是线下配资合约与线上配资合约是有区...
  • 高防服务器,顾名思义就是服务器有比较高的防御,要了解高防服务器的作用,就要了解高防服务器普通服务器的区别,以及应用场景和什么样的情况下使用高防服务器。 首先,普通服务器高防服务器的区别,从字面上...
  • 什么是防抖节流?有什么区别如何实现? 一、防抖 场景:在滚动事件中需要个复杂计算或者实现一个按钮防二次点击操作。这些需求都可以通过函数防抖动来实现。尤其是第一个需求,如果在频繁事件回调中复杂...
  • 同步异步的区别? 如何解决跨域问题? ajax是什么? ajax的交互模型? 同步异步的区别? 如何解决跨域问题?  Ajax是多种技术组合起来的一种浏览器服务器交互技术,基本思想是允许一个互联网浏览器...
  • 我们去定制橱柜时候,总是很犹豫该如何选择?为什么同样面积橱柜,有商家报价几千,有些商家报价几万元?看着外观好像差不多一样橱柜,为什么价格差别这么大!其实除了品牌溢价之外,更多是橱柜使用材料...
  • 第一次谷歌推广,有太多说不出的苦衷,最大的问题是根本都不知道在哪发外链,伤透脑筋的同时发现几个问题,分析了一下百度外链谷歌外链的区别。 1.谷歌外链更强调外链的多样性,而百度同一个网站发上100条,...
  • 零基础想转行的同学们往往不知道自己应该学什么,下面就告诉大家前端后端的区别,可以根据自己的兴趣,再去选择学习哪个方向。 前端后端简单的叙述 后端:入门难,深入更难,枯燥乏味,没有太大成就感,看一...
  • 我学 Python 时候也不习惯,写代码时候总...显式声明类型与隐式声明类型语言各有优劣,与语言设计定位,以及历史因素都有关系。像 C/C++、Java 诞生年代,编译器非常弱,不能在编译期太多类型推断。为...
  • 全文共1691字,预计学习时长6分钟图源:unsplash当你踏上机器学习之旅时,搞清楚监督学习无监督学习是你应该做的第一件事。而对于新手而言,“监督学习无监督学习有什么区别?”,是最为常见不过的问题。其答案...
  • css只用class来写并有专门class通用私有模块命名, id具有唯一性且优先级太...这样比较适合大型,多人维护并且需要长期迭代项目,cssclass类名js操作id、class类完全分离,这样产品ui或者产品交互...
  • 有这样一种应用场景,在滚动事件中一个复杂取值计算或者频繁触发一个事件,这是很影响性能并容易导致页面卡顿,所以要合并多次请求,通过函数一个精确操作。这时就会用到函数防抖或者函数节流,那么,这两种...
  • vue过滤器主要用于对渲染出来数据进行格式化处理。例如:后台返回数据性别用01表示,但渲染到页面上不能是01...如何创建过滤器呢,跟创建自定义指令类似,也有全局局部过滤器形式 全局过滤器: Vue.fil...
  • 新生代使用是复制算法,为了内存利用率,只使用其中一个 Survivor 空间来轮换备份,因此如果大量对象在 Minor GC 后仍然存活,导致 Survivor 空间不够用,就会通过分配担保机制,将多出来对象提前转到老年代,...
  • Hashmap结构,1.71.8有哪些区别 不同点: (1)JDK1.7用是头插法,而JDK1.8及之后使用都是尾插法,那么他们为什么要这样呢?因为JDK1.7是用单链表进行纵向延伸,当采用头插法时会容易出现逆序且环形...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,531
精华内容 1,012
关键字:

做什么和如何做的区别