大前端 关注前端开发 Sat, 16 Jun 2018 01:50:16 +0000 zh-CN hourly 1 https://wordpress.org/?v=4.9.5 战狼级干货【从入门到精通前端系列视频教程】免费赠送 /6630.html /6630.html#comments Thu, 26 Apr 2018 13:31:42 +0000 /?p=6630 1. 学习前端有前途吗?有,但只属于实力派

每次遇到这样的问题,我都感觉非常的可笑,所谓前途其实本质上是由你的实力决定的,我面试过很多前端人员,对于那些一瓶子不满,半瓶子晃悠的人,我是不会录用的,只是浪费时间罢了,这就是无能者的前途。对于那些有真功夫的前端开发人员,我一般给他们的薪资都非常的高,因为他们值这个价。同样做前端为什么造就了这样两种不同的结果呢?答案是:你的实力,实力决定未来。

当然从整个行业的角度来讲,前端确实是很有前途的,里面的很多技术操作都很新奇,也非常有意思,全国各大城市对优秀的前端人员都处于一个争抢的状态,如今一半以上的APP都是采用Hybrid混合模式开发,即结合安卓和Web端技术开发。而纯 Web开发 的APP也不在少数,比如我们众所周知的 QQ 空间就是使用 Web前端 的React Native技术开发。除了APP,我们在手机端常看到的H5页面,也是主要运用了Web端的 HTML5 技术开发。 当然,Web前端现在也不仅仅局限于前端网页和APP,服务器端、桌面级应用甚至是VR都有涉及。

2.为什么你那么努力,却依然学不好前端开发?难道天生你材是炮灰吗?

这些年我走访过全国几百家高校,也去过很多相关机构,我发现了一个问题,很多人学不好前端开发,以山东济南的一个高校前端开发班为例,一个班级50个学生学习前端开发,最后毕业2年以后还在从事这个行业的才5个人,剩下的45个人都已经改行了,改行率高达90%。这是一个很有意思的数据,学了那么多年的专业,最后却是彻底的告别。我认真的反思过这个问题,为什么很多人学不好前端呢?一个方面现在很多高校以及培训机构其实就是垃圾,很多老师并没有项目开发的实际经验,他们也固守陈规,前端技术已经有了很大的发展和革新了,而他们却依然停留在老一套的技术层面,编的书籍也是一些老掉牙的知识,根本适应不了现在公司很多公司的需求。另一个层面,现在很多前端老师无法从一个系统的层面,思维的层面,全局的层面,来对前端技术进行一个有深度,有广度,通俗易懂的讲解,学生听的一愣一愣的,越学越迷茫。学生就是一张白纸,老师怎么画,他们就是什么样的

3. 要么不学前端,要么我就让你们学的无敌,因为我们不一样。

我不喜欢说太多废话,我直接开门见山的说,为了解决目前前端学习中的弊端,让真正想学前端的小伙伴,学有所成,我做了一个前端直播间,每天都会有前端行业的高手分享相关知识,我把直播间分成了三个频道,一个是针对没有基础的小伙伴,可以到零基础直播间频道,解决你的基础问题。剩下的两个是前端中间直播频道和高级直播频道,让你们更有针对的解决自己的问题。还有一个惊喜的点是:你来听就可以了,不需要你花费什么,而且每天下午和晚上都有,你用电脑或者智能手机都可以在线学习,当然技术内容都是现在最新的实用技术,我们以讲老掉牙的技术为耻辱。很多人问我为什么这么雷锋?是真的吗?当然是真的,我们的运营模式是做平台的。把学员量做起来。 我的目标是:要么不让你们学,要么就让你们学的很无敌,这才是人生的价值,活出属于自己的精彩。

4. 你来,或者不来,免费前端直播间和教程都在这里,给你插上飞翔的翅膀

加前端教程QQ:206892501  送以下学习大礼包:

免费获取【100G从入门到精通前端视频系列教程】
免费获取【50本前端系列电子书教程】
免费获取【每日前端直播课听课权一年】

]]>
/6630.html/feed 6
chrome transition闪烁BUG /6597.html /6597.html#comments Fri, 30 Mar 2018 15:34:13 +0000 /?p=6597     前段时间写鼠标悬停元素上移效果时,当鼠标恰好放在元素边缘时,chrome出现一直上下移动的问题,其他浏览器表现正常。原因尚不知,可能是实现方式不对吧(PS:使用top实现),虽然不知道原因,但是问题还是要解决的,分享一个能绕开的实现方式。

    说到鼠标悬停元素上移,首先想到的是鼠标悬停时元素上移,然后应用transition来实现渐变效果。

    1、使用top实现(该实现方式chrome浏览器闪烁,避免使用)

