新浦京81707con > 注册购买 > 澳门新葡亰赌995577jQuery多级手风琴菜单实现代码

原标题:澳门新葡亰赌995577jQuery多级手风琴菜单实现代码

浏览次数:111 时间:2019-05-02

前者重构方案领会一下

2018/06/09 · 基础才具 · 重构

初稿出处: 吃蒲陶不吐西红柿皮   

前者才干提升飞快,大多门类面临前端部分重构,很如沐春风能够让自家举办本次项近来端的重构方案编写制定,在思维的同时参考了网络海人民广播广播台湾大学素材,希望本篇重构方案有早晚的完整性,能够带给大家有些在面临重构时有用的东西,同时代待经过的大拿小牛不领赐教,能给自家略微指导下重构相关的点,在下谢谢不尽~

本文章给大家介绍一款不错的jQuery多级手风琴菜单达成代码,有亟待领悟的意中人可参看,手风琴菜单一般用于下拉领航,由于外观卓殊简洁,使用起来跟手风琴同样能够拉伸和缩小而得名,项目中合适接纳手风琴效果会给用户带来分外好的经验

前言

前者才干提高快捷,很种种类面临前端部分重构,极热情洋溢能够让自家举行这一次项近来端的重构方案编写制定,在思索的还要参考了网络海人民广播广播台湾大学资料,希望本篇重构方案有确定的完整性,能够带给我们有个别在面临重构时有用的东西,同时希望经过的大拿小牛不领赐教,能给自个儿略微携水肿重构相关的点,在下谢谢不尽~


一、原项目梳理

效能如下

1、原项目梳理

第3对原本项目做2个大概的梳理,既然是重构,当然很多东西是足以承继拿来使用的。

先是对原先项目做3个大概的梳理,既然是重构,当然繁多东西是足以承接拿来利用的。

澳门新葡亰赌995577 1

一.一页面结构

作者那边负担的PC端的重构,所以先把页面结构及以内的涉及梳理了叁次,并用xmind画好布局图,注重功用做上标识,因为vue是渐进式框架,所以笔者会优先重构首要的局地
xmind结构图俺就不上了,专门的工作操守依旧要的

1.一页面结构

代码解析

1.贰类型组织

品种协会是针对代码组织结构的,梳理了种类各首要的文件夹及文件并申明相应的剧情仍然成效。同样的,使用xmind画出布局图,xmind图略。

自家那边负担的PC端的重构,所以先把页面结构及以内的涉及梳理了二次,并用xmind画好布局图,器重成效做上标记,因为vue是渐进式框架,所以笔者会优先重构主要的局地

HTML

1.叁前端框架、模板

采纳集团内部职员自创框架C.F.F,自定义build文件,内嵌斯马特y模板获取后台数据,利用{$xxx}获取后台数据,不过定义了无数全局变量存款和储蓄模板数据,变成占用越来越多内部存款和储蓄器、污染命名空间等主题材料。
概念公共组件供各模块或特定情景调用,复开销高

xmind结构图作者就不上了,专业情操依然要的

首先在head间引用jQuery和插件。

一.4第一方库、组件、插件

jquery: JavaScript库
html伍shiv:用于化解IE九以下版本浏 览器对HTML5新扩充标签不识别,并促成CSS不起功效的难题。
Dialog : jquery弹窗插件
jCarousel : jquery 轮播插件 (重构版吐弃,原因不复杂的光景能原生完结尽量原生达成)
respond:为 IE六-8 以及任何不扶助 CSS三 Media Queries 的浏览器提供媒体询问的 min-width 和 max-width 特性,完结响应式网页设计
sideToolbar:导航工具
echarts: 图形工具


1.二品种结构

 代码如下

二、重构方案

种类组织是本着代码协会结构的,梳理了项目各重视的文本夹及文件并注脚相应的内容照旧功效。同样的,使用xmind画出组织图,xmind图略。

复制代码

二.一付出规范

  • 取名规范
  • html/css/less/sass/scss/javascript编码规范
  • 代码检查工具 eslint

专门的职业那么些事物未有断然的是非曲直,唯有同集团依旧同单位来制定正规我们都保持壹致,同事之间能十分的快读懂互相的代码,提升开辟效能

贰.二技巧选型

  • 2.二.一 开拓方式:前后端分离

