在多人合作完成网页，经常遇到大家的js代码相互影响的问题。现在有许多模块化的前端框架，应该是可以解决这个问题。但本人并非前端开发人员，那些框架都没用过，只对jQuery相对熟悉，就想用jQuery来解决这个问题。

首先相互影响主要有两个方面，一是js代码中定义的function名重复，导致覆盖问题；另一个是js操作页面元素时，大家使用的id、name、class等可能重复，导致操作了错误的对象。

对于第一点，采用的是定义一个注册函数，其他自定义的方法都要通过调用注册函数进行注册，注册时去检查该函数是否已经存在。对于第二点，考虑使用div作为容器（当然其他标签元素也可以），一个功能模块放到一个容器中，一个模块的js只操作对应容器中的元素，该模块只通过容器进行对外的交互（模块化后一个模块只知道自己的容器是谁，数据传递只在模块和容器间进行）。

下面是自定义的注册函数$r，参数有两个，第一个参数是功能模块函数，要求把一个功能的js代码块写到一个函数中，传递给注册函数。第二个参数是模块名称字符串，多级采用“.”来分隔。

// 注册函数$r

window.$r = function(){

    var i, func, modelName, name, model, paramArr;

    func = arguments[0];

    modelName = arguments[1];

    if(typeof func != 'function'){

        console.error('第一个参数不是function');

        return;

    }

    if(typeof modelName != 'string'){

        console.error('第二个参数应当为模块名字符串');

        return;

    }

    paramArr =  modelName.split('.');

    model = window;

    name = '';

    for(i=0; i<paramArr.length; i++){

        if(i == paramArr.length - 1){

            if(typeof model[paramArr[i]] != 'undefined'){

                console.error('模块"' + modelName + '"已存在');

                return;

            }

            model[paramArr[i]] = checkParamProxy;

            return checkParamProxy;

        }

        model = model[paramArr[i]] = model[paramArr[i]] || {};

        if(typeof model != 'object'){

            for(j=0; j<i; j++){}

            console.error('"' + name + paramArr[i] + '"不是object');

            return;

        }

        name += paramArr[i] + '.';

    }

    function checkParamProxy($p){

        if(typeof $p == 'undefined'){

            console.error('模块' + modelName + '需要传入一个jQuery类型参数作为容器');

            return;

        }

        if($p instanceof jQuery){

            return func.call($p, $p);

        }

        console.error('"' + $p + '"不是jQuery对象');

        return;

    }

}

下面举个示例，页面代码如下，里面就两个div，container1和container2，当作容器使用。

<html>

<head>

<meta charset="UTF-8"/>

<title>Register</title>

</head>

<body>

    <div id="container1" style="height: 100px;width: 100px;"></div>

    <div id="container2" style="height: 120px;width: 80px;"></div>

</body>

</html>

现在注册一个绘制内切椭圆或圆形的js模块，模块名叫“graph.ellipse”，然后将容器container1的jQuery对象作为参数赋给graph.ellipse

// 注册graph.ellipse模块

$r(function($c){ // $c为容器的jQuery对象，也可通过this来获取

    $c.html('<div style="height: 100%;width: 100%; border: 2px solid #999999;border-radius: 50%;"></div>');

    $c.on('change', function(){

        var color = $c.data('color');

        $c.children().css({'border-color':color});

    })

    $c.trigger('loaded');

}, 'graph.ellipse');

graph.ellipse($('#container1')); // 将container1作为模块容器

这样就得到了一个宽高为100px的圆。

 

