前端要给力 — 寻常之路

2024年3月14日 236次阅读 来源: 依然宁静

一向想总结下本身摸打滚爬的前端阅历，3年，从一个极憎恶前端的人，变成一个吃前端饭碗的人。没有人带过我，跌跌撞撞的迟缓行进，但我很喜好分享，喜好一同提高，这会是我今后一向愿意做的事变。

综述

娃娃学步

  • w3cschool上的 html / css / javascript / 以及jquery教程，万事开首的第一步

Say hello to the world!

小跑上路

赶上平衡木

在小跑上路的历程当中，做出来的东西看起来很专业，注重是“看起来”。假如不明白真正的前端妙技，那只能是看起来专业，内部构造照样乱糟糟的，或许是碰到bug不知道怎样调，东一句西一句，拆了东墙补西墙。这历程就像走在平衡木上，稍不留神就会摔下去。

首先要相识css的规划道理

  • 盒模子

  • 定位模子

  • 有了规划的基本理论后，尝试去明白Boostrap里的栅格系统 row col span2 背地的style

js最主要的三点: 闭包、原型、作用域

关于js的原型和作用域，我没特地写过文章，发起去博客园搜下。假如想要完全的明白js言语机制，能够去看《Javascript形式》这本书，或许看我整顿的读书笔记

华美腾跃谢幕

只要把平衡木上的妙技磨闇练后，我们才真正的游刃有余，保证不从平衡木上摔下来的前提下，再有余力去设想怎样华美的腾跃和谢幕。

组件封装

还没相识js对类(或模块)的封装前，我们的代码多是如许的

var getData = function(){
    // ......
};

function editFunc(){
    // ......
};

$('.refresh-btn').on('click', function(){
    var data = getData();
    var $target = $($(this).attr('data-target'));
    $target.empty();

    for(var i=0; i<data.length; i++){
        var $child = $('<tr></tr>');
        $child.append('<td>' + data[i]['name'] + '</td>');
        // ......
        $child.append('<td><a class="edit-link">编辑</a></td>');
        $target.append($child);
    }

    $target.find('.edit-link').on('click', editFunc);
});

一个点击就猎取数据，然后革新表格的功用。假如一个页面中有多个类似的异步革新的表格，且每一个表格的字段又各不雷同，那末最偷懒的做法就是拷贝大段代码，然后再调整<td>的字段。如许的代码简直了，太难保护了！

var table1 = new AjaxTable({
    el: '#dataTable',
    dataUrl: '/path/to/action/'
});

table1.refresh();

假如代码变成如许，那就爽多了，猎取数据和革新表格的历程都封在了AjaxTable中，各个运用的地方只须要传个参数挪用下refresh()即可，减少了大批反复(类似的)代码。这就是对UI组件/功用组件的封装。

之前为了预备口试时的“手撕代码”，写过一个简朴的轮播组件，不必jquery（口试常常不允许运用任何库）

还写过下面一些文章

模块化开辟

假如要在页面上引入外部的js库，最初进修的时刻是如许引入的

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery-ui/jquery-ui-1.8.24.min.js"></script>
<script type="text/javascript" src="jquery-ui/jquery-ui-datepicker-zh-CN.js"></script>
<script type="text/javascript" src="bootstrap-2.3.2.min.js"></script>

因为浏览器中js的实行(非加载)历程是在单线程中的，而各js文件又会存在依靠关联，比方 jquery-ui 依靠 jquery，bootstrap 也依靠 jquery，所以<script>标签的引入得满足依靠递次。当一个项目越做页面越多时，这么多页面中会存在一堆<script>标签，假如要将某个js文件晋级版本，或许修正script的依靠关联时，这就会成为一个很烦琐的事情，特别是<script>疏散在项目的各个文件中时。

RequireJS就是出来处理这个题目的（简朴来讲就是用js去治理js），另有SeaJS，它们离别代表着AMD和CMD两种作风，关于模块化和二者的区分能够看这篇文章。

实战案例

页面继续

页面继续 这块跟上面的种种详细的手艺没太大关联，页面继续主如果用来构造项目文件构造（或页面构造）的一些履历划定规矩。假设在一个系统里，每一个页面都有雷同的头和尾，另有nav，那依据上面封装和星散的头脑，我们可能会如许写