左右端分离开采早已形成趋势,到前几日新品类多数使用那种方式开始展览付出,项目完全重构的话当然首要推荐此情势
利润:在此以前不曾前者这一人置之说,皆今后端兼顾开荒,数据库、底层服务、接口,页面一把梭,压力大,而且精力有限无法在每一种领域都做的优异。后来有切图这一职,可以把页面写的更卓越一些,通过沙盘和呼吁接口合营举办多少交互,前端都以紧凑耦合于后端,那种情况下支付,调换开销,开垦进度中进程重视费用都以较高的。前后端分离后,分工更了然,各自专注做好本身小圈子的事,同时开工,不相互依赖,功能高
原理:(此图来自某博客,地址忘记。 望博主看到能联系自个儿加上转发出处,在此抱歉~)

澳门新葡亰赌995577 2
开启3个地面包车型地铁服务器来运作本身的前端代码,以此来效仿真实的线上意况;
运用nodejs的express框架来拉开一个本地的服务器,然后接纳nodejs的1个http-proxy-middleware插件将客户端发往nodejs的央求转载给真正的服务器,让nodejs作为两当中间层。
接下来便是多少难点了,后端接口在开辟中,前端须要多少如何做吧?mockjs了然一下,
API地址https://github.com/nuysoft/Mo… ,当后端设计出AP接口文书档案后,大家就能够使用mockjs模拟出对应格式的假数据开始展览开垦,等到接口完全到位以往,再张开接口联调

  • 2.2.2 MVVM框架:vue

Vue是一个渐进式框架,轻巧入手、轻松协同,能够急迅灵活的支付迭代。同时也是方今主流3大框架里读书开支低于的,近来,公司也在首荐vue作为首要推荐框架,进行相关技巧的培养。
Vue社区相对热度高,组件、库、轮子多,能源整合链接:https://segmentfault.com/p/12…
体量小、自由度高、脚手架创设的花色自带webpack打包构建筑工程具
虽说vue是单页应用,不过能够透过陈设webpack进行多页开荒

  • 贰.二.三 css预编写翻译语言

行使css预编写翻译语言来写css会升高编制css功能(具体提升多少百分比作用可活动测试,笔者觉着找一段写好的css,先用css写一遍,再用less恐怕其余写1遍计算耗费时间比例,这里忽略写样式时候怀想的时刻展开测试)
预编写翻译语言能够定义变量(举例常用的颜色、字体、字号等)、嵌套写法、能够一而再别的类的脾气、总计、内置函数等

  • 贰.二.四 常用类库

图片工具—echarts (对应场景 – xxx)
适配插件—flexible taobaoH伍极限适配方案 (对应场景—xxx)
Lodash – JS函数库 (对应场景—xxx)
ElementUI – UI库 (对应场景—xxx)
One-Page-Nav – 导航插件 (对应场景—xxx)
切切实实处境小编就不写了,依照你们不一致的作业必要去看清需求什么类库插件之类的,预先决定好,以防半途做怎么样都要去花时间动脑筋


一.3前端框架、模板

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/accordion.js"></script> 

2.叁塑造工具

既然选择了vue框架,构建筑工程具当然选拔vue自带的webpack了,对于webpack有人说会配置项目就行,有人说要深刻钻研,这几个看个人需求自个儿觉着

采取集团内部职员自创框架C.F.F,自定义build文件,内嵌Smarty模板获取后台数据,利用{$xxx}获取后台数据,可是定义了成百上千全局变量存款和储蓄模板数据,形成占用更加多内存、污染命名空间等难点。

继之,在body间写上菜单主体代码,HTML代码将由1多级冬天列表组成。

二.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内部),也有取色的网址可以贮藏到书签工具文件夹里澳门新葡亰赌995577 3

  • 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))

输出:澳门新葡亰赌995577 4

 

  • 模块化、组件化开辟:前后端解耦后,前端之间协作也足以解耦,各自担任分化的模块开拓,写本人的机件,最终通讯部分再一起

概念公共组件供各模块或一定情景调用,复耗费高

 代码如下

二.五质量优化

  • 贰.5.1 数据存取

☆ 尽量接纳一些变量
☆ 对象成员的嵌套深度与读取时间成正比,嵌套过深要进行优化

  • 2.5.2 DOM

☆ 尽量收缩DOM操作(访问和改造都算)的次数
☆ 访问元素时行使最快的API
☆ 使用事件委托来缩短事件管理器的数据
☆ 收缩重绘和重排的次数

  • 二.伍.叁 算法和流程

