Frontend on Time Friend

Angular路径别名配置

Thu, 27 Dec 2018 22:17:36 +0000

angular cli 内置了 webpack,所以也是可以配置路径别名的. 而且配置的方式几乎是一样的.

配置路径别名

找到你的项目根目录的 tsconfig.json 文件.

注意: 如果你的配置不生效,需要查看你的baseUrl是否配置正确.

{
 "compilerOptions": {
 "baseUrl": "./src/", 
 "paths": {
 "@app/*": ["app/*"],
 "@services/*": ["app/services/*"]
 }
 }
}

配置之前

import { Api } from '../../../../../services/api.service';
import { xxx } from '../../../../../services/api.xxx';

配置之后

import { Api } from '@services/api.service';
import { xxx } from '@services/api.xxx';

一些开发中的小技巧,希望可以帮到你.

Angular-electron

这里推荐一个完成度非常高的模板,开箱即用

https://github.com/maximegris/angular-electron

Angular7 + Electron主进程与渲染进程通讯问题

Wed, 19 Dec 2018 19:02:36 +0000

Electron 中的进程分类

在 Electron 中，存在两种进程：主进程和渲染进程。

渲染进程你可以理解为view层,也就是我们非常熟悉的显示页面的进程. 在这里你可以调用nodejs接口的能力,也可以做我们已经非常熟悉的浏览器操作. 但是你想要调用主进程才能做的一些操作的时候,就需要一个通讯机制,告诉主进程你要干嘛干嘛.

IPC通讯

渲染层向主进程发送通知

//index.html,渲染进程发送通知
onst electron = require('electron')
const ipcRenderer = electron.ipcRenderer
ipcRenderer.send('main-process-messages','hellow')

// main.js 主进程接收通知
const { ipcMain } = require('electron');
ipcMain.on('main-process-messages', function(event, message) {
 console.log(message)
});

主进程向渲染进程发送通知

// main.js
mainWindow.webContents.send('main-process-messages', 'main-process-messages show')

//index.html,渲染进程中接收消息
const electron = require('electron')
const ipcRenderer = electron.ipcRenderer
ipcRenderer.on('main-process-messages', function(event, message){
 alert(message)
})

在Angular工程中如何使用

当你在angular工程中直接require('electron')是会直接报错的.

ERROR in ./node_modules/electron/index.js
Module not found: Error: Can't resolve 'fs' in '###/node_modules/electron'
ERROR in ./node_modules/electron/index.js
Module not found: Error: Can't resolve 'path' in '###/node_modules/electron'

那我们该怎么办呢.

创建一个 electron.service.ts

// 示例代码
import { Injectable } from '@angular/core';
import {} from 'electron';
import Fs from 'fs';

@Injectable({
 providedIn: 'root'
})
export class ElectronService {
 constructor() {
 // check if platform is electron
 const isElectron: boolean = window && window['process'] && window['process'].type;

 if (isElectron) {
 const fs: typeof Fs = window['require']('fs');
 const app: Electron.App = window['require']('electron').remote;
 }
 }
 electron = window['require']('electron');
}

当我们需要electron的时候,直接引入这个service就好了.

从零搭建 Angular7 + Electron 桌面应用

Tue, 18 Dec 2018 19:02:36 +0000

Electron 是什么？

Electron 是一个可以用 JavaScript、HTML 和 CSS 构建桌面应用程序的库。这些应用程序能打包到 Mac、Windows 和 Linux 系统上运行，也能上架到 Mac 和 Windows 的 App Store。意思就是说,你只要拥有前端开发的能力,也可以轻松开发跨平台的桌面应用.

Electron的『主进程』和『渲染进程』

Electron 有两种进程：『主进程』和『渲染进程』。部分模块只能在两者之一上运行，而有些则无限制。主进程更多地充当幕后角色，而渲染进程则是应用程序的各个窗口。

主进程

主进程，通常是一个命名为 main.js 的文件，该文件是每个 Electron 应用的入口。它控制了应用的生命周期（从打开到关闭）。它既能调用原生元素，也能创建新的（多个）渲染进程。另外，Node API 是内置其中的。

渲染进程

渲染进程是应用的一个浏览器窗口。与主进程不同，它能存在多个（注：一个 Electron 应用只能存在一个主进程）并且相互独立（它也能是隐藏的）。

主窗口通常被命名为 index.html。它们就像典型的 HTML 文件，但 Electron 赋予了它们完整的 Node API。因此，这也是它与浏览器的区别。

进程之间的通讯 (IPC)

想要再网页里调用主进程的功能,比如关闭窗口,最小化全屏等主线程才能控制的功能. Electron提供了通讯的机制,这就是IPC.后续会慢慢介绍IPC的使用.

Angular7 + Electron

介绍完Electron的一些基础概念之后, 这里教大家徒手搭建一个基于ng7的桌面应用工程.

1. 安装最新`angular-cli`

npm i -g @angular/cli

2. 生成一个`angular`工程

ng new electro-angular7

3. 安装最新版`electron`

cd electro-angular7
npm install --save-dev electron@latest

4. 在项目根目录添加`主进程` main.js文件

