随笔分类 - [10]JS
-
AngularJS的工作原理
摘要:AngularJS的工作原理个人觉得,要很好的理解AngularJS的运行机制,才能尽可能避免掉到坑里面去。在这篇文章中,我将根据网上的资料和自己的理解对AngularJS的在启动后,每一步都做了些什么,做一个比较清楚详细的解析。 首先上一小段代码(index.html),结合代码我们来看看,angular一步一步都做了些什么。 Hello {{name}}! 当你用浏览器去访问index.html的时候,浏览器依次做了如下一些事情:加载html,然后解析成DOM;加载angular.js脚本;AngularJS等待DOMContentLoaded事件的触发... 阅读全文
-
Backbone源码阅读手记
摘要:Backbone源码阅读手记Backbone.js是前端的MVC框架,它通过提供模型Models、集合Collection、视图Veiew赋予了Web应用程序分层结构。从源码中可以知道,Backbone主要分了以下几个模块:(function(root) { Backbone.Events //自定义事件机制 Backbone.Model //模型 Backbone.Collection //模型集合 Backbone.Router //路由配置器 Backbone.View //视图 Backbone.sync... 阅读全文
-
Knockout 是什么?
摘要:翻译:Knockout 轻松上手 - 1 Knockout 是什么?原文名称:KnockoutJS StarterKnockout 是一个非常棒的脚本库,可是我发现许多人并不了解它,所以,思胜翻译了这本著作。这一节,我们将会讨论 Knockout 可以做什么,又如何使用它的功能。Knockout 是一个 JavaScript 脚本库Knockout ,从本质上讲,是一个 JavaScript 脚本库,可以用在网站或者网页的开发中。用来增强脚本的功能以便提供更好的客户体验。默认情况下,除非你调用 Knockout ,否则它什么都不会做。这是区别其他的脚本库或者框架很重要的一点。你可以从这里下载它 阅读全文
-
JQuery的插件式开发
摘要:如果你只会JQuery的插件式开发, 那么你可以进来看看?对于JQuery的学习,已经有3年多的时间了,直到去年与我的组长一起做项目,看到他写的JS,确实特别漂亮,有时甚至还看不太懂,我才发现其实我不太会JQuery。所以我有时间就会去看看他写的JS代码,直到今天我都会很怀恋那段在清大的日子,是我人生思想道路上的一次艳遇。我到现在都一直喜欢去看一些牛人的js文章,譬如像 (叶小钗,司徒正美,tom大叔)等人的文章都是很不错的。上面的话说多了,来看看我如何输写JS代码,模块化的思路整理,大概有下面的几种情况:第一种:教你如何在项目中编写一个可以通用的弹框,废除掉 alert("shit 阅读全文
-
淘宝打分效果
摘要:JS五星级评分效果(类似与淘宝打分效果)2013-11-26 01:06 by 龙恩0707,933阅读,10评论,收藏,编辑今天晚上研究下 五星级评分效果,类似于淘宝后台评分效果,如下图所示:思路: 当鼠标移到一颗星的时候 判断当前的索引 当前及当前的索引前面的星星亮起来 每当移到任何一颗星星时候 下面跟随提示 mouseout时候 提示消失,移出时 全部变灰。每当点击一颗星星时候 同样判断当前的索引 当前及当前之前的星星都亮起来,mouseout时候 点击时候的星星(亮) 同样保持亮的状态。HTML代码如下: js星级评论打分 1 ... 阅读全文
-
AngularJS1
摘要:Ⅰ.AngularJS的点点滴滴--引导AngularJS已经被很多人像炒冷饭一样炒过啦,大部分都是直接复制官方文档没有说明一些注意事项,不过什么都要从头开始吧###页面引导实例化* * *######1.自动实例化```html1+2={{1+2}}```>如果不写*app*这个值那么script的内容可以不写######2.手动实例化(主要通过js来引导)```html1+2={{1+2}}```>* 为什么声明一个模块后面有一个中括号?>* 因为angular是模块开发,声明一个模块必须要依赖另一个模块或者空模块,否则就声明失效啦>* config的方法可以配置模 阅读全文
-
AngularJS的初始化
摘要:AngularJS的初始化本文主要介绍AngularJS的自动初始化以及在必要的适合如何手动初始化。 Angular 注意:angular.bootstrap函数签名如下:参数类型说明elementElement作为Angular应用根作用域的DOM元素modules(optional)Array数组中为所有需要加载的模块的的名称,每个模块的名字需要在此之前定义,Angular不会在运行到这里时自己去定义模块。 如果手动调用初始化函数的话,代码的书写需要遵循以下顺序:等到页面加载完成后,找到AngularJS的根元素(通常是文档的根元素)。调用angular.bootstrap函... 阅读全文
-
什么是Angular JS?
摘要:Angular JS学习笔记——什么是Angular JS?Angular JS是一个由Google维护的开源的Javascript框架,主要作者为:Misko Hevery(angular JS之父,Sr. Computer Scientist at Google),Igor Minar(tech lead of AngularJS),Vojta Jina。它的创新点在于,利用数据双向绑定和依赖注入,使得不用再写大量的代码。这些全部是通过浏览器端的Javascript实现的,这也使得它能够完美的和任何服务器端技术结合。Angular JS的哲学 AngularJS是建立在这样的信念之上:.. 阅读全文
-
利用MARQUEE实现正在处理效果
摘要:ASP.NET服务器端事件利用MARQUEE实现正在处理效果前言:ASP.NET同仁们应该都遇到过当触发一个比较耗时的服务器端事件时,页面会处在一个等待的状态(即假死状态),用户体验非常不好,很容易造成用户二次点击,造成重复提交。至于解决方案自然是有的(问google)。这里介绍一个本人使用的一个小伎俩,如题。1、首先看一下效果2、介绍一下思路:弹出一个遮罩层遮住当前页面,在层上显示正在处理效果,就是这么的简单。3、如何实现我们知道ASP.NET服务器端控件有一个事件OnClientClick,至于该事件的用法就不多言了。说道这里,估计大家都知道是怎么回事了,没错,就是JS,使用JS创造出遮罩 阅读全文
-
js框架
摘要:系统日志和异常的处理②上一讲我们做了日志与异常的结果显示列表,这一节我们讲要把他应用系统中来。首先我们在App.Common类库中创建一个通用类ResultHelper,这个类里面写了,获取一个GUID,获取当前时间,处理字符串等操作,虽然我们目前要用到的一个就是获取GUID但是以后我们可能还要用到别的,所以我都把他放进入了然后在App.Admin创建一个核心文件夹,Core,放入LogHandler这个类是主要是写入日志,避免在每次都要实例化这个类,我把他封装起来,大家一看就知道。然后修改Controller的Create方法,代码如下一一给出。ResultHelperLogHandlerS 阅读全文
-
你可能不知道的跨域解决方案
摘要:你可能不知道的跨域解决方案2013-11-18 19:34 by Justany_WhiteSnow,290阅读,0评论,收藏,编辑出于浏览器的同源策略,我们经常会遇到浏览器跨域的问题。简单的说跨域基本解决方案是:GET请求用JSONP其他请求用同源iframe做代理JSONP的介绍很多,这里就不多说了。而同源iframe做代理主要是主窗口与iframe的通讯问题,因为这里也有同源策略。常见的方法是使用window.name或者通过url param来通讯。但这些方法都需要反复加载iframe来完成的,资源消耗较高,有没有更好的方案呢?window.postMessagewindow.post 阅读全文
-
jQuery选择器大全
摘要:jQuery选择器大全在Dom 编程中我们只能使用有限的函数根据id 或者TagName 获取Dom 对象. 然而在jQuery 中则完全不同,jQuery 提供了异常强大的选择器用来帮助我们获取页面上的对象, 并且将对象以jQuery 包装集的形式返回。本文主要对常用的jQuery 选择器进行一个介绍及归类。jQuery 选择器大体上可分为 4 类:基本选择器、层次选择器、过滤选择器、表单选择器。其中过滤选择器可以分为:简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器。基本选择器:$("#myELement") 选 阅读全文
-
jquery水印插件:placeholder
摘要:jquery水印插件:placeholder有的浏览器支持html5的水印placeholder(如Crome,firefox,ie10+),有的不支持html5的placeholder(ie9,ie8,ie7....),对于不支持placeholder的属性也能使用placeholderAttr,于是写了这个简单的jquery插件,发出来与大家分享,实现代码逻辑在代码中都有注释,实现细节请直接参看代码。/** * jqueryPlug : 给不支持html5 placeholder水印功能的浏览器打补丁 */;(function($){ 'use strict'; ///// 阅读全文
-
事件与动画
摘要:jQuery中的事件与动画一、事件 1、加载Dom事件 执行时机 $(document).ready()方法和window.onload方法有相似的功能,但在执行时机方面是有区别的。 window.onload:在网页中所有的元素(包括元素所有的关联文件)完全加载到浏览器后才执行,即javascript此时才可以访问网页中的任何元素,只执行一次。 $(document).ready():通过$(document).ready处理,DOM完全就绪后可以被任意调用,可执行多次。 2、事件绑定和移除事件 事件绑定 ... 阅读全文
-
JavaScript插件——按钮
摘要:Bootstrap3.0学习第二十四轮(JavaScript插件——按钮)前言阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/aehyok/p/3404867.html本文主要来学习一下JavaScript插件--按钮。按钮按钮可以完成很多工作。控制按钮状态或创建按钮组可以产生类似工具条之类的复杂组件。状态通过添加data-loading-text="正在加载..."可以使按钮呈现加载状态。 Loading state不过如果想启用加载的状态,还需要在点击按钮的时候进行手动启动。 上面的JavaScript代 阅读全文
-
YUI的模块化开发
摘要:YUI的模块化开发随着互联网应用越来越重,js代码越来越庞大,如何有效的去组织自己的代码,变得非常重要。我们应该学会去控制自己的代码,而不是到最后一堆bug完全不知道从哪冒出来。前端的模块化开发可以帮助我们有效的去管理代码,特别是多人开发的时候,提高开发效率。这篇文章主要介绍YUI模块化开发的原理,适合有一定基础的朋友阅读,如果对前端模块化开发不是很熟的话,可以先看看阮一峰的博文,http://www.ruanyifeng.com/blog/2012/10/javascript_module.html。YUI生成模块的方式是:YUI.add('module1', functio 阅读全文
-
初探performance.timing API
摘要:初探performance.timing API浏览器新提供的performance接口精确的告诉我们当访问一个网站页面时当前网页每个处理阶段的精确时间(timestamp),以方便我们进行前端分析。它是浏览器的直接实现,比之前在网页中用js设置Date.time或者cookie来分析网页时间上要精确很多。以下是w3c提供的performance.timing各阶段api图暂时的缺点:Navigation Timing stops at the window.onload event现代的网站很多是在onload之后再发触发更多的异步请求,而navigation Timing统计却只在wind 阅读全文
-
JavaScript插件——弹出框
摘要:(JavaScript插件——弹出框)前言阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/aehyok/p/3404867.html本文主要来学习一下JavaScript插件--弹出框。弹出框案例为页面内容添加一个小的覆盖层,就像iPad上的效果一样,为页面元素增加额外的信息。先来看几个简单的静态案例效果图效果比较简单主要就是静态的弹出的小窗体,分为窗体标题和窗体内容。 Popover top Sed posuere consectetur es... 阅读全文
-
滚动监听
摘要:(JavaScript插件——滚动监听)前言阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/aehyok/p/3404867.html本文主要来学习一下JavaScript插件--下拉菜单。滚动监听案例滚动监听插件可以根据滚动条的位置自动更新所对应的导航标记。你可以试试滚动这个页面,看看左侧导航的变化。先把实现的代码上了,你可以通过测试代码先来看看效果。View Code然后运行后,在内容下,也就是有滚动条哪里滚动鼠标齿轮,即可看到效果。用法1--通过data属性通过为需要监听的页面元素(一般是)不过在上面添加在了Div上面,你 阅读全文
-
JavaScript插件——标签页
摘要:JavaScript插件——标签页前言阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/aehyok/p/3404867.html本文主要来学习一下JavaScript插件--标签页。标签页之前通过组件只是简单的学习过这样的 Home Profile Messages当然效果就是这样,只是默认的激活了第一个标签 Home,然后不能点击。现在我们来优化一下。我们给上面的先预定义一些href的标签ID Home Profile Messages Settings ... 阅读全文