<!--html-->
<div class="test"></div>

/*css*/
.test {
     position: relative;
     top: 0; 
     transition: top 0.5s;
 }

.test:hover{
     top: -10px;
 }

    2、使用transform实现(推荐)

<!--html-->
<div class="test"></div>

/*css*/
.test {
     transform: translateY(0);
     transition: transform 0.5s;
 }

.test:hover{
     transform: translateY(-10px);
 }
]]>
/6597.html/feed 3
HTML5-语义化 /6549.html /6549.html#comments Mon, 26 Mar 2018 14:54:47 +0000 /?p=6549     距HTML5标准规范制定完成并公开发布已经有好些年了,面试时也少不了要问对HTML5语义化得理解。但是在实际运用时,真正使用HTML5标签来开发的似乎不是很多(ps:查看了几个巨头公司网站推论),可能一部分原因是仍有部分用户使用在使用低版本浏览器。

    但是就我个人而言,因选取一些标签时会比较纠结,所以仍使用了div。(PS:正是因为这样,才有了这篇文章的,没错,以后要注意语义化了)

    什么是语义化?就是用合理、正确的标签来展示内容,比如h1~h6定义标题。

    语义化优点:

  • 易于用户阅读,样式丢失的时候能让页面呈现清晰的结构。
  • 有利于SEO,搜索引擎根据标签来确定上下文和各个关键字的权重。
  • 方便其他设备解析,如盲人阅读器根据语义渲染网页
  • 有利于开发和维护,语义化更具可读性,代码更好维护,与CSS3关系更和谐。

    今天先介绍主体结构标签,如图所示:

html5

    1、<header>

    <header>定义文档或者文档的部分区域的页眉,应作为介绍内容或者导航链接栏的容器。

    在一个文档中,您可以定义多个<header>元素,但需要注意的是<header>元素不能作为<address>、<footer> 或 <header> 元素的子元素。

    2、<nav>

    <nav>描述一个含有多个超链接的区域,该区域包含跳转到其他页面或页面内部其他部分的链接列表。

    在一个文档中,可定义多个<nav>元素。

    3、<main>

    <main> 定义文档的主要内容,该内容在文档中应当是独一无二的,不包含任何在文档中重复的内容,比如侧边栏,导航栏链接,版权信息,网站logo,搜索框(除非搜索框作为文档的主要功能)。

    需要注意的是在一个文档中不能出现多个<main>标签。

    4、<article>

    <article>元素表示文档、页面、应用或网站中的独立结构,是可独立分配的、可复用的结构,如在发布中,它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件,或者其他独立的内容项目。

    当<article>元素嵌套使用时,则该元素代表与外层元素有关的文章。例如,代表博客评论的<article>元素可嵌套在代表博客文章的<article>元素中。

    5、<aside>

    <aside> 元素表示一个和其余页面内容几乎无关的部分,被认为是独立于该内容的一部分且可以被单独的拆分出来而不会影响整体。通常表现为侧边栏或嵌入内容。

    6、<footer>

    <footer>定义最近一个章节内容或者根节点元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。

    使用footer插入联系信息时,应在 footer 元素内使用 <address> 元素。

    注意不能包含<footer>或者<header>

    7、<section>

    <section>表示文档中的一个区域(或节),比如,内容中的一个专题组。

    如果元素内容可以分为几个部分的话,应该使用 <article> 而不是 <section>。