const { app, BrowserWindow , ipcMain } = require('electron');
const path = require('path')
// 保持对window对象的全局引用，如果不这么做的话，当JavaScript对象被
// 垃圾回收的时候，window对象将会自动的关闭
let win;
function createWindow () {
 // 创建浏览器窗口。
 win = new BrowserWindow({
 width: 1000,
 height: 670 ,
 });

 // 然后加载应用的 index.html。
 win.loadURL(`file://${__dirname}/dist/electro-angular7/index.html`);
 // 打开开发者工具
 win.webContents.openDevTools();


 // 当 window 被关闭，这个事件会被触发。
 win.on('closed', () => {
 // 取消引用 window 对象，如果你的应用支持多窗口的话，
 // 通常会把多个 window 对象存放在一个数组里面，
 // 与此同时，你应该删除相应的元素。
 win = null;
 });
}

// Electron 会在初始化后并准备
// 创建浏览器窗口时，调用这个函数。
// 部分 API 在 ready 事件触发后才能使用。
app.on('ready', createWindow);

// 当全部窗口关闭时退出。
app.on('window-all-closed', () => {
 // 在 macOS 上，除非用户用 Cmd + Q 确定地退出，
 // 否则绝大部分应用及其菜单栏会保持激活。
 if (process.platform !== 'darwin') {
 app.quit();
 }
});

app.on('activate', () => {
 // 在macOS上，当单击dock图标并且没有其他窗口打开时，
 // 通常在应用程序中重新创建一个窗口。
 if (win === null) {
 createWindow();
 }
});

// 在这个文件中，你可以续写应用剩下主进程代码。
// 也可以拆分成几个文件，然后用 require 导入。


// ipc通讯相关代码
// 登录窗口最小化
ipcMain.on('window-min', function() {
 win.minimize();
});
// 登录窗口最大化
ipcMain.on('window-max', function() {
 if (win.isMaximized()) {
 win.restore();
 } else {
 win.maximize();
 }
});
ipcMain.on('window-close', function() {
 win.close();
});

5. package.json 文件修改

添加main.js的位置与npm scripts electron命令

Angular模板的安全导航( ?. )

Sun, 25 Nov 2018 22:17:36 +0000

这是非常实用,也是在Angular开发中经常要使用的操作符. 而在react于vue中原生并不自带这样的特性.

安全导航操作符 ( ?. )

在我们日常开发中,在访问属性路径的时候.

如果因为一些客观原因导致了路径中出现了 null,undefined,再往下取值,整个程序就会直接报错.导致程序不能往下运行.

举个例子

var obj ={
 a:1,
 b:{ // 有时候,有可能这个属性不存在
 c:2,
 d:3 
 }
}
obj.a //正常取值
obj.b //如果这个属性有时候不存在,这样取值的话,也只是取到一个 undefined,并不会报错
obj.b.c //当b属性不存在的时候,在undefined下取值,就绝对会造成程序崩溃

安全导航就是要解决以上都问题,我们只要在不确定的属性前的 .改成 ?.就可以不需要报错了,当没有取到值的时候,会默认为空.

{{ obj?.b?.c }}

在写模板的时候是不是很方便呢? 简直不能太棒了好伐~

妈妈再也不用担心后台给的数据很奇怪导致我前端报错了~~~~~

让Visual-Studio-Code按照ESLint规则格式化你的代码

Sun, 05 Nov 2017 19:33:33 +0000

项目加入ESLint之后,大家的代码是工整了许多. 但是因为刚刚不熟悉ESLint的规则,很多时候都在数进退多少空格,双引号还是单引号的删改切换.

严重影响了开发效率与心情!!!! 严重影响了开发效率与心情!!!! 严重影响了开发效率与心情!!!!

重要的事情说三遍!!!

下面介绍一种利用Visual-Studio-Code ESLint插件,配置之后,可以自动格式化成ESLint规定的格式

在Visual-Studio-Code 安装 ESLint插件
widnows 点击文件>首选项>设置 / mac 点击Code>首选项
搜索 eslint.autoFixOnSave, 找到之后修改为 true

重启你的Visual-Studio-Code,当你打开代码文件的后,直接保存文件. 代码会自动格式化成ESLint规定的格式.大大的提高了开发效率,并且统一了代码规范

下面分享一下我们项目里的一些ESLint规则

