看完 Jamstack 的调查报告，我抓住了最新的

看完 Jamstack 的调查报告，我抓住了最新的 Web 流行趋势

日，Jamstack 社区发布了最新调查报告。调查报告由 Netlify 完成，今年有超过 7000 名社区开发人员受访，是去年的两倍多，受访开发人员大多数是前端或全栈开发者。

调查报告可以帮助社区在 Jamstack 生态蓬勃发展的同时更好的了解开发者的动态，也让开发者在枯燥的工作中了解社区在做的工作和自身行业动态。

今天带你走进调查结果一探究竟，看看有哪些技术亮点和有趣的事。

主流技术上的选择

JavaScript 在 Web 编程领域仍占主导地位，TypeScript 迅速扩张

毫无疑问，JavaScript 仍是社区内大多数开发人员的主要语言，占比达到 55%，相比去年的 63% 有所下降。下降的部分，主要流到了 TypeScript，TypeScript 整体使用率有很大的提升，并且满意度也非常高，一定程度上 TypeScript 拥有最快乐的开发群体。其他像 Python、Go 等在社区内的开发者使用率与满意度上都有所提高，它们也确实都是正流行的编程语言。

React 地位不可撼动，jQuery 仍未消失

社区向开发人员询问了 30 多个框架的使用情况，React 继续在使用率和满意度上占据主导地位，长期以来一直如此。Vue 的满意度也很高，使用率上只有 React 的一半。曾经的三巨头之一的 Angular 则有些不温不火。

大型传统框架框架例如 jQuery 和 Express 并没有消失，仍有很多人使用，但是满意度已经很低了。小众框架如 Next.js 有很不错的增长，对于 Ember、Dojo 等基数小且满意度低的框架，是时候考虑放弃了。

无服务器技术成主流

Jamstack 并非都是客户端，所以社区还调查了服务器端技术的流行程度，了解 Jamstack 开发人员如何使用服务器端技术。数据显示大多数开发人员对无服务器功能很感兴趣，Kubernetes 很受欢迎。

代码编辑器之间的战斗

老生常谈的问题，开发者永远避不开被询问喜欢哪种编辑器，Vim IDE 之战也从未停止。Jamstack 社区的开发人员更喜欢集成开发环境（IDE），基于 Web 的编辑器（如 Github、Glitch）也很受欢迎。

Sketch 失宠，Figma 成设计工具唯一选择

对于许多 Web 开发者来说，设计也是很重要的一环。不同于几年前 Sketch 的独霸江湖，在工具上，Jamstack 的设计师们显然更喜欢 Figma，使用率和满意度都是远超其他工具的存在。左下角的其他几款工具 Sketch、Adobe XD、Framer 多少有点尴尬了。

WordPress 继续称霸内容管理系统

尽管满意度很低，WordPress 还是内容管理系统明显的领导者，WordPress 搭配 Netlify 这样的托管服务提供商虽然不太常见，但是满意度更高。Snaity 和 Strapi 都在 2021 年迎来突破。他们越来越受欢迎，用户量也在提高。

从应用场景了解 Jamstack 为什么这么火

Jamstack 都被什么行业拿来做什么

不仅仅是技术前沿行业，教育、医疗、金融、广告、营销、媒体、出版等主要行业都使用 Jamstack。在 Jamstack 上构建完全动态应用程序的开发人员也越来越多。

人们总是对你正在构建网站的用户感兴趣，写博客？玩电商？还是构建企业应用？从调查结果来看，前几名的数据非常平均。个人博客网站仍占比最多，其次是企业、电商网站、消费和信息化软件，同时也包括教育、游戏、文档等多种类型的网站服务。

Jamstack 开发人员构建了百万用户级的网站

社区调查发现，有 32% 的开发人员表示他们在拥有百万用户的大网站上工作，这可以对 Jamstack 架构可扩展性提供有力支持。社区深入挖掘了构建这些受欢迎网站的开发人员的数据。发现他们有不同的开发优先级，他们更关注法律合规性，更重视安全性，更强调移动设备作为目标的重要性。开发人员在网站开发速度、站点性能、正常运行时间等因素上也非常重视。

