通过require.js 可以对javascript文件进行别样引用 Require.js的使用： 第一步： 只需在html页面中引用require.js 就够了 第二步： 在引用require.js...的时候，要设置async属性为ture 确保不会阻塞页面 第三步：单写一个js文件，用于引用相关的javascripnt文件，这个文件可以随便命名，一般叫main.js 第四步： 在引用require.js...时，通过data-main属性指定main.js ***模块化**** 原本我们在引用require.js，指定main.js后，可以直接在main.js中书写我们的javascript代码。...模块化：把我们需要的功能和属性定义成一个js文件，通过引用这个js文件就能使用其功能和属性 使用require.js 实现的模块化满足 AMD 标准 → Asynchronous Module Define
调用方法： 既然我们是使用的YUI这个js库，那么肯定第一步就是引用这个文件，刚才在上面已经说了我们要使用的是yui-min.js这个文件，当然你可以对他进行改名，你只需要到你下载的yui库的文件中找到他...后面的地址请根据实际情况填写，当然你也可以使用官方提供的地址，请看： <script src=”http://yui.yahooapis.com/3.0.0pr2/build/yui/yui-min.js...实现我们的功能 当我们已经调用好Yui这个js库以后，接下来就得看我们自己的了，如何通过Yui来实现我们想要的功能呢，嘿嘿，请看： 1、Yui 3最基本的使用格式： YUI().use(”node”,...function(Y) { // 书写你的js代码 }); 就是要使用Yui 3提供的方法，就必须得将他们写在上面这个大括号之内，不然无法使用。...在Yui 3的get方法中也是这样的。
为了达到这个目的： YUI在元素上添加一个class名 “yui3-js-enabled”； 然后，开发者可以在widget的内容上添加class名 “yui3-widget-loading...”，代表加载中状态； 这个class名可以和“yui3-js-enabled”一起使用，在JavaScript正在加载时隐藏widget的内容. .yui3-js-enabled .yui3-widget-loading...比如：对于继承于Slider的MultiThumbSlider类，在bounding box上会标记“yui3-widget”、“yui3-slider”和“yui3-multithumbslider”...常用格式如下：“yui3-[widgetname]-[state]”。比如：“yui3-slider-hidden”、“yui3-slider-disabled”。...默认的格式是：“yui3-[widgetname]-content”。如“yui3-slider-content”。
YUI3的几点说明 YUI3是一个重量级的前端框架库,它提供了单元测试(YUITest)，生成文档(YUIDoc)，自动化编译(YUI Build)等工具，在代码组织方面有统一的微件(widget)...alloyUI 是基于YUI3创建的一个UI库,提供了许多常用的UI组件和简单的api.我的例子也是在alloyUI基础上做出 来的....关于例子的一些说明 因为时间仓促,以及本人也是刚刚接触YUI的缘故.所以这个例子非常简单. 主要展示了一个表单的布局,校验,加载和提交数据.以及一些比较常用的UI组件....上的一个扩展(gallery),YUI上的扩展接近200来个.还有许许 多多的公司和开发者在为其贡献代码.我们自己也可以动手,在YUI3的基础上来扩展....前端技术平台的问题，我倾向于慎重考虑几个问题后再做选择： 我们要做什么，具体要达到什么目标 开源的框架选择了以后，我们能不能驾驭它，成本风险评估如何 可行性方案(个人意见): 基于YUI3的widget
YUI Compressor默认不带右键安装功能 YUI Compressor非常好用，特别是JS的混淆是众多JS Coding的最爱。...可惜官网提供的版本都不具备右键功能，每次压缩都要cmd输入一些命令实在是繁琐，本文就介绍如何给YUI Compressor添加右键命令，方便使用。...于是只好自己摸索，下面写出添加添加右键过程，适合任何YUI Compressor版本。 安装步骤 一、下载YUI Compressor任何你想使用的版本，这里我下载最新版本2.4.7版本。...Compressor] [HKEY_CLASSES_ROOT\AllFilesystemObjects\shell\YUI Compressor\command] @=”D:\\yuicompressor...右键js文件，弹出的菜单里，有一个 YUI Compressor选项，单击它对选中的文件压缩 正常的压缩命令提示 压缩后生成的文件，以及大小对比。
YUI 3 的 loader 已经很优雅地融合在YUI(config).use('moduleName', callback)中： YUI({ base: 'http://t-yubo/assets.../yui/3.0.0/build/', debug: true, filter: 'debug', modules: { jquery: { fullpath...jquery/1.3/jquery.min.js' } } }).use('jquery', 'node', function(Y) { jQuery('body').text('YUI...; }); config参数，在 yui-base 模块里，原封不动地传给了 Loader： // use loader to expand dependencies and sort the // requirements...将 YUI 自带的所有 modules 信息，存放在一个很大的数据对象里： modules = { moduleName: { requires: [...],
YUI3总体认识 1.1 面向对象的JS编程，RIA工具： 面向对象的JS编程，主要体现的以下几个方面： 1．...接口和抽象类 YUI3 oop的argument（）可以实现类似的功能 4．...模块之间的引用，即代码复用 YUI3的沙箱模型，可以使JS模块化，在Y.use中引入，可以实现代买复用 1.2 重量级框架，oop思想 YUI3中的oop模块就是面型对象编程的重要体现 1.3...YUI3 API使用 点击YUI3 的web site后能看到他的详细结构： 学习他的ＡＰＩ就应该从这个开始： 第一列就是一些帮助文件信息，还有一些辅助开发工具，我用过的也就是Ｃｏｎｓｏｌｅ了，...这个就是他的这个全局的YUI Global Object 所用到的模块。
YUI用来基于模块的依赖管理。...下面将展示如何使用YUI添加和使用一个模块 // hello.js YUI.add('hello', function(Y) { Y.sayHello = function() {...require.js是基于AMD规范的模块加载器。...首先将require.js文件嵌入网页中。...shim 此属性帮助require.js来加载非AMD规范的库。
以下只是在YUI学习和使用中零碎的一些心得体会，未成体系，发出来，供批判。 1、利用 Font、Base、Grid CSS进行快速的网页布局。...对YUI一直很有好感，最近开始看了看YUI CSS GRID，发现这个理念非常好，非常有利于我们工作效率的提高，特别是熟悉了这套CSS之后，我们就不必每一个项目自己都去写一些CSS。...但是YUI CSS GRID在YUI3中已经不被推荐使用，我为此感到惋惜和不解。不过幸好，及时不被推荐，我们仍可在项目中使用他。 2、 IO的使用。...这个在YUI的论坛里有人反映了，是一个bug，已经解决，但是官方的那个build还没有更新。...4、YUI Library 5、YUI Loader 学习笔记
YUI是Yahoo发布的一个JS框架，虽然不如jQuery简单，但是如果你是要做一些复杂的事情的时候，有一个合适量级的框架还是能有用不少。 YUI3中的一些定义。 Module。...YUI3中的每块代码都可以看作是一个Module。...通过引入Seed文件后，由YUI框架自动调入。 1: 2: 3: <script src=” http://yui.yahooapi......在YUI实例化时，YUI()方法中可以接收多个配置项，例如YUI(c1,c2,,,)。 1: <script src=”http://yui.yahooapis...
YUI3的CSS与YUI2的CSS不同 改变最大的我觉得是Grids部分，YUI2中以模版的方式提供给我们调用，功能中多选项也很多，而且配合Grid Build Tool，可以快速的生成复杂的页面结构。...YUI3 Reset YUI3的Reset同YUI2.8中的Reset有些区别，在YUI3的CSS Reset中，我们可以对所有HTML资源重设其表现，以达到不同浏览器下的一致表现（Page Level...YUI3 Fonts 在YUI2的Fonts中，使用em来表示文字的大小。但是在YUI3中，这一规则被打破了，改为使用百分比来表示文字的大小。如下表，这样的表达方式对于平时的书写来说，是不太友好的。...YUI3 Grids 习惯了YUI2中的Grids System之后，初次转换到YUI3中非常不习惯。因为YUI2提供了一个非常强大的工具（YUI Css Grid Builder）。...参考资料： 1、YUI3 CSS Reset 2、YUI3 CSS Fonts 3、YUI3 CSS Grids 4、YUI3 Alignment Example Page 5、YUI3 Grids Are
最简单的引用YUI3的方法自然是引用Yahoo服务器上的种子文件，地址如下： 引用了种子文件之后，我们就可以在我们的应用中使用Overlay了，建立一个新的YUI的命名空间，如下： YUI().use(‘overlay’,function(Y){...使用overlay也好，其他的yui特性也好，感觉非常的方便和灵活，可以说是一个真真正正为开发者考虑的js框架，而我们也应该学习YUI3的这种设计思想和风格，让自己的应用也变得更加灵活和方便。...总体来看，目前YUI3的Overlay基本能够满足我们日常创建一些叠加层的需要，但是还有一些更高级的属性或者控制功能期待在后续的版本中加入进来。...Technorati Tags: YUI3,Overlay,浮动层 参考资料： 1、YAHOO YUI3 Overlay
YUI3在前身YUI2基础上进行了大量的重新设计，并不只是简单的版本升级。YUI3强调代码重用，将功能做了级别划分和颗粒化的设计。...YUI 3重点是代码的组织和结构。以下是结构图。 YUI3在结构上分为四大类： 种子：该模块是YUI3的单一核心，页面都必须包含该模块，该模块提供加载功能，所以可以堪称是YUI的一个种子。...在YUI3中扮演引导层的作用，通过在页面引入种子相关文件，调用YUI().use()方法可以安全快速的加载YUI3核心类和组件类。 包含YUI Base、Get和Loader模块。...YUI3学习路线 目前关于YUI3的中文资料并不多，也未发现一本介绍YUI3的书籍。... 之后嵌入脚本，验证YUI3是否调用成功 YUI({filter
在javascript中，我们把比较复杂的都是用模块化，今天我们就来了解一下require.js来实现模块化开发 require.js是什么？...require.js是在AMD规范上实现的一个 JavaScript 模块异步加载器。...require.js下载 下载地址：http://requirejs.org/docs/download.html 项目结构 首先请按照我的目录创建如下目录： ?...lib下存放一些常用的库，和我们最关键的require.js script下存放我们自己写的一些js。 index.html代码 <script data-main="js/script/main.js" src="js/lib/<em>require.js</em>
简介 这篇文章主要介绍了Maven压缩插件YUI Compressor使用介绍以及相关的经验技巧，文章约18810字，浏览量165，点赞数5，值得参考！...使用说明: 使用YUI Compressor压缩JS和CSS。 需要Maven2.0及以上工程。 默认情况绑定到构建生命周期：process-resources。...默认值：false gzip boolean 请求创建yui 压缩/ 聚合文件的gzip压缩版本。默认值：false jswarn boolean [js only]显示代码中可能存在的错误。
前端模块化 (Require.js) ? 为什么要用 前端模块化 早期，js代码量小, 所有Javascript代码可以都写在一个文件里面，只要加载一个js文件就够了。...所以，require.js诞生了 官网网址：http://requirejs.org/ /* --- RequireJS is a JavaScript file and module loader....通用模块定义 sea.js 依赖延迟：在需要的时候才去加载依赖项 模块化的实现（require.js） 下载后，把它放在目录下面，就可以加载了 定义模块 在require.js中，每个模块也是分成单独的文件保存的 每一个模块中都有自己单独的作用域！...标签的属性 这个属性可以用来指定一个文件，加载文件的路径会以这路径为基础， 指定的文件会在require.js加载完毕之后，通过异步的方式加载，并且执行里面的代码, <script src="<em>require.js</em>
YUI3是一个非常好的开源框架，但是学习曲线稍微有些陡峭，这个系列将记录下我使用YUI3过程中的一些心得点滴，希望对大家能够有帮助。...很多互联网的项目应用中，弹出层出现的越来越多，使用YUI3可以快速的实现制作弹出层的效果。 YUI3提供了Overlay这个组件来实现可定位、可叠加的弹出层效果，这个弹出层同时还包含标准的布局模块。... 之后，我们就可以创建YUI的实例了。...YUI().use(“overlay”, function(Y){ }); 传给use最后的一个参数是一个回调函数。该回调函数在YUI实例完成了页面中缺少的文件加载后开始执行。
---- YUI Compressor相关信息 官网 GitHub地址 ---- 混淆单个js 一般命令， java -jar yuicompressor-x.y.z.jar myfile.js -o...invalid property id 该文件的第110行内容是float: false,， 参照Stack Overflow–Compression issues with JQuery file in YUI...Compressor，由于float同时是js和css的关键字，故YUI会将其区分不开，需改为"float": false,。
在a执行到require('b')的地方时会停下来去调用b,当去执行b，执行到一半发现require('a'),就停下来去调用a。
概述 require.js是各种网络APP中非常常见的JS依赖库，它其实不仅仅是个模块加载器那么简单。它背后蕴含了一个非常重要的设计，也就是JS模块化编程。...后来随着require.js的推广和使用，就逐渐形成了AMD（The Asynchronous Module Definition），也就是"异步模块加载机制"。...这里通过一个计算幂运算的例子，详细论述require.js的使用。 2. 详论 AMD模块规范听起来很高大上，但实际上并不是很复杂。.../script> 这句代码定义了脚本的加载入口，src当然是require.js的源代码，而data-main则会默认的将dota-main指定的js路径为根路径。...参考 【第67期】ES6 系列之模块加载方案 Javascript模块化编程（三）：require.js的用法 JavaScript的模块化编程
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
