关于一段如何控制水平滚动条的代码

本来水平滚动条用得还算比较少的,因为第一列表格需要固定,就使用css的postion:absolute;+js模拟了一个fixed布局方式,把代码留下来日后使用(估计以后也会很少使用吧,这个奇葩的需求出现的概率应该比较低)。

$('div').each(function() {
	$(this).data('slt', {
		sl: this.scrollLeft,
		st: this.scrollTop
	});
}).scroll(function() {
	var sl = this.scrollLeft,
		st = this.scrollTop,
		d = $(this).data('slt');
	if (sl != d.sl) alert('横向滚动');
	if (st != d.st) alert('纵向滚动');
	$(this).data('slt', {
		sl: sl,
		st: st
	});
});

所谓“创业项目”的公式

原文来自于“人人都是产品经理”,源链接。文中有一段写的非常的精辟:如何判断一个项目是否靠谱?

关于点子

以上想说明的是:

一个优秀的、能够依靠它拉起一个创业公司的产品,绝不是能够从一个点子里面突然出现的。

当一个谁谁谁跟你提出自己看似完整的产品点子,并且一门心思认为“我的点子可好了,就缺一个人去实现而已”的时候,你可以按照以下流程去思考这个点子:

这个点子对应的产品,市场上真的没人做吗?有——A;无——2

这个点子,技术上是不是有实现的可能?无——B;有——3

如果能够实现市场上却没人做,那么是因为这个点子很难以想到吗?是——6;否——4

如果点子不难想到的话,为什么没有人去做?是不是代表它对应的市场需求不够好?是——C;否——5

如果点子不难想,市场也够大,是不是其实已经有相关的产品从侧面满足了用户的需求?是——A;否——6

这个点子对资源的要求是否很苛刻?比如需要跨行业资源或者极佳的成本管控能力?是——D;否——7

这个点子具备足够高的竞争壁垒吗?是——E;否——A

A:你的产品很快会在市场上面临强大的对手,如何跟他们竞争,才是你最需要思考的问题;

B:这是个无法实现的点子,当成科幻作品去想着玩吧;

C:有时候市场看起来美好,但实际上分析下来,需求未必足够强也未必足够广,不足以创造出能够支持研发一款核心产品的用户价值;

D:一个脑洞大开的点子中,往往包含着对很多资源的隐藏要求,作为一个产品经理,这些要求不能也同样被你忽视掉。如果你的产品能够获得足够多的资源来支持这个点子,那这个点子可能是你思索已久所追寻的市场突破点;

E:这个点子市场上没人做,需求看起来也不小,对资源的要求还很低,居然还具备足够高的竞争壁垒——这种几近于不合逻辑的天上掉馅饼的事情,我个人建议你连自己都不要相信,赶紧再重新审核一遍以上的判断。如果还是觉得能够说服自己,那我祝你成功。

国产统计图JavaScript插件

利用一下有限的时间推荐一款非常不错的图表插件  “ECharts” 多种数据混搭,不依赖任何脚本库,功能也非常强大。

提供商业产品常用图表,底层基于ZRender(一个全新的轻量级canvas类库),创建了坐标系,图例,提示,工具箱等基础组件,并在此上构建出折线图、柱状图、散点图、K线图、饼图、雷达图、地图、和弦图、力导向布局图、仪表盘以及漏斗图,同时支持任意维度的堆积和多图表混合展现。

特性介绍:http://echarts.baidu.com/doc/feature.html

实例介绍:http://echarts.baidu.com/doc/example.html
1

 

ExtJS推荐文章一览

