JS程序设计高级技巧

Codeing_ls 发布于2019-08-23 15:06 / 1774人阅读

摘要：关于定时器要记住的最重要的事情是指定的时间间隔表示何时将定时器的代码添加到队列，而不是何时实际执行代码。多个定时器之间的执行间隔会比预期的小解决办法处理中数组分块，，函数节流，实际进行处理的方法实际执行的代码初始处理调用的方法

一、高级函数

安全类型检测

Object.protitype.toString.call(value)

作用域安全的构造函数

function Person(name, age, job) {
    if (this instanceof Person) {
        this.name = name;
        this.age = age;
        this.job = job;
    } else {
        return new Person(name, age, job);
    }
}
// 如果你使用构造函数窃取模式的继承且不使用原型链，这个继承很可能被破坏
function Teacher (name, age, job, salary) {
    // this指向非Peroson 返回新的实例，构造函数中的this属性并未增长
    Person.call(this, name, age, job); 
    this.salary = salary;
}
// 解决这个问题的方法是，Teacher.prototype = new Person(),此时一个Teacher实例也是一个Person实例

惰性载入函数
在函数被调用的时候再处理函数，在第一次调用的过程中，该函数会被覆盖为另一个按合适方式执行的函数

function createXHR () {
    if (typeof XMLHttpRequest != "undefined) {
        createXHR  = function () {
            return new XMLHttpRequest ();
        }
    } else if (typeof ActiveXObject != "undefined") {
        createXHR = function () {
            if (typeof arguments.callee.activeString != "string") {
                //...
            }
        }
    } else {
        createXHR  = function () {
            // ...
        }
    }
    return createXHR();
}

在声明的时候就指定适当的函数，利用匿名函数自运行，return一个合适的函数

函数绑定
一个简单的bind函数

function bind(fn, context){
    return function() {
        return fn.apply(context, arguments)
    }
}

函数柯里化
函数的柯里化的基本方法和函数绑定是一样的，使用一个闭包返回一个函数，区别是，当函数被调用时，还需要传递一些参数
柯里化函数动态创建步骤：调用另一个函数并为它传入要柯里化的函数和必要参数

function curry(fn){
    var args = Array.prototype.slice.call(arguments, 1);
    return function () {
        var innerArgs = Array.prototype.slice.call(arguments);
        var finalArgs = args.concat(innerArgs);
        return fn.apply(null, finalArgs)
    }
}

es5中的防篡改对象
不可扩展对象

Objcect.preventExtensions(obj)   // 设置对象属性是否可以扩展
Objcect.isExtensible(obj)         // 返回值为bool值，true即该对象可以扩展，false为不可扩展

密封的对象
密封对象不可扩展，而且已有成员的[ [ Configurable ] ]特性将被设置为false，这就意味着不能删除属性和方法

Object.seal(obj)     // 设置对象是否是密封
Object.isSealed    // 返回值为bool值，true即该对象已经密封，false为没有密封

冻结对象
冻结的对象既不可以扩展，又是密封的

Object.freeze(obj)         // 设置对象是否冻结
Objcet.isForzen(obj)    // 返回值为bool值，true即该对象已经冻结，false为没有冻结

高级定时器
除了主Javascript执行进程外，还有一个需要在进程下次一空闲的时执行的代码队列。随着页面在其生命周期中的推移，代码会按照执行顺序添加到队列。
关于定时器要记住的最重要的事情是：指定的时间间隔表示何时将定时器的代码添加到队列，而不是何时实际执行代码。
a.重复的定时器

使用setInterval()创建的定时器确保了定时器代码规则地插入队列中，这个方式的问题在于定时器代码可能在代码再次被添加到队列之前还没有完成执行，结果导致定时器代码连续运行好几次，而之间没有任何停顿，javascript引擎在使用setInterval时，仅当没有该定时器的代码是才将定时器的代码添加到队列中，但是这样会导致1、某些间隔时间被跳过。

