在过去一年的工作中我所使用的js框架是Next.js,尽管这个框架在前后端同构方面有着绝佳的体验，但是当页面js文件过大以及preload过多的时候还是会出现页面跳转卡顿和渲染阻塞等比较糟糕的用户体验问题。由于我之前既不知道这个框架的工作原理，自然也就不知道如何去优化它。乘着农历春节前工地活少所以稍微研究一下。 第一个问题：宣称前后台同构的Next.js为何会出现卡顿现象？Next.js 中的特有生命周期hook 函数 getInitialProps会...
又接到新需求了吧~~ 背景在一个大表单里，有可能会出现这种需求，用户可以自己操作动态添加、移除表单，更加个性化的效果。 常见于填写个人信息、附加内容的表单 例如： “工作经历”可以用户自己点击继续添加按钮，在原有的表单后面 append 多一个表单，不需要就点击右上方 X 按钮移除 问题在实现之前，提出几个问题 vue 怎么动态渲染或移除表单上去v-model 怎么绑定动态添加表单的 value 值动态新增的表单如何验证动态表单怎么填...
我们已经熟悉React 服务端渲染（SSR）的基本步骤，现在让我们更进一步利用 React RouterV4 实现客户端和服务端的同构。毕竟大多数的应用都需要用到web前端路由器，所以要让SSR能够正常的运行，了解路由器的设置是十分有必要的 基本步骤路由器配置前言已经简单的介绍了React SSR，首先我们需要添加ReactRouter4到我们的项目中 $ yarn add react-router-dom# or, using npm $ npm install react-router-dom 接着我们会描述一个简单的...
说明实现 路由跳转、redux 文件版本 “next”: “^4.2.3”,“react”: “^16.2.0”,“react-dom”: “^16.2.0”Next.js GitHub 文档 项目源码 使用Next.js 使用文件体统作为API，可以自动进行服务器端渲染和代码分割 1. 安装 yarn add next react react-dom2. package.json 中添加 npm script "scripts": {"dev": "next","build": "next build","start": "next start"}, 3. 创建 /pages 文件夹，其中文件会映射为路由/pages 文件夹...
最近在开发一个服务端渲染工具，通过一篇小文大致介绍下服务端渲染，和服务端渲染的方式方法。在此文后面有两中服务端渲染方式的构思，根据你对服务端渲染的利弊权衡，你会选择哪一种服务端渲染方式呢？ 什么是服务器端渲染 使用 React 构建客户端应用程序，默认情况下，可以在浏览器中输出 React 组件，进行生成 DOM 和操作 DOM。React 也可以在服务端通过 Node.js 转换成 HTML，直接在浏览器端“呈现”处理好的 HTML 字符串，这个...
在开发React组件的过程中，我们经常会遇到这个问题：什么情况下组件会重新渲染？ 当内部data发生改变，state发生改变(通过调用this.setState()) 以及父组件传过来的props发生改变时，会导致组件重新渲染。 以下几个问题同样值得我们思考：setState()函数在任何情况下都会导致组件重渲染吗？如果setState中的state没有发生改变呢？ 如果state和从父组件传过来的props都没变化，那他就一定不会发生重渲染吗？ 首先，我们来解决这两个...
为什么要SSR单页应用将UI层和内容都由javascript来渲染，搜索引擎或网页爬虫需要完成的HTML结构，因此单页应用如果只在客户端渲染，不利于SEO，此外尽管我们可以通过按需加载的形式来减少首页加载的js，但是通过js来渲染DOM的时候还是会有一定的时间延迟。 0.前言 服务端渲染在项目中不是刚需的东西，但有的时候也是需要做一个服务端渲染，项目要做服务端渲染当然是有很多好处的 首屏加载快，相比SPA单页应用还要有优势。SEO 优化 ...
第一节：nuxt.js相关概述 nuxt.js简单的说是Vue.js的通用框架，最常用的就是用来作SSR（服务器端渲染）.Vue.js是开发SPA（单页应用）的,Nuxt.js这个框架，用Vue开发多页应用，并在服务端完成渲染，可以直接用命令把我们制作的vue项目生成为静态html。 1.那服务器端渲染到底有什么好处呢？ 主要的原因时SPA（单页应用）不利于搜索引擎的SEO操作，Nuxt.js适合作新闻、博客、电影、咨询这样的需要搜索引擎提供流量的项目。如果你要作移...
Server Side Rendering（服务端渲染） SSR 目的是为了解决单页面应用的 SEO 的问题，对于一般网站影响不大，但是对于论坛类，内容类网站来说是致命的，搜索引擎无法抓取页面相关内容，也就是用户搜不到此网站的相关信息。 原理将 html 在服务端渲染，合成完整的 html 文件再输出到浏览器。 适用场景 客户端的网络比较慢客户端运行在老的或者直接没有 JavaScript 引擎上NUXT 作用就是在 node.js 上进一步封装，然后省去我们搭建服务...
先看看ElementUI里关于el-table的template数据结构： <template><el-table:data="tableData"style="width: 100%"><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column></el-table></template> 再看看ElementUI里关于el-table的data数据结构： <script>export default {da...
1 基本用法 当遍历一个数组或枚举一个对象进行迭代循环展示时，就会用到列表渲染指令 v-for。 它的表达式需要结合 in 来使用，类似 item in items 的形式。 1.1 遍历数组 html： <div id="app"><ul><li v-for="n in news">{{n.title}}</li></ul> </div> js： <script>var app = new Vue({el: #app,data: {news: [{title: 被智能手机绑架的i世代 爱熬夜、拒绝恋爱、不考驾照},{title: 黑莓宣布14亿美元收购网络安全公司Cylance},{ti...
1 应用于单个元素 Vue.js 中的条件渲染指令可以根据表达式的值，来决定在 DOM 中是渲染还是销毁元素或组件。 html： <div id="app"><p v-if="type===1">拌面</p><p v-else-if="type===2">扁肉</p><p v-else="type===3">其它</p> </div>js： <script>var app = new Vue({el: #app,data: {type: 2}}); </script>输出结果：扁肉当表达式的值为 true 时，当前元素或组件及所有的子节点都会被渲染出来。 2 应用于多个元素 上述示例中的代...
用v-for把一个数组对应为一个组件元素我们用v-for指令根据一组数组的选项列表进行渲染。v-for指令需要使用item in items形式的语法： <ul><li v-for="item in items">{{ item.message }}</li> </ul>var vm = new Vue({el: #el,data: {items: [{message: foo},{message: boar}]} })在v-for块中，我们拥有对父作用域属性的完全访问权限。v-for还支持一个可选的第二个参数为当前项的索引。 <ul><li v-for="(item, index) in items">{{...
对于一个展示页面来讲, 通常有好几种展示状态(以列表页为例): 数据为空, 空页面取数据时发生错误, 错误页面数据正常加载状态针对以上三种情况, react渲染列表的时候要正确判断并渲染出相应的视图, 也就是条件渲染. 不同于vue的v-if, v-show等框架提供的api, react的条件渲染都是js原生的再加上一点点的hack. 比如react文档提到的. if/else, && 和三目等等. 当然上面的都是常用的一些方法, 但是也存在着各种问题, 比如条件分支过多的...
JavaScript 模板引擎作为数据与界面分离工作中最重要一环，越来越受开发者关注，模板引擎种类也是五花八门，我就说几个安全性高、错误处理调试优，执行速度快的有artTemplate(腾讯 14k)、juicer(国外 12k)这俩个，doT除了错误处理调试差以外其他的都和这两个一样,他有一个优点是小(4k)，扯远啦。 art-template 是一个简约、超快的模板引擎。 什么是art-templateart-template 是一个简约、超快的模板引擎。它采用作用域预声明的技术...