JavaScript

Archives

文件夹

AngularJs里面自带一个jsonp的方法,但是这个jsonp方法要求你的请求参数callback只能等于JSON_BACK,如: http://url?callback=JSON_BACK 否则你的$http.jsonp就不会正常返回你的回调。 当然如果你非要用其他的回调方法,按照jsonp的原理,你写一个全局方法对应上你的callback也可以,如: http://url?callbac=jsonp function jsonp(data){ console.log(data); }

在Jquery里面offset()方法是返回或设置匹配元素相对于文档的偏移(位置)。 如果不用Jquery想取得某dom元素的文档偏移,理所当然想到了源生的offsetTop/offsetLeft。   然而~ 源生的offsetTop/offsetLeft返回的并不是相对于文档,而是相对于父级。   那么~ 获得相对于文档的偏移,我们就需要做一下处理。 首先我们要用到offsetParent这个属性。   jquery也有个同名方法,作用是返回最近的祖先定位元素。 注意哦,不是父级,是祖先定位元素。   所以思路就是,把自己包括所有祖先的offsetTop/offsetLeft相加,就得到了文档的相对偏移。 function getElementMouseCoords(ele){ var o = ele, t = 0, l = 0; while(o.tagName != ‘BODY’){ t += o.offsetTop; l += o.offsetLeft; o = o.offsetParent; } return { top:t, left:l }; };

