JavaScript 组织 |带模块的模块模式

2024-04-10

我将代码组织成 20-60 行模块,通常采用模块模式。我想要一个结构良好的面向对象的 JavaScript 库。

这是最好的方法吗?该代码已经过测试并且可以工作。

我喜欢它,因为程序员可以从库中提取模块并根据需要使用它们,它们是独立的。

这里是 Tool、Message、Effect 和 Text,全部包含在 NS 中。

问题?

这是组织我的图书馆的好方法(最佳实践)吗?

Note

到目前为止,评论和答案的共识为0……非常令人沮丧。

外部模块图案

var NS = ( function ( window, undefined ) 
{ 
/* All Modules below here */ 
} )( window );

Tools

/**
 *Tools
 *    getTimeLapse - benchmark for adding
 */

var Tool = ( function () 
{
    var Tool = function ( ) 
    {
    };
    Tool.prototype.getTimeLapse = function( numberOfAdds ) 
    {
        var end_time;
        var start_time = new Date().getTime();
        var index = 0;           
        while ( index <= numberOfAdds )
        {
            index++;
        }
        end_time = new Date().getTime();
        return ( end_time - start_time );
    };
    return Tool;
} () );

Message

/**
 *Message
 *    element - holds the element to send the message to via .innerHTML
 *    type - determines the message to send
 */

var Message = ( function () 
{
    var messages = 
    {
        name:         'Please enter a valid name',
        email:        'Please enter a valid email',
        email_s:      'Please enter a valid email.',
        pass:         'Please enter passoword, 6-40 characters',
        url:          'Please enter a valid url',
        title:        'Please enter a valid title',
        tweet:        'Please enter a valid tweet',
        empty:        'Please complete all fields',
        same:         'Please make emails equal',
        taken:        'Sorry, that email is taken',
        validate:     'Please contact <a class="d" href="mailto:[email protected] /cdn-cgi/l/email-protection">support</a> to reset your password',
    };
    var Message = function (element) 
    {
        this.element = element;
    };
    Message.prototype.display = function( type ) 
    {
        this.element.innerHTML = messages[ type ];
    };
    return Message;
} () );

Effects

/**
 *Effects
 *    element - holds the element to fade
 *    direction - determines which way to fade the element
 *    max_time - length of the fade
 */

var Effects = ( function () 
{
    var Effects = function ( element )
    {
        this.element = element;
    };
    Effects.prototype.fade = function( direction, max_time ) 
    {
        var element = this.element;
        element.elapsed = 0;
        clearTimeout( element.timeout_id );
        function next()
        {
            element.elapsed += 10;
            if ( direction === 'up' )
            {
                element.style.opacity = element.elapsed / max_time;
            }
            else if ( direction === 'down' )
            {
                element.style.opacity = ( max_time - element.elapsed ) / max_time;
            }
            if ( element.elapsed <= max_time ) 
            {
                element.timeout_id = setTimeout( next, 10 );
            }
        }
        next();
    };
    return Effects;
} () );

Text

/**
 *Text
 *    form_elment - holds text to check
 */

var Text = ( function () 
{
    var Text = function ( form_element )
    {
        this.text_array = form_element.elements;
    };
    Text.prototype.patterns = 
    {
        prefix_url:     /^(http:)|(https:)\/\//,
        aml:            /<(.+)_([a-z]){1}>$/,
        url:            /^.{1,2048}$/,
        tweet:          /^.{1,40}$/, 
        title:          /^.{1,32}$/,
        name:           /^.{1,64}$/, 
        email:          /^.{1,64}@.{1,255}$/,
        pass:           /^.{6,20}$/
    };
    Text.prototype.checkPattern = function( type ) 
    {
        return this.patterns[ type ].exec( this.text_array[type].value );
    };
    Text.prototype.checkUrl = function( type ) 
    {
        return this.patterns[ type ].exec( this.text_array.url.value );
    };
    Text.prototype.checkSameEmail = function() 
    {
        return ( ( this.text_array.email.value ) === ( this.text_array.email1.value ) );
    };
    Text.prototype.checkEmpty = function() 
    {
        for ( var index = 0; index < this.text_array.length; ++index ) 
        {
            if ( this.text_array[ index ].value === '') 
            { 
                return 0; 
            }
        }
        return 1;
    };
    return Text;
} () );

我建议更改以使代码更干净并减少其占用空间的一件事是立即设置原型属性,这样就不用做

Object.prototype.method1 = function(){};
Object.prototype.method2 = function(){};

You do

Object.prototype = {
    method1: function(){},
    method2: function(){}
};

如果您需要保留构造函数引用(建议这样做),则应在之后重新分配构造函数。请参阅此答案了解更多详细信息 https://stackoverflow.com/questions/4944278/advantages-of-setting-the-constructor-property-in-the-prototype.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

JavaScript 组织 |带模块的模块模式 的相关文章