最近依然在忙着做后台系统项目,还是使用ExtJS来作为后端主框架。使用的版本依然是ExtJS4.2,快速阅读了Sencha中文站的一些文章介绍,把中间的内容抽取出来提炼一下。

  • Sencha ExtJS 的版本,优缺点。
    现行使用最多的还是4,部分项目使用还是3,最新的版本是6。
  • 版本之间的区别
    ExtJS4 版本之前,几乎就是导入 ext-all.js 然后个个页面写入xx.js,事件与界面几乎是混在一起。到了4的版本之后,能够使用MVC来分离事件与视图层。改进了命名规则,对类名、配置、方法和事件都进行了规范化。
    首次提供了完整的沙盒模式,从ExtJS 4开始,框架不再扩展数组或函数等原生对象,因此,与其它的框架同时加载到页面时,再也不会产生冲突。
    全新的、插件自由的图表库是最激动人心的新功能之一。它基于Web技术(SVG和VML)构建,新图表包是一次编写,不依赖于第三方任意运行的解决方案。

    ExtJS5 在该版本中将触屏设备上功能引入到了桌面应用程序——使用单个代码库。
    使用了MVVM,数据绑定更加容易,支持响应式布局。
    过新鲜出炉的客户端数据会话管理可以有效的减少与服务器端的交互。通过路由的引入可以在应用程序内实现深度链接。随着这些更新,应用程序的开发将会更高效。
    通过使用URL路由方法来将应用程序的URL转换为控制器操作和方法,从而在应用程序内实现深层链接。配置应用程序的路由可以让所请求的URL不用映射到服务器上的物理文件上。URL的#部分(作为片段标识符)为应用程序提供了一种控制浏览器历史记录堆栈而无需重新加载页面的方式。随着散列值的变化,浏览器会触发hashchange事件,以便客户端的应用程序使用。

    ExtJS6 合并Ext JS和Sencha Touch——在Ext JS 6,现在可以从一个单一的代码根基访问所有的Ext JS和Sencha Touch的UI组件,这样就可有为所有设备有选择性地提供适当的用户体验。使用公共代码的好处是,Ext JS 6内Sencha Touch UI组件现在支持MVVM、支持数据绑定,甚至当你想将他们使用在桌面的时候,可获得鼠标和单击的支持。在Ext JS 6中还包含了大量的功能增强,尤其是在可访问性、图表和网格中。
    Sencha Cmd 6——对应每一个主要版本的Ext JS,都会相应的更新Sencha Cmd以便开发人员能更便捷的创建应用程序。在Sencha Cmd 6,添加了一个全新的SASS编译器——Fashion,这是我们自己的运行时Javascript实现,而且消除了对Ruby和Compass的依赖。

  • Sencha CMD工具
    提供了项目创建工程,构建程序,编译脚本等项目常见操作,具体可以参考这里http://extjs.org.cn/node/635
  • 推荐的相关书籍

    详细介绍了ExtJS的版本,以及通过CMD创建工程、创建各个脚手架、MVC分层、打包程序上线的一系列过程。本书使用的版本是4。
  • 参考链接
    ExtJS框架基础:事件模型及其常用功能   http://extjs.org.cn/node/660
    ExtJS创建特定主题的重写   http://extjs.org.cn/node/683
    ExtJSMVC开发模式详解       http://extjs.org.cn/node/742
    ExtJS5版本发布                      http://extjs.org.cn/node/705
    ExtJS5开发教程                      http://docs.sencha.com/extjs/5.0/whats_new/5.0/whats_new.html
    ExtJS6版本发布                      http://extjs.org.cn/node/759

最近的状况

加班,9月份要出版本,所以暂时只能停更了,唉,我的博客也是命运多舛啊。

整理了一下近期的一个JavaScript学习计划

一入前端深似海,从此节操是路人。Ajax,jQuery,AngularJS,前端mvc,前端 mvvm,requireJS,nodeJS ……

好吧,前端工程师彻底逆袭,颠覆的时刻来了。但是~~~~~~学习还是要一步步的来,俗话说,基础打得好,代码写到老。近期的学习计划暂时就这样了。

JavaScript 学习计划

【任性】无关技术,纯粹是为了支持一下暴走漫画

暴走大事件第三季42集,最后一段简直是戳中了内心。特意摘抄下来。以此鼓励同样在努力奋斗着的80,90后,大家一起加油。

王尼玛:前几天我看到一则新闻,一个少年劝导几个成年人,不要在人行道上停车,反被责骂说读书读傻了吧。

少年伤心的哭了。

一直以来,总有人批评80、90后如何思想堕落,如何离经叛道,如何的扶不起来
还有人说他们是道德毁掉的一代人,是“垮掉的一代”

特别的不理解,自顾自跳广场舞扰民的不是他们,不让座就拳脚相加的也不是他们,
碰瓷耍赖的不是他们,炒高房价的不是他们,开黑心食品加工坊的不是他们建小工厂乱排污的更不是他们。