Jamstack 成为不少学生学习部署的工具

社区从调查结果里发现 2021 年的一个重大转变，受访者中学生比例几乎翻了一番。这些学生的经验都在 2 年左右，社区猜测随着 Jamstack 不断成为主流，它已经成为不少教育机构教学新开发人员用到的技术手段。后续会通过更多的信息来证实这一效果。但巨大的年轻新开发者的流入对社区和 Jamstack 都是很好的信号。

疫情影响，远程办公成常态，不少人因此失业

受疫情影响，许多开发人员转向远程工作。远程办公使许多人出现失业的情况，在工作经验不足一年的人中，有 12% 的人报告说在疫情中失去了工作，而不足两年经验的人中也有 10%。如果不包括那些拥有不到两年经验的人，失去工作的开发人员的比例甚至更高，达到 40%。

也有不少开发者获得了成功，不但工作远程化了，有的还搬到了偏远地区，并且表示即使疫情结束，也不打算再回到办公司。调查数据还显示，前端比全栈更有可能去远程，DevOps 的远程开发者最多。

总结：

从报告中可以看出，JavaScript 和 React 仍然是 Web 开发主流使用的技术，TypeScript 的发展也非常的快。最近几年不断有 TypeScript 替代 JavaScript 的声音出现，TypeScript 作为 JavaScript 的严格超集，更多的是作为 JavaScript 的补充而不是替代品，两者并行发展才是合理的未来方向。此外无服务器架构、容器服务等领域也是开发者需要关注的趋势。

因疫情远程办公带来的影响因人而异，所以打铁还需自身硬，强大的技术支撑才能应对复杂的环境变化。

参考链接：

https://jamstack.org/survey/2021/

言

浏览器越来越强大，从文字、图片、到声音、视频、动画与游戏都有了丰富的应用。H5之后，不仅仅是表现层，数据存储与通讯能力也得到大幅度提高，并逐渐取得共识，形成了标准。

随着能力越来越强，从直接编写html，css，javascript，到通过一些约定的规则来更好的分组开发，如基于es6、less、typescript等来开发，再应用一些辅助工具如gulp、webpack等构建，形成可模块化开发，分工协作、编译组合的能力。对比类似visual studio、Android Studio客户端的开发工具，相关工作流程越来越一致。

编写html、css（含less）、javascript（含typescript）等
编写package.json（类似makefile文件）
构建（webpack、glup等）

标准能够让大家跟随，从最最朴实的共识开始，开放而后茁壮成长。

规则与概念很难建立，需要清晰定义边界，并在执行中持续巩固……

就目前为止标准化最好的仍然是H5系列，丰富的构建工具支持着H5的开发，这正代表着H5的崛起。

WeUI基于橙色技术栈开发

WeUI是腾讯提供的一个样式框架，适合应用来制作与微信能够更搭配的公众号与小程序。基于MIT许可，提供了常用的如按钮、进度条、导航、对话框、表单等组件，可简化相关的设计工作。

环境准备

代码路径如下： https://github.com/Tencent/weui

WeUI使用了less来开发样式，用Gulp管理工程。我使用的环境如下：

基本环境

直接下载weui后，编译会报错。需要修改一些内容。如下图：

修改package.json版本

默认weui使用3.9.1版本的gulp来处理，需要将

修改gulpfile.js文件

gulp4.0对任务的定义，要求使用serial限定。

安装weui依赖的包

按照提示分贝安装如下包

查看相关的任务

编译

编译时，提示async要另外处理，可忽略。

修改了下gulpfile.js，确保返回异步结果。

然后执行gulp获得如下结果。

测试

此时会自动打开浏览器，也可手工输入http://127.0.0.1:8081

Zepto.js

http://www.zeptojs.cn/

类似于Jquery的库，可以充分使用其选择器，用起来上手较快。

less

http://lesscss.org

支持变量定义，支持文件引入，可以更好的用来分工协作来编写好CSS。

gulp

weui使用gulp来完成项目的构建。必备的gulp只是还是很有必要。https://gulpjs.com/

Gulp的工作示意图

