您的位置:新葡亰496net > 新葡亰官网 > 新葡亰496net:来明白一下,三个css与js结合的下拉

新葡亰496net:来明白一下,三个css与js结合的下拉

发布时间:2019-07-28 19:28编辑:新葡亰官网浏览(65)

    前面三个重构方案通晓一下

    2018/06/09 · 基本功本领 · 重构

    初稿出处: 吃山葫芦不吐洋茄皮   

    前端手艺提升非常的慢,相当多品种面前遭逢前端部分重构,很欢快能够让自身举行本次项近日端的重构方案编制,在动脑筋的还要参照他事他说加以考察了网络海人民广播电视台湾大学素材,希望本篇重构方案有自然的完整性,能够带给大家有些在面对重构时有用的事物,同年代待经过的大牌小牛不领赐教,能给本身略微携心悸重构相关的点,在下谢谢不尽~

    本小说给我们介绍一款不错的jQuery多级手风琴菜单落成代码,有必要理解的对象可参看,手风琴菜单一般用来下拉领航,由于外观特别简洁,使用起来跟手风琴同样能够拉伸和降低而得名,项目中适当使用手风琴效果会给用户带来十一分好的心得

    贰个css与js结合的下拉菜单帮忙主流浏览器

     首先申明:

    作者即使在web前端岗位干了非常多年,但迫于岗位对技艺须求不高。html,css用的很多,JavaScript自身原创的比较少,基本都是copy修改,所以自个儿的确动手写时,发现基础很不深厚,边求学边实施,收获相当的大。

    效果图:

    新葡亰496net 1

    不赘述了,贴码了

    1、css代码

     

    代码如下:

    a:link{color:white;text-decoration:none;}
    a:visited{color:white;text-decorative:none;}
    a:hover{color:white;text-decorative:none;}
    a:active{color:white;text-decorative:none;}
    li{float:left;display:inline;background-color:#003366;width:120px;text-align:center;margin:2px;padding:10px 0 5px 0;position:relative;}
    .limouseover{background-color:#0033ff;color:red;}
    .limouseout{background-color:#003366;color:black;}
    li ul{display:none;width:120px;position:absolute;left:0;top:30px;}
    li ul li{margin:0px auto;border-top:1px solid #006699;}

     

    2、JavaScript代码

    代码如下:

    <script language=javascript>
    function menu(menu1){
    //鼠标移入移出classname切换和子菜单掩饰、展现切换。
    if (document.getElementById(menu1)){
    var menu_ul=document.getElementById(menu1);
    if (menu_ul.getElementsByTagName("li").length){
    var menu_li=menu_ul.getElementsByTagName("li");
    for (i in menu_li){
    menu_li[i].onmouseover=function(){this.className="limouseover";if (this.getElementsByTagName("ul").length){this.getElementsByTagName("ul")[0].style.display="block";}}
    menu_li[i].onmouseout=function(){this.className="limouseout";if (this.getElementsByTagName("ul").length){this.getElementsByTagName("ul")[0].style.display="none";}}
    }
    }
    }
    }

    </script>

     

    3、html代码

     

    代码如下:

    <ul id=menu1>
    <li><a href="">首页</a></li>
    <li><a href="">菜单1菜单1</a>
    <ul>
    <li><a href="">子菜单1子菜单1子菜单1子菜单1</a></li>
    <li><a href="">子菜单2</a></li>
    </ul>
    </li>
    <li><a href="">菜单2</a>
    <ul>
    <li><a href="">子菜单1子菜单1子菜单1子菜单1</a></li>
    <li><a href="">子菜单2</a></li>
    </ul>
    </li>
    </ul>

    <script>var menu1=new menu("menu1");</script>

     

    说明:

    1、思考到ul和li页面用的可比多,能够在css前步向#menu1,以对菜单样式进行界定界定。

    2、js首借使对鼠标移入和移除事件进展了侦听,对应切换来limouseover和limouseout样式;同时对子菜单的display属性进行转移,达到呈现隐敝的效应。

    3、同一个页面能够另行调用,不争持,html代码中的JavaScript代码是调用实例,前边的menu1为私下变量名,括号内的menu1为html页面中的id。

    本例的顽固的病魔:

    1、菜单li的mouseover、mouseout和子菜单li的体制同样,即同一个颜料和字体,未有完毕独立设置。

    2、由于要包容Ie6和ie7,所以里面使用position:absolute的还要,扩展了left和top属性,top要依照菜单li的欧洲经济共同体中度设定。

    首先申明: 自身即便在web前端岗位干了比比较多年,但迫于岗位对技艺要求不高。html,css用的可比多...

    文字滚动大家只要的检索能够有相对个这一个的实例,然则同一页面能够反复调用而且无缝滚动的效应非常的少,下边小编推荐一款不错的同一页面可次调用的jquery文字无缝滚动插件应用实例,各位朋友可参照。

    前言

    后边多个本事进步相当慢,相当多门类面对前端部分重构,很欢欣能够让自家进行此番项近期端的重构方案编制,在思考的还要参照他事他说加以考察了互连网海人民广播广播台湾大学材质,希望本篇重构方案有鲜明的完整性,能够带给大家有个别在面对重构时有用的事物,同期期待经过的大腕小牛不领赐教,能给本身略微教导下重构相关的点,在下多谢不尽~


    一、原项目梳理

    成效如下

    连锁小说

    有关搜索:

    后天看甚

    探索手艺库

    再次来到首页

    • [ C# ] 判定三个类是或不是贯彻了有些接口的多样
    • ASP.NET MVC 4 的JS/CSS打包压缩作用-------过滤文件
    • asp.net使用httphandler打包多CSS或JS文件以加速页
    • [.net 面向对象编制程序基础] (17) 数组与聚焦,.
    • [ C# ] 判定一个类是或不是落到实处了某些接口的有余
    • 堆分配与栈分配---SAP C 电面(6),---sap

    连带频道: HTML/CSS  HTML5  Javascript  jQuery  AJax教程  前端代码  正则表明式  Flex教程  WEB前端教程  

    jquery文字无缝滚动插件,仅符合于文字,因为此功效是用持续的将第一行插入到最终来兑现的,假如是非常大的剧情块,会相比卡。

    一、原项目梳理

    先是对本来项目做两个大意的梳理,既然是重构,当然非常多东西是足以继续拿来行使的。

    率先对原本项目做三个光景的梳理,既然是重构,当然非常多东西是足以继续拿来使用的。

    新葡亰496net 2

    帮客商酌

    源代码如下:

    1.1页面结构

    本人那边肩负的PC端的重构,所以先把页面结构及中间的关系梳理了一回,并用xmind画好布局图,器重作用做上标识,因为vue是渐进式框架,所以笔者会优先重构首要的一部分
    xmind结构图小编就不上了,职业情操依旧要的

    1.1页面结构

    代码深入分析

      

    1.2品种组织

    品类协会是对准代码组织结构的,梳理了项目各重大的文本夹及文件并表明相应的内容照旧效用。同样的,使用xmind画出组织图,xmind图略。

    自个儿那边担负的PC端的重构,所以先把页面结构及里面包车型大巴关系梳理了一回,并用xmind画好布局图,重点成效做上标识,因为vue是渐进式框架,所以小编会优先重构主要的一部分

    HTML

     代码如下

    1.3前端框架、模板

    行使集团内部职员自创框架C.F.F,自定义build文件,内嵌斯马特y模板获取后台数据,利用{$xxx}获取后台数据,然而定义了过多全局变量存款和储蓄模板数据,变成占用越多内部存款和储蓄器、污染命名空间等难点。
    概念公共组件供各模块或一定情景调用,复耗费高

    xmind结构图笔者就不上了,职业操守照旧要的

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

    复制代码

    1.4第三方库、组件、插件

    jquery: JavaScript库
    html5shiv:用于减轻IE9以下版本浏 览器对HTML5新扩充标签不识别,并导致CSS不起功用的难点。
    Dialog : jquery弹窗插件
    jCarousel : jquery 轮播插件 (重构版放任,原因不复杂的情景能原生实现尽量原生完结)
    respond:为 IE6-8 以及其他不援助 CSS3 Media Queries 的浏览器提供媒体询问的 min-width 和 max-width 天性,达成响应式网页设计
    sideToolbar:导航工具
    echarts: 图形工具


    1.2品类协会

     代码如下

    (function($) {
      $.fn.myScroll = function(options) {

    二、重构方案

    品种组织是指向代码协会结构的,梳理了档案的次序各首要的文本夹及文件并申明相应的剧情依旧功能。同样的,使用xmind画出布局图,xmind图略。

    复制代码

        //默许配置
        var defaults = {
          speed: 40,//滚动速度,值越大速度越慢
          rowHeight: 24 //每行的万丈
        };

    2.1支出规范

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

    典型那几个东西一贯不断然的是非曲直,唯有同厂家依旧同单位来制定规范我们都保持一致,同事之间能非常快读懂相互的代码,升高开荒作用

    2.2才能选型

    • 2.2.1 开荒方式:前后端分离

    前后端分离开辟早就形成趋势,到未来新品类好多使用这种方式展开开辟,项目完全重构的话当然首要推荐此方式
    受益:在此以前不曾后边二个那壹地方之说,都未来端兼顾开采,数据库、底层服务、接口,页面一把梭,压力大,而且精力有限不能够在各类领域都做的绝妙。后来有切图这一职,能够把页面写的更优质一些,通过沙盘和伸手接口合作实行数据交互,前端都是牢牢耦合于后端,这种气象下支付,交流花费,开拓进度中进程重视花费都以较高的。前后端分离后,分工更引人瞩目,各自专注做好自身小圈子的事,同时开工,不互相信赖,成效高
    规律:(此图来源某博客,地址忘记。 望博主看到能联系自个儿加上转发出处,在此抱歉~)

    新葡亰496net 3
    翻开多少个地方的服务器来运作自身的前端代码,以此来模拟真实的线上情况;
    利用nodejs的express框架来拉开三个地面包车型客车服务器,然后选取nodejs的二个http-proxy-middleware插件将客户端发往nodejs的乞请转载给真正的服务器,让nodejs作为叁个中间层。
    接下来便是数据难点了,后端接口在开拓中,前端必要多少怎么办吧?mockjs领悟一下,
    API地址https://github.com/nuysoft/Mo… ,当后端设计出AP接口文书档案后,大家就足以使用mockjs模拟出对应格式的假数据进行支付,等到接口完全到位之后,再张开接口联调

    • 2.2.2 MVVM框架:vue

    Vue是一个渐进式框架,轻易入手、轻便协同,能够高效灵活的开垦迭代。同不经常候也是现阶段主流三大框架里读书费用最低的,目前,企业也在主要推荐vue作为首荐框架,实行相关手艺的扶植。
    Vue社区相对热度高,组件、库、轮子多,财富整合链接:https://segmentfault.com/p/12…
    体量小、自由度高、脚手架创设的品类自带webpack打包创设筑工程具
    虽说vue是单页应用,可是足以透过安插webpack进行多页开垦

    • 2.2.3 css预编写翻译语言

    运用css预编译语言来写css会进步编制css功用(具体提升多少百分比功用可活动测量试验,作者以为找一段写好的css,先用css写贰遍,再用less可能其余写叁次总计耗费时间比例,这里忽略写样式时候想想的岁月实行测量检验)
    预编写翻译语言能够定义变量(例如常用的水彩、字体、字号等)、嵌套写法、能够三番七遍别的类的性格、计算、内置函数等

    • 2.2.4 常用类库

    图片工具—echarts (对应场景 – xxx)
    适配插件—flexible taobaoH5极限适配方案 (对应场景—xxx)
    Lodash – JS函数库 (对应场景—xxx)
    ElementUI – UI库 (对应场景—xxx)
    One-Page-Nav – 导航插件 (对应场景—xxx)
    实际景况笔者就不写了,根据你们不一样的业务须求去剖断供给哪些类库插件之类的,预先决定好,以防半途做哪些都要去花时间动脑筋


    1.3前端框架、模板

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

        var opts = $.extend({}, defaults, options),
            intId = [];

    2.3营造工具

    既然选用了vue框架,塑造工具当然选取vue自带的webpack了,对于webpack有一些人说会配置项目就行,有些人会讲要深入钻研,这些看个人需求本身以为

    行使公司内部职员自创框架C.F.F,自定义build文件,内嵌斯马特y模板获取后台数据,利用{$xxx}获取后台数据,可是定义了相当的多全局变量存储模板数据,变成占用更加多内部存款和储蓄器、污染命名空间等主题素材。

    从而,在body间写上菜单主体代码,HTML代码将由一种种严节列表组成。

        function marquee(obj, step) {
          obj.find("ul").animate({
            marginTop: '-=1'
          }, 0, function() {
            var s = Math.abs(parseInt($(this).css("margin-top")));
            if (s >= step) {
              $(this).find("li").slice(0, 1).appendTo($(this));
              $(this).css("margin-top", 0);
            }
          });
        }

    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内部),也会有取色的网址能够收藏到书签工具文件夹里新葡亰496net 4

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

    输出:新葡亰496net 5

     

    • 模块化、组件化开拓:前后端解耦后,前端之间协作也足以解耦,各自承担不相同的模块开采,写本身的零件,最终通讯部分再一并

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

     代码如下

        this.each(function(i) {
          var sh = opts["rowHeight"],
              speed = opts["speed"],
              _this = $(this);

    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、图片能源文件等或行使MXH奥迪Q7
    ☆ 通过支持文件用Ajax获取可降低页面加载时间

    此处只列了非常主要的一部分,安利一下本身后面写的习性优化总括传送门

    1.4第三方库、组件、插件

    复制代码

          intId[i] = setInterval(function() {
            marquee(_this, sh);
          }, speed);

    2.6模块化组件化

    模块化:从前由CommonJs、英特尔、CMD等落到实处,以后ES6的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> 

          _this.hover(function() {
            clearInterval(intId[i]);
          }, function() {
            intId[i] = setInterval(function() {
              marquee(_this, sh);
            }, speed);
          });

    2.7前端安全

    • 2.7.1 XSS

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

    • 2.7.2 本地存款和储蓄数据败露

    本地存款和储蓄的兼具数据就都或许被攻击者的JS脚本读取到,所以敏感、机密音信都不提出在前者存款和储蓄
    const常量 let 块级作用域幸免代码习惯倒霉导致的成效域混乱难点

    html5shiv:用于化解IE9以下版本浏 览器对HTML5新扩展标签不识别,并变成CSS不起成效的难题。

     

        });

    2.8用户体验

    ☆ 优化加载速度,收缩用户等待时间
    ☆ 收缩不供给的无谓的操作
    ☆ 动画交互合理,短平快的相互也许动画片更符合知学宝,我们是功效型网址不是欣赏型网址,不须要太花里胡哨的卡通,那样反而扩充等待时间,白璧微瑕
    ☆ 更安适的UI(字体、图片、logo,按键、列表等)
    ☆ 管理好过多小的细节的地点,比方… 针对项目标地方就略了

    至于用户体验那块权且没找到相比较华贵的书,即便我们有感觉不错的应接留言推荐~

    Dialog : jquery弹窗插件

    CSS

      }
    })(jQuery);

    end

    写的不是非常的细,但愿非常多地点都遮盖到了,款待留言补充~
    注:内容有不当或然失实处请指正~转发请声明出处~多谢合作!

    1 赞 4 收藏 评论

    新葡亰496net 6

    jCarousel : jquery 轮播插件 (重构版抛弃,原因不复杂的景色能原生实现尽量原生达成)

    自然,我们要为那些冬天列表加上样式,让它丰裕轻松的表未来显示器上。

    html结构如下:

    respond:为 IE6-8 以及另外不协助 CSS3 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;} 

    <div class="demo">
    <ul>
      <li><a title="仿webqq做的一个webos桌面效果" href="#">仿webqq做的贰个webos桌面效果</a></li>
      <li><a title="图片滚动插件myScroll" href="#">图片滚动插件myScroll</a></li>
      <li><a title="使用jquery实现鼠标中键滚轮效果" href="#">使用jquery实现鼠标中键滚轮效果</a></li>
      <li><a title="怎样产生网页设计专家" href="#">怎么样形成网页设计专家</a></li>
      <li><a title="javascript--求数组的最大最小值" href="#">javascript--求数组的最大极小值</a></li>
      <li><a title="jquery插件---图片自适应容器大小插件" href="#">jquery插件---图片自适应容器大小插件</a></li>
      <li><a title="使用css3-PIE让ie也足以支撑css3" href="#">使用css3-PIE让ie也能够帮助css3</a></li>
    </ul>
    </div>

    ...

    jQuery

    调用方法:

    二、重构方案

    调用accordion插件,设置相关属性,贰个了不起的手风琴效果就成功了。

     代码如下

    2.1开支标准

     代码如下

    复制代码

    命名标准

    复制代码

    $(function(){
       $("div.demo").myScroll({
       speed:40,
       rowHeight:24 //行高,即li的惊人,就算有margin/padding,也在计算之中
      });
    });

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

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

    代码检查工具 eslint

    Copacion提供以下选项设置:

     代码如下

    行业内部这一个东西向来不断然的是非,唯有同厂家依然同单位来制定正规大家都保持一致,同事之间能相当的慢读懂相互的代码,进步支付功用

    speed:数字微秒,设置菜单进行和破产的年华。

    复制代码

    2.2技能选型

    closedSign:当下级菜单关闭时,显示于菜单旁边的剧情,能够是放肆html或然text。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
    <html xmlns=";
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文书档案</title>
    <style type="text/css">
    <!--
    body,td,th {
     font-size: 12px;
    }
    a {
     font-size: 12px;
     color: #09C;
    }
    a:link {
     text-decoration: none;
    }
    a:visited {
     text-decoration: none;
     color: #09C;
    }
    a:hover {
     text-decoration: underline;
     color: #930;
    }
    a:active {
     text-decoration: none;
     color: #09C;
    }
    *{ margin:0; padding:0;}
    .header{
     height:60px;
     background-color:#666;
     color:#FFF;
     }
    .header h1{
     padding:6px 0;
     } 
    .demo{
     width:300px;
     height:100px;
     overflow:hidden;
     float:left;
     margin:100px 0 0 100px;
     border:1px solid #09F;
     padding:10px;
     }
    .demo ul{
       list-style:none;
       height:auto;
    }
    .demo ul li{
     height:24px;
     line-height:24px;
     }

    2.2.1 开辟形式:前后端分离

    openedSign:当下级菜单打开时,突显于菜单旁边的剧情,能够是大肆html恐怕text。

    -->
    </style>
    <script type=text/javascript src=";
    <script type="text/javascript">
       (function($) {
      $.fn.myScroll = function(options) {

    前后端分离开采早已成为主旋律,到现行反革命新品类好多选取这种方式进行支付,项目完全重构的话当然首推此情势

    留心,要是你想菜单开端载入时就展开以来,能够在对应要进行的li上加class="active"。

        //私下认可配置
        var defaults = {
          speed: 40,
          //滚动速度,值越大速度越慢
          rowHeight: 24 //每行的万丈
        };

    低价:从前并未有前面贰个这一岗位之说,皆现在端兼顾开垦,数据库、底层服务、接口,页面一把梭,压力大,並且精力有限不能够在各种领域都做的美貌。后来有切图这一职,能够把页面写的更理想一些,通过沙盘和伸手接口协作举办数量交互,前端都以一体耦合于后端,这种景况下开辟,交流开支,开辟进度中进度正视开支都是较高的。前后端分离后,分工更精晓,各自专注做好团结小圈子的事,同时开工,不互相注重,功效高。

    实例代码

        var opts = $.extend({}, defaults, options),
            intId = [];

    新葡亰496net 7

     代码如下

        function marquee(obj, step) {
          obj.find("ul").animate({
            marginTop: '-=1'
          }, 0, function() {
            var s = Math.abs(parseInt($(this).css("margin-top")));
            if (s >= step) {
              $(this).find("li").slice(0, 1).appendTo($(this));
              $(this).css("margin-top", 0);
            }
          });
        }

    张开一个本土的服务器来运作自个儿的前端代码,以此来模拟真实的线上情状;

    复制代码

        this.each(function(i) {
          var sh = opts["rowHeight"],
              speed = opts["speed"],
              _this = $(this);

    运用nodejs的express框架来展开二个地点的服务器,然后利用nodejs的三个http-proxy-middleware插件将客户端发往nodejs的诉求转载给真正的服务器,让nodejs作为八个中间层。

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

          intId[i] = setInterval(function() {
            marquee(_this, sh);
          }, speed);

    下一场正是数据难题了,后端接口在付出中,前端需求多少怎么办吧?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;}
    新葡亰496net:来明白一下,三个css与js结合的下拉菜单援助主流浏览器。</style>
    </head>

          _this.hover(function() {
            clearInterval(intId[i]);
          }, function() {
            intId[i] = setInterval(function() {
              marquee(_this, sh);
            }, speed);
          });

    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>

      }
    })(jQuery);
      
       $(function(){
         $("div.demo").myScroll({
              speed:40,
              rowHeight:24
              });
         });
    </script> 

    Vue是三个渐进式框架,轻便出手、轻便协同,能够急速灵活的开采迭代。同期也是时下主流三大框架里学习费用最低的,近期,公司也在首荐vue作为首要推荐框架,实行相关工夫的扶植。

    </body>
    </html>

     
    </head>
    <body>
    <div class="header">
    <h1>jquery文字无缝滚动插件</h1>
    </div>
    <div class="demo">
    <ul>
      <li><a title="仿webqq做的二个webos桌面效果" href="">仿webqq做的二个webos桌面效果</a></li>
      <li><a title="图片滚动插件myScroll" href="">图片滚动插件myScroll</a></li>
      <li><a title="使用jquery达成鼠标中键滚轮效果" href="">使用jquery达成鼠标中键滚轮效果</a></li>
      <li><a title="怎么着产生网页设计大方" href="">怎么着成为网页设计大方</a></li>
      <li><a title="javascript--求数组的最大最小值" href="">javascript--求数组的最大非常的小值</a></li>
      <li><a title="jquery插件---图片自适应容器大小插件" href="">jquery插件---图片自适应容器大小插件</a></li>
      <li><a title="使用css3-PIE让ie也足以帮助css3" href="">使用css3-PIE让ie也可以支撑css3</a></li>
    </ul>
    </div>

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

    jQuery多级手风琴菜单下载:

    <div class="demo">
    <ul>
      <li><a title="仿webqq做的一个webos桌面效果" href="">仿webqq做的四个webos桌面效果</a></li>
      <li><a title="图片滚动插件myScroll" href="">图片滚动插件myScroll</a></li>
      <li><a title="使用jquery达成鼠标中键滚轮效果" href="">使用jquery达成鼠标中键滚轮效果</a></li>
      <li><a title="怎样成为网页设计大方" href="">怎么样成为网页设计专家</a></li>
      <li><a title="javascript--求数组的最大最小值" href="">javascript--求数组的最大相当的小值</a></li>
      <li><a title="jquery插件---图片自适应容器大小插件" href="">jquery插件---图片自适应容器大小插件</a></li>
      <li><a title="使用css3-PIE让ie也能够支撑css3" href="">使用css3-PIE让ie也足以援救css3</a></li>
    </ul>
    </div>
    </body>
    </html>

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

    ...

    ...

    虽说vue是单页应用,不过能够透过配备webpack进行多页开采

    2.2.3 css预编写翻译语言

    使用css预编写翻译语言来写css会提升编写制定css功效(具体提升多少百分比功效可活动测量试验,作者觉着找一段写好的css,先用css写二遍,再用less只怕其它写二回计算耗费时间比例,这里忽略写样式时候思量的时刻展开测验)

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

    2.2.4 常用类库

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

    适配插件—flexible taobaoH5终极适配方案

    Lodash – JS函数库

    ElementUI – UI库

    One-Page-Nav – 导航插件

    具体景况笔者就不写了,依据你们不相同的工作需要去决断供给如何类库插件之类的,预先决定好,以防半途做哪些都要去花时间动脑筋

    2.3营造工具

    既是选用了vue框架,营造筑工程具当然选择vue自带的webpack了,对于webpack有人讲会配置项目就行,有些人会讲要深深研究,这么些看个人供给本身认为

    2.4费用作用

    PS一键切图作用

    emmet火速编写HTML

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

    按下tab键,上述代码 等于

    新葡亰496net 8

    背景:原项目写的纯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;

    &: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;

    }

    此间只写了一丢丢,功效还大概有大多的

    less官网(

    sass官网(

    webpack:压缩代码、图片,合併JS,检查评定文件更新等活动进行

    webstorm自带取色器(别的IDE应该都有,自行找下)

    写颜色色值的地点能够点击调出取色板,能够选颜色也能够行使吸管取色(荧屏跋扈处 不限于IDE内部),也可以有取色的网址能够贮藏到书签工具文件夹里

    新葡亰496net 9

    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)

    输出:

    新葡亰496net 10

    模块化、组件化开垦:前后端解耦后,前端之间同盟也足以解耦,各自担负分化的模块开拓,写本身的零部件,最后通讯部分再同台

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

    ...

    }

    ☆ 当法则非常少时 使用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

    ☆ Chrome65上测验的是A优于B优于C优于D

    别的浏览器不明确

    2.5.5 Ajax

    ☆ 服务端设置HTTP头音讯保管响应会被浏览器缓存

    ☆ 客户端讲获取的音讯存到本地防止重复呼吁(localstorage sessionstorage cookice)

    ☆ 设置HTTP头消息,expiresgaosu告诉浏览器缓存多短期

    ☆ 减弱HTTP央浼,合併css、js、图片能源文件等或应用MXH福特Explorer

    ☆ 通过协理文件用Ajax获取可减弱页面加载时间

    那边只列了比较根本的一局地,安利一下自己事先写的性质优化计算传送门

    2.6模块化组件化

    模块化:以前由CommonJs、AMD、CMD等落到实处,今后ES6的Module完全能够代表,灵活、高效是模块化开垦的受益,对于有个别模块作者想出口就输出,想引进就引进,输出引进也只需一个至关重要词(export/import),何况ES6模块语法协助暴光常量、单一接口、全数接口、混合揭示、取小名等等灵活急忙是无须置疑的

    万分webpack在营造的时候把资源整合打包压缩自动管理了有的在先要求手动进行的质量优化难点了

    组件化:消除复杂专门的学业的痛点,把纷纷的事体分为很七个零件分开开辟管制以减弱开拓难度和掩护资金。三个5000行的页面和十三个500行命名标准的机件哪个开垦、维护轻便?

    零件灵活随加随用,可复用防止双重支付,可组成使用

    2.7前端安全

    2.7.1 XSS

    XSS是指浏览器错误的将攻击者提供的用户输入数据作为JavaScript脚本给实行了

    解决办法:校验用户输入,特殊字符实行转义

    Vue 双花括号自带过滤效果

    2.7.2 本地存款和储蓄数据外泄

    本地存款和储蓄的具有数据就都恐怕被攻击者的JS脚本读取到,所以敏感、机密音讯都不提出在前者存款和储蓄

    const常量 let 块级功效域幸免代码习于旧贯倒霉导致的功用域混乱难题

    2.8用户体验

    ☆ 优化加载速度,减弱用户等待时间

    ☆ 收缩不供给的无谓的操作

    ☆ 动画交互合理,短平快的互相可能动画片更切合知学宝,我们是功能型网址不是欣赏型网址,不供给太花里胡哨的卡通,那样反而增添等待时间,大失所望

    ☆ 更春风得意的UI(字体、图片、logo,按键、列表等)

    ☆ 管理好过多小的内情的地点,比如... 针对项指标地方就略了

    关于用户体验那块一时没找到比较权威的书,假使大家有以为不错的应接留言推荐~

    end

    多谢阅读

    爱美观作者小说的点个订阅恐怕喜欢!作者每一天都会跟大家享受小说,也会给我们提供web前端学习资料。

    本文由新葡亰496net发布于新葡亰官网,转载请注明出处:新葡亰496net:来明白一下,三个css与js结合的下拉

    关键词: