随笔分类 - [10]JS
-
前端智勇大闯关
摘要:淘宝ued - 前端智勇大闯关(第三季)答案下午在微博上看到了淘宝智勇大闯关第三季的信息,感觉挺有意思的,于是就尝试做了下。下面附上自己做的一些答案,也可以访问独立博客查看:前端智勇大闯关(第三季)答案第1题 突破,带锁的门这题相对比较简单,查看源码即可看到提示信息:1 只要在控制台里多次调用powder.blow()函数即可看到图片上的指纹信息。然后尝试组合这几个数便可过关。如下图所示:第2题 激光,前进的方向这题主要考察css3的transform属性,首先在右下角的灰色小块(#ma)上添加样式,然后调整top值,最终样式如下:1 #ma {2 top: 549px;3 l... 阅读全文
-
初探原生js根据json数据动态创建table
摘要:初探原生js根据json数据动态创建table小生以实习生的职位进入了一家非纯软件的公司做asp.net开发,大半个月下来发现公司里居然没有前端工程师,这令我很诧异,跟着公司做项目,发现前端后台没有明显的分工,使用传统的WebFrom开发模式,一个Button都要返回服务器处理一次,服务器说它觉得很累。而我最近由于公司有很多很紧急的任务交给我,所以之前说的那个个人博客暂停了一下。由于我想尽量减轻服务器负担,尽量让一些逻辑在浏览器端完成,浏览器端与服务器之间仅有数据交换,尽可能地把逻辑留给浏览器端处理。显然,js的强大之处就显示出来了——当然,使用jquery框架也不错,但是我希望使用原生js, 阅读全文
-
在WebStorm中集成Karma+jasmine进行前端单元测试
摘要:在WebStorm中集成Karma+jasmine进行前端单元测试前言好久没有写博了,主要还是太懒=。=,有点时间都去带娃、看书了,今天给大家分享一个原创的小东西,如果大家对TDD或者BDD有兴趣,可以也尝试一下哦。PS:附上小女萌图一张:^_^使用的工具/框架webstorm这个做前端的童鞋们应该都比较熟悉了吧,jetBrain出品的IDE神器,做Web开发、Node.js开发都可以。功能十分强大,我们今天的测试框架就是要与它集成,实现“开发的同时自动测试”。下面给出一些相关的资料地址:官网:http://www.jetbrains.com/webstorm淘宝明河同学的webstorm最佳 阅读全文
-
Backbone模型
摘要:Backbone模型现在进入最关键的组件 - 模型。模型用来存储应用的所有数据,以及直接和数据操作相关的逻辑。Backbone中的模型类是Backbone.Model,它包含了数据存储,数据验证,以及数据发生变动时触发相关动作。一般可以把模型与后端绑定(ORM),模型改变的同时向后端发起请求(Ajax)更新数据(数据库)。也有把模型和DOM元素绑定,模型改变时更新HTML界面。模型可以直接new一个Backbone.Model,它返回一个Model实例?12varmodel = newBackbone.Model()model.set({name: 'Backus', age: 阅读全文
-
设置 Ext.data.Store 传参的请求方式
摘要:设置 Ext.data.Store 传参的请求方式1.extjs 给怎么给panel设背景色设置bodyStyle:'background:#ffc;padding:10px;',var resultsPanel = Ext.create('Ext.panel.Panel', { title: 'Results', width: 600, height: 400, renderTo: Ext.getBody(), bodyStyle: 'background:#ffc; padding:10px;', layout: { type 阅读全文
-
jQuery焦点图切换特效插件封装
摘要:网站焦点图是一种网站内容的展现形式,可简单理解为一张图片或多张图片展现在网页上就是网站焦点图。在网站很明显的位置,用图片组合播放的形式,类似焦点新闻的意思只不过加上了图片。一般多使用在网站首页版面或频道首页版面,因为是通过图片的形式,所以有一定的吸引性、视觉吸引性。容易引起访问者的点击,据国外的设计机构调查统计,网站焦点图的点击率明显高于纯文字,转化率高于文字标题5倍。由此看来焦点图的能让游客对企业的第一印象大大提升,下面就给大家介绍一个我们项目中封装使用的漂亮大气的全屏焦点图。如下图所示:可添加多个 图片,设定图片链接,导航随鼠标移动切换图片,在发布文章的时候把图片压缩了有点失真。使用本特. 阅读全文
-
使用时间戳引入css、js文件
摘要:使用时间戳引入css、js文件前言最近在一家创业公司实习,主要负责新版官网和商家平台管理系统的前端开发和维护,每次测试都要上传文件到ftp服务器端测试,初期由于更新修改比较频繁,每次都是直接上传覆盖css、js、php文件,链接方式是普通的链接而没有添加时间戳。由于大多数服务器端或CDN都会对css、js和图片这些静态的内容设置缓存和gzip压缩,到了IE这里又会在本地做一个缓存。所以当我们在服务器端更新了css、js文件之后,客户端经常会出现没有更新的现象,即浏览器会缓存你网站之前css、js的一些版本,导致一些问题的出现。ps:并且我们不会要求客户每次访问你的网站都要清除下缓存,刷新一下页 阅读全文
-
javascript中的promise和deferred:实践(二)
摘要:javascript中的promise和deferred:实践(二)介绍:在第一节呢,我花了大量的时间来介绍promises和deferreds的理论。现在呢,我们来看看jquery中的promises(作者一会儿用单数,一会儿用复数形式,妹的)。Note:代码示例将使用jQuery,尽管它偏离了Promise/A 协议。排序模式:deferred就是一个未完成的对象,promise呢则是一个未知的值。换句话说,prmises/deferreds 允许我们描述(represent)简单的任务,可以很容易地组合来描述复杂的任务和任务流,允许我们细粒度地控制排序。这就意味着我们可以像写同步代码一样 阅读全文
-
javascript生成自定义的arcgis simpletoolbar
摘要:javascript生成自定义的arcgis simpletoolbar 最近在学习ARCGIS for Javascript过程中,在ESRI的在线帮助上看见了这样一个示例,查看源码后,觉得左侧工具的可扩展性并不是太好,并且要素的样式还不能自定义,于是就开始着手设计一个可以自定义边框和填充颜色的小工具。 1.封装setSymbol类:此类的实现基于原型链,有初始(init)、初始化操作(initOperater)、生成样式项(initItem)、添加项(addItem)、编辑项(editItem,未实现)、删除项(deleteItem) 等。详细代码如下:View Codefunction. 阅读全文
-
jQuery 绑定事件到动态创建的元素上
摘要:jQuery 绑定事件到动态创建的元素上在进入主题之前,我们先来看一个前台页面经常用到的功能:点击页面输入框时自动选择其中文本。很容易想到利用输入框的focus事件,当输入框获得焦点时,再调用jQuery的select()方法。Okay,想法很简单,逻辑似乎也无错。具体我们来看一下现实到底能不能实现。1.页面构造个表单,放上几个输入框。代码看起来是这样子的。 Name: ... 阅读全文
-
原生Js封装的弹出框-弹出窗口-页面居中-多状态可选
摘要:原生Js封装的弹出框-弹出窗口-页面居中-多状态可选实现了一下功能:1.title可自定义 可拖拽2.width height可以自定义3.背景遮罩和透明度可以自定义4.可以自己编辑弹出框里的html5.确定 取消按钮可选调用方法: 1 Prompt.add();//生成遮罩和弹出div 2 3 4 5 Prompt.init({ //修改参数 6 title : "我是个alert弹出框", 7 shade : true, 8 opacity : 20, 9 width : 800,10 height... 阅读全文
-
Web API CSRF保护实现
摘要:Web API CSRF保护实现这次自己实现了类似jQuery中ajax调用的方法,并且针对RESTFul进行了改造和集成,实现的A2D AJAX接口如下:$.ajax.RESTFulGetCollection("/api/Users", function (data) { alert(data[5].FirstName); });$.ajax.RESTFulGetOne("/api/Users/1", function (data) { alert(data.UserID); });$.ajax.RESTFulDelete("/api/Use 阅读全文
-
zTree应用实例详讲(3)
摘要:zTree应用实例详讲(3)上一讲中,已经讲到了重命名与删除。那么这一讲,我们来做新建文件夹。其实新建是非常简单的,想一下我们想要的效果:点击新建,然后在一个节点下面出现一个新建的文件夹,并且与此同时这个新建的文件夹属于编辑的状态,也就是说它的光标正在闪亮,要求你输入文件名,输入文件名过后新建文件完成,效果图,像是这样:现在开始: 第一步:在你的页面加入一个按钮,然后加入一个事件 第二步:新建add方法 像是这样: //新建文件夹点击事件function add() { //step1 得到tree var treeObj = $.fn.zTree.getZTreeObj("... 阅读全文
-
利用connect建立前端开发服务器
摘要:利用connect建立前端开发服务器对于前后端完全分离的系统,开发时候我们需要给前端配置服务器,当然我们可以选择Nginx之类的服务器进行配置,但我们也能使用NodeJS构建高自由度的前端开发服务器。简单静态服务器下面是一个简单的静态服务器:var http = require('http'), url = require('url'), fs = require('fs') path = require('path');function getContentType(_path){ var contentType, ext = 阅读全文
-
JavaScript 实现文本编辑器
摘要:JavaScript 实现文本编辑器最近,我需要做一个非常基本的网页内容编辑功能。我不想使用 iframe ,我也不想要一个功能特别多的复杂编辑器,只需要很基本的内容编辑功能,例如粗体,斜体,列表,对齐等等。您可能感兴趣的相关文章分享九个不可思议的 WebGL 应用试验2012年最经典的10款 HTML5 游戏集锦35款非常优秀的基于 HTML5 网页游戏20个惊艳的 HTML5 Canvas 应用试验8个惊艳的 HTML5 和 JavaScript 特效 用谷歌搜索找了很久,发现所有的插件都是功能太复杂,不是我想要的。所以,我决定我自己来实现需要的编辑功能。刚开始我觉得应该要花费很多的时间. 阅读全文
-
EasyUI
摘要:晒自己做的一个管理系统(清新风格)EasyUI最近项目结束了,现在也要自己总结一下自己的成果了,总结会加深自己对项目的印象的。这里我就先晒一些作品图片了,希望大家看了会赞美一个!项目虽然结束了,但是接下来的这个项目可就不是我一个人可以搞定的了,太多的未知数(X)伴随着我们IT男!首先是登录界面—登录界面我一直比较喜欢的风格就是简单,大气,没有太多的信息展示,毕竟是一个管理系统,不是前台网站当初设计这个界面的时候也是想了很久的,当然这个页面可以有很多的背景图片风格的。你可以任意的单配图片!个人比较喜欢冷色调的这就是登录界面的代码了!?后台管理员登录0%--%> 是不是要赞美我一下的设计风格 阅读全文
-
node包管理器
摘要:NPM小结nodejs的出现,可以算是前端里程碑式的一个事件,它让前端攻城狮们摆脱了浏览器的束缚,踏上了一个更加宽广的舞台。前端的可能性,从此更加具有想象空间。随着一系列基于nodes的应用/工具的出现,工作中与nodejs打交道的机会越来越多。无论在node应用的开发,还是使用中,包管理都扮演着一个很重要的作用。NPM(node package manager),作为node的包管理工具,极大地便利了我们的开发工作,很有必要了解一下。NPM是什么NPM(node package manager),通常称为node包管理器。顾名思义,它的主要功能就是管理node包,包括:安装、卸载、更新、查看 阅读全文
-
作用域安全的构造函数
摘要:作用域安全的构造函数属性构造到了window对象在JavaScript中构造函数其实是一个使用new操作符调用的函数,在使用呢我调用时, 构造函数内部用到的this对象会指向新创建的对象function Person(name,age,job){ this.name=name; this.age=age; this.job=job; } var person=new Person('Byron',24,'Software Engineer... 阅读全文
-
JavaScript –type
摘要:JavaScript –类型之我晕每次写博我觉得取上恬当的题目比整篇行文都难,词量有限的情况下突然想到JavaScript拾遗应该会是一个非常文艺而夺目的博文题目,但我并没有急着使用,经验告诉我应该先去搜一下看有没有被用过。果不其然,不搜不知道,一搜吓一跳。不仅已经有JavaScript拾遗,JavaScript基础拾遗等题目的博文,而且更上一层楼的还有Javascript基础之贝海拾遗!看到这里我已然觉得高中每月买一本的《萌芽》真的是弱爆了。我要是早点融入到程序员的世界该多好,即学技术又没落下我追求文学的梦想。看来我们程序员还是不乏文艺细胞,写代码的人搞文艺也差不到哪去啊。学习资源关于Jav 阅读全文
-
JavaScript函数绑定
摘要:JavaScript函数绑定一个简单的函数绑定在JavaScript与DOM交互中经常需要使用函数绑定,定义一个函数然后将其绑定到特定DOM元素或集合的某个事件触发程序上,绑定函数经常和回调函数及事件处理程序一起使用,以便把函数作为变量传递的同时保留代码执行环境。 上面的例子创建了一个handler对象,handler.handlerFun()方法被分配为DOM按钮的click事件处理程序。设计意图是这样的:当点击按钮的时候触发该方法,弹出对话框显示handler定义的message,然而点击后对话框内容却是undefined。熟悉闭包的同学可以轻松看出来... 阅读全文