不要把 <section> 元素作为一个普通的容器来使用,特别是当<section>仅仅是为了美化样式或方便脚本使用的时候,应使用<div>。

    这几个标签,比较容易混淆的是<section>、<article>,所以这里特别说明:

    “Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the elemen.”

    通俗来说就是<article>比<section>更具有独立性、完整性。可通过该段内容脱离了所在的语境,是否完整、独立来判断。

]]>
/6549.html/feed 1
Windows node版本管理器–nvm /6554.html /6554.html#comments Sat, 24 Mar 2018 14:42:47 +0000 /?p=6554     众所周知,node版本众多,但是由于项目需要或其他原因我们需要切换node版本,这个时候就需要node版本管理器啦。目前比较流行的两个是‘n’和‘nvm’(ps:试了‘n’,未安装成功,查了一下据说不支持window),所以改用nvm了,所以就介绍这个了。

    NVM for Windows请戳–>nvm-windows,需要注意的是安装前需要卸载现有的nodej.s和npm安装位置。

    常用命令:

 nvm list        /*列出node.js列表*/
 nvm on          /*启用node.js版本管理*/
 nvm off         /*禁用node.js版本管理(不会卸载任何东西)*/
 nvm use <version>     /*切换到使用指定的版本*/
 nvm version           /*显示当前正在运行的NVM for Windows版本*/

    这里只列举了几个常用命令,更多命令见nvm-windows

]]>
/6554.html/feed 1
canvas小tip–下载二维码、图片加水印 /6531.html /6531.html#respond Tue, 20 Mar 2018 14:36:25 +0000 /?p=6531     昨天介绍了一个生成二维码的插件QRCode.js,它是借助HTML5 Canvas绘制而成。所以,今天的主角就是canvas啦–canvas的实际应用。

    一、下载二维码(查看如何生成二维码

    HTMLCanvasElement提供了toDataURL方法,该方法返回一个包含被类型参数规定图像表现格式的data URI。通过该方法我们就可以生成二维码图片并下载了。示例如下:

/*html*/
<div id="qrcode">div>
<a href="/javascript:;" download="二维码" id="down">下载二维码</a>

/*js*/
var canvas = document.getElementsByTagName('canvas')[0];
var downImg = document.getElementById('down')
img.href = document.getElementsByTagName('canvas')[0].toDataURL('image/png')

    二、图片加水印

    利用canvas的fillText和drawImage方法可以轻松实现给图片加水印(水印的细节可自行设置)。示例如下:

/*html*/
<canvas id="canvas"></canvas>

/*js*/
var img = new Image();   // 创建img元素
var canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d');
img.src = 'myImage.png';

img.onload = function(){
ctx.drawImage(img, 0, 0);
  ctx.font="30px yahei"; //设置水印文字
  ctx.fillText("大前端", 1100, 260)
}

    今天暂时写到这里,欢迎分享关于canvas的其他应用。

 

]]>
/6531.html/feed 0
分享一个生成二维码的插件–QRCode.js /6518.html /6518.html#respond Mon, 19 Mar 2018 14:33:06 +0000 /?p=6518 随着移动设备的普及,日常生活中随处可见二维码,大有一码走天下之势。那么前端如何来生成二维码?

通过QRCode.js我们可以快速生成二维码啦,一起来看看怎么使用吧。

1、引入插件

    /*html*/
    <div id="qrcode"></div>

    /*js*/
    <script src="qrcode.js"></script>

2、基本用法

    var qrcode = document.getElementById('qrcode')

    /*直接生成二维码*/
    new QRCode(qrcode, '')

    /*也可以配置二维码的宽高等*/
    var qrcodeObj = new QRCode('qrcode', {
        text: '',
        width: 256,
        height: 256,
        colorDark : '#000000', //前景色
        colorLight : '#ffffff'  //背景色
    })

3、API

  • 设置二维码内容–makeCode
    qrcodeObj.makeCode('/?p=6518&preview=true')
  •  清除二维码–clear
    qrcodeObj.clear()

 

 

 

]]>
/6518.html/feed 0
推荐一个免费7天天气预报API服务:和风天气 /6487.html /6487.html#comments Mon, 08 Jan 2018 06:18:58 +0000 /?p=6487 首先,这不是软文。

最近的一个项目中需要获取国内城市的7天内天气预报,说实话,目前的开源环境中仅存的天气预报API太少,找了许久才发现知乎里面提到的“和风天气”,或许你也曾遇到过这样的问题。

和风天气需要注册成为认证开发者才能获得免费7天天气预报的资格,注册还是很简单的,我这边申请的认证开发者一天就通过了。

和风天气认证开发者免费天气服务:

  • 国内3181+海外4000热门
  • 7天天气预报
  • 实况天气
  • 逐三小时预报
  • 生活指数(基础8项)
  • 空气质量实况(国控站点)
  • 每天访问量:14959次
  • 稳定性:99%
  • 技术支持:邮件

上面是开发者能够取得的API,有点功力的开发者就直接上手code了,因为文档还是很全的,而且都是json数据格式,还有提供各种天气情况图片(虽然不怎么地)。

