飞天代码-CSDN博客

原创 dhtmlx5源码解析（二）全局方法分析date&&ajax

dhtmlx5将日期处理的相应公用函数是放在window.dh4对象中：if (typeof(window.dhx4.dateLang) == "undefined") { //申明语音 window.dhx4.dateLang = "en"; //日期用到的常用字 window.dhx4.dateStrings = { en: { monthFullName:

2017-07-22 17:30:04 409 1

原创 dhtmlx5源码解析（一）全局方法分析 dhtmlxValidation&&浏览器类型

dhtmlx是套开源的js全端，公司已经使用了好几年，一直没抽空仔细看看源码，为了react控件封装必须先读取一遍源码。把dhtmlx.js解压缩后，代码大概是7万行代码，吓坏本宝宝了。这节先分析下它的dhtmlxValidation代码。if (!window.dhtmlxValidation) { dhtmlxValidation = function () { }; dhtmlxV

2017-07-21 17:05:19 1107 1

原创 react项目实战（权限模块开发五）系统首页开发

前面我们完成了登陆界面开发，现在我们来实现下首页界面的开发效果图如下：是基于bootstrap的模板进行开发。功能分析：点击上面的按钮可以切换菜单区域的显示与隐藏点击显示待办信息其他功能就不说了，直接上代码吧

2017-07-20 10:03:59 1963

原创 react 组件库封装（一）

打算封装一套控件库来满足后台系统开发。比如调用封装的GoLayOut控件，import {GoLayout} from '../../components/goingComponent'其实这里访问的是： /components/goingComponent/index.js 大概内容如下：var _goLayout = require('./goLayout');function _int

2017-07-19 14:30:40 3588

原创 react项目实战（权限模块开发四） SkinDropDown插件开发

login.js文件中用到了一个SkinDropDwon插件import SkinDropCom from '../../components/SkinDropCom'; ... <SkinDropCom skinsList={loginMd.skinsList} visibility={loginMd.visibility}

2017-07-19 11:33:31 601

原创 react项目实战（权限模块开发三）登陆界面开发

首先上效果图：选择皮肤下拉。功能分析：点击记住用户名区域，checkbox选中，再点击则checkbox取消选中。点击皮肤选择框，会显示皮肤下拉。如果记住用户勾选了，则从本地缓存中读取上次登陆的用户名称。如果记住用户勾选了，则点击登陆提交时，需要将当前用户的名称保存到本地缓存中。点击皮肤选择框，弹出皮肤选择下拉，但点击界面其他地方时将下拉框隐藏。点击登陆按钮时请求后台数据，如果登陆成

2017-07-19 11:00:09 2151 1

原创 react项目实战（权限模块开发二）项目配置修改

1 由于dva默认是会给class后面添加后缀，由于本项目会引用大量外部css，所以需要关闭该功能。修改.roadhogrc，在里面添加一句 "entry": "src/index.js", "disableCSSModules":true, "env": {2 编辑 .roadhogrc，使 babel-plugin-import （按需加载）插件生效。首先安装插件$ npm i

2017-07-18 14:07:55 1920

原创 react项目实战（权限模块开发一）配置路由

第一步：采用dva创建项目，然后通过webstore打开项目（忽略）项目解构如下：container是我新增加的文件夹用来存放相应的界面。第二步分析需求，打算用react做个权限管理模块，首先是登陆界面，登陆完成后进入到首页框架界面，对权限信息进行维护，维护信息主要是：用户信息User角色信息Role机构信息Org资源信息Resource资源权限信息ResourceACL

2017-07-18 13:53:01 10537

原创 redux(二) 数据流向

上节我们做了一个简单的例子点击按钮点击字体点击按钮执行的语句是： <button onClick={()=>dispatch(ClickButton())}>click me</button>store.dispatch(action): 将一个 action 对象发送给 reducer。我们看下 ClickButton()该action的内容：export functio

2017-07-13 23:07:37 3321

原创 redux（一）简单例子

第一步创建项目：这里我直接采用dva创建项目dva new react_five创建后，通过webstore打开项目，项目解构大概如下：第二步：创建几个文件夹。stores 存放redux的store配置信息actions 存放redux的actionreducers 存放redux的reducerscontainers存放界面视图入口文件第三步:修改src/router.js文

2017-07-13 17:12:12 714

原创 react知识（三）将Jquery集成进来

Jquery我都用了5到6年了，多少还是有感情了，虽然react不提倡直接操作dom，自然不提倡结合jquery来进行开发。但作为jquery的忠实粉丝，怎么也得集成进来看看，前面一节我们说到了react的生命周期，render之后会触发componentDidMount,所以jquery的调用自然就需要放到该方法里面咯第一步：采用dva创建项目，并用webstore来打开项目第二步：安装j

2017-07-11 16:43:29 7420

原创 react知识（二）组件的生命周期【装载过程】

react定义了组件的生命周期，分为如下三个阶段：装载过程（Mount）组件第一次再dom里面渲染过程更新过程（Update）组件被重新渲染的过程卸载过程（Unmount）组件从dom里面删除的过程。这节我们来仔细分析下装载过程：依次调用函数顺序 ES6的写法执行顺序，React.createClass的调用顺序跟这个不一样，这里不分析了constructorcomponentW

2017-07-11 14:10:32 328

原创 react知识（一）React.createClass Vs React.Component

如果是通过看react视频学习的同仁们会发现，有的视频是通过React.createClass来讲解sample 有的视频是用React.component来开发sample，那俩者之间有啥差别呢。前面讲解的主要是环境搭建方面的，现在我们开始关注下React组件本身： createClass是React以前版本的写法，现在Facebook官方逐渐废弃，所以尽量使用React.component

2017-07-11 14:03:58 989

原创 dva构建react应用程序

昨天才用create-react-app创建了react的开发环境，以为今后就用它来创建开发环境咯，谁知道才用了一天，才发下dva也是用来创建react开发环境的。 dva是淘宝团队弄的，为了支持国货，赶紧试试看咋用吧第一步：安装 dva-clicnpm install dva-cli -g第二步：采用dva来创建项目：dva new react_twocd react_two用websto

2017-07-10 14:47:44 3990

原创构建 react应用程序（二）（react-scripts实现原理）

在前面讲到了使用create-react-app来创建项目，这节我们来分析下原理。 react-scripts有以下支持，都帮你配置好了：React, JSX, ES6, and Flow syntax support.Language extras beyond ES6 like the object spread operator.Import CSS and image files di

2017-07-09 16:06:56 17349 6

原创 create-react-app 构建 react应用程序（一）（react-scripts）

踩了一个坑又一个坑，以前都是自己手动创建react的开发环境，要安装webpack、babel、react、react-dom的组件，还需要修改、新增各种配置文件。正为这个环境新建犯愁时，突然发现了 react-scripts。用来构建了一个项目试试：第一步：全局安装下create-react-app。npm install -g create-react-app第二步：通过create-r

2017-07-09 15:41:17 5372

原创 react+redux(一)

最近学react，以前学个组件库也就是几天的事情，这次都折腾快一个星期了，才入门。虽然可以用react开发界面了，但好多资料里说要开发复杂应用必须用redux，只好找来试试咯。安装react的开发环境不讲了，如果工程中需要结合redux，则执行以下命令：#安装redux需要的几个关键依赖组件cnpm i react-redux redux react-router --save-dev第一步我

2017-07-08 14:33:47 332

原创 setTimeout和setInterval的区别

今天去面前端web工程师，人到中年还去找工作，而且是比你年轻好多的小伙子来面试自己，确实是有点说不出的滋味。所以在此奉劝在找工作的或者认为自己所在企业不理想的人们，赶紧该跳槽就跳槽，不要等企业要垮了再来想办法，人老珠黄啊！废话不多说了。面试里面提到了setTimeout和setInterval的区别。这个区别简单：setTimeout和setInterval两个函数允许延时一段时间再运

2017-07-05 23:57:06 448

原创 webpack3.0(三）整合react

进过2天的学习，基本了webpack的基础使用，学习webpack目的就是为了进行react的开发，所以今天搭建下react的开发环境。第一步新建项目，并生成package.json.js文件。第二步：关闭webstorm 找到工程所在的.iml文件，将其中的内容<?xml version="1.0" encoding="UTF-8"?><module type="WEB_MODULE" ve

2017-07-02 18:35:08 1115

原创 webpack(二） loader的使用

网上找了好多参考，发现好多使用的webpack1.或者2.的，看了下自己安装的webpack版本，竟然是3.0.难怪有些地方跟网上说的结果不一致。第一步：创建项目第二步：使用npm来安装webPack需要的相关插件。npm install webpack --save -devnpm install babel-core --save -devnpm install babel-lo

2017-07-01 21:16:45 932

原创 webpack (一) 浏览器中显示hello world

nodejs也安装了， babel编译es5也学了，目前就差使用webpack来如何在现有的浏览器中查看一个简单功能。自然伟大的hello world 又要粉墨登场咯第一步采用webstorm新建项目，具体细节不写了，如果还不会的可以查看我写的另外一篇博客：新建项目项目结构如下第二步：webpack.config.js添加到项目中由于没有找到啥法子自动创建该文件我是手动创建的，并将

2017-06-30 21:40:21 2571

原创使用babel将es6代码转成es5（二）

babel、node、es6

2017-06-29 23:57:45 3951

原创使用babel将es6代码转成es5（一）

es6转es5 babel nodeJs

2017-06-29 23:35:15 4140

原创 nodejs(三）

supervisor 来发布程序

2017-06-23 22:47:46 336

原创设计模式（二）建造者模式

建造者模式

2016-07-30 23:14:24 338

原创设计模式（一）模板方法模式

设计模式是现在衡量一个软件开发师的一个标准，也是面试必问的一个问题。类似的书也是一大堆。但去看书和例子的时候好多都是讲解设计思路并没有结合实际业务情况来举例说明设计模式的使用。最近对自己一个项目进行重构时，对设计模式的使用进行一个总结。今天我们对模板方法模式进行一个简单的阐述。模板方法模式需要开发抽象类和具体子类的设计师之间的协作。一个设计师负责给出一个算法的轮廓和骨架，另一些设计师则负责给出

2016-07-30 12:51:25 343

原创 nodejs（二）

安装好nodejs后，也写了个简单的应用也OK了，接下来安装npm 1、安装完nodejs后，其实npm已经安装完成，但去执行npm install express始终是不正确，后来输入npm -v 看了下版本，发现版本特别低，所以先把npm版本进行下升级 2、一开始我采用下面的命令进行升级npm install npm -g发现升级后的目录，并不是我nodejs的文件夹下的npm，而是到了

2016-04-06 09:42:16 392

原创 nodejs（一）

1、安装nodejs，这里不介绍了，网上一堆类似文档。我是windows系统中使用nodejs，所以简单的下载 node-v0.10.26-x64.msi文件，并双击完成安装 2、安装完成后，打开命令行输入node -v 如果正常的输出了版本，则表示nodejs安装完成。 3、采用Intellij idea 创建了一个web项目 4、使用cmd命令，进入到项目的跟路径 5、你项目的

2016-04-05 22:45:24 554

原创 CefSharp（三）屏蔽右键菜单

既然是C#+web混用模式，当然就需要把web的右键操作屏蔽掉咯。废话不说了直接上代码。 internal class MenuHandler : IMenuHandler { public bool OnBeforeContextMenu(IWebBrowser browser, IContextMenuParams parameters)

2016-01-24 21:58:57 7886

原创 CefSharp(二) 文件下载功能

上节讲了如何将CefSharp集成到C#中，但集成后将web界面链接进ChromiumWebBrowser后，但web界面上下载附件的功能不好使咯。百度了半天还是没搞定，只能去看官网的Excample和源代码，最后瞎猫碰死耗子给搞定了，需要去实现一个接口。public RevenueContractFrmWeb(Adapter adapter) { Adap

2016-01-24 21:54:35 20904 5

原创 CefSharp整合到C#中

第一步安装：CefSharp在这里面搜索CefSharp，然后点击安装搜索到相应的组件后，点击安装。安装大概要几分钟，按照完成后，项目中会出现一个packages.config文件。我同事按照完成后，引用中会出现相应的dll包，而我按照完成后，并没有添加到引用中，我是手动添加到引用中的。这些dll包的位置在于，当组件安装完成后，在项目里面会多出一个packages文件夹。我这里引用的

2016-01-24 19:21:03 13675 2

原创 activiti(四)测试类编写

测试类的代码：package com.activiti;import org.activiti.engine.RepositoryService;import org.activiti.engine.RuntimeService;import org.activiti.engine.TaskService;import org.activiti.engine.repository.Proces

2016-01-23 22:35:39 2849 2

原创 activiti（三）发布activiti-explorer.war

下载activiti-5.19.0后，点开后有个was文件夹，该文件夹下有activiti-explorer.war以及activiti-rest.war俩个war包。这节我们介绍activiti-explorer.war的使用。 activiti-explorer默认情况下是不支持中文的。

2016-01-23 21:11:10 11123

原创 activiti(二)将activiti集成到项目中

到activity的官网下载到相应包。我这里使用的是activiti-5.19将相应的jar包放入到lib中：第二步：编写activiti.cfg.xml文件，文件存放位置文件内容：<?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.springframework.org/schema/beans" x

2016-01-23 20:00:27 7839 1