金沙国际官网_金沙国际平台登录

因为这个金沙国际官网_金沙国际平台登录网站与很多的大型澳门赌场都有合作,金沙国际官网_金沙国际平台登录尽职尽责,高效执行,保持好奇心,不断学习,追求卓越,点击进入金沙国际官网_金沙国际平台登录马上体验吧,所以现在也正式地开始了营业。

您的位置:金沙国际官网 > web前端 > h5开发相关内容总结,前端重构方案了解一下

h5开发相关内容总结,前端重构方案了解一下

发布时间:2019-11-06 06:40编辑:web前端浏览(63)

    2. 渐进渲染

    首屏想要更快渲染,还要确保文档加载的CSS和JS尽量少,因为它们会阻塞文档加载。所以我们尽可能延迟加载非关键组件。比如:

    • 延迟非默认路由

    单页应用有很多路由组件。所以除了默认跳转的路由组件,将非默认路由组件打包成单独的chunk。使用import()的方式动态加载。只有命中该路由时,才加载组件。比如:

    JavaScript

    const AsyncComp = () => import(/* webpackChunkName: "AsyncCompName" */ 'AsyncComp.vue') const routes = [{ path: '/some/path', meta: { type: 'sharelink', isValid: true, listKey: 'sharelink' }, component: AsyncComp }] ...

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    const AsyncComp = () => import(/* webpackChunkName: "AsyncCompName" */ 'AsyncComp.vue')
    const routes = [{
      path: '/some/path',
      meta: {
        type: 'sharelink',
        isValid: true,
        listKey: 'sharelink'
      },
      component: AsyncComp
    }]
    ...
    • 延迟不重要的展示型组件

    这些组件其实可以延迟到主要内容渲染完毕再加载。将这些组件单独打包为一个chunk。比如:

    JavaScript

    import(/* webpackChunkName: "lazy_load" */ 'a.js') import(/* webpackChunkName: "lazy_load" */ 'b.js')

    1
    2
    import(/* webpackChunkName: "lazy_load" */ 'a.js')
    import(/* webpackChunkName: "lazy_load" */ 'b.js')
    • 延迟低频的功能

    如果某些功能属于低频操作,或者不是所有用户都需要。则可以选择延迟到需要的时候再加载。比如:

    JavaScript

    async handler () { await const {someFunc} = import('someFuncModule') someFunc() }

    1
    2
    3
    4
    async handler () {
      await const {someFunc} = import('someFuncModule')
      someFunc()
    }

    4.为自己的页面设置最大宽度和最小宽度

    如果我们使用的是rem 单位,使用 js 动态计算font-size 值的话,我们可以无限适配最大和最小的终端屏幕。但是当用户的屏幕超过一定的尺寸以后还继续显示h5页面的话对用户会很不友好。
    我们参看下京东和淘宝的h5 页面

    图片 1
    图片 2

    我们看到了都是定义了页面的最大和最小宽度。这样在屏幕超过一定的尺寸以后可以更友好的展示(当然这不是必须的)。

    我给自己的产品页面定义的最大的宽度和最小宽度分别是:

    CSS

    { max-width:640px; min-width:320px; }

    1
    2
    3
    4
    {
        max-width:640px;
        min-width:320px;
    }

    2.7前端安全

    • 2.7.1 XSS

    XSS是指浏览器错误的将攻击者提供的用户输入数据当做JavaScript脚本给执行了
    解决办法:校验用户输入,特殊字符进行转义
    Vue 双花括号自带过滤功能

    • 2.7.2 本地存储数据泄露

    本地存储的所有数据就都可能被攻击者的JS脚本读取到,所以敏感、机密信息都不建议在前端存储
    const常量 let 块级作用域避免代码习惯不佳导致的作用域混乱问题

    1. HTML瘦身

    在采用组件化开发之前,HTML中预置了许多标签元素,比如:

    JavaScript

    <button data-cn="del" class="del">删除</button> <button data-cn="rename" class="rename">重命名</button> ...

    1
    2
    3
    <button data-cn="del" class="del">删除</button>
    <button data-cn="rename" class="rename">重命名</button>
    ...

    当状态改变时,通过JS操作DOM来控制预置标签的内容或显示隐藏状态。这种做法不仅让HTML很臃肿,JS跟DOM的紧耦合也让人头大。改成组件化开发后,将这些元素统统删掉。

    之前还使用了很多全局变量存放服务端输出的数据。比如:

    <script> var SYS_CONF = { userName: {%$userInfo.name%} ... } </script>

    1
    2
    3
    4
    5
    6
    <script>
        var SYS_CONF = {
            userName: {%$userInfo.name%}
            ...
        }
    </script>

    随着时间的推移,这些全局变量越来越多,管理起来很费劲。还有一些已经废弃的变量,对HTML的体积做出了“贡献”。所以重构时只保留了必需的变量。更多数据则在运行时加载。

    另外,在没有模板字面量的年代,HTML里大量使用了script标签存放运行时所需的模板元素。比如:

    <script type="text/template" id="sharePanel"> <div class="share"> ... </div> </script>

    1
    2
    3
    4
    5
    <script type="text/template" id="sharePanel">
        <div class="share">
            ...
        </div>
    </script>

    虽然上线时会把这些标签内的字符串提取成JS变量,以减小HTML的体积,但在开发时,这些script标签会增加代码阅读的难度,因为要不停地切换HTML和JS目录查找。所以重构后删掉了大量的<script>标签,使用vue的<template>以及ES6的模板字面量来管理模板字符串。

    8.box-sizing 的使用

    解决盒模型在不同浏览器中表现不一致的问题。但是仍然会有兼容性问题。看最下面的浏览器支持列表。

    box-sizing 属性用来改变默认的 CSS 盒模型 对元素高宽的计算方式。这个属性用于模拟那些非正确支持标准盒模型的浏览器的表现。

    它有三个属性值分别是:

    content-box 默认值,标准盒模型。 width 与 height 只包括内容的宽和高, 不包括边框,内边距,外边距。注意: 内边距, 边框 & 外边距 都在这个盒子的外部。 比如. 如果 .box {width: 350px}; 而且 {border: 10px solid black;} 那么在浏览器中的渲染的实际宽度将是370px;
    padding-box width 与 height 包括内边距,不包括边框与外边距。
    border-box width 与 height 包括内边距与边框,不包括外边距。这是IE 怪异模式(Quirks mode)使用的 盒模型 。注意:这个时候外边距和边框将会包括在盒子中。比如 .box {width: 350px; border: 10px solid black;} 浏览器渲染出的宽度将是350px.

    浏览器支持:

    图片 3

    前端重构方案了解一下

    2018/06/09 · 基础技术 · 重构

    原文出处: 吃葡萄不吐番茄皮   

    挑战

    此次重构的对象是一个大型单页应用。它实现了云端文件管理功能,共有10个路由页面,涉及文件上传、音视频播放、图片预览、套餐购买等几十个功能。前端使用QWrap、jQuery、RequireJS搭建,HTML使用PHP模板引擎Smarty编写。

    我们选择了Vue.js、vue-router、vuex来改造代码,用webpack完成模块打包的工作。仿佛一下子从原始社会迈向了新世纪,是不是很完美?

    图片 4

    (图片来自网络)

    由于项目比较庞大,为了快速迭代,重构的过渡期允许新旧代码并存,开发完一部分就测试上线一部分,直到最终完全替代旧代码。

    然鹅,我们很快就意识到一个问题:重构部分跟新增需求无法保证一致。比如重构到一半,线上功能变了……产品不会等重构完再往前发展。难不成要在新老代码中并行迭代相同的需求?

    别慌,一定能想出更高效的解决办法。稍微分析一下,发现我们要处理三种情况:

    1. 产品需要新增一个功能。比如一个活动弹窗或路由页面。

    解决方法:新功能用vue组件实现,然后手动加载到页面。比如:

    JavaScript

    const wrap = document.createElement('div') document.body.appendChild(wrap) new Vue({ el: wrap, template: '<App />', components: { App } })

    1
    2
    3
    4
    5
    6
    7
    const wrap = document.createElement('div')
    document.body.appendChild(wrap)
    new Vue({
      el: wrap,
      template: '<App />',
      components: { App }
    })

    如果这个组件必须跟老代码交互,就将组件暴露给全局变量,然后由老代码调用全局变量的方法。比如:

    JavaScript

    // someApp.js window.someApp = new Vue({ ... methods: { funcA() { // do somthing } } })

    1
    2
    3
    4
    5
    6
    7
    8
    9
    // someApp.js
    window.someApp = new Vue({
      ...
      methods: {
        funcA() {
          // do somthing
        }
      }
    })

    JavaScript

    // 老代码.js ... window.someApp.funcA()

    1
    2
    3
    // 老代码.js
    ...
    window.someApp.funcA()

    注意:全局变量名需要人工协调,避免命名冲突。PS:这是过渡期的妥协,不是最终状态

    新增一个路由页面时更棘手。聪明的读者一定会想到让新增的路由页面独立于已有的单页应用,单独分配一个URL,这样代码会更干净。

    假如新增的路由页面需要实现十几个功能,而这些功能已经存在于旧代码中呢?权衡了需求的紧急性和对代码整洁度的追求,我们再次妥协(PS:这也是过渡期,不是最终状态)。大家不要轻易模仿,如果条件允许,还是新起一个页面吧,心情会舒畅很多哦。

    2. 产品需要修改老代码里的独立组件。

    解决方法:如果这个组件不是特别复杂,我们会以“夹带私货”的方式重构上线,这样还能顺便让测试童鞋帮忙验一下重构后有没有bug。具体实现参考第一种情况。

    3. 产品需要修改整站的公共部分。

    我们的网站包含好几个页面,此次重构的单页应用只是其中之一。它们共用了顶部导航栏。在这些页面模板中通过Smarty的include语法加载:

    JavaScript

    {%include file="topPanel.inc"%}

    1
    {%include file="topPanel.inc"%}

    产品在一次界面改版中提出要给导航栏加上一些功能的快捷入口,比如导入文件,购买套餐等。而这些功能在单页应用中已经用vue实现了。所以还得将导航栏实现为vue组件。

    为了更快渲染导航栏,需要保留它原有的标签,而不是在JS里以组件的形式渲染。所以需要用到特殊手段:

    • 在topPanel.inc里写上自定义标签,对应到vue组件,比如下面代码里的``。当JS未加载时,会立即渲染导航栏的常规标签以及自定义标签。

    <div id="topPanelMountee"> <div id="topPanel"> <div>一些页面直出的内容</div> ... <import-button> <button class="btn-import"> 导入 </button> </import-button> ... </div> </div>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <div id="topPanelMountee">
      <div id="topPanel">
          <div>一些页面直出的内容</div>
          ...
          <import-button>
            <button class="btn-import">
              导入
            </button>
          </import-button>
          ...
      </div>
    </div>
    • 导航栏组件:topPanel.js,它包含了ImportButton等子组件(对应上面的<import-button>)。等JS加载后,ImportButton组件就会挂载到<import-button>上并为这个按钮绑定行为。另外,注意下面代码中的template并不是<App />,而是一个ID选择器,这样topPanel组件就会以#topPanelMountee里的内容作为模板挂载到#topPanelMountee元素中,是不是很机智~

    JavaScript

    // topPanel.js new Vue({ el: '#topPanelMountee', template: '#topPanelMountee', components: { ... ImportButton } })

    1
    2
    3
    4
    5
    6
    7
    8
    9
    // topPanel.js
    new Vue({
      el: '#topPanelMountee',
      template: '#topPanelMountee',
      components: {
        ...
        ImportButton
      }
    })

    彻底重构后,我们还做了进一步的性能优化。

    12.flex 弹性盒模型的使用

    flex 现在 pc 端支持的不好(主要是因为还有很多 IE8,9的用户存在。)大多情况下我们都是在移动端使用flex布局。但是就算是这样,也会有很多坑人的 bug出现。
    谈谈一些基本的使用经验吧,什么时候使用 flex 。

    2.6模块化组件化

    模块化:以前由CommonJs、AMD、CMD等实现,现在ES6的Module(原生模块化)完全可以取而代之,灵活、高效是模块化开发的好处,对于某个模块我想输出就输出,想引入就引入,输出引入也只需一个关键词(export/import),而且ES6模块语法支持暴露常量、单一接口、所有接口、混合暴露、取别名等等灵活高效是毋庸置疑的
    配合webpack在构建的时候把资源整合打包压缩自动处理了一些以前需要手动进行的性能优化问题了
    组件化:解决复杂业务的痛点,把复杂的业务分为很多个组件分开开发管理以降低开发难度和维护成本。一个5000行的页面和十个500行命名规范的组件哪个开发、维护简单?
    组件灵活随加随用,可复用避免重复开发,可组合使用

    你一定是闲得蛋疼才重构的吧

    2018/07/25 · 基础技术 · 重构

    原文出处: 奇舞团 - hxl   

    随着“发布”进度条走到100%,重构的代码终于上线了。我露出了老母亲般的围笑……

    最近看了一篇文章,叫《史上最烂的开发项目长啥样:苦撑12年,600多万行代码》,讲的是法国的一个软件项目,因为各种奇葩的原因,导致代码质量惨不忍睹,项目多年无法交付,最终还有公司领导入狱。里面有一些细节让人哭笑不得:一个右键响应事件需要花45分钟;读取700MB的数据,需要花7天时间。足见这个软件的性能有多糟心。

    如果让笔者来接手这“坨”代码,内心早就飘过无数个敏感词。其实,笔者自己也维护着一套陈酿了将近7年的代码,随着后辈的添油加醋……哦不,添砖加瓦,功能逻辑日益复杂,代码也变得臃肿,维护起来步履维艰,性能也不尽如人意。终于有一天,我听见了内心的魔鬼在呼唤:“重构吧~~”

    重构是一件磨人的事情,轻易使不得。好在兄弟们齐心协力,各方资源也配合到位。我们小步迭代了大半年,最后一鼓作气,终于完成了。今天跟大家分享一下这次重构的经验和收益。

    3.流畅滚动

    CSS

    body{ -webkit-overflow-scrolling:touch; }

    1
    2
    3
    body{
        -webkit-overflow-scrolling:touch;
    }

    1.1页面结构

    我这边负责的PC端的重构,所以先把页面结构及之间的关系梳理了一遍,并用xmind画好结构图,重点功能做上标记,因为vue是渐进式框架,所以我会优先重构重要的部分
    xmind结构图我就不上了,职业操守还是要的

    进一步优化

    1.什么时候使用 flex 属性

    先来看一个产品模型如下图

    图片 5

    我的左边商品和右边商品的宽度是一样的。当我看到这个模型的时候,第一件就是想就是使用 flex 让我们两列商品列表平分屏幕区域。这个时候就是用flex 来做。
    父级元素如下定义

    CSS

    { margin-bottom: .5rem; display: box; display: -webkit-box; display: -ms-flexbox; display: flex; display: -webkit-flex; -webkit-flex-flow: row; -ms-flex-flow: row; flex-flow: row; }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    {  
        margin-bottom: .5rem;
        display: box;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        display: -webkit-flex;
        -webkit-flex-flow: row;
        -ms-flex-flow: row;
        flex-flow: row;
    }

    前言

    前端技术发展很快,很多项目面临前端部分重构,很开心可以让我进行这次项目前端的重构方案编写,在思考的同时参考了网上很多资料,希望本篇重构方案有一定的完整性,可以带给大家一些在面临重构时有用的东西,同时希望路过的大牛小牛不领赐教,能给我略微指点下重构相关的点,在下感激不尽~


    3. 优化图片

    虽然代码做了很多优化,但是动辄几十到几百KB的图片瞬间碾压了辛苦重构带来的提升。所以图片的优化也是至关重要滴~

    1. PNG改成SVG

    由于项目曾经支持IE6-8,大量使用了PNG,JPEG等格式的图片。随着历史的车轮滚滚向前,IE6-8的用户占比已经大大降低,我们在去年放弃了对IE8-的支持。这样一来就能采取更优的解决方案啦~

    我们的页面上有各种大小的图标和不同种类的占位图。原先使用位图并不能很好的适配retina显示器。现在改成SVG,只需要一套图片即可。相比PNG,SVG有以下优点:

    1. 压缩后体积小
    2. 无限缩放,不失真
    3. retina显示器上清晰

    2. 进一步“压榨”SVG

    虽然换成SVG,但是还远远不够,使用webpack的loader可以有效地压缩SVG体积。

    • 用svgo-loader去除无用属性

    SVG本身既是文本也是图片。设计师提供的SVG大多有冗余的内容,比如一些无用的defstitle等,删除后并不会降低图片质量,还能减小图片体积。

    我们使用svgo-loader对SVG做了一些优化,比如去掉无用属性,去掉空格换行等。这里就不细数它能提供的优化项目。大家可以对照svgo-loader的选项配置。

    • 用svg-sprite-loader合并多个SVG

    另外,SVG有多种用法,比如:img,background,inline,inline + <use>。如果某些图反复出现并且对页面渲染很关键,可以使用svg-sprite-loader将多个图合并成一个大的SVG,避免逐个发起图片请求。然后使用内联或者JS加载的方式将这个SVG引入页面,然后在需要的地方使用SVG的<use>标签引用该图标。合并后的大SVG如下图:

    图片 6

    使用时:

    <svg> <use xlink:href="#icon-add"></use> </svg>

    1
    2
    3
    <svg>
      <use xlink:href="#icon-add"></use>
    </svg>

    即可在使用的位置展现该图标。

    以上是一些优化手段,下面给大家分享一下重构后的收益。

    2.禁止长按 a,img 标签长按出现菜单栏

    使用 a标签的时候,移动端长按会出现一个 菜单栏,这个时候禁止呼出菜单栏的方法如下:

    CSS

    a, img { -webkit-touch-callout: none; /*禁止长按链接与图片弹出菜单*/ }

    1
    2
    3
    a, img {
        -webkit-touch-callout: none; /*禁止长按链接与图片弹出菜单*/
    }

    2.5性能优化

    • 2.5.1 数据存取

    ☆ 尽量使用局部变量
    ☆ 对象成员的嵌套深度与读取时间成正比,嵌套过深要进行优化

    • 2.5.2 DOM

    ☆ 尽量减少DOM操作(访问和修改都算)的次数
    ☆ 访问元素时使用最快的API
    ☆ 使用事件委托来减少事件处理器的数量
    ☆ 减少重绘和重排的次数

    • 2.5.3 算法和流程

    ☆ for循环、while循环、do-whild循环比for in 要快
    ☆ 优化循环体的复杂度
    ☆ 最小化属性查找:

    for(let i = 0, len = arr.length; i < len; i++){ ... }

    1
    2
    3
    4
    for(let i = 0, len = arr.length; i < len; i++){
     
    ...
    }

    ☆ 当条件较少时 使用if-else更易读,而当条件较多时if-else性能负担比switch大,易读性也没switch好。
    ☆ 对于if else 概率越大的条件越靠前判断 比如:

    ☆ 当计算量很大且重复的时候,用Memoization缓存计算结果

    • 2.5.4 字符串拼接

    比较下四中字符串拼接方法的性能:
    A:str = str + ‘a’+’b’
    B:str += ‘a’ + ‘b’
    C: arr.join(”)
    D:str.concat(‘b’,’c’)
    ☆ Chrome65上测试的是A优于B优于C优于D
    其他浏览器不确定

    • 2.5.5 Ajax

    ☆ 服务端设置HTTP头信息确保响应会被浏览器缓存
    ☆ 客户端讲获取的信息存到本地避免再次请求(localstorage sessionstorage cookice)
    ☆ 设置HTTP头信息,expiresgaosu告诉浏览器缓存多久
    ☆ 减少HTTP请求,合并css、js、图片资源文件等或使用MXHR
    ☆ 通过次要文件用Ajax获取可缩短页面加载时间

    这里只列了比较重要的一部分,安利一下我之前写的性能优化总结传送门

    重构的收益

    以下是重构带来的收益:

    收益项 重构前 重构后
    组件化 100%
    模块化 50% 100%
    规范化 ESLint 代码规范检查
    语法 ES5 ES6+
    首屏有效渲染时间 1.59s 1.28s(提升19%)
    首次交互时间 2.56s 1.54s(提升39%)
    • 组件化:从0到100%老代码没有组件的概念,都是指令式的编程模式以及对DOM的直接操作。重构后,改为组件化以后,可以充分利用组件的高复用性,以及虚拟DOM的性能优化,带来更愉悦的开发体验。
    • 模块化:从50%到100%老代码中也用RequireJS做了一定程度的模块化,但是仅限于业务模块,没有解决第三方依赖的安装和升级问题。重构后,借助webpack和npm,只需要npm install安装第三方依赖,然后用import的方式加载。极大地提高了开发效率。
    • 规范化:从0到1老代码几乎没有代码规范,甚至连同一份文件里都有不同的代码缩进,强迫症根本无法忍受。重构后,使用ESLint对代码格式进行了统一,代码看起来更加赏心悦目。
    • ES6+语法:从0到大量使用老代码所使用的库因为历史悠久,加上没有引入转译流程,只能使用ES5语法。重构后,能够尽情使用箭头函数、解构、async/await等语言新特性来简化代码,从而提升开发体验。
    • 性能提升根据上线前后Lighthouse的性能检测数据,首次有效渲染时间(First Meaningful Paint,FMP)提升 19% 。该指标表示用户看到有用信息的时间(比如文件列表)。首次交互(First Interactive,FI)提升 39%。该指标表示用户可以开始跟网页进行交互的时间 。

    以上就是这次重构的总结。不要容忍代码里的坏味道,更不要容忍低效的开发模式。及时发现,勇敢改进吧~

    3.flex低版本浏览器的兼容

    先看我的代码:

    CSS

    { box-flex: 1; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; width: 18.5rem; }

    1
    2
    3
    4
    5
    6
    7
    8
    {
        box-flex: 1;
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        width: 18.5rem;
    }

    这里只是让左右两边平分屏幕的宽度。
    之前使用 flex在安卓4.3的手机上遇到一个问题。正常的页面应该如下图所示,

    图片 7

    但是在 安卓4.3的手机上却是如下的结果

    图片 8

    后来研究了下天猫的页面(因为之前使用这个 flex 就是参考天猫来学习的),看到他们在定义flex值的时候 都会有这样的一个属性width=0;

    图片 9

    而且当我给我的页面也加上这个属性的时候,页面的布局也变得正常了。我现在想不明白愿意是什么,只能当一个 hack 来使用。如果大家也遇到这个问题,请试一下添加这个属性。如果大家知道为什么这么用,请指教一下。

    2.4开发效率

    • PS一键切图功能
    • emmet快速编写HTML

    #page>div.logo+ul#navigation>li*5>a{Item $}

    1
    #page>div.logo+ul#navigation>li*5>a{Item $}

    按下tab键,上述代码 等于

    <div id="page"> <div class="logo"></div> <ul id="navigation"> <li><a href="">Item 1</a></li> <li><a href="">Item 2</a></li> <li><a href="">Item 3</a></li> <li><a href="">Item 4</a></li> <li><a href="">Item 5</a></li> </ul> </div>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <div id="page">
        <div class="logo"></div>
        <ul id="navigation">
            <li><a href="">Item 1</a></li>
            <li><a href="">Item 2</a></li>
            <li><a href="">Item 3</a></li>
            <li><a href="">Item 4</a></li>
            <li><a href="">Item 5</a></li>
        </ul>
    </div>

    背景:原项目写的纯css

    • less/sass/scss 快速编写css

    比如

    @base-size: 40px; @theme-color: #ccc; @my-selector: title; .aa { font-weight: bold; } .@{my-selector} { font-size: @base-size; color: @theme-color; margin: 100/2px 200/10px; &-ok { color: green; } &-no { color: yellow; } > li{ &:extend(.aa); &:hover { color: #fff; } } }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    @base-size: 40px;
    @theme-color: #ccc;
    @my-selector: title;
     
    .aa {
      font-weight: bold;
    }
     
    .@{my-selector} {
      font-size: @base-size;
      color: @theme-color;
      margin: 100/2px 200/10px;
      &-ok {
        color: green;
      }
      &-no {
        color: yellow;
      }
      > li{
        &:extend(.aa);
        &:hover {
          color: #fff;
        }
      }
    }

    编译后为:

    .aa, .title > li { font-weight: bold; } .title { font-size: 40px; color: #ccc; margin: 50px 20px; } .title-ok { color: green; } .title-no { color: yellow; } .title > li:hover { color: #fff; }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    .aa,
    .title > li {
      font-weight: bold;
    }
    .title {
      font-size: 40px;
      color: #ccc;
      margin: 50px 20px;
    }
    .title-ok {
      color: green;
    }
    .title-no {
      color: yellow;
    }
    .title > li:hover {
      color: #fff;
    }

    这里只写了一点点,功能还有很多的
    less官网选我选我
    sass官网:选我选我

    • webpack:压缩代码、图片,合并JS,检测文件更新等自动进行
    • webstorm自带取色器(其他IDE应该都有,自行找下)

    写颜色色值的地方可以点击调出取色板(不限于css),可以选颜色也可以利用吸管取色(屏幕任意处 不限于IDE内部),也有取色的网站可以收藏到书签工具文件夹里图片 10

    • Mockjs:上面有介绍mockjs,这里不再赘述,由于本人有过手写假数据的悲惨经历,故把mockjs列入可以提高开发效率行列,因为前后端分离后前后端同时开发,假数据已成必须

    比如:

    let template = { 'anchorList|3-6':[{ 'id|1-100': 1, 'name': '@cname', 'date': '@date(yyyy-MM-dd)', biubiubiu: () => Mock.Random.string('abcdefghijklmnopqrstuvwxyz', 5), 'arr|2-5': [{ 'age|10-20': 0 }] }] } console.log(Mock.mock(template))

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    let template = {
        'anchorList|3-6':[{
          'id|1-100': 1,
          'name': '@cname',
          'date': '@date(yyyy-MM-dd)',
          biubiubiu: () => Mock.Random.string('abcdefghijklmnopqrstuvwxyz', 5),
          'arr|2-5': [{
            'age|10-20': 0
          }]
        }]
      }
      console.log(Mock.mock(template))

    输出:图片 11

     

    • 模块化、组件化开发:前后端解耦后,前端之间配合也可以解耦,各自负责不同的模块开发,写自己的组件,最后通信部分再协同

    参考

    Chrome 中的 First Meaningful Paint

    Using SVG

    Modern JavaScript Explained For Dinosaurs

    1 赞 收藏 评论

    图片 12

    7.calc 相关问题

    之前在做布局的时候使用calc 出现了很严重的线上 BUG。后来就深究了下这个属性的使用。
    calc好用的地方就是,可以在任何单位之间进行换算。但是浏览器支持的不是很好。看一下 can i use 截图:

    图片 13

    而且在使用的时候要加上厂商前缀,达到兼容性。不过现在不推荐使用,毕竟,浏览器支持有限。
    示例代码:

    CSS

    #formbox { width: 130px; /*加厂商前缀,操作符(+,-,*,/)两边要有空格)*/ width: -moz-calc(100% / 6); width: -webkit-calc(100% / 6); width: calc(100% / 6); border: 1px solid black; padding: 4px; }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    #formbox {
      width:  130px;
      /*加厂商前缀,操作符(+,-,*,/)两边要有空格)*/              
      width:  -moz-calc(100% / 6);  
      width:  -webkit-calc(100% / 6);  
      width:  calc(100% / 6);  
      border: 1px solid black;
      padding: 4px;
    }

    研究过淘宝,天猫,京东的 h5端页面看到这个单位用的不多,主要还是兼容性的问题吧。

    2.8用户体验

    ☆ 优化加载速度,减少用户等待时间
    ☆ 减少不必要的无谓的操作
    ☆ 动画交互合理,短平快的交互或者动画更适合知学宝,我们是功能型网站不是欣赏型网站,不需要太花里胡哨的动画,那样反而增加等待时间,适得其反
    ☆ 更赏心悦目的UI(字体、图片、logo,按钮、列表等)
    ☆ 处理好很多小的细节的地方,比如… 针对项目的地方就略了

    关于用户体验这块暂时没找到比较权威的书,如果大家有觉得不错的欢迎留言推荐~

    本文由金沙国际官网发布于web前端,转载请注明出处:h5开发相关内容总结,前端重构方案了解一下

    关键词:

上一篇:Web重构之道,深入理解

下一篇:没有了