命名空间

1、种子模块作为一个框架的最开始,除了负责初始化框架的最基础部分。

2、种子模块作为框架的最开始,那么什么是种子框架的最开始呢?答案是IIFE(立即调用函数表达式);

IIFE(立即调用函数表达式)是现代Javascript框架最主要的基础设施,它像细胞膜一样包裹着整个框架,放置外部框架的变量污染。

3、众所周知,大多数框架在windows中立足是通过命名空间,基本上我们可以把命名空间看成是框架的名字,当然也有一些框架没有命名空间向Prototype.js,mootools等都有污染的问题,他的意义存在与整个执行环境的每个角落。

4、Javascript的一切都是基于对象的,而Javascript通过复合类型的对象来构建命名空间比如:function,regexp,object等,我们往一个对象上添加一个属性,而这个属性又是一个对象,而对这个对象我们又可以给他添加一个对象,通过这种方法我们可以有条不紊的构建我们的框架,用户想调用摸个方法就通过XX.YYY.ZZZZ()来调用。基本代码如下:

<script>
alert(typeof(typeof(Test)));//输出:string
alert(typeof(Test));//输出:undefined 字符串形式 //所以判断一个对象的类型用===并和要判断的对象的字符串形式进行比较
if(typeof(Test)==="undefined"){
Test={};
Test.Function={};
Test.Class={};
Test.Array={};
Test.JSONP=new Test.Class();
Test.XHR=new Test.Array();
}
</script>

5、众观各大类库的实现,一开始都是以一个全局变量作为命名空间,然后对这个全局变量进行扩展,如Base2的Base,jQuery的jQuery。

6、全局变量的污染

全局变量的污染主要分两类

(1)对js原生对象的污染、Prototype,mootools和Base2归为一类,Prototype的原理是对Javascript对象进行扩展,但是他没有考虑到和其他库的兼容性问题,在Prototype的基础上

,而且有点渊源的插件几乎都和Prototype有关,mootools是Prototype的升级版,更加的oo,全面复制其API,Base则想修复IE的bug,让IE拥有标准浏览器的API,因此也把很多的原生对象给污染了

(2)对原生对象几乎没有污染、向jQuery、YUI、EXT这些框架,YUI和EXT就是想上面给出代码那样,一叠罗汉的方式构建的,jQuery则另辟蹊径,他以选择器为向导,所以他的命名空间是一个函数,方便用户把css选择器字符串传进来,然后通过选择器引擎进行查找,最后返回一个jQuery实例。

7、jQuery(命名空间)多库共存问题

因为jQuery最初也是非常弱小的,它想人家使用自己的框架,他也想Prototype那样使用$符作为命名空间。所以通过noConflict()这个方法实现了多库共存问题的解决,具体参考本人jQuery多库共存解决方案

注意:这个方案只解决单文件js类库框架的多库共存问题,向EXT这类多文件js类库并不能解决