# node --version
v14.9.0
# npm --version
6.14.8
# npm install --global gulp-cli
# npx mkdirp my-project
# cd my-project
# npm init
# npm install --save-dev gulp
# gulp --version
CLI version: 2.3.0
Local version: 4.0.2
#

创建gulpfile.js

在根目录下创建文件

function defaultTask(cb) {
    // place code for your default task here
    cb();
  }
  
  exports.default=defaultTask

应用

使用WeUI自然最好是从工程自带的Exam开始，http://localhost:8081/example/ 如下先做一些简单的应用介绍。

抽屉列表样式

从源码看，这里是WeUI的首页样式，一个抽屉列表样式，通过gulpfile.js编译为一个单页应用。

默认使用的是这里的文件

H5代码

<div class="page">
    <div class="page__hd">
        <h1 class="page__title">
            <img src="./images/logo.png" alt="WeUI" height="21px" />
        </h1>
        <p class="page__desc">WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。</p>
    </div>
    <div class="page__bd page__bd_spacing">
        <ul>
            <li>
                <div class="weui-flex js_category">
                    <p class="weui-flex__item">表单</p>
                    <img src="./images/icon_nav_form.png" alt="">
                </div>
                <div class="page__category js_categoryInner">
                    <div class="weui-cells page__category-content">
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="button" href="javascript：">
                            <div class="weui-cell__bd">
                                <p>Button</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <!--
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="input" href="javascript：">
                            <div class="weui-cell__bd">
                                <p>Input</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        -->
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="form" href="javascript：">
                            <div class="weui-cell__bd">
                                <p>Form</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="list" href="javascript：">
                            <div class="weui-cell__bd">
                                <p>List</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="slider" href="javascript：">
                            <div class="weui-cell__bd">
                                <p>Slider</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="uploader" href="javascript：">
                            <div class="weui-cell__bd">
                                <p>Uploader</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                    </div>
                </div>
            </li>
            <li>
                <div class="weui-flex js_category">
                    <p class="weui-flex__item">基础组件</p>
                    <img src="./images/icon_nav_layout.png" alt="">
                </div>
                <div class="page__category js_categoryInner">
                    <div class="weui-cells page__category-content">
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="article" href="javascript：">
                            <div class="weui-cell__bd">
                                <p>Article</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="badge" href="javascript：">
                            <div class="weui-cell__bd">
                                <p>Badge</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="flex" href="javascript：">
                            <div class="weui-cell__bd">
                                <p>Flex</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="footer" href="javascript：">
                            <div class="weui-cell__bd">
                                <p>Footer</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="gallery" href="javascript：">
                            <div class="weui-cell__bd">
                                <p>Gallery</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="grid" href="javascript：">
                            <div class="weui-cell__bd">
                                <p>Grid</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="icons" href="javascript：">
                            <div class="weui-cell__bd">
                                <p>Icons</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="loading" href="javascript：">
                            <div class="weui-cell__bd">
                                <p>Loading</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="loadmore" href="javascript：">
                            <div class="weui-cell__bd">
                                <p>Loadmore</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="panel" href="javascript：">
                            <div class="weui-cell__bd">
                                <p>Panel</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="preview" href="javascript：">
                            <div class="weui-cell__bd">
                                <p>Preview</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="progress" href="javascript：">
                            <div class="weui-cell__bd">
                                <p>Progress</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                    </div>
                </div>
            </li>
            <li>
                <div class="weui-flex js_category">
                    <p class="weui-flex__item">操作反馈</p>
                    <img src="./images/icon_nav_feedback.png" alt="">
                </div>
                <div class="page__category js_categoryInner">
                    <div class="weui-cells page__category-content">
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="actionsheet" href="javascript：">
                            <div class="weui-cell__bd">
                                <p>Actionsheet</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="dialog" href="javascript：">
                            <div class="weui-cell__bd">
                                <p>Dialog</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="half-screen-dialog" href="javascript：">
                            <div class="weui-cell__bd">
                                <p>Half-screen Dialog</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="msg" href="javascript：">
                            <div class="weui-cell__bd">
                                <p>Msg</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="picker" href="javascript：">
                            <div class="weui-cell__bd">
                                <p>Picker</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="toast" href="javascript：">
                            <div class="weui-cell__bd">
                                <p>Toast</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="top-tips" href="javascript：">
                            <div class="weui-cell__bd">
                                <p>TopTips</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                    </div>
                </div>
            </li>
            <li>
                <div class="weui-flex js_category">
                    <p class="weui-flex__item">导航相关</p>
                    <img src="./images/icon_nav_nav.png" alt="">
                </div>
                <div class="page__category js_categoryInner">
                    <div class="weui-cells page__category-content">
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="navbar" href="javascript：">
                            <div class="weui-cell__bd">
                                <p>Navbar</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="tabbar" href="javascript：">
                            <div class="weui-cell__bd">
                                <p>Tabbar</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                    </div>
                </div>
            </li>
            <li>
                <div class="weui-flex js_category">
                    <p class="weui-flex__item">搜索相关</p>
                    <img src="./images/icon_nav_search.png" alt="">
                </div>
                <div class="page__category js_categoryInner">
                    <div class="weui-cells page__category-content">
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="searchbar" href="javascript：">
                            <div class="weui-cell__bd">
                                <p>Search Bar</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                    </div>
                </div>
            </li>
            <li>
                <div class="weui-flex js_item" data-id="layers">
                    <p class="weui-flex__item">层级规范</p>
                    <img src="./images/icon_nav_z-index.png" alt="">
                </div>
            </li>
        </ul>
    </div>
