使用原生JavaScript写一个封装插件

BinyShowImg.js 是一款原生封装的预览图插件,点击网站上的图片可放大预览。

最近一直在学写规范代码,然后打算用原生JavaScript写类似于面向对象编程的写法,练习类的封装继承,封装一个插件,所以写了一个BinyShowImg.js插件来练手。

目前功能只可放大预览,后续会继续加上一张/下一张功能,预览图标题显示功能等。

后面还会逐一推出轮播图插件、提示框插件等,均为个人手写封装;目前已经在优化状态,亮点会很多,很快推出。

使用例子:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>BinyShowImg.js 插件说明</title>
    </head>
    <body>
        <img src='https://photo.scol.com.cn/items/201911/19110310242748200010DFE2.jpg'/>
        <img src='https://photo.scol.com.cn/items/201911/191113090348628000111B8D.jpg'/>
        <img src='https://photo.scol.com.cn/items/201911/191113090212018000111B8C.jpg'/>
        <img src='https://photo.scol.com.cn/items/201911/191113090530732000111B8E.jpg'/>
    </body>
    <script src="https://ebuxsf.coding.io/js/BinyShowImg.js" ></script>
    <script>
        
        /**
         * @param {Object} imgBoxId  预览图ID (自由设置ID)
         * @param {Object} callback  用户自定义回调事件
         */
        
        //newShowSmallImgBox(‘imgBoxId’);
        //newShowSmallImgBox(‘imgBoxId’,function(){ }); 
        
        newShowSmallImgBox(); //初始化 BinyShowImg.js 插件
        
    </script>
</html>

BinyShowImg.js插件在线链接:

https://ebuxsf.coding.io/js/BinyShowImg.js

插件主要设计过程:

  • 这款插件我封装使用了几个方法,其中就有获取多元素节点和获取单元素节点。这也是对jQuery的一个封装原理小理解,使用方法很类似jQuery。(当然,我和jQuery的封装写法差得远了)。$$(elemt)获取多元素节点,$(elemt)获取单元素节点。

    //获取元素节点的封装技巧
    function $$(elemt) {
        if(document.querySelectorAll(elemt)){
            return document.querySelectorAll(elemt)
        }
    }
    
    function $(elemt) {
        if(document.querySelector(elemt)){
            return document.querySelector(elemt)
        }
    }
  • 然后就是我对prototype原型的理解,在典型的面向对象的语言中,如java,都存在类class的概念,类就是对象的模板,对象就是类的实例。但是在Javascript语言体系中,是不存在类Class的概念的,javascript中不是基于 ‘ 类的 ’ ,而是通过构造函数constructor和原型链prototype chains实现的。但是在ES6中提供了更接近传统语言的写法,引入了Class(类)这个概念,作为对象的模板。通过class关键字,可以定义类。基本上,ES6class可以看作只是一个语法糖,它的绝大部分功能,ES5都可以做到,新的class写法只是让原型对象的写法更加清晰、更像面向对象编程的语法而已。这里说不完 -。-,以后会单独出一篇文章。

    //简单的原型封装,构造函数
    function Person(name,height){
        this.name = name;
        this.height = height;
    }
    Person.prototype.hobby = function(){
        return 'watching movies';
    }
    var boy = new Person('keith',180);
    var girl = new Person('rascal',153);
    
    console.log(boy.name); //'keith'
    console.log(girl.name); //'rascal'
    
    console.log(boy.hobby === girl.hobby); //true
  • 其实为什么要代码规范化,模块化,是因为多人合作写代码时,需要把代码细化,并工程化,这样才能使代码更加具有扩展性,这样的代码更是一线互联网公司的标准规范。从代码方面说,那就是对内存分配的调用更加好,更加优化,带来好的用户体验。
  • 当然,以上皆为个人看法,如有不对的地方,可评论指出,谢谢。