刚开始用angularjs做项目的时候,我用的是ng-router,觉得加载并不好.所以就用了ui-router,考虑到在app上网页加载速度太慢,所以我就想到了用懒加载,看下是否能提升性能,提高加载速度. 那使用懒加载,就要对项目进行进一步的拆分,我觉得这个拆分,可以提高我对angularjs的理解. 本文主要说明在用AngularJS开发web应用中如何实现lazyload,使用AngularJS需要在前端实现路由功能,本文就介绍利用此点实现前端资源的懒加载. 问题 目前大部分Angular

RequireJS 循环依赖 开始学习使用RequireJS之后做了几个小例子,之后想着把手头的项目也用RequireJS写一遍试试.感觉胜利就在前方了,忽然发现始终卡在一个问题上: 很常见的一个问题,根源就是获取不到当前的函数,反复检查了代码,发现并没有异常,纠结许久. 忽然想到之前看API的时候提到的“循环依赖”,当时“循环依赖比较罕见,它也是一个重构代码重新设计的警示灯.”让我直接忽略了这一部分的内容. 循环依赖,指的是两个模块之间相互依赖,即a依赖b,同时b依赖a,那么在这种情况下当b的

一.概述 AngularJS有一经典之处就是依赖注入,对于什么是依赖注入,熟悉spring的同学应该都非常了解了,但,对于前端而言,还是比较新颖的. 依赖注入,简而言之,就是解除硬编码,达到解偶的目的. 下面,我们看看AngularJS中常用的实现方式. 方法一:推断式注入声明,假定参数名称就是依赖的名称.因此,它会在内部调用函数对象的toString()方法,分析并提取出函数参数列表,然后通过$injector将这些参数注入进对象实例. 如下: //方法一:推断式注入声明,假定参数名称就是依赖

本文转载自:http://www.cnblogs.com/kenkofox/p/4650310.html 不过,这一篇,我想进一步探讨一下这两个框架的优缺点,另外,再进一步,抛开这两个框架,回到本真,自己搞个简单的路由一样可以实现单页面. 这个对于刚做前端开发的新同学来说就最好不过了,如果一来到岗位就一大堆angular.backbone.requirejs,看资料都看一两周.其实大家最熟悉的东西还是那个美元$,用美元能解决的问题,就不要麻烦到angular.backbone大爷了. 事先说明,

这里只是调侃一下,“杏仁”其实指的是almond,requirejs作者的另一个开源项目,它的定位是作为requirejs的一个替代品. 本文概要: 1. 使用场景 2. 打包例子:未使用almond 3. 打包例子:使用almond 4. 如何暴露公共API 5. 限制 & 支持的特性 6. 写在后面 & demo下载 使用场景 什么情况下需要使用almond呢?假设你手头有个基于requirejs的小项目,所有业务代码加起来就几十K(压缩后可能更小).出于性能优化的考虑,你可能在想:如

简介 lazyload.js用于长页面图片的延迟加载,视口外的图片会在窗口滚动到它的位置时再进行加载,这是与预加载相反的. 优点: 它可以提高页面加载速度: 在某些情况清晰它也可以帮助减少服务器负载. 安装 bower安装: $ bower install jquery.lazyload npm安装: $ npm install jquery-lazyload 使用 lazyload依赖与jquery.所以先引入jquery和lazyload <script src="jquery.js&

angular优点: 强大的数据双向绑定 View界面层组件化 内置的强大服务(例如表单校验) 路由简单 angular缺点: 引入的js较大,对移动端来说有点吃不消 语法复杂,学习成本高 backbone优点: 引入的js较小 清晰MVC分层 Model层事件机制 路由简单而且便于扩展 backbone缺点: MVC有点死板,有时候觉得累赘 没有双向绑定,界面修改只能靠自己 view切换时,没有足够便捷的事件通知(要自己监听route) 其实,这两个框架都非常优秀,但是,在实际业务中,不一定百

RequireJS SeaJS CMD规范 CommonJS的规范: 根据CommonJS规范,一个单独的文件就是一个模块.加载模块使用require方法,该方法读取一个文件并执行,最后返回文件内部的exports对象 SeaJS定义模块方式 在 SeaJS 里,模块只有一种书写格式 define(function(require, exports, module) { var A = require('a'); A.do(); return function () {}; }); Requir

使用场景 什么情况下需要使用 almond 呢?假设你手头有个基于requirejs的小项目,所有业务代码加起来就几十K(压缩后可能更小).出于性能优化的考虑,你可能在想:如果能够去掉requirejs的依赖就好了,毕竟,gzip后的requirejs还有大概20k(2.1.6版本). almond就是为了这个目的而诞生的,开发过程,你可以照常使用requirejs来管理你的依赖,而到了打包上线阶段,替换成almond就行了.gzip后的almond只有大约1k,优化幅度相当大. 例子:未使用a

前一段时间,因为一些事吧这个习惯落下了,现在争取重新捡起来. 最近开始自学requireJS,为了更好的掌握,所以写出一个自我理解的博客供参考. 分割线------------------------- 首先,学习requireJS,要知道什么是requireJS. requireJS是一个可在js和node环境下运行的一个非常小巧的一个AMD规范下的js模块载入框架,通俗的理解为模块加载器. 相信开始学习requireJS的一定对JS代码的模块化有一个初步的了解了.而requireJS主要解决