</div>

Javascript代码

<script type="text/javascript">
    $(function(){
        var winH=$(window).height();
        var categorySpace=10;

        $('.js_item').on('click', function(){
            console.log($(this),$(this).data('id'));
            var id=$(this).data('id');
            window.pageManager.go(id);
        });
        $('.js_category').on('click', function(){
            var $this=$(this),
                $inner=$this.next('.js_categoryInner'),
                $page=$this.parents('.page'),
                $parent=$(this).parent('li');
            var innerH=$inner.data('height');

            if(!innerH){
                $inner.css('height', 'auto');
                innerH=$inner.height();
                $inner.removeAttr('style');
                $inner.data('height', innerH);
            }

            if($parent.hasClass('js_show')){
                $parent.removeClass('js_show');
            }else{
                $parent.siblings().removeClass('js_show');

                $parent.addClass('js_show');
                if(this.offsetTop + this.offsetHeight + innerH > $page.scrollTop() + winH){
                    var scrollTop=this.offsetTop + this.offsetHeight + innerH - winH + categorySpace;

                    if(scrollTop > this.offsetTop){
                        scrollTop=this.offsetTop - categorySpace;
                    }

                    $page.scrollTop(scrollTop);
                }
            }

            var winH=$(window).height();
            var $foot=$('body').find('.page__ft');
            if($foot.length < 1) return;

            if($foot.position().top + $foot.height() < winH){
                $foot.addClass('j_bottom');
            }else{
                $foot.removeClass('j_bottom');
            }
        });
    });
</script>

依赖文件

<html>
<head>
    ...
    <link rel="stylesheet" href="../style/weui.css"/>
    <link rel="stylesheet" href="./example.css"/>
    ...
</head>
<body>
...
<script src="./zepto.min.js"></script>
<script src="./example.js"></script>
...
</body>
</html>

更新测试一把

先修改gulpfile.js
参考WeUI创建index.html与home.html
编辑home.html

/**
 * 增加study的html数据
 */
gulp.task('build:study:html', function() {
    return gulp
    .src('src/study/index.html', option)
    .pipe(
        tap(function(file) {
            var dir=path.dirname(file.path);
            var contents=file.contents.toString();
            contents=contents.replace(
                /<link\s+rel="import"\s+href="(.*)">/gi,
                function(match, $1) {
                    var filename=path.join(dir, $1);
                    var id=path.basename(filename, '.html');
                    var content=fs.readFileSync(filename, 'utf-8');
                    return (
                        '<script type="text/html" id="tpl_' +
                        id +
                        '">\n' +
                        content +
                        '\n</script>'
                    );
                },
            );
            file.contents=new Buffer(contents);
        }),
    )
    .pipe(gulp.dest(dist))
    .pipe(browserSync.reload({ stream: true }));
});

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
    <title>WeUI</title>
    <link rel="stylesheet" href="../style/weui.css"/>
    <link rel="stylesheet" href="../example/example.css"/>