在graph.ellipse模块中，将操作都限定在$c（示例中即$('#container1')）内，比如用$c.find(e|o|e)查找元素，用$c.append(content|fn)追加元素等，这样就确保不会对其他模块产生影响。模块对外交互采用$c.trigger(type)和$c.on(type,fn)触发绑定事件机制，比如示例中$c.trigger('loaded')触发一个loaded加载完成事件，需要在模块加载完成后执行的操作，就可以在外部用$('#container1').on('loaded',function(){// TODO graph.ellipse模块加载完成后执行})来实现。外部要改变圆的颜色，就可以用$('#container1').data({'color':'#27ae60'}).trigger('change')触发容器上的change事件，得到一个绿色的圆。

 

基于jQuery实现简单的js模块化的更多相关文章

  1. 基于jquery的插件turn.js学习笔记

    基于jquery的插件turn.js学习笔记 简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it ...

  2. 一个基于jQuery的简单树形菜单

    在工作中的项目使用的是一个前端基于 jQuery easyui 的一个系统,其中左侧的主菜单使用的是 easyui 中的 tree 组件,不是太熟悉,不过感觉不是太好用. 比如 easyui 中的 t ...

  3. 【treeview】 基于jQuery的简单树形插件

    [treeview] 效果图: 前几天想把后台的目录结构通过树形插件的方法反映到前端来,在网上搜了半天只找到了这个treeview,虽然不是很好看,不过还是够用的..用treeview的前提是要有jq ...

  4. 基于JQuery的简单富文本编辑器

    利用jQuery实现最简单的编辑器 我试了很多种方法,目前最快捷能够实现及其简单的编辑可以使用 document.execCommand("ForeColor", "fa ...

  5. 基于jquery的移动端JS无缝切换

    Html: <div id="slide-box-1"> <ul> <li> <a href="javascript:void( ...

  6. 【分享】纯js的n级联动列表框 —— 基于jQuery，支持下拉列表框和列表框，最重要的是n级，当然还有更重要的

    多个列表框联动,不算是啥大问题,但是却挺麻烦,那么怎么才能够尽量方便一点呢?网上搜了一下,没发现太好用的,于是就自己写了一个.基于jQuery,无限级联动,支持下拉列表框和列表框. 先说一下步骤和使用 ...

  7. 基于jQuery简单实用的Tabs选项卡插件

    jQuery庞大的插件库总是让人欢喜让人忧,如何从庞大的插件库里挑出适合自己的插件,总是让很多缺少经验的朋友头疼的事!今天为大家推荐几款简单实用的Tabs选项卡插件,推荐理由:简单易用灵活,样式美观, ...

  8. 基于Jquery 简单实用的弹出提示框

    基于Jquery 简单实用的弹出提示框 引言: 原生的 alert 样子看起来很粗暴,网上也有一大堆相关的插件,但是基本上都是大而全,仅仅几句话可以实现的东西,可能要引入好几十k的文件,所以话了点时间 ...

  9. 出位的template.js 基于jquery的模板渲染插件

    找了好几款基于jquery的模板渲染插件,无一感觉很难用(教程较少.绑定不统一),也可能我智商问题,比如jquery template.js .jtemplate.js. 然后在github上找到这一 ...

随机推荐

  1. Node.js 事件循环机制

    Node.js 采用事件驱动和异步 I/O 的方式,实现了一个单线程.高并发的 JavaScript 运行时环境,而单线程就意味着同一时间只能做一件事,那么 Node.js 如何通过单线程来实现高并发 ...

  2. FFmpeg开发实战（六）：使用 FFmpeg 将YUV数据编码为视频文件

    本文中实现的一个小功能是把一个YUV原始视频数据(时间序列图像)经过h264编码为视频码流,然后在使用mp4封装格式封装. 编码&封装的流程图如下: 使用ffmpeg编码流程: 1.首先使用a ...

  3. 知名区块链人脸识别公司iFace Chain [爱妃链] 支招，如何防止钱包数字币被盗...

    最近众多钱包发行方跑路频发,让非常多的用户蒙受巨大经济损失,知名区块链人脸识别公司iFace Chain [爱妃链] 前日做客某区块链媒体为网友支招,如何防止钱包数字币被盗. 那么,用户怎么降低Tok ...

  4. 使用 Vue 开发 scrollbar 滚动条组件

    Vue 应该说是很火的一款前端库了,和 React 一样的高热度,今天就来用它写一个轻量的滚动条组件: 知识储备:要开发滚动条组件,需要知道知识点是如何计算滚动条的大小和位置,还有一个问题是如何监听容 ...

  5. SpringBoot 2.X集成Hive-jdbc 3.1.1

    最近公司有一个需求,需求的内容是根据用户页面选择的参数条件查询Hive,数量量大致是300万以内,要求3秒响应.使用的其它的技术就不要说了,先说说SpingBoot集成Hive-jdbc吧,网上虽然有 ...

  6. css两列布局之基于BFC规则实现

    css要实现常见的自适应两列布局的方式方法挺多. 这里讲的是利用设置overflow不为visible时会形成新的BFC来实现.至于什么是BFC,可以搜搜看先,基本都讲的差不多了.等有更多空余时间,专 ...

  7. 网络协议 21 - RPC 协议（中）- 基于 JSON 的 RESTful 接口协议

        上一节我们了解了基于 XML 的 SOAP 协议,SOAP 的 S 是啥意思来着?是 Simple,但是好像一点儿都不简单啊! 传输协议问题     对于 SOAP 来讲,比如我创建一个订单, ...

  8. WebApiClient与Asp.net core DI的结合

    1 WebApiClient 一款基于HttpClient封装,只需要定义c#接口并修饰相关特性,即可异步调用远程http接口的客户端库 WebApiClient WebApiClient.Exten ...

  9. SQL之case when then用法(用于分类统计)

    case具有两种格式.简单case函数和case搜索函数. --简单case函数 case sex when '1' then '男' when '2' then '女’ else '其他' end ...

  10. Spring学习(零)：我们为什么要学习Spring

    序言 通过使用Spring的IoC容器,可以对这些耦合关系(对Java代码而言)实现一个简单的文本化的操作:即是说通过一个或几个XML文文件,我们就可以方便的对应用对象的耦合关系进行浏览.修改和维护, ...