w3cmm

聊一聊我对redux的理解

react是单向数据流动的的框架,数据可以从顶层组件依次传递给层级最深的组件。 react组件通信 react组件树形结构犹如家族关系: 爷爷要和小红通信:爷爷告诉爸爸,爸爸告诉小红。爸爸要和叔叔通信:可以将两者交互的state提升至爷爷,通过爷爷state的改变来完成通信使命。 现实项目中需求远比上面的关系要复杂的多,状态便变得难于管理。如果能把需要通信的组件状态放到一个store的地方,这样只需要去store更新状态与之相关的视图自动更新,这样是不是简单了很多了呢? 于是就有了redux这样的框架,redux是JavaScript 状态容器,提供可预测化的状态管理。 redux redux 设计思想: 从例子入手 来看一个最简单的例子: //reducers/inde … 继续阅读

目录 记事本 |
w3cmm

redux-react Provider 与 connet

普通的react组件是无法与redux交互的,因此需要react-Redux来对react组件加工。react redux主要提供了Provider与connect方法 常见示例: import React from ‘react’ import { render } from ‘react-dom’ import { createStore } from ‘redux’ import { Provider } from ‘react-redux’ import reducer from ‘./reducers’ import App from ‘./containers/App’ const store = createStore(reducer) render(    … 继续阅读

目录 记事本 | |
w3cmm

React组件数据共享

众所周知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 ( & … 继续阅读

目录 记事本 |
w3cmm

Flux 逻辑图谱

Flux是Facebook用于构建客户端Web应用程序的应用程序体系结构。它通过利用单向数据流来补充React的可组合视图组件。它更多的是一个模式而不是一个正式的框架,Flux没有很多的新代码,你可以快速上手。

目录 记事本 |
w3cmm

Backbone 逻辑图谱

最近几天终于耐着性子去尝试通读Backbone源码,想要把细枝末节原理全部搞清楚并不容易,下面的图仅仅是大致实现原理:

目录 记事本 |
w3cmm

Preload与Resource Hints

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. … 继续阅读

目录 记事本 |
w3cmm

WebView与JavaScript通信

说来惭愧,工作多年对客户端与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 … 继续阅读

目录 记事本 |
w3cmm

AngularJS component 通信

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 = … 继续阅读

目录 记事本 | |
w3cmm

优化webpack打包速度

随着项目复杂度的提升,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 … 继续阅读

目录 记事本 | |
w3cmm

ES5中新增的方法

Array filter 对数组中的每个元素都执行一次指定的函数(callback),并且创建一个新的数组,该数组元素是所有回调函数执行时返回值为 true 的原数组元素。它只对数组中的非空元素执行指定的函数,没有赋值或者已经删除的元素将被忽略,同时,新创建的数组也不会包含这些元素。 //过滤掉小于 10 的数组元素: //代码: function isBigEnough(element, index, array) { return (element >= 10); } var filtered = [12, 5, 8, 130, 44].filter(isBigEnough); // 12, 130, 44 map //将所有的数组元素转换为大写: var st … 继续阅读

目录 JavaScript |
w3cmm

AngularJS如何更新bindings

Angular让我们将我们的界面的部分绑定到JavaScript代码中的数据,但是如何知道数据何时更新,页面需要更新? 一种策略是使用特殊对象,其中通过方法设置数据,而不是属性分配。然后可以注意到更改,可以更新页面。这有缺点,我们必须extend一些特殊的对象。另外,为了分配,我们必须使用更详细的obj.set(‘key’,’value’)形式,而不是obj.key =’value’。像EmberJS和KnockoutJS这样的框架使用这个策略。 Angular采用不同的方法:允许任何值作为绑定目标。然后在任何JavaScript代码return的末尾,检查该值是否已更改。这可能似乎在第一次失效,但有一些聪明的策略来降低性能耗损。最大的好处是我们可以使用普通对象并更新我们 … 继续阅读

目录 记事本 | |
w3cmm

我眼中的 AngularJS

从源码入手 如同其他常见脚本框架一样,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 … 继续阅读

目录 记事本 | |
第 1 页,共 24 页12345...1020...最旧 »