</head>
<body ontouchstart>
    <div class="weui-toptips weui-toptips_warn js_tooltips">错误提示</div>

    <div class="container" id="container"></div>

    <link rel="import" href="./home.html">
    
    
    <script src="../example/zepto.min.js"></script>
    <script src="../example/example.js"></script>
</body>
</html>

<div class="page">
    <div class="page__hd">
        <h1 class="page__title">
            <img src="./images/logo.png" alt="WeUI" height="21px" />
        </h1>
        <p class="page__desc">Hello world WeUI, This is the first day to study.</p>
    </div>
    <div class="page__bd page__bd_spacing">
        <ul>
            <li>
                <div class="weui-flex js_category">
                    <p class="weui-flex__item">表单</p>
                    <img src="./images/icon_nav_form.png" alt="">
                </div>
                <div class="page__category js_categoryInner">
                    <div class="weui-cells page__category-content">
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="button" href="javascript：">
                            <div class="weui-cell__bd">
                                <p>Button</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <!--
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="input" href="javascript：">
                            <div class="weui-cell__bd">
                                <p>Input</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        -->
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="form" href="javascript：">
                            <div class="weui-cell__bd">
                                <p>Form</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="list" href="javascript：">
                            <div class="weui-cell__bd">
                                <p>List</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                    </div>
                </div>
            </li>
           
            <li>
                <div class="weui-flex js_category">
                    <p class="weui-flex__item">搜索相关</p>
                    <img src="./images/icon_nav_search.png" alt="">
                </div>
                <div class="page__category js_categoryInner">
                    <div class="weui-cells page__category-content">
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="searchbar" href="javascript：">
                            <div class="weui-cell__bd">
                                <p>Search Bar</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                    </div>
                </div>
            </li>
            <li>
                <div class="weui-flex js_item" data-id="layers">
                    <p class="weui-flex__item">层级规范</p>
                    <img src="./images/icon_nav_z-index.png" alt="">
                </div>
            </li>
        </ul>
    </div>
</div>
<script type="text/javascript">
    $(function(){
        var winH=$(window).height();
        var categorySpace=10;

        $('.js_item').on('click', function(){
            var id=$(this).data('id');
            window.pageManager.go(id);
        });
        $('.js_category').on('click', function(){
            var $this=$(this),
                $inner=$this.next('.js_categoryInner'),
                $page=$this.parents('.page'),
                $parent=$(this).parent('li');
            var innerH=$inner.data('height');

            if(!innerH){
                $inner.css('height', 'auto');
                innerH=$inner.height();
                $inner.removeAttr('style');
                $inner.data('height', innerH);
            }

            if($parent.hasClass('js_show')){
                $parent.removeClass('js_show');
            }else{
                $parent.siblings().removeClass('js_show');

                $parent.addClass('js_show');
                if(this.offsetTop + this.offsetHeight + innerH > $page.scrollTop() + winH){
                    var scrollTop=this.offsetTop + this.offsetHeight + innerH - winH + categorySpace;

                    if(scrollTop > this.offsetTop){
                        scrollTop=this.offsetTop - categorySpace;
                    }

                    $page.scrollTop(scrollTop);
                }
            }

            var winH=$(window).height();
            var $foot=$('body').find('.page__ft');
            if($foot.length < 1) return;

            if($foot.position().top + $foot.height() < winH){
                $foot.addClass('j_bottom');
            }else{
                $foot.removeClass('j_bottom');
            }
        });
    });
</script>

gulp build:study:html
# 然后 浏览器访问 http://127.0.0.1:8081

目录结构如上

表单

基础组件

操作反馈

导航相关

搜索相关

层级规范

总结

WeUI构造了可以较好与微信兼容的样式，但是部分放到了Example里，如果要使用需要将example.css的，需要结合zepto.js和example.js一起完成交互。但是足够帮助写出一个相对不错的H5应用。