值得注意的是免费API有访问限制,每天不得超过14959次(这个数字很奇葩,着实没有看出为什么不弄个整数)。

这也就意味着你需要做天气数据缓存,如果对天气实况要求不高的话,可以选择3个小时缓存一次API数据,这样可以大量减少对API接口的请求。至于如何做数据缓存,有很多种方式,比如:文件存储、数据库存储等等。

附上PHP实例:

function requestByKey(){
    //准备请求参数
    $key ="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX";
    $location = "北京";
    $curlPost = "key=".$key."&location=".urlencode($location);
    //初始化请求链接
    $req=curl_init();
    //设置请求链接
    curl_setopt($req, CURLOPT_URL,'https://free-api.heweather.com/s6/weather/now?'.$curlPost);
    //设置超时时长(秒)
    curl_setopt($req, CURLOPT_TIMEOUT,3);
    //设置链接时长
    curl_setopt($req, CURLOPT_CONNECTTIMEOUT,10);
    //设置头信息
    $headers=array( "Accept: application/json", "Content-Type: application/json;charset=utf-8" );
    curl_setopt($req, CURLOPT_HTTPHEADER, $headers);
    curl_setopt($req, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($req, CURLOPT_SSL_VERIFYPEER, false);
    curl_setopt($req, CURLOPT_SSL_VERIFYHOST, false);
    $data = curl_exec($req);
    curl_close($req);
    return $data;
}

扩展:如果你想让天气显示的高大上,可以借助百度echarts图标工具来美化和优化交互体验。

]]>
/6487.html/feed 1
完美快速解决百度分享不支持HTTPS的问题 /6460.html /6460.html#respond Thu, 21 Sep 2017 07:05:00 +0000 /?p=6460

百度分享不支持HTTPS这件事由来已久,我之前向百度分享提交过这个问题,无果!但近期themebetter主题用户咨询的比较多,我们就总结了解决方案。

第一步:下载百度分享必备文件

点此下载static.zip,将解压(解压密码:themebetter)后得到的static文件夹上传到网站根目录(注:域名/static)。

最后一步:修改百度分享代码

完美快速解决百度分享不支持HTTPS的问题

删除百度分享代码中的以下网址

http://bdimg.share..com

至此,你就解决了百度分享不支持HTTPS的问题。

转载自:themebetter » 完美快速解决百度分享不支持HTTPS的问题

]]>
/6460.html/feed 0
腾讯 Web UI 解决方案 QMUI Web —— 探索与沉淀 /6447.html /6447.html#comments Fri, 08 Sep 2017 13:24:20 +0000 /?p=6447 作者:李浩成(Kayo),腾讯广州研发部 UI 工程师。

经过长时间的打磨迭代,QMUI Web 作为腾讯广研 QMUI 团队的一个开源项目,正式发布到 Tencent Github。QMUI Web 是一个 Web UI 的解决方案,从零开始,由编码规范,到组件和工具方法的制作,再到工作流的整合,不断在迭代,也不断在优化,走过了不少的路。趁着发布的机会,我们正好回顾这一路的探索过程,分享其中的点滴,也希望能借此让大家更了解 QMUI Web。

 

背景

2014 年中,QMUI 团队支持的主要项目是 QQ 邮箱,Web 端的邮箱是个庞大的项目,但其并没有统一的 UI 基础库,多年的高速迭代使得项目的 UI 代码变得混乱,各个模块之间各自开发,除了在代码层面表现出混乱和不可控之外,表现层面也并没有很好地统一起来。因此,项目急需一套统一的团队编码规范以及一个 UI 基础库。

恰好,这个时候 Sass 等 CSS 预处理器已经发展成熟,自动化工作流的工作模式也日趋完善,因此,我们决定基于这些技术制作一套通用于不同项目的 Web UI 框架。框架的场景定位很明确:需要控制整体样式,并且可以适应频繁迭代打磨的大型项目。所以,这套即将诞生的 Web UI 框架的特性也很明确:需要方便地控制项目的整体样式,应对频繁的界面变动,并保持项目质量稳健。

此后经过三年的发展,QMUI Web 最终发展为包含编码规范、样式工具方法与样式管理、内置工作流,配套的 GUI 桌面 App,以及拥有完整文档的解决方案。

 

设计理念