{
 rules: { // 具体规则
 'accessor-pairs': 2, // getter/setter成对出现
 'arrow-spacing': [1, { 'before': true, 'after': true }], // 箭头函数前后有空格
 'array-bracket-spacing': [1, 'never'], // 数组内前后无空格
 'block-spacing': [1, 'always'], // 单行{}前后有空格
 'brace-style': [2, '1tbs', { 'allowSingleLine': true }], // {}换行，单行不用
 'camelcase': [2, { 'properties': 'never' }], // 属性名可以不是驼峰
 'comma-dangle': [1, 'only-multiline'], // 数组/对象最后一个必须有,
 'comma-spacing': [1, { 'before': false, 'after': true }], // ,前有空格, 后无空格
 'comma-style': [2, 'last'], // ,在最后，不能换行
 'constructor-super': 1, // super()在必须构造函数内
 'curly': [2, 'multi-line'], // if/while等函数可以多行不带{}
 'dot-location': [2, 'property'], // .的位置可以在换行
 'eol-last': 1, // 文件末尾需要空白行
 'eqeqeq': [2, 'allow-null'], // 必须===, null除外
 'generator-star-spacing': [2, { 'before': true, 'after': true }], // generator函数前后有空格
 'handle-callback-err': [2, '^(err|error)$' ], // 有err/error必须处理异常
 'indent': [2, 2, { 'SwitchCase': 1 }], // 缩进2格，switch中1格
 'jsx-quotes': [2, 'prefer-single'], // jsx属性用单引号
 'key-spacing': [2, { 'beforeColon': false, 'afterColon': true }], // 对象属性前有空格, 后无空格
 'keyword-spacing': [2, { 'before': true, 'after': true }], // 关键词前后有空格, 如if-else
 'new-cap': [2, { 'newIsCap': true, 'capIsNew': false }], // new后必须大写开头构造函数, 大写开头不一定要new
 'new-parens': 2, // new的构造函数必须带参数
 'object-curly-spacing': [2, 'always', { objectsInObjects: false }], // 对象{}前后有空格, 对象内的对象例外
 'no-array-constructor': 2, // Array(10)->yes, Array(1, 2)->no
 'no-caller': 2, // 禁止caller/callee
 'no-class-assign': 2, // 禁止赋值class
 'no-cond-assign': 2, // 条件不能有赋值
 'no-const-assign': 2, // 禁止赋值常量(const)
 'no-control-regex': 2, // reg中不能有控制符号
 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 1, // node环境prod禁用
 'no-delete-var': 2, // 不能delete变量，可以用在对象
 'no-dupe-args': 2, // 参数不能重复
 'no-dupe-class-members': 2, // class中方法不能有重复
 'no-dupe-keys': 2, // 对象key不能重复
 'no-duplicate-case': 2, // switch不能有重复case
 'no-empty-character-class': 2, // reg中不能有空字符串
 'no-empty-pattern': 2, // 解构不能有空解构模式
 'no-eval': 2, // 不能用eval
 'no-ex-assign': 2, // 不能复制catch中的error
 'no-extend-native': 2, // 不能扩展Object原型
 'no-extra-bind': 2, // bind的函数体中要有明确的this
 'no-extra-boolean-cast': 2, // 禁止多余的Boolean转换
 'no-extra-parens': [2, 'functions'], // 函数中禁止多余的括号
 'no-fallthrough': 2, // switch需要break
 'no-floating-decimal': 2, // float中0不能省略
 'no-func-assign': 2, // 禁止赋值函数
 'no-implied-eval': 2, // 禁止隐性eval
 'no-inner-declarations': [2, 'functions'], // 禁止在条件中声明function
 'no-invalid-regexp': 2, // 禁止无用的reg
 'no-irregular-whitespace': 2, // 禁止不规则空格
 'no-iterator': 2, // 禁止使用__iterator__属性
 'no-label-var': 2, // 禁止label var
 'no-labels': [2, { 'allowLoop': false, 'allowSwitch': false }], // 禁止label表达式
 'no-lone-blocks': 2, // 禁止无用的{}
 'no-mixed-spaces-and-tabs': 2, // space和tab不混用
 'no-multi-spaces': 2, // 禁止多空格
 'no-multi-str': 2, // 禁止多行的string
 'no-multiple-empty-lines': [2, { 'max': 1 }], // 禁止多空行，最大1行
 'no-native-reassign': 2, // 禁止赋值原生对象(window/Object...)
 'no-negated-in-lhs': 2, // !(key in object)->yes, !key in object->no
 'no-new-object': 2, // new Object()->no
 'no-new-require': 2, // new require(xxx)->no
 'no-new-symbol': 2, // new Symbol(xxx)->no
 'no-new-wrappers': 2, // String/Number等不能用new
 'no-obj-calls': 2, // 禁止calling全局对象属性，如Math/JSON
 'no-octal': 2, // 禁止八进制文字
 'no-octal-escape': 2, // 禁止八进制转义
 'no-path-concat': 2, // __dirname和__filename禁止string拼接
 'no-proto': 2, // 禁止使用__proto__
 'no-redeclare': 2, // 禁止重新复制var
 'no-regex-spaces': 2, // 禁止reg出现多个空格
 'no-return-assign': [2, 'except-parens'], // 禁止return中赋值
 'no-self-assign': 2, // 禁止自身赋值
 'no-self-compare': 2, // 禁止自身比较, 如果NaN->Number.isNaN
 'no-sequences': 2, // 禁止,操作符
 'no-shadow-restricted-names': 2, // 禁止跟踪严格模式下部分关键词
 'no-spaced-func': 2, // function的()不要空格
 'no-sparse-arrays': 2, // array不能用空元素
 'no-this-before-super': 2, // super()前不能用this
 'no-throw-literal': 2, // 禁止直接throw内容，必须是Error()
 'no-trailing-spaces': 1, // 禁止多余的空格
 'no-undef': 2, // 禁止使用未赋值变量
 'no-undef-init': 2, // 变量不能初始化为undefined
 'no-unexpected-multiline': 2, // 禁止有疑义的多行表达式
 'no-unmodified-loop-condition': 2, // 循环中的变量要在循环中修改
 'no-unneeded-ternary': [2, { 'defaultAssignment': false }], // 禁止不必要的三元操作符
 'no-unreachable': 2, // return/throw等之后不应有表达式
 'no-unsafe-finally': 2, // 禁止不安全的finally
 'no-unused-vars': [1, { 'vars': 'all', 'args': 'none' }], // 禁止不使用的变量，参数可以
 'no-useless-call': 2, // 禁止无用的call
 'no-useless-computed-key': 2, // 禁止无用的计算属性
 'no-useless-constructor': 2, // 禁止无用的constructor
 'no-whitespace-before-property': 2, // 属性前不能有空格
 'no-with': 2, // 禁用with
 'one-var': [2, { 'initialized': 'never' }], // 只能一个var, 初始化不检查
 'operator-linebreak': [2, 'after', { 'overrides': { '?': 'before', ':': 'before' } }], // 操作符换行, 默认在行末, ?和:在下一行前
 'padded-blocks': [2, 'never'], // 作用域中没有padded的空行
 'quotes': [2, 'single', { 'avoidEscape': true, 'allowTemplateLiterals': true }], // 使用单引号, 转义或者模版可以例外
 'semi': [2, 'never'], // 禁用结尾;
 'semi-spacing': [2, { 'before': false, 'after': true }], // ;前有空格, 后无空格
 'space-before-blocks': [2, 'always'], // 作用域前有空格
 'space-in-parens': [2, 'never'], // 括号内无空格
 'space-infix-ops': 2, // 插入的操作符需要空格, 如+/-
 'space-unary-ops': [2, { 'words': true, 'nonwords': false }], // 操作符单词类要空格(new/delete), 非单词不要空格(++/--/!)
 'spaced-comment': [2, 'always', { 'markers': ['!', ',', '/', '-'] }], // 注释要空格，markers为例外
 'template-curly-spacing': [2, 'never'], // 模版字符串中变量无空格
 'use-isnan': 2, // 使用isNaN
 'valid-typeof': 2, // typeof的字符串必须正确
 'wrap-iife': [2, 'any'], // 立即调用的function必须有括号
 'yield-star-spacing': [2, 'both'], // yield的*前后有空格
 'yoda': [2, 'never'], // 条件中变量在前
 'prefer-const': 0, // 能用const场景用const
 'no-useless-escape': 0, // 不检查escape
 'space-before-function-paren': 0, // 函数括号无空格
 "react/jsx-uses-react": "error",
 "react/jsx-uses-vars": "error",
 }
}