是谁自己道德缺失反过来教育下一代人说这就是现实呢?
是谁自己跌倒了还要反讹把自己扶起来的年轻人?这到底是谁扶不起来?

当然
那些值得尊敬的长辈们,给80,90后树立了榜样让他们不断的成长,不忘自我反省,
于是我们能看到身边大多的80,90后都能够遵守公序良俗。他们会主动让座,
会羞于插队,最坏的行为也就是在电梯里面按亮所有的楼层。

如果要给绝大多数的80,90后一个整体的印象,可以这么说,
他们是刚一就业就被延迟退休,他们是干二十年都买不起房、结不起婚却每天努力工作的一代人,
他们是吃这各种黑心食品长大却每天还在茁壮成长的一代人,他们是等着恶劣的就业环境、
自然环境,顶着高高的房价、住在北上广的出租屋里却没有怨天尤人,每天还在追求自己的理想,
追求自己想要的生活的一代人。

如果谁硬要说他们是“垮掉的一代”那也是被现实压垮的

然而

即使是跪着,前方的路,他们也会一起走完

Gulp中jsLint常见错误翻译

之前的文章写了关于Gulp的一些简单研究,最近刚好项目告一段落有时间来吧Gulp中的功能应用在项目中。jsLint对于提高JavaScript脚本的健壮性是非常有帮助的(jQuery源码也使用了jsLint通过扫描)。使用过程中报了很多错误,为了方便我也从网上直接扒了一份错误代码提示表以供参考。 阅读剩余部分 –

Gulp前端自动化工具

前端日常工作是什么?拿到PSD图,然后开切!首先我们建立一个app的文件夹,然后在app下,我们建立img文件夹,接下来是 css …… 项目终于搞定之后,我们要使用在线压缩工具把样式表进行合并压缩,把所有的大尺寸图片重新导入Ps,保存为 web 格式,然后调整质量 。。。。。。

你就没想过偷懒的办法么?你就是这么把时间耗在没有意义的简单机械的活儿中么?

或者,很多前端都已经开始使用Grunt这样的工具了,自动压缩、自动打包、文件合并、Less,Sass 编译、文件监控、本地文件服务器调试环境。不错,基于Grunt另外推出了非常多的 generate ,类似 angularJS , Ember , Backbone, webapp, bootstrap 等等等等,但是 Grunt 的学习曲线也是非常陡的。虽然能够通过一些通用脚手架来搭建前端工程作为基础架构。一旦需要修改配置,则是异常痛苦。

gulp 的功效和 Grunt 也是异曲同工、插件也是异常丰富。

通过 Grunt 与 gulp 的对比。我个人还是比较喜欢 gulp 的一些操作模式。不管是从词法、编程语义的理解程度来说。gulp 都是优于 Grunt 。官网的介绍谈到了文件流、以及处理速度。因为没有现成的案例,所以不能妄自评论。下面就浅谈一下两者之间的使用细节。

这里引用?http://markgoodyear.com/2014/01/getting-started-with-gulp/ 中的例子:

Grunt

sass: {
  dist: {
    options: {
      style: 'expanded'
    },
    files: {
      'dist/assets/css/main.css': 'src/styles/main.scss',
    }
  }
},

autoprefixer: {
  dist: {
    options: {
      browsers: [
        'last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'
      ]
    },
    src: 'dist/assets/css/main.css',
    dest: 'dist/assets/css/main.css'
  }
},

grunt.registerTask('styles', ['sass', 'autoprefixer']);

阅读剩余部分 –

前端重构Sass的相关使用(笔记二)

Sass 使用中有一个 Amazing 的功能,配合着 compass 能够做出非常多高效的工作,首当其冲的就是自动化雪碧图工具。

雪碧图自然不用多说,做过前端的开发都知道雪碧图。好处呢在于能够大大节约网络的开销,把Http请求降低。自然在原来的前端开发中,制作的成本也是偏高。环境安装请看这里?http://www.html-js.com/article/CSS-solves-the-installation-and-debugging-of-SASSCompass-scheme

环境Ok之后,通过命令确认安装完毕。

1

创建工程请执行 compass create app

2

Compass自动为我们生成了相关的文件目录。好吧,开搞!进入项目目录,运行 compass watch 来实施监控文件发生的变化。实施编译Sass。 之后写入这样的代码段。 阅读剩余部分 –

标签云

文章归档

功能