<html>
<body>
    %{ include header.html }%

    <div class="container">
        <div class="left">
            %{ include nav.html }%
        </div>
        <div class="main">
            <!-- 详细营业... -->
        </div>
    </div>
    
    %{ include footer.html }%

    <script src="require.min.js"></script>
    <script type="text/javascript">
    requirejs.config({
        // 全局设置...
    });
    </script>

    <script type="text/javascript">
    require(['jquery'], function($){
        // 详细营业...
    });
    </script>
</body>
</html>

我们能够把这一段作为一个base的父页面，命名为base.html，每一个“详细营业”的页面都继续自它。

%{ extends 'base.html' }%

%{ block styles }%
<style type="text/css">

</style>
%{ endblock }%

%{ block content }%
<div>详细营业...</div>
%{ endblock }%

%{ block scripts }%
<script type="text/javascript"
require(['jquery'], function($){
    // 详细营业...
});
</script>
%{ endblock }%

把这个页面叫做func1.html，详细营业的页面中只会包含本身营业功用须要体贴(用到)的东西，不去多管base页面的闲事。能够看到子页面中有许多block之类的锚点，会将与endblock之间的内容插进去到父页面中的响应位置，所以要先在base.html中“挖好坑”。

%{ block styles }% %{ endblock }%
%{ block content }% %{ endblock }%
%{ block scripts }% %{ endblock }%

详细做法能够去看罕见的模板系统，本例中参考的是Django中的模板定义。

页面组件化

页面组件化 也是和详细手艺没有关联，它是顺着 页面继续 的思绪，把页面或文件构造做更小粒度的拆分，页面由一个个页面组件构成。

%{ include sectionA.css }%
%{ include sectionB.css }%

<div class="row">
    %{ include sectionA.tpl }%
</div>
<div class="row">
    %{ include sectionB.tpl }%
</div>

<script type="text/javascript">
require(['sectionA', 'sectionB'], function(A, B){
    var App = Base.extend({
        _init: function(){
            var that = this;
            var mods = [A, B];
            this.modules = [];
            
            mods.forEach(function(Module){
                that.modules.push(new Module(App));
            });
        }
    });
});
</script>

上面相当于一个营业页面，它由sectionA和sectionB两个页面组件构成，sectionA.tpl和sectionB.tpl是html模板。在应用层(即营业)页面中初始化两个js模块A和B，而且把本身的App变量通报给模块（new Module(App)），能够完成子模块与应用层页面的通讯，以至是模块之间的通讯。

如许把页面拆成粒度更细的构造，优点是页面模块能够复用，也便于治理，修改页面中的一小块时只需在所处的模块中，减少修改的影响局限。

还看过一种头脑是，把css文件也当作资本由requireJS动态加载，如许上面示例中的include xxx.css都不须要了，页面模块的css资本作为该模块的依靠，写在js模块的define的依靠中。

define(['jquery', 'sectionA.css'], function($){
    // 营业模块...
});

如许把css和js都笼统成“资本”，相当于

组件 = 模板 + 资本

一个页面团体的模板，相当于多个页面组件的拼装而成。更进一步，假如能让页面组件做到异步衬着的话（即能够由js去剖析模板语法和变量，而不是交给web框架），才真正做到页面衬着的实质：

显现给用户的页面 = 页面模板 (包含组件的模板) + 数据

“衬着”就是将带数据变量的页面模板输出成规范的html，同步衬着是指在服务端剖析模板并输出完全html到浏览器中，而异步衬着指直接在浏览器中经由过程javascript 依据传入的数据将模板输出成规范html。

统一模板假如既能在服务端同步衬着，又能在浏览器端异步衬着的话，我们就不须要体贴“数据”是后端框架直接输出到页面的，照样ajax动态取来的。对模板来讲，数据就是个“接口”，而 模板 + 数据 = 衬着。如许我们作为前端，才把更多精神放在模板和交互上，不必管数据的通报体式格局。

寻常之路

前端生长了十几年，如今险些抵达巅峰的速度了，近两年推出的框架屡见不鲜，jquery早已不是一统江湖了。每一个人的精神都有限，不可能一个个都学过来，然则必需认可，前端是一个完全的系统（我之前整顿的学问系统），有它奇特和魅力的地方。不仅是框架，另有更多的工程化题目，框架都是为相识决某类相通的题目而生。模板和数据星散也好，“状况”和“表现”星散也好，我愈来愈体会到

“分”是为了“合”

这条寻常之路，还会“频仍”的生长和融会下去。

本文最早宣布在我的个人博客上，转载请保存出处 http://jsorz.cn/blog/2015/12/twisted-way-to-awesome-fe.html

    原文作者：依然宁静
    原文地址: https://segmentfault.com/a/1190000004383026
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