• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

0前端 框架 库_千万别去碰js呀 混合APP_webAPP_美工 选有类型的语言,比如TypeScri ...

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

0前端 框架 库_千万别去碰js呀 混合APP_webAPP_美工 选有类型的语言,比如TypeScript




常用知识点,技巧

添加库到本地:

(举例 element-ui
用npm命令行把包下载到本地
在电脑里找到资源文件,比如 C:\Users\XiaoCong\AppData\Roaming\npm\node_modules\element-ui\lib
然后复制到项目的目录下


IDEA 15 里的 js 的报错无视
比如
  同时右侧显示这个 
 
 

临时笔记

component
组件
成分; 零件; [数]要素; 组分;

Angular2怎么使用第三方的component库(如 jquery,easyUI ,Bootstrap 等)




PWA  增强web app helloWorld跑起来了,之前失败是因为Chrome服务器插件要FQ才能下载

https://developers.google.cn/web/fundamentals/getting-started/codelabs/your-first-pwapp/

安装谷歌插件
web-server-for-chrome
https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb/related


黑色主题风格
https://chrome.google.com/webstore/detail/darkness-beautiful-dark-t/imilbobhamcfahccagbncamhpnbkaenm

#####################################################

web前端响应式框架

Bootstrap


#####################################################

Weex 安装 创建项目  都成功,能运行

一直在变化
Weex的文档的确是值得吐槽的。官方的Demo想跑起来遇坑无数

npm install -g weex-toolkit  --registry=https://registry.npm.taobao.org
weex 

无法安装 Weex Toolkit
npm ERR! fetch failed https://registry.npm.taobao.org/weex-toolkit/download/weex-toolkit-0.4.10.tgz
npm WARN retry will retry, error on last attempt: Error: getaddrinfo EAI_AGAIN cdn.npm.taobao.org:443

安装 Weex Toolkit
weex

官方
Weex快速上手教程(Weex Tutorial) 
https://github.com/weexteam/article/issues/4

#####################################################

思路

顺序:
无法FQ,几乎没有镜像
TypeScript  无法用npm和镜像安装
Angular2(官方推荐用 TypeScript



问题


移动 node_modules 文件夹,源文件名太长

npm install -g rimraf  全局安装
cd xxx[include node_modules folder]
rimraf node_modules(这是文件夹)

使用的是npm里面一个专门用于删除的模块插件,看来这货不仅仅适用于gulp
官方描述:A deep deletion module for node (like rm -rf) 
简单点说,就是模拟unix或者Linux下的rm -rf(强制删除命令)
可能无效:
- 360的粉碎工具
- 魔方的粉碎工具
- windows 内置命令

新技术,技术前沿

浏览器 Fetch ,不用XMLHttpRequest 对象,基于 Promise(不是),不需要依赖第三方库
jQuery.ajax,是使用 XMLHttpRequest 对象来发送异步请求, jQuery ajax异步请求API 底层是使用XMLHttpRequest技术
也可以自己造轮子,封装XMLHttpRequest 对象相关API

Fetch 是浏览器提供的原生 AJAX 接口。使用 window.fetch 函数可以代替 jQuery.ajax 的 $.ajax、$.get 和 $.post。
浏览器帮你把 jQuery.ajax 给实现了,以后用 fetch 来发送异步请求,jQuery很多现代的网站里都不用了

Progressive Web App已经准备好迎接它的黄金时代。微软正考虑在其浏览器中添加Service Worker支持。而且,他们还遵循W3C Maifest创建了manifold.js,使开发人员可以开发跨平台和设备的托管应用。iOS也提供了一种创建“可主屏化(homescreen-able)”应用的方式

Progressive Web Apps /PWA
Google 发的一些视频讲这个, Manifest, Service Worker, Offline, 各种, 让 Web App 的体验能更接近原生应用:
之前有个东西叫 Application Cache,但是那货就是个 shit
#####################################################

Dart

编辑器无法连到外网升级  D:\Program Files\Dart\DartEditor.exe

Dart 的变量类型是可选的,叫做 static type annotations

#####################################################

JavaScript

实时更改浏览器里的任何页面的内容 所用的的 js代码   /编辑页面
document.body.contentEditable=\'true\';
(本质上是把body标签的contentEditable属性开启,置为true
360安全浏览器  和 Chrome 支持

如图: 360安全浏览器里F12后,在console窗口里执行js代码:
 

或者
开发过程中,给 html 源代码的body标签的属性 添加contentEditable=\'true\'
给客户的页面要把这句去掉,即最终成品
建议用 js

用浏览器调试

在F12后,控制台里,输入方法名,不要括号,然后回车,会得到这段代码的一部分,鼠标单击后浏览器帮忙定位到那个 js文件,更新后
submitForm



#####################################################

Html5 H5 本地浏览器存储 数据库

浏览器数据库
 IndexedDB API  ---2016年8月 最新,web标准组织推荐的

360有web SQL 数据库,存进去的数据也是key-value这种形式
Web Storage (Second Edition)
W3C Recommendation 19 April 2016
#####################################################

jQuery EasyUI

jquery ajax 返回的是string类型,整个页面的html字符串

是基于jQuery的用户界面插件的集合
text() - 设置或返回所选元素的文本内容,不包括尖括号里的内容
html() - 设置或返回所选元素的内容(包括 HTML 标记<>这种符号)
val() - 设置或返回表单字段的值

(前端   等我工作后 , 看一下是否稳定 )
现阶段还在重复造轮子

ionic creator

Cordova.js 封装原生系统级API
PhoneGap打包
ionic即基于Angular2的框架 , 跨平台移动app框架

<script>只能写在<body>的最后一个标签
 不能在<body>里的其他标签的前面



Dojo 基金赞助
这是个基于web的设计界面的工具
http://maqetta.org/



###################################################################

Visual Studio 更新软件,要重装吗

https://www.visualstudio.com/zh-hans/
https://www.visualstudio.com/vs/
代号是15,正式名称可能是Visual Studio 2016

TypeScript 安装成功,但eclipse 插件安装失败

用TypeScript 做后端开发,有什么框架
用TypeScript 做后端开发,怎么搭配express框架

官方文档
http://www.typescriptlang.org/docs/tutorial.html

{
要先安装好TypeScript 和node JavaScript 运行时runtime

在cmd窗口里  进入项目所在的文件夹,叫 a
cd /d E:\TypeScript\a


新建  test.ts  文件,在里面编辑两行:(不涉及到html DOM,只是个cmd 命令行JavaScript 程序,所以不需要用浏览器提供的 js 运行时,用node的)
var strName:string="strName";   //strName 是string类型的
console.log(strName+" 是string类型的");

编译 .ts文件,生成 js 文件 ---  test.js 用 tsc 命令
tsc test.ts

运行 .js文件,不是 .ts文件。用node,不是用ts命令,没这种命令
node  test.js

cmd 命令行窗口 输出
strName 是string类型的
}



tsserver是什么   TypeScript

 

所有TS的 IDE / 编辑器)插件:
 

npm install -g [email protected]

成功
cnpm install -g [email protected]
C:\Users\XiaoCong>tsc
Version 2.0.3
Syntax:   tsc [options] [file ...]

Examples: 
       编译
          tsc hello.ts
          tsc --outFile file.js  file.ts
          tsc @args.txt

Options:
 --allowJs                           Allow javascript files to be compiled.
 --allowSyntheticDefaultImports      Allow default imports from modules with no default export. This does not affect code emit, just typechecking.
 --allowUnreachableCode              Do not report errors on unreachable code.
 --allowUnusedLabels                 Do not report errors on unused labels.
 --baseUrl                           Base directory to resolve non-absolute module names.
 -d, --declaration                   Generates corresponding \'.d.ts\' file.
 --experimentalDecorators            Enables experimental support for ES7 decorators.
 --forceConsistentCasingInFileNames  Disallow inconsistently-cased references to the same file.
 -h, --help                          Print this message.
 --init                              Initializes a TypeScript project and creates a tsconfig.json file.
 --jsx KIND                          Specify JSX code generation: \'preserve\' or \'react\'
 

[[email protected]] link C:\Users\XiaoCong\AppData\Roaming\npm\tsc@ -> C:\Users\XiaoCong\AppData\Roaming\npm\tsc
[[email protected]] link C:\Users\XiaoCong\AppData\Roaming\npm\tsserver@ -> C:\Users\XiaoCong\AppData\Roaming\npm\tsserver
[[email protected]] installed at node_modules\.typescript_npminstall\typescript\2.0.3\typescript (1 packages, use 3s, speed 823.92kB/s, json 7.19kB, tarball 2.65MB)
All packages installed (1 packages installed from npm registry, use 3s, speed 819.95kB/s, json 1(7.19kB), tarball 2.65MB)

 
 

TypeScript 


 

Koa 无法下载

NodeJS

这个正常


cnpm -v
4.2.0
npm install cnpm -g --registry=https://registry.npm.taobao.org

SqlPad 可视化查询各种数据库,用图表显示出来 {
npm install  sqlpad -g --registry=https://registry.npm.taobao.org
https://github.com/rickbergfalk/sqlpad
sqlpad --dir c:/sqlpad/ --port 3000 --passphrase secret-encryption-phrase
sqlpad --dir 存的目录  --port 3000 --passphrase 连接数据库的密码
晚点才指定要连接哪个数据库

sqlpad --dir E:/SqlPad/ --port 3000 --passphrase secret-encryption-phrase



刚开始要要邮箱注册一下
1

管理员:
root
1111

ping 192.168.57.30

MySQL配置,在浏览器里
192.168.57.30
 默认端口号为:3306
 
jdbc:mysql://localhost:3306/数据库名? user=root&password=1111&useUnicode=true&characterEncoding=utf-8

registration 登记,注册
}

npm 临时使用远程仓库

npm install XXX -g --registry=https://registry.npm.taobao.org
--registry=https://registry.npm.taobao.org


设定仓库

设置成 淘宝npm镜像仓库:
npm config set registry https://registry.npm.taobao.org --global
然后
npm config list
确认网址被配置
 

npm config set disturl https://npm.taobao.org/dist --global


npm install -g  <module-name>
npm install -g react-native
cnpm install -g react-native

全局安装模块的话 npm install -g <n>
C:\Users\XiaoCong\AppData\Roaming\npm
C:\Users\XiaoCong\AppData\Roaming\npm\node_modules

npm install [name]

npm工具默认是从国外的仓库里下载express (可以临时改, --registry=https://registry.npm.taobao.org
也可以改npm的的配置文件,我放在C:\Users\XiaoCong\.npmrc安装路径下,或者用npm config配置:
npm config list
npm config set registry https://registry.npm.taobao.org
npm info underscore
然后会很快冒出一大长串的东西,没有红色报错
里面会有;
userconfig C:\Users\XiaoCong\.npmrc
registry = "https://registry.npm.taobao.org/"

手动指定仓库的位置
npm install -g   cnpm    --registry=https://registry.npm.taobao.org



node -v
v4.5.0
 
npm -v
2.15.9


npm -v
卸载:npm uninstall -g express
安装 指定好的版本: npm install -g [email protected]

cnpm

cnpm install -g typescript



cnpm install express-generator -g

express express-generator1  ------用express-generator创建express-generator1项目,在当前路径 E:\React\express-generator1
cnpm install  ---安装依赖
set DEBUG=express-generator1 & npm start
http://localhost:3000/    浏览器 
 


失败  create-react-app my-app
Creating a new React app in E:\create-react-app\my-app.
 
Installing packages. This might take a couple minutes.
Installing react-scripts from npm...
npm ERR! Windows_NT 10.0.10586
npm ERR! argv "D:\\Program Files (x86)\\nodejs\\node.exe" "D:\\Program Files (x86)\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install" "--save-dev" "--save-exact" "react-scripts"
npm ERR! node v4.4.7
npm ERR! npm  v2.15.8
 
npm ERR! shasum check failed for C:\Users\XiaoCong\AppData\Local\Temp\npm-28664-680e4ff5\registry.npmjs.org\react-scripts\-\react-scripts-0.1.0.tgz
npm ERR! Expected: 400e97d5aac972485b190073b409278266f54869
npm ERR! Actual:   b8466a71ebdd4b0a13468a524424238bd753cee1
npm ERR! From:     https://registry.npmjs.org/react-scripts/-/react-scripts-0.1.0.tgz
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR!     <https://github.com/npm/npm/issues>
 
npm ERR! Please include the following file with any support request:
npm ERR!     E:\create-react-app\my-app\npm-debug.log
`npm install --save-dev --save-exact react-scripts` failed




360浏览器里,下载第一个,

n ,管理npm的工具,比如升级后者
npm install -g n  失败
npm ERR! Windows_NT 10.0.10586
npm ERR! argv "D:\\Program Files (x86)\\nodejs\\node.exe" "D:\\Program Files (x86)\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install" "-g" "n"
npm ERR! node v4.4.7
npm ERR! npm  v2.15.8
npm ERR! code EBADPLATFORM
 
npm ERR! notsup Unsupported
npm ERR! notsup Not compatible with your operating system or architecture: [email protected]
npm ERR! notsup Valid OS:    !win32
npm ERR! notsup Valid Arch:  any
npm ERR! notsup Actual OS:   win32
npm ERR! notsup Actual Arch: x64
 
npm ERR! Please include the following file with any support request:
npm ERR!     C:\Users\XiaoCong\npm-debug.log
 
失败    cnpm install -g n
[[email protected]](.\AppData\Roaming\npm\node_modules\n) unsupported: Package require os(!win32) not compatible with your platform(win32)
UnSupportedPlatformError: Package require os(!win32) not compatible with your platform(win32)
UnSupportedPlatformError: Package require os(!win32) not compatible with your platform(win32)
    at _install (C:\Users\XiaoCong\AppData\Roaming\npm\node_modules\cnpm\node_modules\npminstall\lib\install.js:146:19)
    at next (native)
    at onFulfilled (C:\Users\XiaoCong\AppData\Roaming\npm\node_modules\cnpm\node_modules\npminstall\node_modules\co\index.js:65:19)


失败?    cnpm install -g react-native
 
Get /binary-mirror-config/latest from https://registry.npm.taobao.org error: ResponseTimeoutError: Request timeout for 5000ms, GET https://registry.npmjs.org/binary-mirror-config/latest -1 (connected: true, keepalive socket: false)
headers: {}
    at null._onTimeout (C:\Users\XiaoCong\AppData\Roaming\npm\node_modules\cnpm\node_modules\urllib\lib\urllib.js:653:13)
    at Timer.listOnTimeout (timers.js:92:15)
[[email protected]](.\AppData\Roaming\npm\node_modules\.react-native_npminstall\cross-spawn\2.2.3\cross-spawn\node_modules\cross-spawn-async) deprecate: cross-spawn no longer requires a build toolchain, use it instead!
[[email protected]](.\AppData\Roaming\npm\node_modules\.react-native_npminstall\glob\4.3.5\glob\node_modules\minimatch) deprecate: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
[[email protected]] link C:\Users\XiaoCong\AppData\Roaming\npm\react-native@ -> C:\Users\XiaoCong\AppData\Roaming\npm\react-native
[react-native@*] installed at node_modules\.react-native_npminstall\react-native\0.30.0\react-native (662 packages, use 2m, speed 186.5kB/s, json 4.45MB, tarball 18.08MB)
excute post install scripts...
[[email protected]] scripts.postinstall: "node postinstall" at .\AppData\Roaming\npm\node_modules\.react-native_npminstall\spawn-sync\1.0.15\spawn-sync
[[email protected]] scripts.postinstall success, use 387ms
peerDependencies WARNING [[email protected]] in C:\Users\XiaoCong\AppData\Roaming\npm\node_modules\.react-native_npminstall\react-native\0.30.0\react-native requires a peer of react@~15.2.0 but none was installed
All packages installed (662 packages installed from npm registry, use 2m, speed 184.73kB/s, json 909(4.45MB), tarball 18.08MB)


MEAN
View  Angular2
M  MongoDB
C  express
N nodejs  服务器端的js运行时 runtime
可选---s sail.js

MongoDB 3.2


MEAN Web开发
 TP393.092.2/H625
MEAN Web Development 


http://www.npmjs.org/  , 没有被墙,但太慢了,要等一个晚上,而且很可能因为不稳定而中途断开

淘宝自己做的小工具:
cnpm用的是淘宝自己的“ 镜像 仓库(通过npm安装,仓库手动指定为淘宝的“ 镜像仓库 )。淘宝镜像仓库每10分钟和npm同步,更新一下

以后都用cnpm替代npm

也可以用npm,只是以后都手动指定仓库的位置
npm install -g cnpm       --registry=https://registry.npm.taobao.org

cnpm install -g create-react-app 成功

C:\Users\XiaoCong>cnpm install -g create-react-app
[[email protected]] link C:\Users\XiaoCong\AppData\Roaming\npm\create-react-app@ -> C:\Users\XiaoCong\AppData\Roaming\npm\create-react-app
[create-react-app@*] installed at node_modules\.create-react-app_npminstall\create-react-app\0.1.0\create-react-app (16 packages, use 2s, speed 63.89kB/s, json 68.7kB, tarball 69.1kB)
All packages installed (16 packages installed from npm registry, use 2s, speed 62.95kB/s, json 17(68.7kB), tarball 69.1kB)

替代npm,用淘宝的


Express 单独

React 单独




用 Vue 写了一个知乎日报 web app http://www.tuicool.com/articles/maYnY3j

音乐播放器   AngularJS和Node.js
http://open.itcast.cn/front/3-432.html

#####################################################
IDE 所见即所得
Google Web Designer
GoogleWebDesigner

DreamWeaver 登录不了,而且要破解
#####################################################

Electron 连不上


范例   npm install XXX -g --registry=https://registry.npm.taobao.org
npm install  --registry=https://npm.taobao.org/mirrors/electron/


npm ERR! fetch failed https://registry.npm.taobao.org/electron/download/electron-1.3.5.tgz
npm WARN retry will retry, error on last attempt: Error: getaddrinfo EAI_AGAIN cdn.npm.taobao.org:443


https://registry.npm.taobao.org/electron/download/electron-1.3.5.tgz

成熟的产品

在cmd的当前目录下创建 Electron1文件夹,--depth 1说明只拷贝最新版本,不用把旧版本也拷贝进来,版本控制
git clone https://github.com/electron/electron-quick-start  Electron--depth 1

cd Electron1
npm install && npm start
弄了环境变量


以前叫 Atom-shell(为了开发Atom而开发出来的平台) ,后来被GitHub官方单独出来
被太太了,Node-webkit,国产的

Github发布了为桌面应用开发而生的 Electron 1.0版本 http://www.tuicool.com/articles/7jAbuey


#####################################################

Deco -React Native IDE 暂时只支持 Mac

开源
https://www.decosoftware.com/

#####################################################
WeX5 :
V
C
M
.w 
.js   Tomcat?Node.js?
MySQL



MySQL
有管理工具 , 但只用来创建数据库 , 表的设计和数据填写用IDE

标准Web服务器,可以是tomact、apache、nginx、IIS等任意web服务器
WeX5的调试运行环境(UIServer)

WeX5执行流程
.w 文件是什么时候被解析的?
论坛里说如果不需要服务器的话,可以不用。但这样谁来解析.w 文件?显然浏览器无法识别.w 文件,可能论坛里说的是错的

自带一个Chrome浏览器 , 封装过的

导入eclipse的设置
 
不出很想学了 , 因为用的似乎不是最新的技术
虽然可视化开发起来很快

#####################################################

React_Native 挑出来了,2个文件

#####################################################

SeaJS

一个遵循CMD规范的JavaScript模块加载框架
#####################################################

需要改进的地方 :


捕鱼app的教程不在百度云里
项目的文档结构怪怪的 , 感觉应该需要重新设计一下
视频的名字换一下
打包一下 , 整理到一个文件夹下 , 不然一个一个整合在一起麻烦 , 耗时间
文档开源到GitHub上 , 官方文档更新不及时就让大家辅助更新



Crosswalk is an app runtime based on Chromium/Blink.
Crosswalk是之前的webView的替代 , 更流畅 , 可以弄游戏了

mongodb
body-parser


正经事儿就找 图灵机器人,想扯淡瞎聊就找小黄鸡。

别急着写代码

放弃WebView,使用 Crosswalk 做富文本编辑器

原生的
国内的
星期一的交流一下

ASP.Net WebForm

选择IDE

是不是真的是ionic
ionic Phonegap  Cordova Angular关系


weX5前端UI
:完全恪守html5+css3+js,干净纯洁

设备api:采用业界主流Phonegap/Cordova
后端:标准协议,支持所有主流技术和平台
(java、node、php、.net等)

要项目
NDK
图形

自己的路由器的产品
需要设置页面,用户不限制
web app

没有足够的人手搞混合,只能自己搞

Registry url: https://registry.npmjs.org/
Path to npm: D:\Software\Node.js\npm.cmd
Downloading package cache to C:\Users\Administrator\AppData\Local\Microsoft\Node.js\Tools\NpmCache\21dd91b0-4f32-449a-ab4e-bff350c38106\all_packages.json




WeX5跨平台原理 : 本机API Framework采用phonegap(cordova)框架
WeX5采用混合应用(hybrid app)开发模式, UI体系完全基于w3c的html5+css3+js;引入jquery和bootstrap并对移动做了极致优化,效率极高
有基于eclipse的自定义IDE

dreamsxin/WeX5   "起步软件公"司
http://git.oschina.net/X5OK/WeX5

#####################################################
PowerCmd_2.2_增强绿色版
PowerShell  win7自带的cmd增强工具 , 但不够好用 , 没有关键字联想

注册码 :
PCMDA-NNZNV-ZNVNN-CADPM
PCMDA-8CYLA-Y8ACL-CADPM
#####################################################

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
5.typescript-任意值、类型推论、联合类型、类型断言、字符串字面量类型 ...发布时间:2022-07-18
下一篇:
element-uitypescript发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap