JS框架设计之命名空间设计一种子模块
命名空间
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框架设计之命名空间设计一种子模块的更多相关文章
- JS框架设计之对象扩展一种子模块
对象扩展 说完了,对象的创建(框架的命名空间的创建)以及如何解决多库之间的命名空间冲突问题之后,接下来,就是要扩展我们的对象,来对框架进行扩展,我们需要一种新功能,将新添加的功能整合到我们定义的对象中 ...
- JS框架设计之主流框架的引入机制DomeReady一种子模块
DomReady其实是一种名为"DomContentLoaded"事件的名称,不过由于框架的需要,它与真正的DomContentLoaded有区别,在旧的JS书籍中m都会让我们把J ...
- js框架设计1.1命名空间笔记
借到了司徒正美的写的js框架设计一书,司徒大神所著有些看不太懂,果然尚需循序渐进,稳扎js基础之中. 第一张开篇司徒阐述了种子模块的概念 种子模块亦为核心模块,框架最先执行模块,司徒见解应包含:对象扩 ...
- 基于 Egg.js 框架的 Node.js 服务构建之用户管理设计
前言 近来公司需要构建一套 EMM(Enterprise Mobility Management)的管理平台,就这种面向企业的应用管理本身需要考虑的需求是十分复杂的,技术层面管理端和服务端构建是架构核 ...
- 游戏UI框架设计(一) : 架构设计理论篇
游戏UI框架设计(一) ---架构设计理论篇 前几天(2017年2月)看到一篇文章,国内王健林.马云等大咖们看好的未来十大最有"钱途"产业中,排名第一的就是"泛娱乐&qu ...
- 一行js弹窗代码就能设计漂亮的弹窗广告
接到一个设计需求,要求xmyanke在网站右侧挂一个弹窗广告宣传最近的活动,找了半天都没看到合适的,自己鼓捣了一行js弹窗代码就能设计漂亮的弹窗广告,来瞧一下,欢迎拍砖提意见,js弹窗广告代码如下: ...
- Robot Framework测试框架用例脚本设计方法
Robot Framework介绍 Robot Framework是一个通用的关键字驱动自动化测试框架.测试用例以HTML,纯文本或TSV(制表符分隔的一系列值)文件存储.通过测试库中实现的关键字驱动 ...
- .net core +codefirst(.net core 基础入门,适合这方面的小白阅读) 【我们一起写框架】领域驱动设计的CodeFirst框架(一)—序篇
.net core +codefirst(.net core 基础入门,适合这方面的小白阅读) 前言 .net core mvc和 .net mvc开发很相似,比如 视图-模型-控制器结构.所以. ...
- atitit.atiOrmStoreService 框架的原理与设计 part1 概述与新特性
atitit.atiOrmStoreService 框架的原理与设计 part1 概述与新特性 1. 新特性如下 支持生成sql在无数据库连接的情况下 2. Orm设计 主要的俩个以来service ...
随机推荐
- CentOS 6.0下phpvod搭建教程(LAMP+phpvod)
之所以安装CentOS是因为之前试过RedHat,但是发现RedHat在安装时,无法获取安装源,原因是RedHat系统没有在RHN注册. 网上的很多教程都说可以直接换用CentOS的源,可我小搞里一会 ...
- 用TextWriterTraceListener实现log文件记录 (转载)
log4net之类3方组件确实很方便,但是想写个小小的demo之类的程序,有点用不起啊. 微软自带的TraceListener要实现一个简易的日志帮助类还是很简单的,直接上代码,自己备用,也希望对同样 ...
- Hibernate 之单向多对一映射及其衍生问题
由于在数据表之间可以通过外键进行关联,在使用Hibernate操作映射到存在关联关系的数据表的对象时,需要将对象的关联关系与数据表的外键关联进行映射. 首先建立hibernate.cfg.xml和会话 ...
- [Elixir001]使用tty做一个简单的日记记录
大半年前实践的使用Evernote做知识管理 https://www.zhihu.com/question/20232993/answer/34270710里面的记录日记模块大概长成这样子 用了半年, ...
- [Erlang33]使用recon从网页查看Erlang运行状态
0.需求分析 Erlang最好的卖点之一就是提供了一个非常强大的shell来查看Node运行时的各种状态,可以进行各种各样的内部查看,在运行时调试和分析,热更新代码. 但是总有一些在生产环境下要慎 ...
- 【node错误】/usr/bin/env: node: No such file or directory
背景 安装了node后,执行npm run xxx的命令的时候,报错,提示如下: /usr/bin/env: node: No such file or directory 步骤 1. 什么玩意,执行 ...
- Docker私有仓库Registry实战
参考: https://www.cnblogs.com/soar1688/p/6828329.html 1. 关于Registry 官方的Docker hub是一个用于管理公共镜像的好地方,我们可以在 ...
- JavaScript数组(参考资料)
JavaScript数组的长度和元素类型都是非固定的.因为数组的长度可随时改变,并且其数据在内存中也可以不连续,所以 JavaScript 数组不一定是密集型的,这取决于它的使用方式.1.Array. ...
- sql 存储过程带有模糊查询条件
一个简单的存储过程: Create procedure [dbo].[Proc_SeachJob] (@startRecordIndex int, @endRecordIndex int, @seac ...
- 如何实现一个IOS网络监控组件
此文由作者朱志强授权网易云社区发布. Mobile Application Monitor IOS组件设计技术分享 背景 应用程序性能管理Application Performance Managem ...