네이티브 JS에서 플러그인을 캡슐화하는 방법

이번에는 네이티브 js에서 플러그인을 캡슐화하는 방법을 보여드리겠습니다. 네이티브 js에서 플러그인을 캡슐화할 때 주의사항은 무엇인가요?

오늘은 자신만의 플러그인을 작성하는 방법을 소개하겠습니다. 읽기 전에 먼저 검토해 보는 것이 좋습니다. 객체 지향
스타일을 재설정할 수 있는 간단한 플러그인을 작성해 보겠습니다. with 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 == 'text' && typeof self[pro]== 'string') {
                    self.container.innerText = self[pro];
                    continue;
                }else if(pro == 'text' && typeof self[pro]== 'function'){
                    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参数为字符串

이것은 내 것입니다. 코드는 충분히 간단해야 합니다. 설명이 이해가 안 되면 직접 시도해 보세요. 문제가 있으면 직접 console.log에 기록해 보세요.
먼저 다음 기본 매개변수인 defaultSettings를 정의한 다음
constructor를 작성합니다. 작성하지 않으면 기본 구성에 반드시 모든 기본 매개변수를 작성할 필요가 없기 때문에 Object.sign을 사용해야 하는 이유는 무엇입니까? 그러면 기본 매개변수가 기본값으로 설정됩니다. 작성한 매개변수를 선택하면 옵션이 마지막에 배치됩니다. 마지막으로 프로토타입에 메서드를 작성합니다.
메서드는 일반적으로 프로토타입에 작성되고 속성은 생성자에 작성됩니다.
이 코드의 기능은 누구나 이해할 수 있어야 하며, 이는 jquery의 css() 함수와 유사합니다.
하지만 결국 이 원칙을 따르고 js를 최대한 적게 사용하여 dom을 운영하도록 하세요. 결국 이 비용은 매우 비쌉니다. 플러그인을 캡슐화하고 CSS 스타일을 변경하는 것이 더 좋습니다. 스타일을 사용하려면 클래스 이름을 변경하면 됩니다.

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

관련 읽기:

일반적으로 사용되는 HTML 요소 구조는 무엇입니까?

Google Chrome에서 라벨과 입력 사이의 간격 문제를 해결하는 방법은 무엇입니까?

페이지 캐싱을 비활성화하는 방법은 무엇입니까? 대신 base64 인코딩을 사용하세요

위 내용은 네이티브 JS에서 플러그인을 캡슐화하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!