响应式设计

一个创建友好移动端网站的初学者教程.

“响应式设计”意味着你的网站显示在各个端应该都相似.他是一个网站设计和开发消除差异化的过程.

响应式通过media queries css完成.media queries检测用户设备告诉浏览器什么忽略或者什么显示什么.

继续阅读“响应式设计”

vue cli 3.0 引入 jQuery 插件

虽然说,jQuery可以做到的,都可以用vue做到.

但是有时候用习惯了有些还是想用下jQuery.

不说废话了.网上都是cli2 的教程,我就写一下3.0的改法.

步骤其实很简单,首先安装

npm install jquery --save

第二步改配置vue.config.js

 

增加

chainWebpack: config => {
    config
        .plugin('provide')
        .use(webpack.ProvidePlugin, [{
            $: 'jquery',
            jquery: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery'
        }]);
  },

例子

// vue.config.js
const webpack = require('webpack');

module.exports = {
  // options...
  assetsDir: 'vasset',

  lintOnSave: undefined,
  chainWebpack: config => {
    config
        .plugin('provide')
        .use(webpack.ProvidePlugin, [{
            $: 'jquery',
            jquery: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery'
        }]);
  },

  pluginOptions: {
    i18n: {
      locale: 'zh',
      fallbackLocale: 'zh',
      localeDir: 'locales',
      enableInSFC: false
    }
  }
  
}

就可以了.

正则表达式超实用工具

https://www.debuggex.com/

在做项目的时候,同事写的正则表达式出问题了。找到了这个网站,超级好用。标记一下,以后再遇到正则表达式就直接可以测试效果。再也不担心正则了。

转载:前端人工智能?TensorFlow.js 学会游戏通关

好久没写博客了,最近忙于工作,没什么空闲。不过看到了一篇好文,转载一下。

作者:Henry 来源知乎

先上最终效果

T-Rex Runner 是隐藏在 Chrome 中的彩蛋游戏,

最近我用刚推出的 TensorFlow.js 开发了一个完全独立运行于浏览器环境下的 AI 程序,如下图所示 AI 可以轻松控制暴龙(T-Rex)避开障碍物。

继续阅读“转载:前端人工智能?TensorFlow.js 学会游戏通关”

React教程-2 版本v16.2.0

进阶

现在,每个状态都封装到了每个方格组件里。要完成整个游戏,我们要检查一个玩家是否赢得比赛,还有除了X还有O放到方格。为了检查是否赢,我们需要在一个地方获取9个方格信息,而不是每一个方格组件。

You might think that Board should just inquire what the current state of each Square is. Although it is technically possible to do this in React, it is discouraged because it tends to make code difficult to understand, more brittle, and harder to refactor.

 

Instead, the best solution here is to store this state in the Board component instead of in each Square – and the Board component can tell each Square what to display, like how we made each square display its index earlier.

When you want to aggregate data from multiple children or to have two child components communicate with each other, move the state upwards so that it lives in the parent component. The parent can then pass the state back down to the children via props, so that the child components are always in sync with each other and with the parent.

Pulling state upwards like this is common when refactoring React components, so let’s take this opportunity to try it out. Add a constructor to the Board and set its initial state to contain an array with 9 nulls, corresponding to the 9 squares:

React教程-1 版本v16.2.0

在开始之前

我们在创建什么

我们先来开发一个交互的井字棋游戏.

如果你喜欢,你可以直接查看最终项目代码Final Resul.无需担心你现在是否明白理解里面的代码,或者是一些你不熟悉的语法。我们将一步步学习如何制作这个游戏。

玩一下这个游戏,还可以使用悔棋.

好了让我们开始教程.

继续阅读“React教程-1 版本v16.2.0”