之前用的时候忘记总结了,这里集中总结一下这个问题。 使用require:‘ngModel’ 这个选项来增强我们对指令的处理, 这样就可以作为link选项的第四个参数, link: function ($scope,$element,$attrs,$ngModel){ //其他逻辑代码 } 这里面的$ngModel便是代码中ng-model指令传递过来的对象,包含以下这些方法和属性: $viewValue:视图值,即显示在视图(页面)的实际值(就是上面例子中input输入框的值) $modelValue:模型值,即赋给ng-model的值(与控制器绑定的值) 两者不一定相等,因为$viewValue同步到$modelValue要经过一系列的操作(经过三个管道)。 $parsers:一个执行它里面每一个元素(每一个元素都是一个函数)的数组, 主要是用来做验证和转换值的过程,ngModel从DOM读取的值会被传入到其中的函数它会依次执行每一个函数,把每一个函数执行的结果传个下一个函数,而最后一个函数执行的值将会传到model中, 我们可以将函数push进去,那样它就会执行。 $formatters:也是一个执行它里面每一个元素(每一个元素都是一个函数)的数组,主要用来对值进行格式化和转换,以便在绑定了这个值的控件中显示。当数据的模型值发生变化的时候,里面的函数会被一一执行,同样我们就可以将函数push进去,让它执行 $viewChangeListeners:也是一个由函数组成的数组当视图的值发生变化的时候里面的函数会被一一调用,实现跟$watch类似的功能。 $render:函数负责将模型值同步到视图上, 如果模型值被改变,需要同步视图的值。 $setViewValue:用于设置视图值(上面的例子就是将input的value值赋值给$viewValue) $error:一个包含所有error的对象 $setPristine:设置为原始状态,会添加ng-pristine的class类名,移除ng-dirty的class类名 $setValidity:设置错误的标志为一个函数,接受两个参数,第一个参数为错误标志的名字,是字符串类型,将会被设置成$error的属性第二个参数为布尔值,为这个错误标志的值。  

这是一篇翻译文章来自于知乎   认证是任何 web 应用中不可或缺的一部分。在这个教程中,我们会讨论基于 token 的认证系统以及它和传统的登录系统的不同。这篇教程的末尾,你会看到一个使用 AngularJS 和 NodeJS 构建的完整的应用。 传统的认证系统 在开始说基于 token 的认证系统之前,我们先看一下传统的认证系统。 用户在登录域输入 用户名 和 密码 ,然后点击 登录 ; 请求发送之后,通过在后端查询数据库验证用户的合法性。如果请求有效,使用在数据库得到的信息创建一个 session,然后在响应头信息中返回这个 session 的信息,目的是把这个 session ID 存储到浏览器中; 在访问应用中受限制的后端服务器时提供这个 session 信息; 如果 session 信息有效,允许用户访问受限制的后端服务器,并且把渲染好的 HTML 内容返回。 在这之前一切都很美好。web 应用正常工作,并且它能够认证用户信息然后可以访问受限的后端服务器;然而当你在开发其他终端时发生了什么呢,比如在 Android 应用中?你还能使用当前的应用去认证移动端并且分发受限制的内容么?真相是,不可以。有两个主要的原因: 在移动应用上 session 和 cookie 行不通。你无法与移动终端共享服务器创建的 session 和 cookie。 在这个应用中,渲染好的 HTML 被返回。但在移动端,你需要包含一些类似 JSON 或者 XML 的东西包含在响应中。 在这个例子中,需要一个独立客户端服务。 基于 token 的认证 在基于 […]

碰到以gbk做基础编码的项目,就可能避免不了编码混乱导致乱码的问题(水平问题和团队问题的产物)。 这里只说js的解决方案。   在script标签里面有charset这个参数,我们将该参数设置为你js文件的编码模式就可以解决文件中的乱码问题。 现在市面上的主流IDE都支持在下面状态栏显示编码模式的功能,没看到的话看下帮助。 比如你的文件是一个utf-8编码的文件,我们只要 <script src=”xxx.js” charset=”utf-8″></script> 就可以,不管你的页面是什么编码,都以将该js文件以utf-8的方式读取并执行。  

本文章所提到的书为《AngularJs权威教程》 Ari Lerner著   绑定策略涉及到4个方式,分别为:“@”,=”,“&” 书中对于绑定策略的描述:   本地作用域属性:使用@符号将本地作用域同DOM属性的值进行绑定。指令内部作用域可以使用外部作用域变量。 @(or @attr)   双向绑定:通过=可以将本地作用域上的属性同父级作用域上的属性进行双向的数据绑定。就想普通的数据绑定一样,本地属性会反映出父数据模型中所发生的改变。 =(or =attr)   父级作用域绑定:通过&符号可以对父级作用域进行绑定,以便在其中运行函数。意味着对这个值进行设置时会生成一个指向父级作用域的包装函数。 要使调用带有一个参数的父方法,我们需要传递一个对象,这个对象的键是参数的名称,值是要传递给参数的内容。 &(or &attr)   因为书里面的描述比较简单,这里做一些补充说明: 从传递的内容来说 @ 传递过来的是一个字符串 = 传递过来的是一个字符串或对象 & 这里一定不要认为&传递的是一个函数,实际上父级作用域绑定传递的是一个函数的描述,通过该描述和父级作用域的函数建立联系然后执行。   简单的例子,一个有参函数的定义(无参函数比较容易理解这里就不做说明了): //指令HTML部分 <plug-in callback=”fun(value)”><plug-in> <script type=”text/javascript”> //对绑定的方法进行设计 app.run([‘$rootScope’,function($rootScope){ $rootScope.fun = function(value){ console.log(value); } }]); //指令的设计 app.directive(‘plugIn’,[function(){ return{ replace:true, scope:{callback:”&”}, template:'<div class=”demo”></div>’, restrict: “EA”, link:function($scope){ //执行绑定的方法 $scope.callback({value:1,data:2}); […]

说到这个东西,肯定是碰到了这个需求。 直接上文档: 苹果官方文档地址 文档里面有一段注意: To prevent unsolicited downloads over cellular networks at the user’s expense, embedded media cannot be played automatically in Safari on iOS—the user always initiates playback. A controller is automatically supplied on iPhone or iPod touch once playback in initiated, but for iPad you must either set the controls attribute or provide […]

lucky-select https://github.com/gaofeiyu/lucky-select.git 移动端的select解决方案,可级联(现在只有二级联动)。 组件参考自新浪的微招聘,致敬! 基本指令说明 单级指令 singleSelectorPopup 二级联动指令 doubleSelectorPopup 上面两个指令主要是生成下拉部分 参数 //初始化的值 title 标题 initData 初始化的值 data 下拉数据 getRightListData 二级联动通过该属性的方法过滤生成二级菜单,单级联动不存在该属性 这里的data为数组,包含两个必要键值 {id:1,name:”id对应的展示名称”} 方法 show(val) val为初始化的对象 hide() 隐藏 onConfirm() 确认 onCancel() 取消 selector单级指令 该指令是在singleSelectorPopup基础上封装的选择的部分,供使用者参考。 scope: {value: “=”, options: “=”, name: “@”, readonly:”@”, index:”=”}, template: “<span class=’selector’ ng-click=’showPopup();’>{{str}}</span>”, restrict: “EA”, 参数说明 value 显示在前台的值 options 下拉的数据 name 下拉标题 […]

今天终于写个接近最终版的脚本,简单总结一下思路。 先确定我都要干什么,总结如下: 【cssmin】压缩css 【uglify】压缩js 【cssmin】合并css到style.css 【uglify】合并js库/框架文件到lib.js 【uglify】合并自定义js到script.js 【copy】复制需要处理的html到目标地点(单页面项目只涉及到一个文件) 【usemin】然后处理目标文件 【filerev】处理目标文件版本号问题(对合并后的制定文件,现在只写了js和css)   弄清思路后一步步操作,这个脚本总算是正常工作了。   和一些说明有所不同的是,我这里没有用concat、jshint、clean。 concat是被cssmin和uglify的功能替代掉了,不写也可以合并。 jshint没用主要是因为对自己代码不是特别有自信,用了以后感觉要花好多时间调试… clean是真心用不上。   参考文章: http://ericnishio.com/blog/compile-less-files-with-grunt http://www.xuanfengge.com/npm-installation-did-not-succeed-and-github-will-not-open-solutions.html https://www.npmjs.org/package/grunt-html-build https://www.npmjs.org/package/grunt-contrib-concat https://www.npmjs.org/package/grunt-contrib-less https://www.npmjs.org/package/grunt-contrib-watch  

grunt-usemin的作用 usemin用来生成优化后(合并,压缩)的脚本,然后以此替换html文件里面的javascript, css和其他脚本的引用 使用方式 npm install grunt-usemin –save-dev 任务 usemin通过两个内置的任务来完成上述的功能,分别是useminPrepare和usemin,同时还需要其它一些优化工具(cssmin,concat等)来完成优化工作。usemin通过动态的为这些优化工具插件生成子任务的方式来实现整个的目标。 usemin的两个内置的任务 useminPrepare 准备配置文件。配置文件是根据结构化的文件(如html)里面的块声明来生成的。最终把这些应用替换成优化后的文件引用。在这个过程中,为每个优化的步骤生成了很多的名为generated的子任务,这些优化的步骤每步都是一个grunt插件,下面将会列举出来。 usemin 把结构化文件(html)的块声明里面的文件引用替换。如果那些脚本文件有打过版本声明的,将会用版本声明的文件应用来替换。这个个过程会直接修改结构化文件(如html)的内容。 你必须手动的install和load构建过程中需要的依赖插件 基本例子: grunt.registerTask(‘build’, [ ‘useminPrepare’, ‘concat:generated’, ‘cssmin:generated’, ‘uglify:generated’, ‘filerev’, ‘usemin’ ]); useminPrepare任务 useminPrepare 在之前配置基础上,生成新的配置文件,在这个新的配置文件里定义了文件整个处理过程。默认情况下js文件会做concat,uglify处理,css文件会做concat,cssmin处理。 结构化文件(html)的块声明 <!– build:<type>(alternate search path) <path> –> … HTML Markup, list of script / link tags. <!– endbuild –> type 文件类型 可以是css,js,或者其他自定义类型(后面会讲到)。如果都不是构建脚本会忽略。这个引用块只会在开发环境出现,最后的build成功后不会出现。 alternate search path (可选的)默认情况下那些脚本文件的查找都是相对当前处理的文件的。 path 优化后文件的输出目录。 <!– build:js js/app.js –> <script […]