Redux先放一边,开启MobX的新玩法

Sat, 04 Nov 2017 19:33:33 +0000

Mobx

Mobx是一个简单的,高扩展的状态管理工具.Mobx与Redux一样是为了解决react管理状态的一种工具. 但是在写代码体验上,会好过Redux.

安装

npm install mobx --save

//配合React: 
npm install mobx-react --save

一个简单的计数器

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import { observer } from 'mobx-react'
import { observable, computed, action } from 'MobX'

class Store {
 @observable
 count = 0;

 @action
 add() {
 this.count ++
 }
 minus() {
 this.count --
 }
}

let countStore = new Store()

@observer
class CountComponent extends Component {
 render() {
 return (
 <div>
 <h2>{ countStore.count }</h2>
 <button key="add" onClick={countStore.add}>+</button>
 <button key="minus" onClick={countStore.minus}>-</button>
 </div>
 )
 }
}

ReactDOM.render(
 <CountComponent/>,
 document.getElementById('root')
)

在你的React项目中使用Decorator 装饰器

Wed, 01 Nov 2017 19:33:33 +0000

使用装饰器

目前只支持Babel/Typescript两种预编译器

Babel:

npm install babel-plugin-transform-decorators-legacy --save-dev

在你的 .babelrc配置文件中开启,没有 .babelrc文件的话,可以新建一个.

{
 "presets": [
 "es2015",
 "stage-1"
 ],
 "plugins": ["transform-decorators-legacy"]
}

插件的顺序千万要注意,非常重要：transform-decorators-legacy 应该放在插件的第一个。

当使用react native的时候，下面这个预设可以代替 transform-decorators-legacy

{
 "presets": ["stage-2", "react-native-stage-0/decorator-support"]
}

在create-react-app中使用装饰器

npm run eject

安装相关插件:

//针对react
npm install babel-preset-stage-2 --save-dev
npm install babel-preset-react-native-stage-0 --save-dev

根目录下创建.babelrc { “presets”: [“react-native-stage-0/decorator-support”] }

TypeScript

如果你的项目已经开始使用TypeScript,那我们只需要在tsconfig.json文件中的 experimentalDecorators 设置为 true

这样,我们就可以使用ES7新特性装饰器了

在vscode 移除不支持decorator特性的语法警告提示

在项目根目录创建tsconfig.json

{
 "compilerOptions": {
 "experimentalDecorators": true,
 "allowJs": true
 }
}

重启你的vscode,你会发现语法警告没有了.

React系列之父组件如何传递Props给this.props.children

Fri, 08 Sep 2017 19:33:33 +0000

问题

React使用router之后,以下形式会经常出现.

this.props.children

可是这样渲染出来的组件,父组件如何传递props给它呢?

解决

我们可以这样传递porps给子组件:

{ 
 React.cloneElement(this.props.children,{A:xxx,B:xxx2,C:xxx3}) 
 
 }

React系列之用create-react-native-app创建React Native应用

Sun, 30 Jul 2017 19:33:33 +0000

之前在介绍create-react-app的时候稍微提了一下create-react-native-app.

