YUI3学习(一)—入门

YUI3学习(一)—入门   学习YUI3有一段时间,并且应用在了一些项目的前端开发中,感觉还是蛮不错的,所以决定开始记录下YUI3的学习历程和个人经验。   YUI3在前身YUI2基础上进行了大量的重新设计,并不只是简单的版本升级。YUI3强调代码重用,将功能做了级别划分和颗粒化的设计。在概念上抽象出核心、工具、和组件类,分别放在不同的目录结构中,需要的时候自行去引用。为动态加载的框架设计做铺垫。YUI3…

大家好,又见面了,我是你们的朋友全栈君。

     学习YUI3有一段时间,并且应用在了一些项目的前端开发中,感觉还是蛮不错的,所以决定开始记录下YUI3的学习历程和个人经验。
     YUI3在前身YUI2基础上进行了大量的重新设计,并不只是简单的版本升级。YUI3强调代码重用,将功能做了级别划分和颗粒化的设计。在概念上抽象出 核心、工具、和组件类,分别放在不同的目录结构中,需要的时候自行去引用。为动态加载的框架设计做铺垫。

YUI 3重点是代码的组织和结构。以下是结构图。

YUI3学习(一)---入门

 

YUI3在结构上分为四大类:

种子:该模块是YUI3的单一核心,页面都必须包含该模块,该模块提供加载功能,所以可以堪称是YUI的一个种子。在YUI3中扮演引导层的作用,通过在页面引入种子相关文件,调用YUI().use()方法可以安全快速的加载YUI3核心类和组件类。

包含YUI BaseGetLoader模块。

核心:核心模块为YUI3下游组件提供通用依赖。该模块包括OOP模块(提供对象继承机制,DOM等绝大多数模块直接或间接依赖OOP)、Dom模块(提供基础的DOM操作与选择类)、Node模块(基于Dom模块,提供文档节点的创建、选择和操作等方法,相比YUI2有了很大的精简)、Event模块(提供屏蔽浏览器差异的事件注册和响应机制,同时提供高级自定义事件的功能)

组件框架:组件框架基于YUI核心框架。从下到上依次基于AttributeBaseWidget模块组成;同时提供Plugin模块实现灵活扩展。组件框架是建立和扩展组件的基础。

组件:YUI3提供的高度模块化可复用的组件,根据程序按需引入相关模块即可。YUI3目前提供了AnimationDrag and DropIOCookiesJSON 等基础组件模块。

 

 

接下来总结一下YUI3的部分特点:

1,动态按需加载

YUI3种子中的Get、Loader模块是动态按需加载的基础,YUI3框架通过良好的结构组织,可以根据程序引入的所需模块名称自动计算依赖模块,实现按需加载;YUI3动态加载的优势:

1)js文件写入script标签,每一个标签都会占用一个http请求(即使是304.),而动态加载的文件缓存后则不必发起真实的http请求。提高了框架的性能。

    2) 动态加载可以避免开发人员额外关注js文件之间的依赖和排序及重复问题。  引入的时候只需要引入需要模块的名称即可,依赖关系不需要花费精力处理。

      3) 动态加载利于页面代码语义化,只需要关心 ‘需要什么’。

 

2,细粒度化设计

YUI3对每个模块都进行了更细粒度的划分。比如,dom模块,划分为了 base,screen,style,selector-css2,selector-css3,selector-native等几个小模块,对于我们控制页面的载入的数据量有很大帮助。

下图是YUI3各个细粒度模块的列表和大小。

YUI3学习(一)---入门

3,安全沙箱

 页面的每一个YUI实例能够被自包含、保护和限制(YUI().use())。这种和其他YUI实例的分离,能够配合你的特殊函数需求,并且能让不同的YUI 版本更好的运行在一起。在很大程度上方便了不同开发者对同一页面的并行开发。