JS框架设计之命名空间设计一种子模块的更多相关文章

  1. JS框架设计之对象扩展一种子模块

    对象扩展 说完了,对象的创建(框架的命名空间的创建)以及如何解决多库之间的命名空间冲突问题之后,接下来,就是要扩展我们的对象,来对框架进行扩展,我们需要一种新功能,将新添加的功能整合到我们定义的对象中 ...

  2. JS框架设计之主流框架的引入机制DomeReady一种子模块

    DomReady其实是一种名为"DomContentLoaded"事件的名称,不过由于框架的需要,它与真正的DomContentLoaded有区别,在旧的JS书籍中m都会让我们把J ...

  3. js框架设计1.1命名空间笔记

    借到了司徒正美的写的js框架设计一书,司徒大神所著有些看不太懂,果然尚需循序渐进,稳扎js基础之中. 第一张开篇司徒阐述了种子模块的概念 种子模块亦为核心模块,框架最先执行模块,司徒见解应包含:对象扩 ...

  4. 基于 Egg.js 框架的 Node.js 服务构建之用户管理设计

    前言 近来公司需要构建一套 EMM(Enterprise Mobility Management)的管理平台,就这种面向企业的应用管理本身需要考虑的需求是十分复杂的,技术层面管理端和服务端构建是架构核 ...

  5. 游戏UI框架设计(一) : 架构设计理论篇

    游戏UI框架设计(一) ---架构设计理论篇 前几天(2017年2月)看到一篇文章,国内王健林.马云等大咖们看好的未来十大最有"钱途"产业中,排名第一的就是"泛娱乐&qu ...

  6. 一行js弹窗代码就能设计漂亮的弹窗广告

    接到一个设计需求,要求xmyanke在网站右侧挂一个弹窗广告宣传最近的活动,找了半天都没看到合适的,自己鼓捣了一行js弹窗代码就能设计漂亮的弹窗广告,来瞧一下,欢迎拍砖提意见,js弹窗广告代码如下: ...

  7. Robot Framework测试框架用例脚本设计方法

    Robot Framework介绍 Robot Framework是一个通用的关键字驱动自动化测试框架.测试用例以HTML,纯文本或TSV(制表符分隔的一系列值)文件存储.通过测试库中实现的关键字驱动 ...

  8. .net core +codefirst(.net core 基础入门,适合这方面的小白阅读) 【我们一起写框架】领域驱动设计的CodeFirst框架(一)—序篇

    .net core +codefirst(.net core 基础入门,适合这方面的小白阅读)   前言 .net core mvc和 .net mvc开发很相似,比如 视图-模型-控制器结构.所以. ...

  9. atitit.atiOrmStoreService 框架的原理与设计 part1  概述与新特性

    atitit.atiOrmStoreService 框架的原理与设计 part1  概述与新特性 1. 新特性如下 支持生成sql在无数据库连接的情况下 2. Orm设计 主要的俩个以来service ...

随机推荐

  1. php 访问用友u8数据

    <?php namespace app\api\controller; use think\Controller; use think\Db; use think\Log; /** * desc ...

  2. 主键冲突异常 DuplicateKeyException

    org.springframework.dao.DuplicateKeyException Exception thrown when an attempt to insert or update d ...

  3. ZOJ3770Ranking System 2017-04-14 12:42 52人阅读 评论(0) 收藏

    Ranking System Time Limit: 2 Seconds      Memory Limit: 65536 KB Few weeks ago, a famous software co ...

  4. Jmeter-Ant 生成测试报告

    一.安装jmeter 配置环境变量 JMETER_HOME D:\SProgram\jmeter CLASSPATH %JMETER_HOME\lib\ext\ApacheJMeter_core.ja ...

  5. test4 结对项目

    [必做 1] 基于作业3的结果,读取一个较小的文本文件A_Tale_of_Two_Cities.txt,统计该文件中的单词的频率,并将统计结果输出到当前目录下的 Result1.txt 文件. 结对对 ...

  6. [毕业设计][期末作业]二手闲置小程序 免费信息发布系统功能源码(小程序+php后台管理)

    最近做了一个小程序,主要是二手闲置免费信息发布系统的功能,里面包括了登录,发布商品,商品管理,违规投诉,canva商品海报生成,分享等一些基础的功能,可以说代码都是自己辛辛苦苦写出来的.可作为毕业设计 ...

  7. Tomcat 配置用户认证服务供C#客户端调用

    项目里,遇到的一个小问题来好好的总结一下.因为我们这个项目是用Java写的服务端发布WebService,客户端呢使用C#来调用WebService(本人以前搞过一段时间C#客户端,还总结了一个MVP ...

  8. LINQ to Entity里面不能使用DateTime

    LINQ中不能直接使用DateTime,否则会报错:‘The specified type member 'Date' is not supported in LINQ to Entities. On ...

  9. js 倒计时,转义

    function leftTimer(time) { var leftTime = (new Date(time)) - (new Date()); //计算剩余的毫秒数 var days = par ...

  10. AutoMapper之如何开始,适合入门和演示

    原来想应该介绍下背景说明下好处什么的,仔细想都是废话 ,直接上代码吧. 首先有两个类,一个是和数据库对应的实体 Student,一个是和页面展示相关的页面模型 StudentModel. /// &l ...