How to encapsulate plug-ins in native js-Mini Program Development-php.cn

How to encapsulate plug-ins in native js

php中世界最好的语言

Release： 2018-03-06 14:34:17

Original

2437 people have browsed it

This time I will show you how to encapsulate plug-ins in native js. What are the precautions for encapsulating plug-ins in native js? The following is a practical case, let’s take a look.

Today I will introduce how to write your own plug-in. It is recommended to review it before reading it

Object-oriented; I will write a simple plug-in to reset the style, without further ado. Upload the code;

//SetStyles.js
(function(win, doc) {
    var defaultSettings = {
        color: "red",
        background: "blue",
        border: "2px solid #000",
        fontSize:"30px",
        textAlign:"center",
        width:"200px",
        borderRadius:"5px"
    };
    function SetStyles(options) {
        var self = this;
        //没传配置项自己丢错
        if(!options) {
            throw new Error("请传入配置参数");
        }
        self = Object.assign(self, defaultSettings, options);
        self.container = doc.querySelector(self.container) || doc.querySelectorAll(self.container);
        self._changeStyles();
    }
    SetStyles.prototype = {
        _changeStyles: function() {
            var self = this;
            for(var pro in self) {
                if(pro == "container") {
                    continue;
                }
                if(pro == &#39;text&#39; && typeof self[pro]== &#39;string&#39;) {
                    self.container.innerText = self[pro];
                    continue;
                }else if(pro == &#39;text&#39; && typeof self[pro]== &#39;function&#39;){
                    self.container.innerText = self[pro]();
                    continue;
                }
                self.container.style[pro] = self[pro];
            }
        }
    }
    win.SetStyles = SetStyles;
})(window, document)
  //调用
    var a = new SetStyles({
            container:"#test",
            background:"#fff",
            textAlign:"center",
            text:function(){
                return "我是文本";
            }
        });    //text参数格式字符串或者函数
    //container用的querySelectAll方法，参数一致
    //其他css参数为字符串

Copy after login

This code of mine should be simple enough, and the basic explanation is not enough if you can’t understand it. I’ll knock it out myself. If there is any problem, console.log it myself.

First define the next default parameter defaultSettings
Then write a
constructor, why do you need to use Object.assign to merge objects, because you may not necessarily write all the default configuration, don’t write Some will default to the default parameters, and some will choose the parameters you write, so the options are placed at the end; Finally, write the method in the prototype.
Methods are generally written in the prototype, and properties are written in the constructor.
Everyone should be able to understand the function of this code. It resets the css style, which is similar to jquery’s css() function.
But I don’t recommend you to use this. After all, follow the principle and try to use js as little as possible to operate the dom. After all, this cost is very expensive. I just write this to let everyone know how to encapsulate the plug-in and change the css style. It's better to write a few more classes. If you want to use that style, just change the class names.

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!