☆ 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缓存总括结果

  • 贰.5.肆 字符串拼接

正如下肆中字符串拼接方法的品质:
A:str = str ‘a’ ’b’
B:str = ‘a’ ‘b’
C: arr.join(”)
D:str.concat(‘b’,’c’)
☆ Chrome六五上测试的是A优于B优于C优于D
任何浏览器不显明

  • 2.5.5 Ajax

☆ 服务端设置HTTP头音讯保管响应会被浏览器缓存
☆ 客户端讲获取的音讯存到本地避免再度请求(localstorage sessionstorage cookice)
☆ 设置HTTP头音讯,expiresgaosu告诉浏览器缓存多久
☆ 减少HTTP请求,合并css、js、图片财富文件等或应用MXHRubicon
☆ 通过帮忙文件用Ajax获取可减少页面加载时间

此处只列了比较首要的一部分,安利一下笔者事先写的习性优化总计传送门

一.肆第贰方库、组件、插件

复制代码

贰.陆模块化组件化

模块化:以前由CommonJs、AMD、CMD等达成,将来ES陆的Module(原生模块化)完全能够代表,灵活、高效是模块化开辟的功利,对于某些模块小编想出口就输出,想引入就引进,输出引进也只需一个根本词(export/import),而且ES6模块语法补助暴光常量、单一接口、全部接口、混合暴露、取外号等等灵活便捷是不用置疑的
极度webpack在营造的时候把能源整合打包压缩自动管理了部分原先须求手动实行的性质优化问题了
组件化:化解复杂职业的痛点,把纷纷的作业分为大多少个零件分开开垦管理以减低开辟难度和维护耗费。多少个六千行的页面和十个500行命名规范的机件哪个开采、维护轻易?
零件灵活随加随用,可复用防止重新费用,可组成使用

jquery: JavaScript库

<ul class="nav"> 
   <li><a href="; 
   <li><a href="#">服务</a></li> 
   <li><a href="#">案例</a></li> 
   <li><a href="#">文章</a></a> 
        <ul> 
           <li><a href="#" target="_blank">XHTML/CSS</a></li> 
           <li><a href="#">Javascript/Ajax/jQuery</a> 
                <ul> 
                    <li><a href="#">Cookies</a></li> 
                    <li><a href="#">Event</a></li> 
                    <li><a href="#">Games</a></li> 
                    <li><a href="#">Images</a></li> 
                </ul> 
            </li> 
            <li><a href="#" target="_blank">PHP/MYSQL</a></li> 
            <li><a href="#" target="_blank">前端观看</a></li> 
            <li><a href="#" target="_blank">HTML5/移动WEB应用</a></li> 
        </ul> 
    </li> 
    <li><a href="#">关于</a></li> 
</ul> 

二.7前端安全

  • 2.7.1 XSS

XSS是指浏览器错误的将攻击者提供的用户输入数据作为JavaScript脚本给施行了
消除办法:校验用户输入,特殊字符举行转义
Vue 双花括号自带过滤效果

  • 二.柒.二 本地存款和储蓄数据外泄

本土存款和储蓄的具备数据就都或然被攻击者的JS脚本读取到,所以敏感、机密新闻都不提出在前端存款和储蓄
const常量 let 块级功能域防止代码习贯倒霉导致的功用域混乱难题

html伍shiv:用于化解IE玖以下版本浏 览器对HTML伍新添标签不识别,并招致CSS不起功能的主题素材。

 

二.捌用户体验

☆ 优化加载速度,缩短用户等待时间
☆ 裁减不须求的无谓的操作
☆ 动画交互合理,短平快的竞相恐怕动画片更切合知学宝,我们是功效型网址不是欣赏型网址,无需太花里胡哨的动画,那样反而扩展等待时间,救经引足
☆ 更舒适的UI(字体、图片、logo,按钮、列表等)
☆ 管理好过多小的细节的地点,举个例子… 针对项目的地方就略了

有关用户体验这块暂且没找到比较高尚的书,如若我们有认为不错的接待留言推荐~

Dialog : jquery弹窗插件

CSS

end

写的不是不粗大,但愿诸多地点都覆盖到了,接待留言补充~
注:内容有不当或许失实处请指正~转发请声明出处~谢谢合营!

1 赞 4 收藏 评论

澳门新葡亰赌995577 5