这东西其实用起来还是蛮有意思的.这东西最大的好处就是如果你没有安装Xcode,Android Studio这些工具的时候,也是可以在电脑上调试React Native 应用的.

这里说的电脑包括 Mac Windows Linux!!!!

create-react-native-app

Create React Native App 安装

$ npm install -g create-react-native-app
$ create-react-native-app my-app
$ cd my-app/
$ npm start

安装 Expo 这个APP在你的iphone或者安卓手机上. npm start 之后,控制台会出现一个二维码.用这个Expo 扫描这个二维码,就可以马上在你的手机上直接进行远程调试了.那是相当的方便啊.但是速度还是相对桌面模拟器调试慢一点.

Expo的桌面开发工具 Expo XDE

Expo XDE

我们不仅可以在控制里运行整个项目,用XDE也可以.并且支持使用模拟器直接在电脑里直接调试程序.速度不错,完全可以接受.

只不过我Mac的模拟器在安装expo的时候,花了好长的一段时间.如果大家有遇到类似的情况一定要耐心的等一等.

React系列之分享一个自适应高的iframe组件

Mon, 17 Jul 2017 19:33:33 +0000

在网页里面先要嵌入iframe,总是得要解决iframe高度的问题.

那我们在React下,该怎么做到呢?

class FullheightIframe extends Component {
 constructor() {
 super();
 this.state = {
 iFrameHeight: "0px"
 };
 }

 render() {
 return (
 <iframe
 style={ {
 width: "100%",
 height: this.state.iFrameHeight,
 overflow: "visible"
 }}
 onLoad={() => {
 const obj = ReactDOM.findDOMNode(this);
 this.setState({
 iFrameHeight: obj.contentWindow.document.body.scrollHeight + "px"
 });
 }}
 ref="iframe"
 src={this.props.src}
 width="100%"
 height={this.state.iFrameHeight}
 scrolling="no"
 frameBorder="0"
 />
 );
 }
}

React系列之让create-react-app支持导入less

Fri, 14 Jul 2017 19:33:33 +0000

目前来说,create-react-app并不支持直接导入LESS; 这里我就介绍一下,如何让它支持LESS的导入.

create-react-app是基于webpack的,只是没有暴露webpack.config相关的文件.想要支持less,肯定是要修改webpack的配置文件的. 以下命令可以做到暴露出配置文件来:

npm run eject

运行完毕之后,你会看见多出了一个config文件夹. 里面有webpack.config.dev.js和webpack.config.prod.js等配置文件.

接下来,安装less-loader

npm install less-loader less --save-dev

然后修改webpack.config.dev.js文件,

我们只需要修改两个地方

第一: 找到下面代码

exclude: [
 /\.html$/,
 /\.(js|jsx)$/,
 /\.css$/,
 /\.json$/,
 /\.bmp$/,
 /\.gif$/,
 /\.jpe?g$/,
 /\.png$/,
]

将.css改为.(css|less)，内容变为：

exclude: [
 /\.html$/,
 /\.(js|jsx)$/,
 /\.(css|less)$/,
 /\.json$/,
 /\.bmp$/,
 /\.gif$/,
 /\.jpe?g$/,
 /\.png$/,
]

第二个：找到test: /.css$/

更改为test: /.(css|less)$/

并在下面的use数组里面增加less-loader

{
 loader: require.resolve('less-loader') // compiles Less to CSS
}

更改完以后这部分代码大概长这个样子：


 {
 test: /\.(css|less)$/,
 use: [
 require.resolve('style-loader'),
 {
 loader: require.resolve('css-loader'),
 options: {
 importLoaders: 1,
 },
 },
 {
 loader: require.resolve('less-loader') // compiles Less to CSS
 }

 ...

 ],
 }

生产环境的配置跟上面也差不多.

React系列之JSX

Thu, 13 Jul 2017 19:33:33 +0000

JSX是一个有趣的东西。它看似像一个模板语言，但是又具备javascript的所有能力。

在React中，JSX用来生成React元素。

我们使用create-react-app创建一个APP后：

一段JSX代码

import React, { Component } from 'react';

import ReactDOM from 'react-dom';

class App extends Component {
 render() {
 return (
 <div className="App">
 我是一个APP
 </div>
 );
 }
}

ReactDOM.render(<App />, document.getElementById('root'));

我们可以在JSX中内嵌表达式

 //插入数据 
 const data = {name:"小明"}
 const ele = <div>我的名字是：{data.name} </div>;

 //计算
 const ele1 = <div> {1+1} </div>;

 //三元表达式
 const ele2 = <div> {true?"我是小明"："我不是小明"} </div>;

 //在属性里
 const ele3 = <img src={date.xxx} />;

因为JSX使用Babel编译后,本身自己就是一个对象.

let ele = <div className="user">Hello World!</div>

编译后:

const element = React.createElement(
 'div',
 {className: 'user'},
 'Hello World!'
);

所以,这就是JSX可以与js代码混写的原因.

var a =1;
function switchView(){
 if(a>1){
 return <div className="user">Hello World!</div>
 }else{
 return <div className="user">Hello Ming!</div>
 }
}

编译后:

var a =1;
function switchView(){
 if(a>1){
 return React.createElement('div',{className: 'user'},'Hello world!');
 }else{
 return React.createElement('div',{className: 'user'},'Hello Ming!');
 }
}