随机推荐

  • ADT插件会自动创建ant构建文件吗?

    几个月前我创建了一个 Android 项目 现在必须使用 Hudson 自动化构建过程 Android 开发指南提到了一个 build xml 文件 该文件在生成项目时创建 http developer android com guide
  • 多语言 PHP 应用程序:最佳实践?

    我想获得您对我在 PHP MVC Web 应用程序上实现多语言支持的方式的反馈 我就是这样做的 在 app 文件夹中 我创建了一个 linguals 文件夹 其中包含每种语言一个文件 english php spanish php 等 每个
  • .htaccess 将子域重写到目录

    是否可以使用 htaccess将子域重写为目录 Example http sub domain example 显示内容 http domain example subdomains sub 尝试将其放入您的 htaccess file R
  • 服务和活动之间沟通的最佳方式是什么?

    现在 Activity 可以使用以下三种方式之一连接到服务 广播接收器 http developer android com reference android content BroadcastReceiver html 信使 http
  • FAILED 错误:java.io.IOException:所有收集器的初始化失败

    我在运行 MapReduce WordCount 作业时遇到一些错误 错误 java io IOException 所有收集器的初始化 失败的 最后一个收集器中的错误是 class wordcount wordmapper at org a
  • Webpack - extract-text-webpack-plugin 找不到模块

    webpack config js var ExtractTextPlugin require extract text webpack plugin 如果我刚刚实现该插件 我会立即收到此错误 module js 339 throw err
  • URLLoader 数据到 BitmapData

    我正在尝试加载 SWF 文件旁边的图像文件 像这样的东西 var loader URLLoader new URLLoader loader dataFormat URLLoaderDataFormat BINARY loader addE
  • MVC 与前端控制器混淆

    简化问题 我正在学习 oop 模式 并且希望构建自己的简单 mvc 框架 我希望它有一个前端控制器 但我发现很难找到任何可靠的信息来使用 MVC 实现前端控制器 特别是我很困惑前端控制器是否应该启动整个三元组 或者前端控制器是否只是简单地调
  • SKScene 中的 Segue 到 UIViewController

    在我的 GameScene swift 文件中 我尝试执行返回到我的菜单视图控制器的操作 如下所示 func returnToMainMenu var vc UIViewController UIViewController vc self
  • MySQL CASE 是如何工作的?

    我知道 SQL 的CASE语法如下 CASE WHEN search condition THEN statement list WHEN search condition THEN statement list ELSE statemen
  • javascript 函数绑定到什么对象(它的“this”是什么)?

    我知道它在函数内部this var func function return this f arguments callee gt true if bound to some object gt false if is bound to n
  • 如何找到csv文件列的平均值

    import csv with open Met csv r as f reader csv reader f delimiter quoting csv QUOTE NONE for row in reader print row 我无法
  • 显示包含扩展信息的页面

    I have the following functionality given below 单击详细信息时 我希望内容视图上显示的文本应显示在由推送异步创建的新详细信息页面上 如何发送包含内容中给出的信息的参数 例如标题 类别和描述 我有
  • 来自 keras 模型中图像列表的 TensorFlow 数据集

    我试图了解如何读取本地图像 将它们用作 TensorFlowDataset https www tensorflow org api docs python tf data Dataset并使用 TF 数据集训练 Keras 模型 我正在关
  • 为什么没有为原始数据类型分配内存? [复制]

    这个问题在这里已经有答案了 char bool 和 int 等原始数据类型有一定的内存 假设char 它有1个字节的内存 当我们在代码中使用 char 变量时 该变量必须需要 1 个字节的内存 在这种情况下我们为什么不分配内存呢 由于我们从
  • Spring - 需要在 @Component 类中自动装配 @RestController 类

    我在同一个 Maven 父模块下组合了 Web 和核心项目 如下所示 家长 网络 com parent test web 核心 com parent test core 我想参考核心项目中的Web模块依赖项来调用Web模块中的一些api 网
  • 从打开的“fancybox”中的功能关闭花式框

    大家好 我希望能够在从内部打开 fancyBox 时将其关闭 我已尝试以下方法但无济于事 function closeFancyBox html var re Element insert complete gi if html searc
  • Tensorflow 对象检测 API 索引越界

    运行 Android TF Detect 演示并使用我重新训练的 3 类 ssd mobilenet v1 coco 模型后 我的 TF 检测演示崩溃 给出索引越界异常这是 12 26 17 53 13 931 22429 25212 or
  • 设置Loader项目属性

    In the context https stackoverflow com questions 33513546 delegate folderlistmodel in tableview文件管理器 我有一个TableView组件保存在文
  • JavaScript 组织 |带模块的模块模式

    我将代码组织成 20 60 行模块 通常采用模块模式 我想要一个结构良好的面向对象的 JavaScript 库 这是最好的方法吗 该代码已经过测试并且可以工作 我喜欢它 因为程序员可以从库中提取模块并根据需要使用它们 它们是独立的 这里是