jCarousel : jquery 轮播插件 (重构版屏弃,原因不复杂的情形能原生完成尽量原生落成)

理所当然,我们要为这一个严节列表加上样式,让它充足轻易的呈今后荧屏上。

respond:为 IE6-八 以及其余不帮衬 CSS三 Media Queries 的浏览器提供媒体询问的 min-width 和 max-width 特性,落成响应式网页设计

 代码如下

sideToolbar:导航工具

复制代码

echarts: 图形工具

.nav {width: 213px; padding: 40px 28px 25px 0;}  
ul.nav {padding: 0; margin: 0; font-size: 1em; line-height: 0.5em; list-style: none;}  
ul.nav li {}  
ul.nav li a {line-height: 10px; font-size: 14px; padding: 10px 5px; color: #000; display: block; 
text-decoration: none; font-weight: bolder;} 
ul.nav li a:hover {background-color:#675C7C;    color:white;} 
ul.nav ul { margin: 0; padding: 0;display: none;}  
ul.nav ul li { margin: 0; padding: 0; clear: both;}  
ul.nav ul li a { padding-left: 20px; font-size: 12px; font-weight: normal;} 
ul.nav ul li a:hover {background-color:#D3C99C; color:#675C7C;}  
ul.nav ul ul li a {color:silver; padding-left: 40px;}  
ul.nav ul ul li a:hover { background-color:#D3CEB8; color:#675C7C;}  
ul.nav span{float:right;} 

...

jQuery

2、重构方案

调用accordion插件,设置相关属性,1个美好的手风琴效果就到位了。

二.一开垦规范

 代码如下

命名标准

复制代码

html/css/less/sass/scss/javascript编码标准

$(function(){ 
   $(".nav").accordion({ 
        speed: 500, 
        closedSign: '[ ]', 
        openedSign: '[-]' 
    }); 
});  

代码检查工具 eslint

凯越ion提供以下选项设置:

典型这几个事物未有断然的是非曲直,唯有同集团依然同单位来制定标准我们都保持壹致,同事之间能比不慢读懂互相的代码,升高开垦效能

speed:数字飞秒,设置菜单进行和关闭的日子。

二.二能力选型

closedSign:当下级菜单关闭时,展现于菜单旁边的剧情,能够是放四html恐怕text。

2.2.1 开拓方式:前后端分离

openedSign:当下级菜单张开时,展现于菜单旁边的始末,能够是放四html也许text。

前后端分离开荒早已形成趋势,到现行反革命新品类许多使用那种方式开始展览开荒,项目完全重构的话当然首推此方式

留意,假若您想菜单初阶载入时就开始展览以来,能够在相应要拓展的li上加class="active"。

好处:在此之前不曾前者这一任务之说,都以往端兼顾开辟,数据库、底层服务、接口,页面一把梭,压力大,而且精力有限无法在各样领域都做的完美。后来有切图这一职,能够把页面写的越来越美妙一些,通过沙盘和请求接口同盟进行数量交互,前端都以密不可分耦合于后端,那种景况下支付,调换费用,开采进程中进程重视开支都是较高的。前后端分离后,分工更显明,各自专注做好团结小圈子的事,同时开工,不相互依赖,效用高。

实例代码

澳门新葡亰赌995577 6

 代码如下

开启1个地面包车型地铁服务器来运行自个儿的前端代码,以此来效仿真实的线上境遇;

复制代码

动用nodejs的express框架来拉开1个本土的服务器,然后选取nodejs的二个http-proxy-middleware插件将客户端发往nodejs的呼吁转载给真正的服务器,让nodejs作为一个中间层。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">

接下来便是多少难题了,后端接口在开拓中,前端须要多少如何是好呢?mockjs明白一下,

<link rel="stylesheet" type="text/css" href="../css/main.css" />
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="accordion.js"></script>
<script type="text/javascript">
$(function(){
   $(".nav").accordion({
        //accordion: true,
        speed: 500,
     closedSign: '[ ]',
  openedSign: '[-]'
 });
});
</script>
<style>
.demo{width:300px; margin:40px auto; padding:10px; background:#f7f7f7}
ul{list-style:none}
.nav {width: 213px; padding: 40px 28px 25px 0; font-family: "Microsoft yahei", Arial, Helvetica, sans-serif;}
ul.nav {padding: 0; margin: 0; font-size: 1em; line-height: 0.5em; list-style: none;}
ul.nav li {}
ul.nav li a {line-height: 10px; font-size: 14px; padding: 10px 5px; color: #000; display: block; text-decoration: none; font-weight: bolder;}
ul.nav li a:hover {background-color:#675C7C;    color:white;}
ul.nav ul { margin: 0; padding: 0;display: none;}
ul.nav ul li { margin: 0; padding: 0; clear: both;}
ul.nav ul li a { padding-left: 20px; font-size: 12px; font-weight: normal;}
ul.nav ul li a:hover {background-color:#D3C99C; color:#675C7C;}
ul.nav ul ul li a {color:silver; padding-left: 40px;}
ul.nav ul ul li a:hover { background-color:#D3CEB8; color:#675C7C;}
ul.nav span{float:right;}
</style>
</head>

API地址... ,当后端设计出AP接口文书档案后,大家就足以运用mockjs模拟出对应格式的假数据实行支付,等到接口完全造成之后,再张开接口联调

<body>

2.2.2 MVVM框架:vue

<div id="main">
      <div class="demo">
      <ul class="nav">
         <li><a href="" target="_blank">首页</a></li>
         <li><a href="#">服务</a>
              <ul>
                  <li><a href="#">JAVASCRIPT</a></li>
                  <li><a href="#">PHP</a></li>
                  <li><a href="#">MYSQL</a></li>
                  <li><a href="#">LINUX</a></li>
              </ul>
         </li>
         <li><a href="#">案例</a></li>
         <li><a href="#">文章</a></a>
              <ul>
                   <li class="active"><a href="4.html" target="_blank">XHTML/CSS</a></li>
                   <li><a href="#">Javascript/Ajax/jQuery</a>
                        <ul>
                            <li><a href="#">Cookies</a></li>
                            <li><a href="#">Event</a></li>
                            <li><a href="#">Games</a></li>
                            <li><a href="#">Images</a></li>
                        </ul>
                   </li>
                   <li><a href="6.html" target="_blank">PHP/MYSQL</a></li>
                   <li><a href="7.html" target="_blank">前端观看</a></li>
                   <li><a href="9.html" target="_blank">HTML5/移动WEB应用</a></li>
              </ul>
         </li>
         <li><a href="about.html" target="_blank">关于</a></li>
      </ul>
   </div>
  
</div>

Vue是三个渐进式框架,轻松动手、轻松协同,能够神速灵活的支出迭代。同时也是时下主流叁大框架里学习开支低于的,方今,公司也在首要推荐vue作为首推框架,进行相关本事的作育。

</body>
</html>

Vue社区相对热度高,组件、库、轮子多,财富整合链接(

jQuery多级手风琴菜单下载:

容量小、自由度高、脚手架创立的类型自带webpack打包营造筑工程具

...

固然vue是单页应用,可是能够透过配备webpack举办多页开垦

二.二.三 css预编写翻译语言

应用css预编写翻译语言来写css会提高编写制定css功效(具体进步多少百分比作用可自行测试,笔者觉着找一段写好的css,先用css写二回,再用less大概其它写三回计算耗费时间比例,这里忽略写样式时候思索的年月开始展览测试)

预编写翻译语言能够定义变量(比方常用的颜色、字体、字号等)、嵌套写法、能够继续其余类的性质、总结、内置函数等

二.2.4 常用类库

图表工具—echarts (对应场景 – xxx)

适配插件—flexible taobaoH伍巅峰适配方案

Lodash – JS函数库

ElementUI – UI库

One-Page-Nav – 导航插件

切切实实境况作者就不写了,根据你们不相同的作业须要去决断供给什么类库插件之类的,预先决定好,避防半途做什么样都要去花时间动脑筋

二.3构建筑工程具

既是选取了vue框架,创设工具当然选取vue自带的webpack了,对于webpack有人说会配置项目就行,有人说要深切钻研,那几个看个人须求自个儿认为

2.4支出成效

PS壹键切图功用

emmet飞速编写HTML

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

按下tab键,上述代码 等于

澳门新葡亰赌995577 7

背景:原项目写的纯css

less/sass/scss 急迅编写css

比如

@base-size: 40px;

本文由新浦京81707con发布于注册购买,转载请注明出处:澳门新葡亰赌995577jQuery多级手风琴菜单实现代码

关键词: 新浦京81707con 基础技术 重构 方案 web

上一篇:澳门新蒲京www66126cc未来的编码方式

下一篇:没有了