防止XXS攻击

let content ="<span>我是HTML代码?</span>"

let ele = <div>{content}</div> 
//会直接输入<span>我是HTML代码?</span>,不会把这一段变成HTML

元素的class

因为在ES6里,class是关键字(不再是保留字).所以写的时候要注意,修改为className.

React系列之从一个脚手架开始说起:create-react-app

Wed, 12 Jul 2017 19:33:33 +0000

React的全家桶实在太过于庞大。如果初学者想直接品味React的魅力，这里介绍一个官方的脚手架。使用方法特别简单。

create-react-app

大概使用方法

安装

npm install -g create-react-app

创建一个app

create-react-app my-app
cd my-app/

文件结构：

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│ └── favicon.ico
│ └── index.html
│ └── manifest.json
└── src
 └── App.css
 └── App.js
 └── App.test.js
 └── index.css
 └── index.js
 └── logo.svg
 └── registerServiceWorker.js

启动应用：

npm start

用浏览器打开 http://localhost:3000/ 就可以直接看到你的应用了。

如果你想打包你的应用：

npm run build

特点

不需要配置；
对 React, JSX, ES6 和 Flow 可以直接编译；
开发服务器；
浏览器热加载的功能；
JavaScript 文件中可以直接 import CSS 和图片；
自动处理 CSS 的兼容问题，无需添加 -webkit 前缀；
集成好了编译命令，编译后直接发布成产品，包含 sourcemaps。

哎哟，路边又捡了一个叫 create-react-native-app 的脚手架:

一个关于微信SPA页面webview的缓存问题

Wed, 22 Feb 2017 16:14:25 +0000

一个低级问题

因为公司微信项目用的是angular路由的单页面应用.所以切换页面是基于hash值做到的.

我们遇到了一个问题,每一次部署新的网页代码到服务器上. 在Android微信客户端,总是要过好多天.甚至要重新卸载微信.重新打开页面之后,才会更新页面.(iPhone上却没有这个问题)

如果版本正式上线之后,遇到了紧急bug.那将是一场灾难啊.

解决办法

给url加上时间戳

首先想到的解决办法是,在网址后面加上时间戳,就像是这样:

xxx.com#/home/test/page/?t=(我是时间戳)

可是页面在安卓客户端却没有任何改善

这是为什么,是微信客户端的bug吗?

并不是,是时间戳加错了位置.

我们换一种方式.

xxx.com?t=(我是时间戳)#/home/test/page/

这个时候,我们发现安卓微信客户端的缓存问题迎刃而解了.

牵引出一个问题

为什么我们的时间戳放在最后面,浏览器取了缓存的代码.

首先我们看看URL的格式:

protocol :// hostname[:port] / path / [;parameters][?query]#hash

我们的时间戳用的是 “?” 分隔符,也就是query参数.

第一次,我们把query参数放在了"#“后面.于是我们的时间戳,也就是所谓的query参数,成了hash值.

不管是什么符号,什么字符,只要是放在了”#“后面的,都是hash值.

因为HTTP请求并不包括hash,所以不管我们怎么修改#号后面的时间戳,服务器接收到的请求,都是一样的.

重要的事情说三遍:

HTTP请求不包括hash
HTTP请求不包括hash
HTTP请求不包括hash

AngularJS的按需加载(3)

Wed, 01 Jun 2016 23:55:35 +0000

上一篇大概的描述了一下Angular的启动过程,

如果想要在自己的项目里,异步的加载第三方模块,就是按照上一篇的主要逻辑再跑一遍.

这样子,第三方的模块的方法才能全部加载到angular里.

app.config([
 '$controllerProvider',
 '$compileProvider',
 '$filterProvider',
 '$provide',
 '$injector',
 function($controllerProvider, $compileProvider, $filterProvider, $provide, $injector) {

 //像第一篇说的那样,把内部方法暴露出来
 app.controller = $controllerProvider.register;
 app.directive = $compileProvider.directive;
 app.filter = $filterProvider.register;
 app.factory = $provide.factory;
 app.service = $provide.service;
 app.provider = $provide.provider;
 app.value = $provide.value;
 app.constant = $provide.constant;
 app.decorator = $provide.decorator;


 //并且定义一个全局的函数,方便以后随便调用
 //加载三方模块下的代码,
 window.addModule=function(moduleName){
 var module = angular.module(moduleName);
 var ngProviders = {
 '$controllerProvider': $controllerProvider,
 '$compileProvider': $compileProvider,
 '$filterProvider': $filterProvider,
 '$provide': $provide
 };

 if (module.requires) {
 for (var i = 0; i < module.requires.length; i++) {
 addModule(module.requires[i]);
 }
 }
 angular.forEach(module._invokeQueue, function(args) {
 var provider = ngProviders[args[0]] || $injector.get(args[0]);
 provider[args[1]].apply(provider, args[2]);
 });
 angular.forEach(module._configBlocks, function(args) {
 var provider = ngProviders.$injector.get(args[0]);
 provider[args[1]].apply(provider, args[2]);
 });
 angular.forEach(module._runBlocks, function(args) {
 $injector.invoke(args);
 });
 }

 }
]);

AngularJS的按需加载(2)

Tue, 31 May 2016 20:34:35 +0000

