Web前端 - 随笔分类(第3页) - 叶小钗

Require.js

摘要：前言前段时间粗略的扫过一次require.js，当时没怎么在意，结果昨天看到index里面的代码就傻了，完全不知道从哪开始看啦，所以require与backbone的学习还要加紧才行。由于前端所占业务越来越重，所以出现了模块化编程，但是js加载的先后顺序可能会给我们带来麻烦。有时候我们为了解决页面堵塞会采用异步加载js的方式，这种方式往往带来了一些不确定因素。为了解决这些问题，James Burke便搞了一个AMD（Asynchronous Module Definition 异步模块定义）规范异步加载模块，模块加载不影响后续语句执行。我们这里要学习的require.js就是一个实现了AMD的阅读全文

posted @ 2013-07-25 11:28 叶小钗阅读(20747) 评论(12) 推荐(17) 编辑

【web前端优化之图片模糊到清晰】看我QQ空间如何显示相片

摘要：前言此篇文章估计不会太长，有移除首页的风险，但是老夫（称老夫是因为我们真正的叶小钗其实都100多岁啦）是不会怕滴。所以，我来了哟！题外话：今天我们一起还看了一道前端的面试题，而后我本来还想多找几道来做做，但是没找到什么合适的，各位有什么好的前端面试题请给我留言哦，我们一起来分析面试题进步哟！前端时间，我与我们的产品有一次讨论，是针对图片压缩的，因为我对图片或者说PS这块是个小白，所以当时做了一个广告图片有100来k也直接给传上去了，结果被我们的同事搞起来一压缩，便只有50多k了，此次交流对图片压缩这块有了一点点心得，并且为第二次交流埋下伏笔，第二次便是图片由模糊变清晰的研究了。网页图片格式此处阅读全文

posted @ 2013-06-24 00:03 叶小钗阅读(18094) 评论(33) 推荐(33) 编辑

【position也可以很复杂】当弹出层遇上了鼠标定位（下）

摘要：前言接着昨天的内容写，为了保证内容连续性，这里还是把昨天的内容拷了过来。请用现代浏览器测试引出问题有图有真相，我们来看一个智联招聘里面经常出现的图层：他这个是没有什么问题的，我们来简单看看其实现：<div id="zbwJobSearch"> <div style="width: 710px;" class="sPopupDiv"> <div class="sPopupTitle213 sPopupTitle"> <h1> 选择职位</h1> <di 阅读全文

posted @ 2013-06-19 00:05 叶小钗阅读(4019) 评论(23) 推荐(16) 编辑

【position也可以很复杂】当弹出层遇上了鼠标定位（上）

摘要：前言周五时同事有一个关于弹出层的问题没有解决，但是面临下班问题，我有点不舒服，便叫回去周六过来解决，但是上周六病了，所以请了个假，于是故事发生啦。。。。今天上班时候，组员们卡到了那个地方，然后结果就是前端组拖慢了进度，额。。。。这是事实。于是早会结束，我便投入处理这个问题，因为这个项目原来是外包出去的，后面点要重构，现在只是优化工作，我便一直不太关注，有两个同事主要负责。但是今天一看到代码我就哭了。。。那家伙，这个还不单单是弹出层的问题呢，里面很有点东西！好了我们进入正题，来一起看看这个问题吧。请用现代浏览器测试引出问题有图有真相，我们来看一个智联招聘里面经常出现的图层：他这个是没有什么问题的阅读全文

posted @ 2013-06-18 00:38 叶小钗阅读(2269) 评论(11) 推荐(9) 编辑

【web前端优化之reflow】减少页面的回流

摘要：前言今天白天的时候我们一起学习了块级元素，晚上的时候本来想继续学习CSS，但是发现还是有一点累，所以我们还是来研究点大家都感兴趣的东西，前端优化。什么是reflow？这个单词字面意思就是回流，这里举一个例子：我们这里有个dom树： 1 <p> 2 <span class="title"></span> 3 <label class="checkbox"> 4 <input type="checkbox" value="足球" /> 5 red 6 < 阅读全文

posted @ 2013-06-10 20:21 叶小钗阅读(2658) 评论(6) 推荐(3) 编辑

【SEO】周末了，为了纪念明天上班，我们来一起看看SEO吧

摘要：前言这周上班上得够伤的啊！然后我上周又在加班，周日下午的时候头就开始有点疼了，于是便回去睡了一会，今天又到周五了，我发现长时间没有双休还是吃不消的，好在端午要来了，可以好好的调节一番。最近我开始真正的接触到SEO这块的东西。首先是上周，我们一个项目开发结束，让seo主管来看看有什么可以优化的，他来看了一会说了一堆东西，虽然我也不知道在说什么。。。但是总感觉不太爽，然后最经典一句话就是让把aspx的后缀统一改为html，说是什么aspx的不能识别什么的。我当时确实是没有理解到，后端的大哥听到后直接无视他了，让他去找产品负责人说，因为项目不是谁说改就改的，然后我手里唯一一个女程序员（真性情哦），还阅读全文