在制作框架的过程中,我们把框架需要的特性进行整理和思考,形成了一套对于该框架的设计理念,在这些设计理念之中,最核心的关键为通用于多个项目,高效迭代和保持代码稳健,框架的设计也遵循这三个核心点,体现在框架上,具体就是:

框架和组件需要剥离业务。作为 UI 框架,框架内整合的组件和样式必须有能力剥离业务,才能跨项目使用。

能轻易控制整体样式。需要高效地迭代项目,样式的整体控制必不可少。

保持代码稳健。

而具体到代码层面,则可以归纳为两个方面:

Class-name 命名规范。

基础样式配置与半封装组件。

 

Class-name 命名规范

作为一个 Web UI 框架,编写代码主要是 CSS 与 HTML,而提到 CSS 与 HTML 的编写,首先要处理的是 Class-name 的命名,在过往的开发中,Class-name 的命名并没有固定的规范,开发人员各自进行开发,一个项目经过长时间的迭代后,经常会遇到如命名冲突,命名混乱等问题,这使得项目的迭代变得笨重,也不好维护。因此,我们需要一套具有如下特点的 Class-name 命名规范:

命名有迹可循,容易编写。

避免命名冲突,包括内部多人协作命名冲突,以及外部库引入时的被动污染。

命名具有语义,能晰地描述整个页面,方便理解上下文。

因此,最终 QMUI Web 制定了一套以命名空间为核心的命名方式,这个命名方式主要由“命名空间”,“业务与组件的拆分”,“精确表达 View”三个部分构成。

 

命名空间

一个 QMUI Web Class-name 应该包含一个命名空间,也是 Class-name 的开头,如果是业务,则以业务内容为命名空间,如果是公共组件,则全局使用项目的名字(或缩写)为命名空间。如一个名为 Demo 的项目,项目缩写可以是 dm,那么该项目下的项目组件和公共类可以这样命名: dm_btn(按钮)、dm_icon(图标)、dm_ipt(输入框)、dm_toolbar(工具栏)。

逻辑模块命名以具体业务作为前缀,如简历(resume)功能里面的非公共组件部分,以 resume_ 作为前缀(resume_mod、resume_text、resume_list),个人信息(profile)页面的非公共组件部分,则可以以 profile_ 作为前缀(profile_statge、profile_stage_title)。

命名空间作为一种基础的隔离,把组件与业务,以及不同的业务之间的 Class-name 命名隔离开来,避免冲突,而后父子元素之间逐级展开编写,保证了项目内多人协助不易冲突,同时命名带有语义,也方便理解和阅读。

业务与组件的拆分

接着,QMUI Web 中把项目的代码划分为通用组件(跨项目的组件),项目全局组件(适用于某个具体项目),业务组件(适用于某个业务),以及业务逻辑代码,这样区分出4个颗粒度可以使得代码更容易被组织和复用,一个模块随着设计元素迭代,也可以在这4个颗粒度之间进行迭代,从而使得模块在迭代时会更加稳健。而 QMUI Web 框架中的组件应该只收纳通用组件,即跨项目组件。

 

精准表达 View

精准表达 View 是指在命名 DOM 节点时要明确这是一个怎样的 View,这里的 View 指的就是 UI 层面上这个元素表示的含义,常见的场景是,一个命名为 resume_head 的元素,在经历多次迭代后实际在代码中却充当了页脚,这样的命名在多人协作时很容易给后面的开发者造成困扰,而精准表达 View 则要求我们明确一个 UI 元素的含义,并在命名时准确地表达。

 

基础样式配置与半封装组件

前面的“Class-name 命名规范”主要是在规范层面上去实践 QMUI Web 的核心理念,而接着更多地就是在代码层面上去实践了,主要包括三点:

半封装组件,即面向项目的组件。

使用组合而不是继承。

颗粒度的把控。

 

半封装组件即面向项目的组件

前文提到,QMUI Web 把组件划分为通用组件,项目全局组件,业务组件三种组件,而 QMUI Web 框架收纳的则是通用组件,也是跨项目的组件,但每个项目的 UI 表现并无关联,如何处理跨项目组件就成为了一个问题。为此,QMUI 在处理组件时采取的是“半封装”的处理方式,QMUI 框架封装的是代码,所谓半封装,即封装那些与项目具体 UI 表现没有必然联系的代码。例如按钮组件,QMUI Web 中只封装了文字居中对齐,鼠标手型,浏览器样式重置,低版本 IE 兼容性处理等代码,而常用的样式如边框、背景、字体表现等,都抽取成变量控制,这些组件的变量最终都汇集到一个配置表 Sass 文件中,配合全局的颜色变量、字体变量等变量,就可以做到跨项目抽取组件,每个新项目只需要关注具体 UI 表现而无需再处理各种常见的 UI 问题,同时方便地通过调整这些变量的值而快速修改整个项目的样式。

 

