文章列表
梁伟盛 于 1年前发表 1530 5 0
那些年我们踩过的坑 事件背景 有一天leader给程序员cover分配了一个需求,cover一看,需求很简单嘛,就是在页面异步拉取数据展示就OK了,于是就和cgi同事阿翔对接了一下接口,就啪啪啪(敲键盘)的开始码代码了,不到2天就完成了需求。 //各种高逼格代码 ... $.ajax({ url: '/cgi-bin/getList', ... success: function (result) { //判断是否正确返回 ... showList(result.data.list); } }); function showList (list) { for (var i = 0, j = list.length; i < j; i++) { //使用到list中的room_id, room_name, 各种xxx_xxx; } }
1年前
javascript技术
jerytang 于 1年前发表 2649 3 0
每个 Array 的实例都自带sort 函数,本文对sort函数的用法做一些探讨。 基本用法 1.数组元素为字符串的排序: varfruit = ['cherries', 'apples', 'bananas']; fruit.sort(); // => ['apples', 'bananas', 'cherries'] 无参数调用 sort 函数,默认是升序排列的,字母 a b c ,排序结果正确. 2.数组元素为数字的排序: var array = [3,7,2,8,2,782,7,29,1,3,0,34]; array.sort(); // => [0, 1, 2, 2, 29, 3, 3, 34, 7, 7, 782, 8] 咦,怎么顺序好像不对?数字应该按从小到大升序排列的啊。什么原因呢?通过查询 MDN 文档[^3],文档里是怎么说的呢? The default sort order is according to string Unicode code points.
1年前
javascript技术
json 于 1年前发表 4311 0 0
SWIG的简单介绍 swig是JS模板引擎,它有如下特点: * 根据路劲渲染页面 * 面向对象的模板继承,页面复用 * 动态页面 * 快速上手 * 功能强大SWIG的使用 SWIG的变量 {{ foo.bar }} {{ foo['bar'] }} //如果变量未定义,输出空字符。 SWIG的标签 EXTENDS 使当前模板继承父模板,必须在文件最前 参数: file 父模板相对模板 root 的相对路径,将在后面介绍如何实现模板继承。 BLOCK 定义一个块,使之可以被继承的模板重写,或者重写父模板的同名块 参数: name 块的名字,必须以字母数字下划线开头 PARENT 将父模板中同名块注入当前块中 INCLUDE 包含一个模板到当前位置,这个模板将使用当前上下文 参数: file 包含模板相对模板 root 的相对路径 {% include "a.html" %} {% include "template.js" %} //将引入的文件内容放到被引用的地方 RAW 停止解析标记中任何内容,所有内容都将输出 参数: file
1年前
javascript技术
莫卓颖 于 1年前发表 5956 3 2
相信很多前端同学对于二维码识别、图像对比等这类高大上的图像识别技术望而生畏,觉得此类识别技术只能通过更加底仓的高级语言才能实现(诸如c等),本文试图从前端的角度出发介绍如何通过canvas来进行简单的图像识别。 CANVAS是什么 canvas是HTML5中的新元素,你可以使用javascript用它来绘制图形、图标、以及其它任何视觉性图像 CANVAS图片处理运用 对于canvas来说,主要是两个方法对图片处理比较重要,一个是通过html5 canvas的 getImageData 方法获取图片的像素信息,可以很方便的通过方法导入到把网络图片或者本地的图片导入至canvas中并获取图片的像素信息,可以修改像素信息后通过另外一个重要的方法putImageData导出处理后的图片。 1、获取canvas调用var c = document.createElement('canvas'); context = c.getContext('2d'); 2、获取导入图像信息var hiddenImage = new Image(); hiddenImage.src=图片地址
1年前
javascript技术
json 于 1年前发表 2642 0 0
PROMISE是什么? 我们知道JavaScript是单线程,如果遇到某些耗时很长的javascript操作,那么其他的操作就必须等待。,通常的解决方法是将那些排在后面的操作,写成“回调函数”(callback)的形式。事先规定当他们结束运行后,应该调用那些函数。但是这样有一些显著缺点: * 回调函数往往写成函数参数的形式,导致函数的输入和输出非常混乱,整个程序的可阅读性差; * 回调函数往往只能指定一个,如果有多个操作,就需要改写回调函数。 * 整个程序的运行流程被打乱,除错和调试的难度都相应增加。 Promises就是为了解决这些问题而提出的,它的主要目的就是取代回调函数,成为非同步操作的解决方案。它的核心思想就是让非同步操作返回一个对象,其他操作都针对这个对象来完成。 JQUERY中的PROMISE的实现——DEFERRED对象 deferred对象是jQuery的回调函数解决方案,它解决了如何处理耗时操作的问题,对那些操作提供了更好的控制,以及统一的编程接口。 下面来看下他的具体的使用方法: AJAX操作的写法: 先看下传统写法: $.ajax({
1年前
javascript技术
杨文坚 ,首席吹牛工程师 于 2年前发表 4392 1 0
The only limits in our life are those we impose on ourselves. 弱爆的 ES6 IN BROWSER 注意是在浏览器,怎么弱法?简单的说: 几乎是语法糖, async function 这些很有用的东西要依赖一个巨型 Polyfill 才可使用。
2年前
javascript技术
黄龙 于 2年前发表 2071 0 0
[http://7tszky.com1.z0.glb.clouddn.com/Fnk4MUtkey-yq61uJk2NGs52UkHs] 什么是AS3JS? AS3JS是ActionScript 3.0到JavaScript的转换器,它基本上可以让你使用ActionScript 3.0语言编写客户端和服务器端JavaScript应用程序。AS3JS是不是一个框架。此工具也没有设计成用于转换的Flash到HTML5解决方案(虽然它可能会帮助!)。现在AS3JS纯粹是转换器,但是你可以自由的扩展它,如果你愿意,因为它是开源的。 github项目地址: https://github.com/cleod9/as3js [https://github.com/cleod9/as3js] 它是如何工作的? AS3JS通过正则表达式解析ActionScript类文件,并将它们转换成JavaScript可以理解的文本。这意味着所有的AS3特定关键字会被去除,以及将代码重新组织成可在一个JS环境中运行的单个文件。
2年前
javascript技术
link ,除了分享,也是知识管理。 于 2年前发表 1326 0 0
介绍几种使用javascript实现斐波那契数列的方法。 其中第一种和第二种都是使用递归:(可优化,应该将每一个元素的值缓存起来,而不是每次递归都计算一次) //with Recursion functionfibonacci1 (argument) { // body...return (argument <= 1 ? argument : fibonacci1(argument - 1) + fibonacci1(argument - 2)); } window.console.log(fibonacci1(10)); functionfibonacci2 (argument) { return (argument <= 1 ? argument : arguments.callee(argument - 1) + arguments.callee(argument - 2)); } window.console.log(fibonacci2(10));
2年前
javascript技术
ouven ,https://ouvens.github.io/ 于 2年前发表 9133 0 0
ES6标准发布后,前端人员也开发渐渐了解到了es6,但是由于兼容性的问题,仍然没有得到广泛的推广,不过业界也用了一些折中性的方案来解决兼容性和开发体系问题,但大家仍很疑惑,使用ES6会有哪些兼容性问题。 一、兼容性问题现状 针对ES6的新特性兼容性问题,目前解决的方案是使用语法解析转换工具将es6语法转化为大部分浏览器识别的es5语法,通用的转化方案有babel,traceur,jsx,typescript,es6-shim。当然es6在服务器端也存在兼容性问题,这里由于只考虑到浏览器端的开发,暂不讨论。下面有一些常用的解决方案和兼容es6的兼容性比较~ https://github.com/babel/babel/issues/596 [https://github.com/babel/babel/issues/596] (es6的兼容解决方案很多,这里只讨论最常用的几种) http://kangax.github.io/compat-table/es6/ [http://kangax.github.io/compat-table/es6/]
2年前
javascript技术
json 于 2年前发表 3528 2 1
作用域不同 * ES6中,let和const实际上为JavaScript新增了块级作用域,函数本身的作用域,在其所在的块级作用域之内。 * let和const的用法相同点:(1)用来声明变量 (2) 声明的变量只在它所在的代码块有效 (3) 不像var那样,会发生“变量提升”现象,只要块级作用域内存在let或const命令,它所声明的变量就“绑定”(binding)这个区域,不再受外部的影响。 (4)不允许在相同作用域内,重复声明同一个变量 不同点:const也用来声明变量,但是声明的是常量。一旦声明,常量的值就不能改变。let声明的变量可以改变。 * 全局对象。 ES6规定,var命令和function命令声明的全局变量,属于全局对象的属性;let命令、const命令、class命令声明的全局变量,不属于全局对象的属性,无法通过window/global获取。 变量的解构赋值
2年前
javascript技术
devinran ,唯封建与迷信难养也 于 2年前发表 5159 5 3
在最初的六天,我创造了天与地 webGL 是基于 OpenGL 的Web3D图形规范,是一套JavaScript的API。简单来说,可以把它看成是3D版的 canvas 。恩,你会这样引入canvas对吧: canvas = document.getElementById("xxx"); ctx = canvas.getContext("2d"); SO,3D版本的就酱: canvas = document.getElementById("xxx"); gl = canvas.getContext("experimental-webgl"); 是的,webGL直接使用canvas元素,只是引入一个不同的上下文“ experimental-webgl ”,方便吧。 这里的上下文实际上应该是.getContext("webgl"),但由于现在webgl标准尚未完善,所以多数浏览器采用一个“试验性”的上下文 让我们先啰嗦一些玩意儿 3D坐标系 [http://7tszky.com1.z0.glb.clouddn.com/FsJGJz-KF4wl30j2y8-tet8cSbRx]
2年前
javascript技术
coverguo 于 2年前发表 4383 5 3
在业务中,页面滚动的场景十分常见, 因此对于滚动的充分了解,可以让我们提高开发的效率! 滚动的几种场景 * 只有window窗体滚动 * 内滚动布局 * 窗体滚动+DIV内滚动 这时候,台下观众会问,什么是内滚动布局,什么是window滚动呢? 让我们来了解下哈 只有WINDOW窗体滚动 即页面只含有浏览器窗体默认的滚动条,窗体滚动条随页面内容而不断增长。 如手Q吃喝玩乐的站点首页, 在 android机 上就是使用window滚动 [http://7tszky.com1.z0.glb.clouddn.com/Fip_ikOJPGeTWIUSzzwfRLqpLAJL] 内滚动布局 什么是内滚动布局呢? 个人认为,内滚动布局就是主滚动条是在页面内部,而不是浏览器窗体上的布局。 故内滚动布局是相对传统的window窗体滚动而言的。 (具体为什么ios上和android上会使用不同的滚动方式,可以去了解下=。=) 内滚动布局什么时候会使用了? * ios 页面顶部带有fixed输入框(解决软键盘弹出导致页面错位的问题) 例如,手Q吃喝玩乐的站点首页, 在 ios机 上便是内滚动布局
2年前
javascript技术