posted @ 2013-06-08 00:06 叶小钗阅读(3699) 评论(24) 推荐(17) 编辑

【web前端优化之图片延迟加载初探】中午不睡，下午崩溃

摘要：前言图片延迟加载技术其实应该被用得很多了，令人汗颜的是我居然之前一直没有用过，今天还是一个后端的大哥给提出来的，于是我便趁着中午休息的时间做了一下研究，这里提出来和大家讨论一下。PS：小生初学，各位有问题可以提出来讨论延迟加载原理延迟加载有多种实现，我选择了其中一种：为img标签src设置统一的图片链接，而将真实链接地址装在自定义属性中。所以开始时候图片是不会加载的，我们将满足条件的图片的src重置为自定义属性便可实现延迟加载功能当然还有其它的方案，里面我还比较青睐的就是将dom结构装入textare，满足条件时候将之载入，这里我便不讨论了。来看看我们用到的共用图片：问题其实这种方案不能说没有阅读全文

posted @ 2013-06-06 14:08 叶小钗阅读(10024) 评论(26) 推荐(39) 编辑

【web前端培训之前后端的配合（中）】继续昨日的故事

摘要：前言接着昨天的写：【web前端培训之前后端的配合（上）】以我们熟悉的Datalist说明问题吧经过昨天晚上的学习，我们形成了一个伪datalist，但是他没有事件绑定，甚至每个datait还多出了一个无意义的div！！！其实datalist多出一个div我是可以接受的，但是dataitem多出一个我这里就不太能接受了，所以里面还有很多东西可以继续深入。昨天说了那么久也没有扯到和后端的配合，今天需要补足，于是进入今天的学习吧。题外话今天碰到一个有趣的东西，也许各位已经知道了，但是我这里还是提出来，老夫脸皮厚是不怕人笑话的哟。解析HTML结构。加载外部脚本和样式表文件。解析并执行脚本代码。构造HT 阅读全文

posted @ 2013-06-06 00:23 叶小钗阅读(1636) 评论(4) 推荐(6) 编辑

【web前端培训之前后端的配合（上）】以我们熟悉的Datalist说明问题吧

摘要：前言白天的时间我们一起学习了bootstrap，虽然是刚开始学习，但是我们还是不得不承认他做得好，其中就我们到底是否使用一些朋友提出了自己的想法，我在讨论之中也受益啦！所以感谢各位的留言，我们不管用不用，还是得学习的，所以后面我们应该还会继续一起学习bootstrap。好了，进入今天的正题吧，我这边前端培训的时间被再次压缩了，压缩到只有6天啦，我是这么想的：第一天介绍CSS第二天介绍JS第三天介绍jquery第四天介绍jquery easyui第五天介绍ajax，并逐步将之前的成果形成最后的实例第六天便直接进行实例讲解，也就是今天的内容因为我们的后端同事是搞.net的，所以我这里搬出了大家都比阅读全文

posted @ 2013-06-05 00:37 叶小钗阅读(4460) 评论(26) 推荐(12) 编辑

各位加了一天班累了吧？那我们来继续未完的表单验证吧

摘要：前言接着昨天的写：工作了一个星期各位一定累了吧，那我们一起来表单验证一番吧！因为昨天写到后面确实写不动了，就停下了，今天我们继续吧，看看能不能解决昨天提出的几个问题，由于今天看了下别人写的插件，在里面找到了一些很不错的点子，这里也应用起来了，慢慢改造我们的程序吧。现状经过今天的奋战，我们的界面变成了这个样子啦：代码变成了这个样子：js代码/// <reference path="jquery-1.7.1.min.js" />(function ($) { var FormValidator = function () { this.regexEnum = { . 阅读全文

posted @ 2013-06-02 00:06 叶小钗阅读(3686) 评论(21) 推荐(26) 编辑

工作了一个星期各位一定累了吧，那我们一起来表单验证一番吧！

摘要：前言对于前端来说，没有做过表单验证是不可能的，但是，我们一般都是用的别人写好的插件，反正都周末了，我们今天晚上就试着看看自己能不能写一个出来试试呢？PS：该产物纯粹实验产品，丑陋之处请多见谅！验证的类型常见的表单验证一般有以下几个：① 非空验证② 身份证验证③ 数字验证（数字范围验证）④ 邮件验证⑤ 手机验证⑥ QQ验证⑦ 中文/英文用户名验证（可能含有AJAX类型验证）⑧ 密码验证/重复密码验证⑨ 单选框/下拉菜单/多选框验证......我那个去，简简单单一写怎么会有这么多东西呢！！！！看来今天晚上有点吃紧了，没事我们一步步来试试，确实不行也不会罚款，确实错了也没人责备，我们错得起。表单提示阅读全文