这里YUI().use(”,function(Y){…})就是一个安全沙箱,可以确保这里面的Y是纯天然无污染的,Y实例里有什么功能完全取决于use里传进的模块名称,function(Y){}里面的程序跟外界是隔离的,在里面创建的变量(除了全局变量)以及对YUI的添加修改都不会影响到同个页面上其他人写的程序。

 

 

 

 

YUI3学习路线

目前关于YUI3的中文资料并不多,也未发现一本介绍YUI3的书籍。所以目前最全的文档就只有yahoo 的官方YUI3介绍、API和examples(http://developer.yahoo.com/yui/3/)。根据网友的学习经验,学习路线最好是依据官方说明的顺序学习(YUI3核心(YUI Global Object\Node\Event)->组件框架->组件);循序渐进,逐步了解YUI组织结构及使用方法。

 

 

hello YUI3 demo

 

首先下载YUI3开发包(在http://developer.yahoo.com/yui/3/ 选择Download  full developer kit,包含YUI3代码、api和例子)。解压后拷贝build文件夹里的yui3文件夹到自己的工程中。然后在页面引入yui3-min.js。

 

 
<script type="text/javascript" src="build/yui3/yui/yui-min.js"></script>

 之后嵌入脚本,验证YUI3是否调用成功

 

YUI({filter:debug}).use('*',function(Y){
	alert('hello YUI3');	 
});

 

 

 

下一篇  YUI3 Global Object

 

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/158167.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 拉屎抽烟定理_为什么抽烟才能拉出屎

    拉屎抽烟定理_为什么抽烟才能拉出屎最近一直在做游戏,刚开始接触游戏,思维还是撞不过来,买了一本书看了看了一下,才开始有了游戏思维,每当写程序感到思维混乱的时候,于是出去抽根烟,什么烦恼随着眼圈飘忽而出,有时抽着抽着突然就有了灵感,于是

  • ExtJS学习———–Ext.Array,ExtJS对javascript中的Array的扩展

    ExtJS学习———–Ext.Array,ExtJS对javascript中的Array的扩展

  • Docker安装Jenkins教程

    Docker安装Jenkins教程Docker安装Jenkins教程前言一、安装Jenkins1.下载Jenkins2.创建Jenkins挂载目录并授予权限3.启动Jenkins容器4.验证Jenkins容器是否启动二、浏览器访问Jenkins页面1.输入http://192.168.XX.XX:102402.获取管理员密码前言Jenkins是一个开源软件项目,是基于Java开发的一种持续集成工具,用于监控持续重复的工作,旨在提供一个开放易用的软件平台,使软件的持续集成变成可能。提示:如果没有安装Docker,传送门在这里:链接:

  • 对数及运算法则_log公式运算法则

    对数及运算法则_log公式运算法则1.对数源于指数,是指数函数反函数因为:y=ax所以:x=logay2.对数的定义【定义】如果N=ax(a>0,a≠1),即a的x次方等于N(a>0,且a≠1),那么数

  • dart jsonDecode与jsonEncode[通俗易懂]

    dart jsonDecode与jsonEncode[通俗易懂]jsDecode顾名思义是解析json,解析json到模型中,例如将字符串jsonpt解析到实体类payloadModel中:finalpayloadModel=PayLoadModel.fromJson(jsonDecode(pt)asMap<String,dynamic>);jsonEncode是把数据转为json

  • 随机梯度下降法和批量梯度下降法_梯度下降法优化

    随机梯度下降法和批量梯度下降法_梯度下降法优化深度学习最常用的优化方法就是随机梯度下降法,但是随机梯度下降法在某些情况下会失效,这是为什么呢?带着这个问题我们接着往下看。一个经典的例子就是假设你现在在山上,为了以最快的速度下山,且视线良好,你可以看清自己的位置以及所处位置的坡度,那么沿着坡向下走,最终你会走到山底。∑i=1n∇θf(θ;xi,yi)+∇θϕ(θ)\sum_{i=1}^{n}\nabla_{\theta}f\left(\theta;x_{i},y_{i}\right)+\nabla_{\theta}\phi(\theta

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号