话题
刘恒兵 ,永远不要怀疑一个人的潜力! 工具建设
LEGO组件平台开发(一) @( lego平台 [http://lego.imweb.io] ) 为什么要做组件平台 为什么要组件,这个问题在很多场合都被人提起,这里不做过多赘述,其解决的本质问题: * 复用:减少产品、设计(UI)、开发、测试、部署(大型应用)的重复工作量,提升开发效率 * 统一:同一个平台统一产品特性保持高度统一和一致,能做到同步修改。 然后,在任何产品的上线过程中,谁都不愿意重复早轮子,都希望能通过一些规范和标准统一起来,后续就完全按照这个标准执行,并能否把历史上实现过的沉淀出来的直接使用,不需要重复劳动。 这里就提到的重要的点:1、沉淀;2、标准。如何沉淀?沉淀的标准是?在哪里沉淀?该不该使用?如何使用?新加入的小伙伴如何知道? 同时,我们还需要解决每个组件之间的依赖(即模块依赖),就需要一个平台来帮我们做这样的事情,维护组件,而且能做到工具化,和构建体系打通,使用者能快速方便地相信和使用组件。这里就提到一个重要的问题:工具、维护 从组件的维护发展历史来看有以下一些方式: * ...显示全部
3 年前发表 2005次浏览 0条评论 1次收藏
梁伟盛
单一职责 前言 谈到单一职责,就肯定会踢到引用了一万次的名言: A class should have only one reason to change。 一个类应该只有一个原因能引起它变化。 -------------------------------------------------------------------------------- 这是什么意思呢,举个例子,男生一般是站着尿尿,所以代码是: functionMale (name, age) { this.name = name; this.age = age; this.sex = 'male'; } Male.prototype = { coustructor: Male, //尿尿的行为 pee: function () { console.log('站着尿尿'); } }; ...显示全部
3 年前发表 1902次浏览 5条评论 1次收藏
袁飞翔 工具建设
直出要做什么 在服务端为Qjs填充默认的值,例如 输入: <divq-text="name"></div> {"name": "Qjs"} 直出: <divq-text="name">Qjs</div> 原理 编译阶段处理directives, 输出阶段处理filters对数据取值渲染模板获取到html 编译: <divq-text="name">Qjs</div><divq-class="red: isRed"></div> 处理directives编译成underscore模板: <divq-text="name"><%=name %></div><divq-class="red: isRed"class="<% if (isRed) { %>red<% } %>"></div> 输出: 处理filters, 使用模板函数对数据做渲染 实现 编译阶段虚拟dom的大框架: 编译过程基本都在 cheerio 建立的虚拟dom上操作, 因此解析Qjs语法等都可以直接复用Qjs的, 只需重写一套directives q-text var $ = require('cheerio'); ...显示全部
3 年前发表 1554次浏览 1条评论 0次收藏
link ,除了分享,也是知识管理。 Node.js全栈
概述 PhantomJS is a headless WebKit scriptable with a JavaScript API. It has fast and native support for various web standards: DOM handling, CSS selector, JSON, Canvas, and SVG.( http://phantomjs.org/) [http://phantomjs.org/)] PhantomJS是一个无界面的webkit内核浏览器,你可以把它当作一个没有界面的Safari。 安装 目前PhantomJS的最新版本的2.0,官方文档中有提到说:如果在使用老版本时碰到一些难解的bug,可以升级到最新版试试。 WINDOWS 直接下载 phantomjs-2.0.0-windows.zip ...显示全部
3 年前发表 5224次浏览 0条评论 0次收藏
莫卓颖 工具建设
背景: 最近一段时候由于需要搭建后台测试系统,因此需要在centos系统下搭建mysql、apache、fastcgi、svn,由于网上的教程比较零散并且很多都过时,因此重新梳理整理如下 MYSQL 1.安装 yum install mysql mysql-server mysql-devel 2. 数据库配置文件 /etc/my.cnf 3. 启动MYSQL service mysqld start 4. 开机自启动 chkconfig --add mysqld 5. 设置登录密码 mysqladmin -u用户名字 password密码 6. 登录MYSQL mysql -u用户名字 -p密码 7. 忘记密码 service mysqld stop mysqld_safe --user=root --skip-grant-tables mysql -u root use mysql ...显示全部
3 年前发表 1699次浏览 0条评论 0次收藏
袁飞翔 移动开发
上周处理了一下群活动的badjs,第一步是摆脱 Script error. ,捕获异常栈,找到自己是错在哪里~ 分享一下这个步骤 异步的切入点: 1、XMLHttpRequest.prototype.send 2、setTimeout、setInterval 3、define、require 4、Zepto的事件绑定 on 、bind (另外要能off、unbind) 何时引入切入文件: 最简单的方法是在requirejs引入后立刻做define,require的切入, 在Zepto加载之后做on,bind的切入。或者在zepto引入之后做所有的切入。但这样无法对inline进去的代码做切入,比如预加载的代码。既然是移动端,使用 window.__defineSetter__ 去监听define,zepto的出现也许是最好的选择~ 下面是主要的代码: _.before(XMLHttpRequest.prototype, 'send', function() { if (this.onreadystatechange) { ...显示全部
3 年前发表 1900次浏览 3条评论 0次收藏
vienwu
javascript的出错我们应该都很熟悉,例如 xxx undefined , SyntaxError 等。 我们team将出现错误的javascript代码取名为badjs,也有一个开源的badjs项目,用于捕获和分析js错误,并提供了一些基础的报表数据分析。 捕获错误一般有两种方式: * 使用window.onerror()捕获全局的js错误信息 * 使用 try{...}catch(e){...} 包裹需要执行的代码,获取error对象的属性定位错误并上报 第一种方式最简单,但当执行的js代码和我们的站点在不同域即跨域时,由于浏览器的安全限制,onerror()方法只能捕获到一个固定的错误代码 Script error. 。 具体可参考这里: 点击查看 [http://www.whatwg.org/specs/web-apps/current-work/multipage/webappapis.html#runtime-script-errors] 我们团队目前的业务基本都会将静态资源部署到cdn服务器,和站点处于不同域,所以需要解决跨域问题。 ...显示全部
3 年前发表 2715次浏览 1条评论 1次收藏
莫卓颖 调试
可视化前端测 背景 相信进行过前端开发的同学都知道,前端测试不仅仅涉及到功能的测试,而且也需要考虑到界面样式测试、多浏览器兼容性测试、性能测试。本文主要讨论分析目前前端测试的现状,并讨论目前流行的测试工具,下篇文章将会介绍工具的使用方法 前端测试分类 前端测试 主要分三大方向测试,而这三大方向也分很多小方向测试,首先简单的介绍每个方向的概念 * 界面样式测试 固定界面样式测试 :主要针对文字内容不变的区域,例如页面的页头,页脚这类结构、内容不变的区域,而测试一般通过截图对比解决。 结构不变界面样式测试 :主要针对结构不变的区域,例如新闻区域这类结构不变,内容变化的区域,这类测试一般通过DOM元素对比解决。 计算样式测试 :主要针对计算样式不变的区域,这类测试一般通过比较计算样式解决,但是这种测试不推荐,因为测试成本比较大。 * 功能测试 服务器数据预期测试 :主要针对用户在前端界面进行某种操作后,提交数据给后台后,测试后台能否返回预期的数据 界面功能测试 :主要针对用户在前端界面进行某种交互性操作后,测试能否获取预期的功能、界面交互 * 多浏览器测试 ...显示全部
3 年前发表 3708次浏览 0条评论 2次收藏
link ,除了分享,也是知识管理。 CSS/重构
街景wap官网中有在视网膜屏幕中实现1px border的需求. 首先,来看下面视觉给的输出图中的border:[http://7tszky.com1.z0.glb.clouddn.com/Fg8OjQ3yHWrQyg0IA0kXG-GMn7uf] 从上面的视觉图可以看到,border是一根非常细的线。这篇文章将说明如何使用border-image实现在视网膜屏中1px的border效果。 注:因为硬件条件的限制,设备像素比(devicePixelRatio)为1的非视网膜屏手机无法达到这样的效果 首先准备一张符合你要求的border-image: [http://7tszky.com1.z0.glb.clouddn.com/FmfBKPpD4hdPyvQFjaCHAFBco9Jp] 通常手机端的页面设计稿都是放大一倍的,如:为适应iphone retina,设计稿会设计成640*960的分辨率,图片按照2倍大小切出来,在手机端看着就不会虚化,非常清晰。 同样,在使用border-image时,将border设计为物理1px,如下: 样式设置: .border-image-1px{ ...显示全部
3 年前发表 3754次浏览 0条评论 1次收藏
袁飞翔
怎么复现这个问题 [http://7tszky.com1.z0.glb.clouddn.com/FtVFnlJyJv3xcApUwBhvHqu9dy3G] 1、首先随意的滑两次,每次滑长一些,不用滑重(碎屏就不好了~~) 2、再点击一次,之后立刻停住~ o, no 你肯定在我说停住之后再点了一下,你觉得你并没有点到~ 反复试几次仔细发现,原来是要点两次! 为什么会这样 ZEPTO 发出YOU TAP ME的嚎叫可以用下面代码归纳 $(document) .on('touchstart', function() { // 打酱油 }) .on('touchmove', function() { deltaX += XXX; deltaY += XXX; }) .on('touchend', function() { if (deltaX < 30 >> deltaY < 30) { // you tap me ...显示全部
3 年前发表 1717次浏览 1条评论 0次收藏
梁伟盛 HTML&h5
据说本贵族圈每月不分享就邀请雪糕。。。所以分享下一个简单的Canvas插件 Canvas元素是HTML5的一部分,允许脚本语言动态渲染位图像,你可以使用javascript用它来绘制图形、图标、以及其它任何视觉性图像。它也可用于创建图片特效和动画。 (反正就是好东西) 既然是HTML5的特性,那必须是只有支持HTML5的浏览器才能使用,兼容性如下图: [http://7tszky.com1.z0.glb.clouddn.com/Fv-2A9lFuKVQqWrj-HmNoL77JD-2] -------------------------------------------------------------------------------- 使用到的API 参考资料~W3School [http://www.w3school.com.cn/tags/html_ref_canvas.asp] BEGINPATH 定义:开始一条路径,或重置当前的路径。 context.beginPath(); ...显示全部
3 年前发表 2884次浏览 3条评论 0次收藏
vienwu 移动开发
使用cocos2d-js版开发跨平台手游非常简单,并且在手机端也拥有不错的性能。但因为推出时间并不够久,用户也不够多,项目里仍然存在不少bug,这里介绍一个常见的bug和个人解决方案。 大段中文文字无法自动换行并且在不同终端行为不一致的BUG修复 这个bug具体表现为,js版的cc.LabelBMFont类实现存在缺陷。 该类中,判断是否自动换行时,首先检测字符是否结束或者是否存在空格,满足条件后才会换行。 当字符串为英文时,此逻辑可以良好执行,但面对中文时就不能正常处理了。 理论上,在 cocos2d-html5/cocos2d/labels/cclabelbmfont.js 大约736行 if (!self._lineBreakWithoutSpaces) { 应该判断是否为中文,或者在后续的寻找空格逻辑中,增加寻找中文的判断。 其次,cocos2d-js在手机端执行时,会将js代码编译为jsb字节码,调用的cc.LabelBMFont类是c++实现的,并且该类实现的算法和web端的实现不同,导致字体大小、换行行为不一致,尤其在单独控制某个文本字符颜色时,定位某个文本的索引都会不同。 ...显示全部
3 年前发表 2105次浏览 0条评论 0次收藏