import React from ‘react’ import {render} from ‘react-dom’ const ThemeContext = React.createContext(‘light’) class ThemeProvider extends React.Component { state = {theme: ‘light’} toggleTheme = () => { this.setState(({theme}) => ({ theme: theme === ‘light’ ? ‘dark’ : ‘light’, })) } render() { return ( <ThemeContext.Provider value … 继续阅读
preload <!– preload stylesheet resource via declarative markup –> <link rel=”preload” href=”/styles/other.css” as=”style”> <!– or, preload stylesheet resource via JavaScript –> <script> var res = document.createElement(“link”); res.rel = “preload”; res.as = “style”; res.href = “styles/other.css”; document.head. … 继续阅读
说来惭愧，工作多年对客户端与web通信一直停留在一知半解的状态，最近项目中又遇到一些问题，终于有决心去深入挖掘其背后的原理。 由于精力有限，本文所说的APP指IOS APP（Swift），不包括Android APP。 APP如何渲染网页？ 苹果提供了UIWebView组件，像浏览器一样可以加载任何网页。iOS8以后，苹果推出了新框架Webkit，提供了替换UIWebView的组件WKWebView。速度更快，占用内存少。 WKWebView 执行JavaScript //home.html //… <h1>Welcome!</h1> //… <script> function redHeader() { document.qu … 继续阅读
angular.module(‘hellosolarsystem’).component(‘hello’, { template: ‘<h3><input ng-model=”name”>{{name}}{{$ctrl.greeting}} solar sytem!</h3>’ + ‘<button ng-click=”$ctrl.toggleGreeting()”>toggle greeting</button>’, controller: function($scope) { this.greeting = ‘hello’; $scope.name = “111”; this.toggleGreeting = … 继续阅读
随着项目复杂度的提升，react、react-dom、react-route等一系列框架的引入，再加上babel-preset-es2015、babel-preset-react等一系列插件，webpack变得越来越慢。webpack提供了DllPlugin和DllReferencePlugin插件可以让构建速度飞起来。 DllPlugin 这个插件专门用于单独的webpack配置来创建一个dll-only-bundle。 它创建一个manifest.json文件，由DllReferencePlugin用于映射依赖关系。如下所示创建一个使用DllPlugin插件的webpack.vendor.dev.config.js文件： //webpack.vendor.dev.co … 继续阅读
Angular让我们将我们的界面的部分绑定到JavaScript代码中的数据，但是如何知道数据何时更新，页面需要更新？ 一种策略是使用特殊对象，其中通过方法设置数据，而不是属性分配。然后可以注意到更改，可以更新页面。这有缺点，我们必须extend一些特殊的对象。另外，为了分配，我们必须使用更详细的obj.set(‘key’，’value’)形式，而不是obj.key =’value’。像EmberJS和KnockoutJS这样的框架使用这个策略。 Angular采用不同的方法：允许任何值作为绑定目标。然后在任何JavaScript代码return的末尾，检查该值是否已更改。这可能似乎在第一次失效，但有一些聪明的策略来降低性能耗损。最大的好处是我们可以使用普通对象并更新我们 … 继续阅读
从源码入手 如同其他常见脚本框架一样，angular的核心代码包裹在一个自调用的匿名函数里边 (function(window, document, undefined) { //… var angular = window.angular || (window.angular = {}); })(window, document); 在自调用匿名函数内部angular是一个对象，通过publishExternalAPI给angular对象赋值方法，angular.module通过setupModuleLoader赋值。 function publishExternalAPI(angular) { extend(angular, { ‘bo … 继续阅读
react是单向数据流动的的框架，数据可以从顶层组件依次传递给层级最深的组件。 react组件通信 react组件树形结构犹如家族关系： 爷爷要和小红通信：爷爷告诉爸爸，爸爸告诉小红。爸爸要和叔叔通信：可以将两者交互的state提升至爷爷，通过爷爷state的改变来完成通信使命。 现实项目中需求远比上面的关系要复杂的多，状态便变得难于管理。如果能把需要通信的组件状态放到一个store的地方，这样只需要去store更新状态与之相关的视图自动更新，这样是不是简单了很多了呢？ 于是就有了redux这样的框架，redux是JavaScript 状态容器，提供可预测化的状态管理。 redux redux 设计思想: 从例子入手 来看一个最简单的例子： //reducers/inde … 继续阅读
普通的react组件是无法与redux交互的，因此需要react-Redux来对react组件加工。react redux主要提供了Provider与connect方法 常见示例： import React, {Component, PropTypes} from ‘react’ import ReactDOM from “react-dom”; import thunk from ‘redux-thunk’ import {createStore, applyMiddleware, combineReducers} from ‘redux’ import {Provider, connect} from ‘react-redux’ function postsByRed … 继续阅读
众所周知React是单向数据流动的框架，数据可以通过props一层一层的传下去。但是如果传递组件与目标组件层级相差太多，就会多出很多不必要的props传递过程。 针对此种问题，React提供了”context” API。 class Button extends React.Component { render() { return ( <button style={{background: this.props.color}}>{this.props.children}</button> ); } } class Message extends React.Component { render() { return ( & … 继续阅读