但即便如此，也依稀看出产品意识的确不够，形到而意不到。万事果然最佳是相称，意到而形不致，也是眼高手低。

改进点

https://github.com/gaussgao/weui-study.git

明确设计概念
给出应用使用手册
给出二次开发指引
增加必备的导航样式

了解web前后端的区别，首先必须得清楚什么是web前端和web后端。

首先：web的本意是蜘蛛网和网的意思，在网页设计中我们称为网页的意思。现广泛译作网络、互联网等技术领域。表现为三种形式，即超文本(hypertext)、超媒体(hypermedia)、超文本传输协议(HTTP)等。

一、超文本（hypertext）

一种全局性的信息结构，它将文档中的不同部分通过关键字建立链接，使信息得以用交互方式搜索。它是超级文本的简称。　

二、超媒体（hypermedia）

超媒体是超文本（hypertext）和多媒体在信息浏览环境下的结合。它是超级媒体的简称。用户不仅能从一个文本跳到另一个文本，而且可以激活一段声音，显示一个图形，甚至可以播放一段动画。

Internet采用超文本和超媒体的信息组织方式，将信息的链接扩展到整个Internet上。Web就是一种超文本信息系统，Web的一个主要的概念就是超文本连接，它使得文本不再象一本书一样是固定的线性的。而是可以从一个位置跳到另外的位置。可以从中获取更多的信息。可以转到别的主题上。想要了解某一个主题的内容只要在这个主题上点一下，就可以跳转到包含这一主题的文档上。正是这种多连接性把它称为Web。

三、超文本传输协议（HTTP）

Hypertext Transfer Protocol超文本在互联网上的传输协议

目前，web该词汇又引申为“环球网”，而且，在不同的领域，有不同的含义。就拿“环球网”的释义来说，对于普通的用户来说，web仅仅只是一种环境——互联网的使用环境、氛围、内容等；而对于网站制作、设计者来说，它是一系列技术的复合总称(包括网站的前台布局、后台程序、美工、数据库领域等等的技术概括性的总称)。

Web前端: 顾名思义是来做Web的前端的。我们这里所说的前端泛指Web前端，也就是在Web应用中用户可以看得见碰得着的东西。包括Web页面的结构、Web的外观视觉表现以及Web层面的交互实现。

Web后端：后端更多的是与数据库进行交互以处理相应的业务逻辑。需要考虑的是如何实现功能、数据的存取、平台的稳定性与性能等。

当然啦，跟朋友一般，我都是这样解释的，在你的机子上看到的界面，安装的程序。给用户看的，操作的就是前端；而你看不到的，帮你保存网络游戏数据，保存应用数据，处理数据的就是后端（服务器）。比如说：我们在用的头条就是前端，而保存这个问题，还有把这个问题推送给你的就是后端。

web前端分为网页设计师、网页美工、web前端开发工程师。

首先网页设计师是对网页的架构、色彩以及网站的整体页面代码负责；网页美工只针对UI这块的东西，比如网站是否做的漂亮；web前端开发工程师是负责交互设计的，需要和程序员进行交互设计的配合。

web前端需要掌握的有脚本技术javascript DIV+CSS现下最流行的页面搭建技术，ajax和jquery以及简单的后端程序等。后端的话可供开发的语言有 asp、php、jsp、.NET 这些后端开发语言的话搭建环境都不一样

实际的开发过程中，前端、后端开发人员的定位如下：

1）前端开发人员：精通JS，能熟练应用JQuery，懂CSS，能熟练运用这些知识，进行交互效果的开发。

2）后端开发人员：会写Java代码，会写SQL语句，能做简单的数据库设计，会Spring和iBatis，懂一些设计模式等。

四、如何学习呢？

下面是小编整理的一整套系统的web前端学习教程。

领取方法：

关注 “小编”后，私信回复“前端”

觉得文章不错可以分享给好友！

在线咨询

上一篇：Delphi基础教程图文版之数据类型(子界)
下一篇：复杂烦恼吗！5个多用途HTML模板为你解决一半的工程

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商