组合而不是继承

在处理组件时,继承的方式是指一个组件类承担复杂的功能,而组合的方式则是把组件类拆分成一个基类,以及多个子类,每个子类承担的功能不重复,对于我们的主场景——频繁迭代,保持稳健,显然组合会更加适合,这种方式避免了在频繁的迭代中需要不断修改组件类,每次迭代只需要修改对应的子类即可。

 

颗粒度

对于组件的抽取,时常要考虑颗粒度的划分,颗粒度本身就是一个比较开放性的问题,在这里与大家分享一些沉淀的经验:

抽取组件以 UI 表现为区分,例如一个删除按钮,是以删除 icon + 删除文案作为内容的,但在表现上它就是一个带 icon 的文字按钮,因此就抽取出一个支持 icon 的文字按钮,而不用只局限于按“删除”这个业务来命名组件。

抽取组件可以选择较大的颗粒度,也可以选择较小的颗粒度。颗粒度较大的组件实现复杂,能对应复杂的场景,但扩展性也会因此下降,而颗粒度较小的组件则实现简单,能轻松实现一个主场景,但又方便扩展,能灵活地应对变化。因此建议是像按钮、输入框、下拉菜单这类通常位于页面 DOM Tree 末端的元素可以抽取成尽量简单的组件,同时通过扩展的方式去处理各种场景差异。而其他复杂的组件则可以专注于一个业务,不必过多地考虑不同的场景,否则组件很容易变得难以维护。

以上便是 QMUI Web 具体的设计理念,通过命名规范、基础样式配置与半封装组件来保证多人协作时的高效率与可维护性,也使得一个 UI 框架能为不同的项目服务。

 

具体组成

作为一个框架,QMUI Web 主要提供了四种能力来提升 UI 开发的效率与质量,对应前文提到的框架设计理念,QMUI Web 提供的这些功能都是为了帮助开发者方便地控制项目整体样式,应对频繁变动,同时保持代码稳健。

 

基础配置与组件

前文提到,框架中会有一份配置表,是各种 Sass 的变量,这些变量控制了一个网页基本的字体样式,链接颜色,通用组件的样式配置等基础样式,在创建一个新项目时,应该先根据设计稿配置好这些信息,当这些信息配置完成,那么一个项目的基本样式就可以快速实现了。例如下图中这些配置属于 QMUI 通用配置,通过修改这些配置则可以快速修改项目的字体策略、正文字体大小,链接颜色等 UI 常用的 CSS 属性。

 

内置工作流

QMUI 中包含一个基于 gulp 的内置工作流,用于快速解决大量重复劳动力的工作,从而提升效率。QMUI 的 gulp 中预先实现了监控 Sass 文件并自动编译和优化,雪碧图处理,模板 include 能力(可以传参和使用条件判断),浏览器自动刷新,图片压缩,文件清理,文件合并以及自动变更等能力。

 

Sass 增强支持

QMUI 中提供了大量基于 Sass 的 CSS 预处理的方法,包括 CSS Reset,一些常见的 CSS 类(例如清除浮动),计算长度值的简便方法(例如获取 padding 在某个方向的值,计算两个长度值的中间值),快速实现一些样式效果的工具方法(例如实现 border 三角形,适应多倍屏幕的 1px 边框等),这些都是用于提高样式开发的效率和质量。

 

扩展组件

扩展组件并不是由 QMUI Web 的主源码提供,而是由 Demo 提供,通常是因为这类组件结构较复杂,因此业务性无法很好地剥离,从而不能抽取成公共组件,因此这类组件就放在一个 Demo 页,以参考组件的形式帮助开发。

 

GUI

我们提供了一个用于管理 QMUI Web 项目的桌面 App,在代码层面它独立于 QMUI Web 的源码。它通过 GUI 界面处理 QMUI Web 的服务开启/关闭,并提供了编译提醒,出错提醒,进程关闭提醒等额外的功能,在处理多项目,多分支时能更方便地进行开发。

 

优化和开源

