20180224 前端开发日报

javascript高仿热血传奇游戏;express搭建简易后台(前端必备);JS易混淆的方法整理;Basecamp发布JavaScript框架Stimulus 1.0;我看Vuex(一);前端页面制作工具;如何开发一个Node脚手架进阶版(Vue-cli学习篇);利用adb shell和node.js实现抖音自动抢红包功能

  1. javascript高仿热血传奇游戏 前言 游戏的第一个版本开发于14年,浏览器端使用html+css+js,服务端使用asp+php,通讯采用ajax,数据存储使用access+mySql。不过由于一些问题(当时还不会用node,用asp写复杂的逻辑真的会写吐;当时对Canvas写的也少,dom渲染很容易达到性能瓶颈),已经废弃。后来用canvas重制了一版。本文写于18年。 1...
  2. express搭建简易后台(前端必备) 之前一直写前端,了解过后端但是没有具体实现过接口。最近在学node,所以用express搭建了一个简易的后台,实现了登录注册等功能,写完这个Demo之后自己对后端的理解加深了一个层次,也了解了之前前后端没有分离的MVC模式的模板渲染具体细节。 这个demo是一个很简单的评论系统,用户注册登录之后发布评论,页面展示评论...
  3. JS易混淆的方法整理 js的字符串方法如substr、substring,数组方法如slice、splice等名字相近,用法稍有不同,让开发者在开发过程中总是记不起其用法,需要查资料。现整理一下,希望有助大家记忆。 String对象 slice stringObject.slice(start, end) var a = 'Hello world!'; var b = a.slice(2); var c = a.slice(-4, -2); // a: ...
  4. Basecamp发布JavaScript框架Stimulus 1.0 看新闻很累?看技术新闻更累?试试 下载InfoQ手机客户端 ,每天上下班路上听新闻,有趣还有料! Basecamp全新推出Stimulus 1.0,该产品强调HTML页面上JavaScript轻量级的实现,取代了固有的全功能JavaScript应用程序。 Basecamp称其为“你所拥有的最适用于HTML的JavaScript框架”。 在Stimulus推出之前,Baseca...
  5. 我看Vuex(一) 之前阅读过 redux 的源码, vuex 同样也是一个状态管理工具,之前开发 vue 应用的时候,用到的 vuex 也比较多,所以自然对 vuex 颇有兴趣,最主要的原因是 我爱学习 ,(不好意思,脸掉地上了),,哈哈哈哈哈哈 (其实过年这几天也挺无聊的。。。 接下来我们来回归正题 Vuex 是如何引入到 Vu...
  6. 前端页面制作工具 pagemaker是一个前端页面制作工具,方便产品,运营和视觉的同学迅速开发简单的前端页面,从而可以解放前端同学的工作量。此项目创意来自网易乐得内部项目nfop中的pagemaker项目。原来项目的前端是采用jquery和模板ejs做的,每次组件的更新都会重绘整个dom,性能不是很好。因为当时react特别火,加上项目本身的适合,最后...
  7. 如何开发一个Node脚手架进阶版(Vue-cli学习篇) 在之前一篇博客介绍了关于Node脚手架的一些基础的知识,这篇博客是在之前的基础上针对在Node中开发脚手架中遇到的问题,如: 终端样式、交互问题 文件处理问题 通过对Vue-cli 2.9.2的源码进行分析,解决相关问题。 如果没有看过之前一篇博客的,或者对Node.js的脚手架没有了解过的同学,推荐先看上一篇...
  8. 利用adb shell和node.js实现抖音自动抢红包功能 逻辑很简单,在抖音视频播完之后如果是红包视频,会跳出红包。 我们模拟逻辑如下: 点击屏幕中央,如果有红包打开红包,没有红包则暂停视频。 点击返回按钮,如果有红包关闭红包界面,没有红包提示再按一次退出(其实没退出)。 进行上滑操作,进入下一个视频。 点击、返回、上滑,就这么三步行为,...
  9. webpack-loader实现一个简化版gitbook 最近在看weppack-loader,不看不知道,当我翻到markdown-loader的时候,大吃一惊,简直精简的不能再精简了,除去require和export语句,一共就有四行。基本上loader的作用一目了然:在js进入执行之前对其做改动。 webpack-loader如何工作 babel-loader是最常见的,作用就是将我们import的js中的ES6语法转为es5。 { ...
  10. NodeJS爬虫——立马理财 其实在早之前,就做过立马理财的销售额统计,只不过是用前端js写的,需要在首页的console调试面板里粘贴一段代码执行, 点击这里 。主要是通过定时爬取 www.lmlc.com/s/web/home/… 异步接口来获取数据。然后通过一定的排重算法来获取最终的数据。但是这样做有以下缺点: 代码只能在浏览器窗口下运行,关闭浏览器...
  11. webpack优化入门详解 Scope Hoisting-作用域提升,将模块都放到一个闭包函数中,通过减少闭包函数数量从而加快JS的执行速度。 基本配置如下: plugins: 配置后,自定义的两个模块函数被放在一个必包函数体中,打包结果如下: 配置前,自定义的两个模块函数分别在不同的必...
  12. Angular Material 攻略 04 Icon 网页系统中的Icon虽然说很简单,但是其中的学问还是有很多的,我们常用的Icon库有FontAwesome、Iconfont等,我们选择了Angular Material这个组件库,就介绍Material Icons吧。 对Icon感兴趣的同学可以看一下这里 Material Design 的 Icon Material Design 的 Icon大致分成两种,一种是系统Icon,另一种是产品Ic...
  13. pm2用法之ecosystem部署nodejs项目 二、配置部署脚本文件 在项目根目录添加 pm2 的部署脚本文件 ecosystem.JSON { "apps": [ "name": "movie", //对应Nginx上的配置 "script": "app.js", //入口文件 "env": { "COMON_VARIABLE...
  14. 猫头鹰的深夜翻译:从1000+JS项目中汇总的10个最容易出现的错误(以及如何解决)JavaScript常出现的错误前十位 为了可读性,错误名称进行了一定的简写。让我们深入了解每个错误发生的原因以及解决方法。 1. Uncaught TypeError: Cannot Read Property 如果你是一名JavaScript开发人员,你可能...
  15. 记一次 webpack 打包体积优化手头做的项目开发得差不多了,而打包配置是一开始粗略配置的,不大的项目打包出来得6MB+,所以现在必须进行优化。 打包结果分析 执行命令 webpack --profile --json > stats.json ,可以将打包过程的详细信息...
  16. babel之配置文件.babelrc入门详解 官方解释,是下一代JavaScript 语法的编译器。 既然是下一代Javascript的标准,浏览器因版本的不同对此会有兼容性问题,JavaScript的新的方法都不能使用,但是目前我们在项目开发一直提倡使用最新的语法糖编写,不但能减少代码量,而且async,await等新特性还解决了回调的编写机制,减轻了代码维护成本。 Babel就因此...
  17. webpack 源码探索之插件机制 最近在一直在为面试做准备,搜了很多大佬记录的面试经验和面试内容,对自己不太熟悉和已经记忆模糊的知识点内容进行复习巩固,争取能够有一个好的状态。这篇文章以我的经验讲述了我是如何从源码的角度了解到 webpack 插件机制,也简单描述了 webpack 编译构建的机制。 使用 vscode 调试功能,运行项目打包程...
  18. 掌握Node.js中的Async和Await 在本文中,你将学习如何使用Node.js中的async函数(async/await)来简化callback或Promise. 异步语言结构在其他语言中已经存在了,像c#的async/await、Kotlin的coroutines、go的goroutines,随着Node.js 8的发布,期待已久的async函数也在其中默认实现了。 Node中的async函数是什么? 当函数声明为一个Async函数它...

关注github前端日报 订阅精彩文章

前端日报栏目数据来自码农头条,每日分享互联网上热门的前端开发、移动开发、设计、资源和资讯等,为开发者提供动力,如果觉得内容对你有用,记得分享给你的小伙伴。进入码农头条查看更多

原创文章:20180224 前端开发日报 ,未经许可,禁止转载,©版权所有
原文出处:前端开发博客 (http://caibaojian.com/fe-daily-20180224.html)