posted @ 2013-06-01 00:25 叶小钗阅读(4133) 评论(34) 推荐(42) 编辑

【web前端优化】前端无优化，庸人自扰之！

摘要：前言我发现一个人厉害不只是他厉害，他的名字也一定要跟着厉害才行，比如我刀狂剑痴叶小钗了，若是老夫叫做刀狂剑痴叶小草，估计就缺少气势了！！！又如百世经纶一页书，如果叫做百世经纶一本书估计也不会是绝代高手了！说了我给标题取了个很霸气的名字：“前端无优化，庸人自扰之”，其实我也不知道他是什么意思了，好了，啰嗦结束进入正题。最近遇到一个有意思的东西，是关于考试题相关的东东，其实就是我有很多试题，需要生成试卷让人来做了（真实应用有点不同），但是他却让我想起了我的初恋！我原来花了一年时间做的考试系统，所以有了这篇文章。PS：本人前端水平很水，在此就是大言不惭罢了，甚至想引出真正的高手解决问题，各位看到我的阅读全文

posted @ 2013-05-24 23:00 叶小钗阅读(3795) 评论(22) 推荐(9) 编辑

各位周末玩了一天累了吧，我们一起来做两道面试题吧（据说淘宝的哟）！

摘要：前言我的CSS一直是一块短板，原因就是前几年对CSS不重视，现在重视了项目经验又不足，所以在这块上我是下了很大功夫的，也看了一点书，做了点东西，希望在几个项目后CSS水平有所提高！完了，我最近在思考自己的CSS是短板，那么JS就是强项了吗？却发现自己前端水平貌似也不是很高，于是又开始走老路开始自卑起来了，于是这个时候我们要嘛做点实事做点项目，不然就在网上搞几道面试题来干干，这对个人提高很不错的。我之前有一段时间有点迷茫，并且找不到学习的方向与方法，却在一次面试过程中从新获得了专注的力量，所以我们不要小看了面试题带来的冲击，面试题是帮助前端人员提高的非常好的途径呢！我不CSS是短板吗，好的那就上阅读全文

posted @ 2013-05-18 17:20 叶小钗阅读(4351) 评论(26) 推荐(15) 编辑

Web前端优化初探，小弟抛砖引玉，期待高手共破难关！

摘要：前言其实没想过写前端优化这篇文章来的，因为我自知现在水平达不到这个高度！但是，你知道面试官很烦的，他每次面试非要问你浏览器兼容与前端优化......，所以我又不得不在这两个上面做一定研究。上面几个问题，没一定功力的前端不可能答得好的。对于优化这块东西，我也很多正在摸索，实在觉得现在拿不出手啊！但是时间不等人。比如这段时间参加的一个面试，面试官就非要将我做的页面想象得很卡，而且指定就是前端卡，让我优化，还问我平时会不会注意一些优化的东西。说实话，平时写代码时候，我惊奇的发现一个事实：1 我会不自主的将css写成一排：#tabs { border-bottom: 1px solid #1C87D5 阅读全文

posted @ 2013-04-26 12:57 叶小钗阅读(2127) 评论(14) 推荐(6) 编辑

一道面试题带来的前端优化——实现星星点评

摘要：前言人人都会失业，这不巧小的这里就准备失业了，团队解散不是病，突然解散要人命。我们工作中面对这种突然团队解散的问题，对职业生涯规划是有很大问题的，他可以让你一夜回到革命前：比如我几年的工龄（<=1）没了；比如我今年年底年终奖又只有半年的了，比如我在这里努力的结果付诸东流了......说来说去，就一个结果，小的需要找工作了。于是那天就把简历挂了出来，也恰好有个招聘，就过去了，应该说毫无感觉，带着及其失落的感情过去了......面试过程中的题基本全知道，不管有印象的没印象的，反正全知道......但是知道不等于了解，了解不等于深入！这里又要为自己平时的不积累埋单了。根据那次面试，我这里有两个阅读全文

posted @ 2013-04-21 15:43 叶小钗阅读(4812) 评论(42) 推荐(47) 编辑

Web前端浏览器兼容初探，小生浅文抛砖引玉，期待高手攻破难关！

