JavaScript || 写组件的模式

沈俭发布于2019-08-20 15:15 / 2734人阅读

摘要：去掉组件的结构，使用面向对象的模式创建原有结构，并且添加交互功能创建组件对象，将构造函数接口暴露使用创建的构造函数，创建组件对象，执行相应逻辑。

简单弹窗组件 一编写组件的流程

组件是利用JavaScript生成HTML结构，配合既有CSS生成页面中的内容。用处是：便于修改、维护，可重用

完成静态HTML与CSS

将组件结构与样式使用HTML与CSS整体展现出来，不需要JavaScript。

去掉组件的HTML结构，使用JavaScript面向对象的模式创建原有HTML结构，并且添加交互功能

创建组件对象，将构造函数接口暴露

使用创建的构造函数，创建组件对象，执行相应逻辑。

二组件设计的原则

先设计组件的结构

再处理组件的API

完成组件的控制流

三弹窗组件

1 基本的HTML与CSS

组件样式的编写：

先完成容器整体外部轮廓的布局、宽高。只在容器上设置一个类

设置容器内各个元素在容器中的样式


    提示
    重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计。

2 选择面向对象的模式创建组件对象

使用工厂模式过程：

定义保存HTML结构的模板字符串（第一步静态结构中的弹窗结构，将定制部分作为变量）

创建对象的构造函数，定义弹窗可配置内容的接口text，然后初始化弹窗组件this.init()

设计组件的API：

show()

hide()

设计组件控制流：

结构初始化this.initDom()

事件逻辑初始化this.initEvent()

对外暴露构造函数，在外部使用。

var layer = new Layer("hahahaha")

(function () {
    // 一个闭包
    
    // 弹窗组件的HTML结构：模板字符串，定制需求
    var html = `
                    提示
                    {text}
                    
                `;

    // 弹窗组件构造函数
    function Layer(text) {      // text是对外的接口，可以定制弹窗中的内容
        // 用户的定制需求：弹窗组件的参数配置
        this.text = text;
        // 调用初始化弹窗韩式
        this.init();
    } 

    // 原型对象上的方法
    
    // 定义初始化弹窗的方法
    Layer.prototype.init = function () {
        // 初始化弹窗的DOM结构
        this.initDom();
        // 初始化弹窗的事件
        this.initEvent();
    }

    // 定义初始化弹窗DOM结构的方法
    Layer.prototype.initDom = function () {
    }

    // 初始化弹窗中的事件方法
    Layer.prototype.initEvent = function () {
    }

    // 显示组件的方法：将生成的内容添加到HTML页面中
    Layer.prototype.show = function () {
    }

    // 关闭弹窗的方法：将节点删除
    Layer.prototype.hide = function () {}

    //----------------------------------------------------------------//
    // 组件调用渠道：
    // 
    // 将构造函数返回出整个闭包，可以在外面调用构造函数生成弹窗组件
    window.Layer = Layer;   // 挂载到全局对象，也可以使用闭包，return Layer;
})();

    //----------------------------------------------------------------//
    // 组件使用：生成一个组件对象
    var layer = new window.Layer("重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计。我们尽力保证课程内容的质量以及学习难度的合理性，但即使如此，真正决定课程效果的，还是你的每一次思考和实践");

3 完整代码




    
    Document
    



    提示
    重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计。

GPU云服务器云服务器用ASP写组件 javascript组件开发 javascript命令模式 javascript严格模式

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

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

5分钟即可掌握的前端高效利器：JavaScript 策略模式

摘要：策略模式由两部分构成一部分是封装不同策略的策略组，另一部分是。策略模式的典型应用场景是表单校验中，对于校验规则的封装。然而图像的压缩及上传错误处理等部分是公用的。遂考虑使用策略模式封装。浅谈 JavaScript 中策略模式的使用：什么是设计模式什么是策略模式策略模式在 JavaScript 中的应用（使用策略模式封装百度AI识别调用）策略模式在 Vue 组件封装中的应用（...

BlackFlagBin 2019-08-23 11:48 评论0 收藏0
少妇白洁系列之React StateUp模式

摘要：一般这种情况会在类的构造函数内创建一个属性，引用或词法域的，但后面会看到我们有更好的办法，避免这种手工代码。换句话说，StateUp模式把面向对象的设计方法应用到了状态对象的管理上，在遵循React的组件化机制和基于props实现组件通讯方式的前提之下做到了这一点。 ---- 少妇白洁阅读本文之前，请确定你读过React的官方文档中关于Lifting State Up的论述： ht...

jaysun 2019-08-20 14:46 评论0 收藏0
JS或Jquery

摘要：大潮来袭前端开发能做些什么去年谷歌和火狐针对提出了的标准，顾名思义，即的体验方式，我们可以戴着头显享受沉浸式的网页，新的标准让我们可以使用语言来开发。 VR 大潮来袭 --- 前端开发能做些什么去年谷歌和火狐针对 WebVR 提出了 WebVR API 的标准，顾名思义，WebVR 即 web + VR 的体验方式，我们可以戴着头显享受沉浸式的网页，新的 API 标准让我们可以使用 ...

CatalpaFlat 2019-08-22 11:17 评论0 收藏0
简单的JavaScript组件化实现

摘要：作为一名前端菜鸟，最近看例子，根据理解自己也简单实现了一下组件的继承和事件机制。公共功能销毁在子类中调用的组件自己的功能的实现有很多种，我用了，的实现比较巧妙。最后记得提供一个销毁组件的方法，一个简单的组件就完成了。作为一名前端菜鸟，最近看react例子，根据理解自己也简单实现了一下组件的继承和事件机制。代码在这里原始的组件写法 (function($) { $.plug...

Hanks10100 2019-08-21 10:42 评论0 收藏0