上一篇我们实现了最简单的AngularJS的按需加载,

可以通过替换Angular的内部方法,再使用require.js配合$q完成了按需加载.

今天来说说Angular如何按需加载第三方module;

在此之前,我们得先弄清楚Angular是如何启动的.

setupModuleLoader方法

在上图中,我们得注意一个非常主要的方法;

setupModuleLoader方法,顾名思义 —— 模块加载器;

此方法最后返回的对象为:

var moduleInstance = {
 _invokeQueue: invokeQueue,
 _runBlocks: runBlocks,
 requires: requires,
 name: name,
 provider: invokeLater('$provide', 'provider'),
 factory: invokeLater('$provide', 'factory'),
 service: invokeLater('$provide', 'service'),
 value: invokeLater('$provide', 'value'),
 constant: invokeLater('$provide', 'constant', 'unshift'),
 animation: invokeLater('$animateProvider', 'register'),
 filter: invokeLater('$filterProvider', 'register'),
 controller: invokeLater('$controllerProvider', 'register'),
 directive: invokeLater('$compileProvider', 'directive'),
 config: config,
 run: function(block) {
 runBlocks.push(block);
 return this;
 }
}

看着这对象的格式,有没有特别熟悉?

当我们运行

angular.module('app',[]);

//或者

angular.module('app')

我们新建一个module或者获取一个module的时候, 返回的就是这个对象.

当我们做链式操作的时候, angular.module(‘app’,[]).config().run().controller();

每一步操作,返回的都是它,所以我们才可以做链式操作;

当angular初始化完成之后,开始在dom里寻找ng-app属性;

当找到ng-app后,拿到ng-app的value后才开始启动 angular; 内部运行bootstrap方法;

如果要选择手动启动的话也可以这样:

angular.bootstrap(document, ['moduleName']);

当bootstrap的时候angular在做什么呢?

doBootstrap方法

在源码里中的bootstrap方法里有一个doBootstrap方法:


 var doBootstrap = function() {
 element = jqLite(element);
 //判断是否启动
 if (element.injector()) {
 var tag = (element[0] === document) ? 'document' : startingTag(element);
 throw ngMinErr(
 'btstrpd',
 "App Already Bootstrapped with this Element '{0}'",
 tag.replace(/</,'&lt;').replace(/>/,'&gt;'));
 }

 //angular.bootstrap(document, ['moduleName']);
 //这里的modules就是之前我们bootstrap时候传进来的 moduleName
 //modules ==> ['moduleName']
 modules = modules || [];
 modules.unshift(['$provide', function($provide) {
 $provide.value('$rootElement', element);
 }]);

 .....

 //重点来了 createInjector
 var injector = createInjector(modules, config.strictDi);

 injector.invoke(['$rootScope', '$rootElement', '$compile', '$injector',
 function bootstrapApply(scope, element, compile, injector) {
 scope.$apply(function() {
 element.data('$injector', injector);
 compile(element)(scope);
 });
 }]
 );
 return injector;
 };

createInjector方法

我们看这个方法主要做了什么

AngularJS的按需加载(1)

Mon, 30 May 2016 16:14:25 +0000

今天来聊一聊一直困扰了我很久的问题.AngularJS的按需加载.

angular的好处这里就不用多说, 但是用久了你会发现,一个网站所有的 Controller, Service, Directive等等,全部加载完了, 页面才开始跑.

小项目,代码少.不会感觉太大问题.

但是页面多了,那主页越来越臃肿.有用的,没用的通通加载进来. 虽说全部加载,页面第一次打开会慢很多,之后打开的页面速度会极快. 但是,这一点都不Smart.

那有什么办法可以做到按需加载呢?

其实很简单,看代码:

app.config([
 '$controllerProvider',
 '$compileProvider',
 '$filterProvider',
 '$provide',
 function($controllerProvider, $compileProvider, $filterProvider, $provide) {
 app.controller = $controllerProvider.register;
 app.directive = $compileProvider.directive;
 app.filter = $filterProvider.register;
 app.factory = $provide.factory;
 app.service = $provide.service;
 app.provider = $provide.provider;
 app.value = $provide.value;
 app.constant = $provide.constant;
 app.decorator = $provide.decorator;
 }
]);

我们要先把angular的方法替换成内部使用的方法,

这样我们在后面才可以正常的按需加载Controller, Service, Directive…

接下来,我们选择一个模块加载器, 流行的加载器有很多,Require.js,Sea.js,System.js 等等.

选一个最经典的 Require.js;

下面是按需加载的小demo Github Demo

我们先配置好,require的config;

app.bootstrap.js

require.config({
 paths: {
 'angular': 'http://cdn.bootcss.com/angular.js/1.5.6/angular.min',
 'ui.router': 'http://cdn.bootcss.com/angular-ui-router/0.2.18/angular-ui-router.min',
 'app': 'app'
 },
 shim: {
 'ui.router': {
 deps: ['angular']
 }
 }});

接下来是 app.js

