zoukankan      html  css  js  c++  java
  • Js~(function(){})匿名自执行方法的作用

    匿名自执行方法体(function(){})经常用在设计JS插件上面,它定义相关组件的行为,自动初始化相关属性,而且在页面中可以直接执行,你不需要手动执行它,它被自动被执行!

    在设计你的匿名自执行方法体时,我们有几点需要注意,在这里大叔部总结了一下,请看下面说明

    • 将它的结果赋给一个对象
    • 如果它没有返回值,那希望使用它的内部对象,需要这个对象是公共的(即不可var)
    • 可以将它定义成一个自执行的属性体

    具体介绍这三点

    将它的结果赋给一个对象

        var ar = (function () {
                var PageMap = function () { console.log("初始化") };
                PageMap.prototype = {
                    get: function (page) {
                        return page;
                    },
                    set: function (page, value) {
                        console.log("set");
                    },
                    has: function (page) {
                        return false;
                    },
                    clear: function () {
                        console.log("clear");
                    }
                };
                return PageMap;
            })();
    
            var a = new ar();
            a.set(1, "OK");

    如果它没有返回值,那希望使用它的内部对象,需要这个对象是公共的

      (function (option) {
                option = option || { id: 0, pages: [] };
                var pages = [];
    
                Maps = function () {
                    console.log("maps init...");
                };
    
                //扩展方法
                Maps.prototype = {
                    keys: function () {
                        return pages[id] != undefined;
                    },
                    get: function (id) {
                        return pages[id];
                    },
                    set: function (value) {
                        pages.splice(value);
                        pages.push(value);
                    },
                    append: function (value) {
                        pages.push(value);
                    },
                    each: function () {
                        console.log("eache pages result");
                        for (var item in pages)
                            console.log(pages[item]);
                    }
                };
    
            })();
    
            var arr = new Maps();
            arr.append(1);
            arr.append(2);
            arr.append(3);
            arr.each();

    可以将它定义成一个自执行的属性体

            var test = ({
                // 这里你可以定义常量,设置其它值, 自动运行
                 480,
                height: 640,
    
                //  当然也可以定义utility方法
                getMax: function () {
                    return this.width + "x" + this.height;
                },
    
                // 初始化
                init: function () {
                    console.log(this.getMax());
                    // 更多代码...
                },
    
                print: function () {
                    console.log(this.getMax());
                }
            });  // 这样就开始初始化咯
            test.init();
            test.print();

    而对于以后我们的JS组件的设计,可以很好的利用它的这些特点,即自执行

  • 相关阅读:
    14 用DFT计算线性卷积
    13 DFT变换的性质
    12 有限长序列的分类
    前端常见跨域解决方案
    JS基础-构造函数、原型、原型链、继承
    浏览器中的 JavaScript 执行机制
    再也不怕面试官问我 Promise 相关问题了
    前端面试---手写代码常考题
    从输入 URL 到页面展示,这中间发生了什么?
    学习笔记-CSS-圣杯布局和双飞翼布局
  • 原文地址:https://www.cnblogs.com/lori/p/5896694.html
Copyright © 2011-2022 走看看