学会用requirejs,5分钟足矣 据说公司的项目较多的用到requirejs管理依赖,所以大熊同学挤出了5分钟休息时间学习了一下,现在分享一下.如果你想了解requirejs的实现原理,请绕道!如果你想了解requirejs的高级用法,请绕道!那么问题来了,这篇小文还有人看吗?

1. requirejs的优点 1)异步加载依赖的文件 2)管理文件加载顺序 3)管理文件加载的包路径 2. requirejs下载地点 https://github.com/jrburke/requirejs 3. requirejs demo 依赖文件如下: 1)index.html  主页面,引入requirejs ,指定整个页面js执行入口 2)main.js 页面执行入口,定义js的baseUrl 及公共包 3)lib.js main.js依赖的module index.html <!

seajs遵循CMD规范,requirejs遵循AMD规范.AMD规范是预加载,CMD规范是赖加载. 下文举例假设有文件 b.js, c.js如下 //b.js define(function(require, exports, module){ console.log('b is loaded') function run(){ console.log('b run'); } exports.run = run; }) //c.js define(function(require, expor

这里只是调侃一下,“杏仁”其实指的是almond,requirejs作者的另一个开源项目,它的定位是作为requirejs的一个替代品. 使用场景 什么情况下需要使用almond呢?假设你手头有个基于requirejs的小项目,所有业务代码加起来就几十K(压缩后可能更小).出于性能优化的考虑,你可能在想:如果能够去掉requirejs的依赖就好了,毕竟,gzip后的requirejs还有大概20k(2.1.6版本). almond就是为了这个目的而诞生的,开发过程,你可以照常使用requirej

简介 lazyload.js用于长页面图片的延迟加载,视口外的图片会在窗口滚动到它的位置时再进行加载,这是与预加载相反的. 使用 lazyload依赖与jquery.所以先引入jquery和lazyload <script src="jquery.js"></script> <script src="jquery.lazyload.js"></script> 1.将图片路径写入data-original属性2.给laz

LazyLoad大家再熟悉不过的一个jquery插件了,它可以延迟加载长页面中的图片. 也就是说在浏览器可视区域外的图片不会被载入,直到用户将页面滚动到它们所在的位置才会加载并显示出来,这和图片预加载的处理方式正好刚好相反.图片不多的页面时,效果并不太明显,但是当页面大图片比较多的时候,这种效果就比较显著了,明显加快了页面的加载速度.浏览器将会在加载可见图片之后即进入就绪状态,在某些情况下还可以帮助降低服务器负担.因此,比较流行的wordpress主题,typecho主题,emlog主题等都使用

如今,webpack.gulp等构件工具流行,有人说seajs.requirejs等纯前端的模块化工具已经被淘汰了,我不这么认为,毕竟纯前端领域想要实现模块化就官方来讲,还是有一段路要走的.也因此纯前端的模块化工具依然有价值,而且就我了解一些中小企业一直都在用纯前端的模块化手段. 如今,重新关注seajs和requirejs,不求理解多么深刻,要求会用能用就可以. 模块化的起因是传统的直接引入js方法存在问题: 必须通过全局变量共享模块,有可能会出现命名冲突的问题: 依赖的文件必须手动地使用标签

简介 lazyload.js用于长页面图片的延迟加载,视口外的图片会在窗口滚动到它的位置时再进行加载,这是与预加载相反的. 优点 它可以提高页面加载速度: 在某些情况清晰它也可以帮助减少服务器负载. 安装 bower安装: $ bower install jquery.lazyload npm安装: $ npm install jquery-lazyload 使用 lazyload依赖与jquery.所以先引入jquery和lazyload <script src="jquery.js&q

功能:实现点击时下拉框显示 插件:dropdown.js 要点:dropdown功能往往用在导航栏.导航条上,用作标题显示.dropdown与<ul><li>标签搭配用. 以data-toggle作被点击者,以ul class="dropdown-menu"作展开显示,对被点击者.展开者作一个整体li class="dropdown"包围 <!DOCTYPE html> <html lang="">

标准的 AMD 模块定义 一个标准的 AMD 模块看起来是这样子: define(['foo', 'foo/bar'], function (foo, bar) { return { doSomething: function () { console.log(foo + bar); } }; }); 模块 foo 和 foo/bar 在工厂函数被调用之前完成加载,并作为参数传递给工厂函数. 工作原理: RequireJS 读取依赖模块数组. 继而检查当前上下文是否已注册这些依赖模块: 如果模块

一.避免全局变量的理由 js中避免创建全局变量一是避免命名冲突,二是避免因为创建全局变量让代码变得脆弱,三是创建全局变量会让代码难以测试. 二.避免创建全局变量的几种方法 //避免全局变量 避免命名冲突 //1.单全局变量之命名空间 var YourGlobal = { namespace: function(ns) { var parts = ns.split("."), object = this, i, len; for (i=0,len=parts.length;i <