define([
 'angular', 'ui.router'
], function() {
 var app = angular.module('app', ['ui.router']);

 app.config([
 '$controllerProvider',
 '$compileProvider',
 '$filterProvider',
 '$provide',
 function($controllerProvider, $compileProvider, $filterProvider, $provide) {
 app.controller = $controllerProvider.register;
 app.directive = $compileProvider.directive;
 app.filter = $filterProvider.register;
 app.factory = $provide.factory;
 app.service = $provide.service;
 app.provider = $provide.provider;
 app.value = $provide.value;
 app.constant = $provide.constant;
 app.decorator = $provide.decorator;
 }
 ]);

 app.config([
 '$stateProvider',
 '$urlRouterProvider',
 function($stateProvider, $urlRouterProvider) {
 $urlRouterProvider.otherwise('/home');
 $stateProvider.state('home', {
 url: '/home',
 templateUrl: 'view/testTemplate.html',
 controller: 'testController',
 resolve: {
 deps: [
 '$q',
 '$rootScope',
 function($q, $rootScope) {
 var deferred = $q.defer();
 require(['../view/testController'], function() {
 $rootScope.$apply(deferred.resolve);
 });
 return deferred.promise;
 }
 ]
 }
 })
 }
 ])
return app;
})

下面是模版代码,主要是为了测试控制器是否加载成功

源码分析AngularJS中的Provider们的小小区别

Mon, 22 Feb 2016 16:14:25 +0000

AngularJS的provider

Angular中有以下创建供应商(provider)的方法:

provider()
service()
factory()

Provider使用方式

angular.module("app", [])
.provider("HelloAngular", function() {
 return {
 $get: function() {
 var name = "小明";
 function getName() {
 return name;
 }
 return {
 getName: getName
 }
 }
 }
})
.controller('MyCtrl', ['$scope', 'HelloAngular',
 function($scope, helloAngular) {
 $scope.gameName = helloAngular.getName();
 }
]);

Service使用方式

angular.module("app", [])
.service("HelloAngular", function() {
 this.name = "小明";
 this.getName=function(){
 return this.name;
 }
})
.controller('MyCtrl', ['$scope', 'HelloAngular',
 function($scope, helloAngular) {
 $scope.gameName = helloAngular.getName();
 }
]);

Factory使用方式

angular.module("app", [])
.factory("HelloAngular", function() {
 var name = "小明";
 function getName(){
 return name;
 }
 return {
 	getName:getName
 };
})
.controller('MyCtrl', ['$scope', 'HelloAngular',
 function($scope, helloAngular) {
 $scope.gameName = helloAngular.getName();
 }
]);

实现方法各有区别,但是使用上都是一模一样的

烦人的AngularJS注解 - grunt-ng-annotate的使用

Fri, 12 Jun 2015 23:15:00 +0000

angular加入了依赖注入

编写代码的时候,大致的写法如下

 app.controller('tempController', function($scope, $http, $state, $timeout) {

 ...

 })

可是这样的代码,压缩后会造成一个问题. 函数的参数:$scope, $http, $state, $timeout会变成: a,b,c,d

导致这个函数找不到需要注入的服务,因为每个参数的命名都是严格规定的.

如下:

 app.controller('tempController', function(a,b,c,d) {

 ...

 })

为了解决这个问题,angular支持如下写法:

 app.controller('tempController', ["$scope", "$http", "$state", "$timeout", function($scope, $http, $state, $timeout) {



 }])

那么问题来了:

每一次添加一个服务的时候,都需要写两遍. 每一次删除一个服务的时候,都需要删两遍.

表示大大降低了变成的愉悦.

那么我们怎么解决这个问题呢?

今天的主角来了,那就是grunt-ng-annotate

这是一个grunt的插件,当然在glup上也有.因为我的项目主要是用grunt写的. 那么这次主要讲grunt版本的ng-annotate.

首先我们需要安装ng-annotate:

npm install grunt-ng-annotate --save-dev

在你的Gruntfile里运行这个插件:

grunt.loadNpmTasks('grunt-ng-annotate');

配置代码:

grunt.initConfig({
 ngAnnotate: {
 dist: {
 files: [{
 expand: true,
 cwd: '<%= yeoman.dist %>', //相对路径
 src: '**/*Controller.js', //需要匹配的文件
 dest: '<%= yeoman.dist %>' //文件输出的路径
 }]
 }
 }
})

js代码在函数里加入 “ngInject”:

AngularJS 指令模版

Thu, 21 May 2015 22:17:36 +0000

myModule.directive('namespaceDirectiveName', function factory(injectables) {

 var directiveDefinitionObject = {
 restrict: string,//指令的使用方式，包括标签，属性，类，注释
 priority: number,//指令执行的优先级
 template: string,//指令使用的模板，用HTML字符串的形式表示
 templateUrl: string,//从指定的url地址加载模板
 replace: bool,//是否用模板替换当前元素，若为false，则append在当前元素上
 transclude: bool,//是否将当前元素的内容转移到模板中
 scope: bool or object,//指定指令的作用域
 controller: function controllerConstructor($scope, $element, $attrs, $transclude){...},//定义与其他指令进行交互的接口函数
 require: string,//指定需要依赖的其他指令
 link: function postLink(scope, iElement, iAttrs) {...},//以编程的方式操作DOM，包括添加监听器等
 compile: function compile(tElement, tAttrs, transclude){
 return: {

 pre: function preLink(scope, iElement, iAttrs, controller){...},
 post: function postLink(scope, iElement, iAttrs, controller){...}
 }

 }//编程的方式修改DOM模板的副本，可以返回链接函数
 };

 return directiveDefinitionObject;

});