2018年08月_马优晨

12月 11月 10月 08月 07月 06月 05月 04月 03月 02月 01月

原创前端分页原理

这里讲解一下滚动分页的常用的两种方法：方法一：<script type="text/javascript"> var page = 2; //当前页的页码 var flagNoData = false; //false var allpage = @Model.PageCount; //总页码，会从后台获取 fun...

2018-08-24 16:07:36 2344

原创 JavaScript 中的代码小技巧

使用函数过滤并序列化对象：JSON.stringify函数：value：将要被序列化的变量的值 replacer：替代器。可以是函数或者是数组如果是一个函数，则 value 每个属性都要经过这个函数的处理，该函数的返回值就是最后被序列化后的值。如果是一个数组，则要求该数组的元素是字符串，且这些元素会被当做 value 的键（key）进行匹配，最后序列化的结果，...

2018-08-23 18:59:59 341

翻译网站性能优化注意点

网站的性能的指标：白屏时间首屏时间整页时间DNS时间CPU占用率一、网络传输性能优化重定向→拉取缓存→DNS查询→建立TCP链接→发起请求→接收响应→处理HTML元素→元素加载完成。(1)设置浏览器缓存去除network面板顶部的Disable cache 勾选，查看缓存数据来源（from memory cache 和 from disk cache）...

2018-08-15 14:13:04 4525

原创 jade模板引擎修改为ejs模板引擎

如果我们使用jade模板引擎，里面的页面应该是这样的: 后缀名都是jade如果想使用ejs 模板引擎要怎么做呢？（1）安装 ejs npm install ejs --save （2）在项目的app.js 文件内新增 var ejs = require('ejs'); 在设置app.engine('.html', ejs.__express);a...

2018-08-14 17:52:31 743

原创 node.js热部署

问题：这里我搭建了一个项目但是每次改动都需要重新启动node？缺陷：这样子很影响开发效率，我想着修改代码页面会立即更新。解决方案：这里我们使用了hotnode进行热启动。当我们搭建完Express 项目后，目录如下：├── app.js├── bin│ └── www├── package.json├── public│ ├── images│...

2018-08-14 16:59:04 3055

原创一款实用的前端截图工具

一款实用的前端截图工具kscreenshot安装： npm install kscreenshot --save使用：import kscreenshot from 'kscreenshot'//65指键盘中的Anew kscreenshot(65, function (base64) { return 'https://www.baidu.com/img/bd_...

2018-08-13 09:56:50 7073 14

原创 webpack简单配置

一、前言vue-cli是构建vue单页应用的脚手架，输入一串指定的命令行从而自动生成vue.js+wepack的项目模板。这其中webpack发挥了很大的作用，它使得我们的代码模块化，引入一些插件帮我们完善功能可以将文件打包压缩，图片转base64等。后期对项目的配置使得我们对于脚手架自动生成的代码的理解更为重要，接下来我将基于webpack3.6.0版本结合文档将文件各个击破，纯干料。重...

2018-08-09 18:56:01 1431

原创 XHTML、HTML4，HTML5 之间的区别

这几个都是W3C负责制定的一个标准，用于网页内容的标签。HTML4是html标准中比较成熟的一个版本，使用时间比较长，也是现今大部分网页遵循的标准。XHTML 1.0标准为了规范HTML，W3C结合XML制定了XHTML 1.0标准，XHTML是能满足XML要求的HTML。XHTML 2.0标准不兼容HTML，现已被证明不符合潮流而淘汰HTML5的标准HTML5是htm...

2018-08-08 10:11:32 3745

原创 CSS模块化方案分类

CSS模块化方案分类：1、命名约定规范化CSS的解决方案如：BEM、OOCSS、AMCSS、SMACSS2、CSS in JS彻底抛弃 CSS，用 JavaScript 写 CSS 规则，styled-components 就是其中代表。3、使用JS 来管理样式模块使用JS编译原生的CSS文件，使其具备模块化的能力，代表是 CSS Modules。但是这些模块化方案都是...

2018-08-02 16:15:29 1061

原创使用webpack或者gulp去除多余CSS

上一篇我有讲过，项目里面冗余的css一般分为两种情况：有过多重复的CSS代码；有写CSS代码没有任何作用；接下来针对，第二种情况我们看一下使用webpack 和使用 gulp 的两种情况下的处理方案。webpack的完整处理方案：less/sass文件打包和分离自动处理css前缀消除未使用的css完整的webpack.config.js文件一、less...

2018-08-02 11:27:29 4111

转载 CSS优化

一、内联首屏关键CSS性能优化中有一个重要的指标——首次有效绘制（First Meaningful Paint，简称FMP）即指页面的首要内容（primary content）出现在屏幕上的时间。内联首屏关键CSS优点：将CSS直接内联到HTML文档中能使CSS更快速地下载。而使用外部CSS文件时，需要在HTML文档下载完成后才知道所要引用的CSS文件，然后才下载它们。内联首屏...

2018-08-01 17:44:03 746

原创 ES7了解多少

ES7在ES6的基础上添加了三项内容：求幂运算符（**）Array.prototype.includes()方法函数作用域中严格模式的变更Array.prototype.includes()方法Array.prototype.includes()方法接收两个参数：要搜索的值和搜索的开始索引。当第二个参数被传入时，该方法会从索引处开始往后搜索（默认索引值为0）。若搜索值在数组...

2018-08-01 14:43:17 2146

转载为什么要用nodejs做中间层

为什么要用nodejs做中间层后端出于性能和别的原因，提供的接口所返回的数据格式也许不太适合前端直接使用。前端所需的排序功能、筛选功能，以及到了视图层的页面展现，也许都需要对接口所提供的数据进行二次处理。这些处理虽可以放在前端来进行，但也许数据量一大便会浪费浏览器性能。因而现今，增加node端便是一种良好的解决方案。...

2018-08-01 09:56:46 10363 1