摘要：前言浏览器兼容是前端开发人员必须掌握的一个技能，但是初入前端的同学或者其他后台web开发同学往往容易选择忽略，而形成两个极端：1 我最开始都是使用IE6，IE6上没问题，其它浏览器坑爹（多出现与前端后端一起搞的同学，小生2年前就这种状态，鼓励人家用ie6.。。。）2 我要遵循标准，我只要ff就好，IE就是坑爹的玩意，我不必去理他（小生一年前的心态。。。）现在看来，之前的想法都是不对的，我们诚然应该追求最新的浏览器使用最新的技术，但是渐进增强，向后兼容的思想一定要有，因为就现在IE6在中国的份额也是不容小视的。抛开之前的大道理，我们说点实际的问题，哪次前端面试不问兼容性问题？哪次我们又能回答的很阅读全文

posted @ 2013-04-21 11:57 叶小钗阅读(5946) 评论(27) 推荐(42) 编辑

Fiddler真乃前端大杀器！！！

摘要：前言在老夫还在搞服务器端时候，老夫觉得能读能改js代码就差不多了吧；当老夫刚刚踏入前端会想js能设置断点该多好呢？当老夫手拥firebug、google、ie浏览器开发插件（叫不出名字...）时，老夫是多么的高兴啊！！！但是有些项目就会让你不自主的感觉痛苦，因为改动非常痛苦！！！比如我对项目做了一点修改，但是我没办法在正式环境测试；换个方式，若是qq首页哪里出了js错误，要马上定位、马上解决该怎么办呢？前端杀器Fiddler其实老夫也是最近才开始使用该软件的，其实老夫很多不懂，但是我就用其中一点东西就好了，只一眼便已爱如心扉！！！先来个截图：请注意矩形框位置，我就会用这个。。。。大杀器在线编辑阅读全文

posted @ 2013-04-17 12:58 叶小钗阅读(11627) 评论(71) 推荐(28) 编辑

一次上机面试题带来的感悟【学习的感觉、学习的方法】

摘要：前言最近团队面临解散，上面感觉想把我们一刀切，当天心里就很郁闷，于是想到了换工作，哎不想换现在也不行了。。。。当时联系到一个我认为不错的大哥，他给了我一道题，我一看，感觉有点水平，大概和HTML5有关系，但是我工作中一直想学但没机会学习，现在也只能硬着头皮做做了。访问地址我给关了，今早一来，磁盘空间都要挂了，图片“应有尽有”，好吧，伟大的程序员不差...这是一道面试题此次考察题目：1.用户可以选择1个或多个图片进行上传，支持拖拽文件上传和弹出文件选择窗口2种方式；2.用户可以看见上传的过程，清楚每个文件上传的进度；3.上传后，用户可以选择不同的图片进行裁剪；4.裁剪选择区域的时候，用户可以查看阅读全文

posted @ 2013-04-11 14:07 叶小钗阅读(6690) 评论(47) 推荐(18) 编辑

基于jQuery的下拉菜单菜单【02】，诸位上眼！！！

摘要：前言接上次的话题，仍然是团队近期将会有大变化，最近确实有点蛋疼，对以后的规划神马的乱成一团，晚上也不想学习神马的了，有时候就什么都不做发现一晚上就莫名其妙的过去了......但是上班时候不行，没事必须找点事情来做，反正现在做的东西多少有点......，所以闲暇中提炼了**过程中觉得有意义的东西。上一版本上周这个东东就基本完成了，反正也是菜鸟水平的东西，献丑什么的也没时间怕了，这次就上次留下的几个问题做了简单处理，形成了今天的东西，若是再优化的话应该是性能上的东西了吧。① 菜单在窗口最下方拉长窗口问题:解决后：② 关于异步数据加载的问题：比如一个表格数据，每次鼠标移动上去才加载数据，生成菜单；我阅读全文

posted @ 2013-04-01 16:48 叶小钗阅读(2618) 评论(7) 推荐(5) 编辑

基于jQuery的下拉菜单插件，诸位上眼！！！

摘要：前言很久没有写博客了，话说真的工作后才发现很多需要学的，有很多不足。加之最近工作没有什么沉淀，现在团队又面临解散，反正闲着也是闲着，就自己写了个插件，反正水平就这样，当时自我总结吧！应用背景在我们工作中，经常会遇到这种需求：① 鼠标点击某个文本框时出现下拉菜单② 常用的操作鼠标划上出现下拉菜单③ 按钮类应用我们会用到这种功能往往原因是因为地方小了，按钮多了，这往往说明产品设计一般出问题了。。。但是，我辈屁民豪不关注产品（没资格插手），所以需要完成以上功能；其实总的来说，这些功能还是非常实用的。于是，为了应对以上场景，我工作中先是做了一个，然后又遇到了，然后又遇到了，所以最后就写了这么一个东西阅读全文

posted @ 2013-03-29 15:09 叶小钗阅读(2978) 评论(11) 推荐(4) 编辑

随笔分类 - Web前端