b.多个定时器之间的执行间隔会比预期的小

// 解决办法
setTimeout(function () {
    //处理中
    setTimeout(arguments.callee, interval)
}, interval)

数组分块

function chunk(array， process， context) {
    setTimeout( function() {
        var Item = array.shift();
        process(item)
        if (array.length > 0) {
            setTimeout(arguments.callee, 100)
        }
    }, 100)
}

函数节流

var processor = {
    timeoutId = null，
    // 实际进行处理的方法
    performProcessing: function() {
    // 实际执行的代码
},
// 初始处理调用的方法
process: function () {
    clearTimeout(this.timeouId);
    var that = this;
    this.timeoutId = setTimeout(function () {
        that.performProcessing();
    }, 100)
    }
}

云服务器 GPU云服务器高级显示技巧 java程序技巧界面设计技巧高级程序设计

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101511.html

10个用Console来Debug的高级技巧

摘要：在本文，我会为你介绍一些用老式来的技巧。使用可以将聚合成组，并且形成嵌套的层级。最后一个压轴的你可以使用将对象以表格的形式打印出来。自从年双十一正式上线，累计处理了亿错误事件，得到了金山软件百姓网等众多知名用户的认可。译者按：我们往往会局限在自己熟悉的知识圈，但也应担偶尔拓展一下，使用一些不常见而又有用的技巧，扩大自己的舒适圈。原文: 10 Tips for Javascrip...

Hwg 2019-08-22 15:40 评论0 收藏0
前端小案例

摘要：谨以此文我在北京一家公司打工两个月，昨夜露宿街头我是一名程序员，在北京打工两个月，如今身上只剩吃碗面条的钱。昨夜在北京寒冷的公园和同事与流浪汉一起露宿一夜，因为我们被老板拖欠了工资。我在两个多月前，前往北京。你可能不知道的 14 个 JavaScript 调试技巧了解你的工具可以在完成任务的过程中发挥重大作用。尽管传言 JavaScript 难以调试，但是如果你掌握了一些调试技巧，...

codeGoogle 2019-08-22 11:21 评论0 收藏0
高级函数技巧-函数柯里化

摘要：如果你对函数式编程有一定了解，函数柯里化是不可或缺的，利用函数柯里化，可以在开发中非常优雅的处理复杂逻辑。同样先看简单版本的方法，以方法为例，代码来自高级程序设计加强版实现上面函数，可以换成任何其他函数，经过函数处理，都可以转成柯里化函数。我们经常说在Javascript语言中，函数是一等公民，它们本质上是十分简单和过程化的。可以利用函数，进行一些简单的数据处理，return 结果，...

shixinzhang 2019-08-23 15:25 评论0 收藏0
[译]148个资源让你成为CSS专家

摘要：层叠样式表二修订版这是对作出的官方说明。速查表两份表来自一份关于基础特性，一份关于布局。核心第一篇一份来自的基础参考指南简写速查表简写形式参考书使用层叠样式表基础指南，包含使用的好处介绍个方法快速写成高质量的写出高效的一些提示。迄今为止，我已经收集了100多个精通CSS的资源，它们能让你更好地掌握CSS技巧，使你的布局设计脱颖而出。 CSS3 资源 20个学习CSS3的有用资源 C...

impig33 2019-08-29 11:10 评论0 收藏0
JS进阶篇--JS数组reduce()方法详解及高级技巧

摘要：基本概念方法接收一个函数作为累加器，数组中的每个值从左到右开始缩减，最终为一个值。例进阶应用使用方法可以完成多维度的数据叠加。在该函数内部，则执行多维的叠加工作。参考的内建函数数组方法的高级技巧基本概念 reduce() 方法接收一个函数作为累加器（accumulator），数组中的每个值（从左到右）开始缩减，最终为一个值。 reduce 为数组中的每一个元素依次执行回调函数，不包括...

jerryloveemily 2019-08-21 12:00 评论0 收藏0