在经历较长时间的迭代后,QMUI Web 也逐渐完善起来,此时我们也开始将 QMUI Web 进行开源。开源意味着 QMUI Web 会进入更加全面的环境中去打磨,在框架的非主体内容如代码规范、注释、文档上面也需要更费心思,考虑的点也需要更加周全。这对团队来说无疑是个很好的机会,可以有更多的渠道审视框架,吸收建议,持续进行优化。

在加入开源的大环境后,我们从 Github、社区论坛中都获取了不少建议,除了 bug 的反馈外,也指出了一些待完善的地方和提出一些优化的解决方案,从而使得 QMUI Web 注入了更多活力,因此我们也逐步进行了如“自动化测试用例”、“gulp 结构化”,“引入 SassDoc 自动化生成文档”,“编译 Sass 时引入增加更新”等优化,其中不少优化点我们也在项目的 Github Wiki 中进行了详细的分享,有兴趣的用户可以自行浏览。

 

总结与展望

至此,QMUI Web 发展为现在这套完整的方案,也终于开源到 Github Tencent 与大家分享,我们期望通过开源与大家进行更多的交流,也使得 QMUI Web 进入更加全面的环境中去打磨,形成对代码规范、注释、项目文档感谢公司与部门给我们提供了一个平台,可以在大型项目中经历迭代和沉淀。开源只是一个开始,我们后续仍会不断进行探索和优化,期待更好的 QMUI Web。

关注 QMUI Web,来 Github 给我们 star 吧!https://github.com/Tencent/QMUI_Web

]]>
/6447.html/feed 2
东莞微餐时代招聘前端开发(7K-18K) /6378.html /6378.html#comments Tue, 15 Aug 2017 23:00:38 +0000 /?p=6378 微餐时代信息科技有限公司,总部位于深圳南山前海,研发中心位于东莞松山湖,是国内领先的基于云端技术的SaaS餐饮管理软件服务公司。凭借管理者对餐饮行业实体经营的丰富经验,依托IT及互联网技术,打造出集餐饮行业品牌管理体系、服务体系、销售推广体系等服务为一体的全方位行业解决方案。

我们绝对是一群吃货,对中国餐饮行业充满无比的热爱,也是在实践中不断积累沉淀,而诞生出来的专注与专业的人才,我们的愿景是助力餐饮行业进入新的发展平台,助力更多餐厅做出能让您感动的食物与服务。成为最专业的餐饮行业信息化服务商。

我们的产品:微餐时代智慧餐厅云系统。

岗位职责:

  • 使用最新的 Web 前端技术负责产品的开发工作,包括前端js、html5开发工作;
  • 持续优化前端页面体验和访问速度,搭建高性能、高可用和安全的前端技术架构。

任职要求:

  • 本科及以上学历;3年以上相关工作经验;
  • 熟悉vue开发,有vue相关项目开发经验;
  • 熟悉各种Web客户端,尤其是主流移动端浏览器的开发模式和特性;
  • 精通HTML、JavaScript、Ajax、CSS等Web开发技术;
  • 熟悉HTTP协议,了解TCP/IP的基本工作原理;熟悉常用WEB开发调试工具;
  • 有移动端前端开发经验者这优先;对于大型Web站点性能问题的定位和解决有经验者优先。

福利待遇:

双休,5个工作日,每天8小时工作制(遇法定节假日按照国家有关通知规定执行)。

工作时间(周一至周五)9:00-18:00,其中12:00-13:00 为午餐及午休时间(15:30 全体员工休息活动20分钟)。

按地方政策申报缴纳五险一金费用(五险一金包括:养老保险、医疗保险、失业保险、工伤保险、生育保险、住房公积金)。享有法定假、年休假、病假、婚假、丧假、产假等带薪假期。

公司每季度提供专项经费开展团队活动、或部门聚餐,每周更有时令水果供享用。公司办公室内更设有:休闲咖啡吧、电影投放、每周一次电影大片欣赏,丰富员工业余生活。

联系方式:

hr邮箱:hr@weicantimes.com
联系电话:0769-33385528(商小姐)
联系QQ:532499061
邮件标题格式:姓名-岗位-学校-专业-年龄
招聘程序:接收投递简历-预约电话面试-通知面谈-商定offer-入职
公司地址:东莞松山湖高新技术产业开发区工业南路8号创投大厦1层101室
官网:www.weicantimes.com

]]>
/6378.html/feed 1